/*
Theme Name: Future Water Technologies
Theme URI: https://futurewatertech.com.au/
Author: Future Water Technologies
Author URI: https://futurewatertech.com.au/
Description: A native WordPress block theme for Future Water Technologies — bacterial treatment and aeration for industrial, agricultural and municipal wastewater. Every section of the site is a reusable block pattern that can be inserted, removed, duplicated and reordered from the WordPress editor. Built with core Gutenberg blocks only; no page builder required.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: future-water
Tags: block-patterns, full-site-editing, business, one-column, two-columns, three-columns, four-columns, block-styles, custom-colors, custom-menu, editor-style, featured-images, wide-blocks, accessibility-ready

Future Water Technologies is distributed under the terms of the GNU GPL v2 or later.
*/

/* ==========================================================================
   1. Base
   ========================================================================== */

html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img {
	max-width: 100%;
	height: auto;
}

/* Visible keyboard focus everywhere. */
:where(a, button, input, select, textarea, summary, .wp-block-button__link):focus-visible {
	outline: 2px solid var(--wp--preset--color--bio-green);
	outline-offset: 2px;
}

/* Safety net: full-width constrained sections always keep their side gutter. */
.wp-block-group.alignfull.is-layout-constrained:not(.has-global-padding) {
	padding-left: var(--wp--preset--spacing--40);
	padding-right: var(--wp--preset--spacing--40);
}

/* ==========================================================================
   2. Colour context — text that sits on the dark teal panels
   ========================================================================== */

body .has-deep-teal-background-color :where(h1, h2, h3, h4, h5, h6),
body .has-mid-teal-background-color :where(h1, h2, h3, h4, h5, h6),
body .is-style-fw-panel :where(h1, h2, h3, h4, h5, h6),
body .is-style-fw-quote :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--off-white);
}

body .has-deep-teal-background-color :where(a):hover,
body .has-mid-teal-background-color :where(a):hover,
body .fw-site-footer :where(a):hover {
	color: var(--wp--preset--color--amber);
}

/* ==========================================================================
   3. Site header
   ========================================================================== */

.fw-site-header {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* The green "live system" dot beside the site title. */
.wp-block-site-title.fw-dot a::before,
.wp-block-site-title.fw-dot::before {
	content: "";
	display: inline-block;
	width: 9px;
	height: 9px;
	margin-right: 12px;
	border-radius: 50%;
	background: var(--wp--preset--color--bio-green);
	box-shadow: 0 0 0 4px rgba(124, 155, 79, 0.25);
	vertical-align: middle;
}

.wp-block-site-title.fw-dot a::before {
	margin-bottom: 2px;
}

.wp-block-site-title.fw-dot::before {
	display: none;
}

.fw-site-header .wp-block-site-logo img {
	max-height: 44px;
	width: auto;
}

/* Collapse the menu into the overlay at the design's 860px breakpoint,
   rather than the core default of 600px. */
@media (min-width: 600px) and (max-width: 860px) {
	.fw-site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.fw-site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.fw-site-header .wp-block-navigation__responsive-container.is-menu-open {
		display: flex;
	}
}

.wp-block-navigation__responsive-container.is-menu-open {
	padding: 28px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	gap: 18px;
}

/* ==========================================================================
   4. Buttons
   ========================================================================== */

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.wp-block-button__link:hover {
	transform: translateY(-1px);
}

.wp-block-button.is-style-fw-dark .wp-block-button__link {
	background-color: var(--wp--preset--color--deep-teal);
	color: var(--wp--preset--color--off-white);
	border-color: transparent;
}

.wp-block-button.is-style-fw-dark .wp-block-button__link:hover,
.wp-block-button.is-style-fw-dark .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--mid-teal);
	color: var(--wp--preset--color--off-white);
}

.wp-block-button.is-style-fw-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--deep-teal);
	border-color: var(--wp--preset--color--deep-teal);
}

.wp-block-button.is-style-fw-outline .wp-block-button__link:hover,
.wp-block-button.is-style-fw-outline .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--deep-teal);
	color: var(--wp--preset--color--off-white);
}

.wp-block-button.is-style-fw-ghost .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--off-white);
	border-color: rgba(250, 251, 248, 0.5);
	font-weight: 400;
}

.wp-block-button.is-style-fw-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-fw-ghost .wp-block-button__link:focus {
	background-color: rgba(250, 251, 248, 0.1);
	color: var(--wp--preset--color--off-white);
}

.wp-block-button.is-style-fw-pill .wp-block-button__link {
	background-color: var(--wp--preset--color--paper-dim);
	color: var(--wp--preset--color--mid-teal);
	border-color: transparent;
	border-radius: 999px;
	padding: 5px 12px;
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 400;
	letter-spacing: 0.05em;
}

.wp-block-button.is-style-fw-pill .wp-block-button__link:hover,
.wp-block-button.is-style-fw-pill .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--bio-green);
	color: var(--wp--preset--color--deep-teal);
}

/* ==========================================================================
   5. Paragraph block styles
   ========================================================================== */

/* Eyebrow — small mono label with an amber rule. */
.is-style-fw-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--bio-green-dark);
	line-height: 1.4;
}

.is-style-fw-eyebrow::before {
	content: "";
	flex-shrink: 0;
	width: 18px;
	height: 2px;
	background: var(--wp--preset--color--amber);
}

body .has-deep-teal-background-color .is-style-fw-eyebrow,
body .has-mid-teal-background-color .is-style-fw-eyebrow,
body .is-style-fw-panel .is-style-fw-eyebrow {
	color: var(--wp--preset--color--bio-green);
}

/* Lede — the intro paragraph under a heading. */
.is-style-fw-lede {
	max-width: 640px;
	font-size: var(--wp--preset--font-size--lede);
	color: var(--wp--preset--color--steel);
}

body .has-deep-teal-background-color .is-style-fw-lede,
body .has-mid-teal-background-color .is-style-fw-lede,
body .is-style-fw-panel .is-style-fw-lede {
	color: var(--wp--preset--color--paper-dim);
}

/* Tag — the small green label at the top of a card. */
.is-style-fw-tag {
	display: block;
	margin-bottom: 12px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--tiny);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--bio-green-dark);
}

/* Corner badge — pins to the top-right of the nearest card. */
.is-style-fw-badge {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	margin: 0;
	padding: 4px 10px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.68rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.4;
}

/* ==========================================================================
   6. Group block styles — the repeating "components"
   ========================================================================== */

/* Card */
.wp-block-group.is-style-fw-card {
	position: relative;
	padding: 28px 24px;
	background-color: var(--wp--preset--color--off-white);
	border: 1px solid var(--wp--preset--color--paper-dim);
}

/* Card · Linked — whole card becomes the click target of its heading link. */
.wp-block-group.is-style-fw-card-linked {
	position: relative;
	padding: 22px 20px;
	background-color: var(--wp--preset--color--off-white);
	border: 1px solid var(--wp--preset--color--paper-dim);
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.wp-block-group.is-style-fw-card-linked:hover {
	border-color: var(--wp--preset--color--bio-green);
	transform: translateY(-2px);
}

.wp-block-group.is-style-fw-card-linked :where(h1, h2, h3, h4, h5, h6) a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Panel · Dark */
.wp-block-group.is-style-fw-panel {
	padding: 28px 24px;
	background-color: var(--wp--preset--color--mid-teal);
	border: 1px solid var(--wp--preset--color--teal-line);
	color: var(--wp--preset--color--paper-dim);
}

/* Spec box — the amber-ruled specification table inside a product block. */
.wp-block-group.is-style-fw-spec-box {
	padding: 20px 22px;
	background-color: var(--wp--preset--color--paper-dim);
	border-left: 3px solid var(--wp--preset--color--amber);
}

.wp-block-group.is-style-fw-spec-box > .wp-block-group {
	padding: 8px 0;
	border-bottom: 1px solid rgba(22, 28, 24, 0.1);
}

.wp-block-group.is-style-fw-spec-box > .wp-block-group:last-child {
	border-bottom: none;
}

/* Quote block */
.wp-block-group.is-style-fw-quote {
	padding: 28px 30px;
	background-color: var(--wp--preset--color--deep-teal);
	border-left: 4px solid var(--wp--preset--color--bio-green);
	color: var(--wp--preset--color--paper-dim);
}

/* Ripple backdrop — the concentric rings behind a hero. */
.wp-block-group.is-style-fw-ripple {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.wp-block-group.is-style-fw-ripple::before {
	content: "";
	position: absolute;
	top: -120px;
	right: -120px;
	width: 480px;
	height: 480px;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--teal-line);
	background-image:
		radial-gradient(circle at center, transparent 0 45.8%, rgba(124, 155, 79, 0.35) 45.8% 46.1%, transparent 46.1%),
		radial-gradient(circle at center, transparent 0 74.8%, rgba(46, 92, 83, 1) 74.8% 75.1%, transparent 75.1%);
	pointer-events: none;
	z-index: -1;
}

@media (max-width: 680px) {
	.wp-block-group.is-style-fw-ripple::before {
		top: -160px;
		right: -200px;
	}
}

/* ==========================================================================
   7. Columns block styles
   ========================================================================== */

/* Readout dividers — the metric strip and the credentials bar. */
.wp-block-columns.is-style-fw-readout > .wp-block-column {
	padding: 10px 24px;
	border-left: 1px solid var(--wp--preset--color--teal-line);
}

.wp-block-columns.is-style-fw-readout > .wp-block-column:first-child {
	border-left: none;
	padding-left: 0;
}

@media (max-width: 781px) {
	.wp-block-columns.is-style-fw-readout > .wp-block-column {
		padding: 14px 0;
		border-left: none;
		border-top: 1px solid var(--wp--preset--color--teal-line);
	}

	.wp-block-columns.is-style-fw-readout > .wp-block-column:first-child {
		border-top: none;
		padding-top: 0;
	}
}

/* Step dividers — dashed rules between process steps. */
.wp-block-columns.is-style-fw-steps > .wp-block-column {
	padding-right: 26px;
	border-right: 1px dashed var(--wp--preset--color--teal-line);
}

.wp-block-columns.is-style-fw-steps > .wp-block-column:last-child {
	padding-right: 0;
	border-right: none;
}

@media (max-width: 781px) {
	.wp-block-columns.is-style-fw-steps > .wp-block-column {
		padding: 0 0 24px;
		border-right: none;
		border-bottom: 1px dashed var(--wp--preset--color--hairline);
	}

	.wp-block-columns.is-style-fw-steps > .wp-block-column:last-child {
		padding-bottom: 0;
		border-bottom: none;
	}
}

/* ==========================================================================
   8. Table block style — the capital-works comparison
   ========================================================================== */

.wp-block-table.is-style-fw-compare table {
	width: 100%;
	border-collapse: collapse;
	background-color: var(--wp--preset--color--off-white);
}

.wp-block-table.is-style-fw-compare th,
.wp-block-table.is-style-fw-compare td {
	padding: 15px 18px;
	border: 1px solid var(--wp--preset--color--paper-dim);
	text-align: left;
	vertical-align: top;
}

.wp-block-table.is-style-fw-compare thead th {
	background-color: var(--wp--preset--color--deep-teal);
	color: var(--wp--preset--color--off-white);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* The right-hand column is the "our approach" column. */
.wp-block-table.is-style-fw-compare tbody td:last-child {
	color: var(--wp--preset--color--bio-green-dark);
	font-weight: 600;
}

/* ==========================================================================
   9. List block style
   ========================================================================== */

.wp-block-list.is-style-fw-link-list {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.wp-block-list.is-style-fw-link-list li {
	margin-bottom: 10px;
}

.wp-block-list.is-style-fw-link-list li:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   10. Portrait frame — an image with a caption laid over the bottom edge
   ========================================================================== */

.wp-block-group.is-style-fw-portrait {
	position: relative;
	overflow: hidden;
	padding: 0;
	background-color: var(--wp--preset--color--mid-teal);
}

.wp-block-group.is-style-fw-portrait .wp-block-image {
	margin: 0;
}

.wp-block-group.is-style-fw-portrait img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.wp-block-group.is-style-fw-portrait .fw-portrait-caption {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	margin: 0;
	padding: 22px;
	letter-spacing: 0.05em;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);
}

/* ==========================================================================
   11. Site footer
   ========================================================================== */

.fw-site-footer .wp-block-site-title {
	font-size: 1.3rem;
}

/* ==========================================================================
   12. Assessment form (rendered by the [fwt_form] shortcode)
   ========================================================================== */

.fwt-form {
	margin: 0;
}

.fwt-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

@media (max-width: 560px) {
	.fwt-form__row {
		grid-template-columns: 1fr;
		gap: 0;
	}
}

.fwt-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 18px;
}

.fwt-field label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--steel);
}

.fwt-field .fwt-required {
	color: var(--wp--preset--color--amber-dark);
}

.fwt-field input,
.fwt-field select,
.fwt-field textarea {
	width: 100%;
	padding: 12px 14px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--off-white);
	border: 1px solid #b0bab3;
	border-radius: 2px;
}

.fwt-field input:focus,
.fwt-field select:focus,
.fwt-field textarea:focus {
	outline: 2px solid var(--wp--preset--color--bio-green);
	outline-offset: 1px;
}

.fwt-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 16px 24px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--deep-teal);
	background-color: var(--wp--preset--color--amber);
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.fwt-form__submit:hover {
	background-color: var(--wp--preset--color--amber-dark);
	transform: translateY(-1px);
}

.fwt-form__note {
	margin-top: 12px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.74rem;
	line-height: 1.6;
	color: var(--wp--preset--color--steel-light);
}

.fwt-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

.fwt-alert {
	margin: 0 0 24px;
	padding: 16px 18px;
	font-size: var(--wp--preset--font-size--small);
	border-left: 4px solid var(--wp--preset--color--bio-green);
	background-color: rgba(124, 155, 79, 0.14);
}

.fwt-alert--error {
	border-left-color: var(--wp--preset--color--amber-dark);
	background-color: rgba(232, 162, 59, 0.16);
}

.fwt-alert p {
	margin: 0;
}

/* ==========================================================================
   13. Editor-only affordances
   ========================================================================== */

.editor-styles-wrapper .wp-block-group.is-style-fw-ripple::before {
	z-index: 0;
	opacity: 0.7;
}

/* ==========================================================================
   14. Motion preferences
   ========================================================================== */

/* Anchor links land below the sticky header rather than under it. */
[id] {
	scroll-margin-top: 90px;
}

/* CTA banner: the text block grows, the button column stays its natural size. */
.wp-block-group.fw-cta > .wp-block-group {
	flex: 1 1 420px;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.wp-block-button__link:hover,
	.wp-block-group.is-style-fw-card-linked:hover {
		transform: none;
	}
}