/**
 * Hydro Solutions theme, Design 03 "Bright Coastal" (client-approved homepage, 2026-10-20).
 * Base: design variables (mapped to theme.json presets), reset, type, containers, buttons, links,
 * icons and focus. Section styles live in sections.css; shared widgets in components.css.
 *
 * Ported from the approved HTML reference (design-concepts/concept-03): concept.css, palette-5.css,
 * palette-base.css and hydro-concept.css. Class names follow that reference so the two stay comparable.
 */

/* ------------------------------------------------------------------ tokens */
:root {
	--navy: var(--wp--preset--color--navy);
	--navy-2: var(--wp--preset--color--navy-deep);
	--shade-rgb: 6 26 64;
	--ocean: var(--wp--preset--color--cobalt);
	--ocean-ink: var(--wp--preset--color--cobalt);
	--teal: var(--wp--preset--color--cyan);
	--teal-deep: var(--wp--preset--color--cyan-deep);
	--paper: var(--wp--preset--color--surface);
	--paper-2: var(--wp--preset--color--surface-2);
	--page: var(--wp--preset--color--page);
	--ink: var(--wp--preset--color--ink);
	--muted: var(--wp--preset--color--muted);
	--line: var(--wp--preset--color--line);
	--line-cool: var(--wp--preset--color--line-cool);
	--on-dark: var(--wp--preset--color--on-dark);
	--on-dark-muted: var(--wp--preset--color--on-dark-muted);
	--tint: var(--wp--preset--color--surface);
	--quote: var(--wp--preset--color--cyan);
	--accent-soft: rgb(18 161 243 / 0.14);
	--display: var(--wp--preset--font-family--poppins);
	--sans: var(--wp--preset--font-family--poppins);
	--ease: var(--wp--custom--ease);
	--radius: var(--wp--custom--radius);
	--radius-lg: 4px;
	--gutter: var(--wp--custom--gutter);
	--c-star: var(--wp--custom--star);
	--c-error: var(--wp--custom--error);
	--field-border: var(--wp--custom--field-border);
	--hdr-h: var(--wp--custom--header-height);
	--wave-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='12' viewBox='0 0 48 12'%3E%3Cpath d='M0 6 Q12 0 24 6 T48 6' fill='none' stroke='%2312A1F3' stroke-width='1.5'/%3E%3C/svg%3E");
	--wave-x-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='12' viewBox='0 0 48 12'%3E%3Cpath d='M0 6 Q12 0 24 6 T48 6' fill='none' stroke='%2304328C' stroke-width='1.5'/%3E%3C/svg%3E");
	--wave-y-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='48' viewBox='0 0 12 48'%3E%3Cpath d='M6 0 Q0 12 6 24 T6 48' fill='none' stroke='%2304328C' stroke-width='1.5'/%3E%3C/svg%3E");
	/* Icons (masks, so they take the text colour). */
	--i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
	--i-arrow-up-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E");
	--i-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round' d='M5 3.5h3.2l1.6 4.2-2.2 1.4a11 11 0 0 0 7.3 7.3l1.4-2.2 4.2 1.6V19a1.6 1.6 0 0 1-1.7 1.6C10.8 20.1 3.9 13.2 3.4 5.2A1.6 1.6 0 0 1 5 3.5z'/%3E%3C/svg%3E");
	--i-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
	--i-check-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round' d='M8 12.3l2.8 2.8L16.2 9.6'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ responsive tokens (W1, 2026-10-25)
 * Figma variables "HYDRO — Responsive" (modes Tablet 768 / Mobile 390 / Small 320), stepped at the
 * breakpoints of docs/RESPONSIVE-CSS-DESIGN-TOKENS.md: ≤ 380 Small · 381–767 Mobile (base) ·
 * 768–1099 Tablet · ≥ 1100 desktop (the approved desktop values; rules that need them keep their own).
 * Sizes in rem so they follow the visitor's text size. Additive: only new components use them. */
:root {
	--hydro-h1: 2.5rem;
	--hydro-h1-home: var(--wp--preset--font-size--hero);
	--hydro-h2: 1.75rem;
	--hydro-h2-estimate: 1.875rem;
	--hydro-h3: 1.1875rem;
	--hydro-row-title: 1.25rem;
	--hydro-lead: 1.0625rem;
	--hydro-body: 1rem;
	--hydro-small: 0.875rem;
	--hydro-caption: 0.8125rem;
	--hydro-breadcrumb: 0.8125rem;
	--hydro-kicker: 0.8125rem;
	--hydro-button: 1rem;
	--hydro-faq-q: 1.0625rem;
	--hydro-phone-display: 1.625rem;
	--hydro-wordmark: 1.1875rem;
	--hydro-menu-link: 1.0625rem;
	--hydro-menu-sublink: 0.875rem;
	--hydro-gutter: 1rem;
	--hydro-section: 3.5rem;
	--hydro-section-tight: 2.5rem;
	--hydro-stack: 1.25rem;
	--hydro-card-pad: 1.5rem;
	--hydro-hero-top: 2.5rem;
	--hydro-header-gap: 0.625rem;
	--hydro-header-h: 72px;
	--hydro-logo: 3rem;
	--hydro-target: 2.75rem;
	--hydro-focus: 3px solid var(--wp--preset--color--cobalt);
	--hydro-mobilebar-h: calc(4.2rem + env(safe-area-inset-bottom));
}

@media (max-width: 380px) {
	:root {
		--hydro-h1: 2.125rem;
		--hydro-h1-home: 2.125rem;
		--hydro-h2: 1.625rem;
		--hydro-h2-estimate: 1.75rem;
		--hydro-h3: 1.125rem;
		--hydro-row-title: 1.1875rem;
		--hydro-lead: 1rem;
		--hydro-faq-q: 1rem;
		--hydro-phone-display: 1.5rem;
		--hydro-wordmark: 1rem;
		--hydro-section: 3rem;
		--hydro-section-tight: 2rem;
		--hydro-stack: 1rem;
		--hydro-card-pad: 1.25rem;
		--hydro-hero-top: 2rem;
		--hydro-header-gap: 0.5rem;
		--hydro-logo: 2.5rem;
	}
}

@media (min-width: 768px) and (max-width: 1099px) {
	:root {
		--hydro-h1: 3.5rem;
		--hydro-h2: 2.125rem;
		--hydro-h2-estimate: 2.5rem;
		--hydro-h3: 1.25rem;
		--hydro-row-title: 1.375rem;
		--hydro-lead: 1.125rem;
		--hydro-body: 1.0625rem;
		--hydro-small: 0.9375rem;
		--hydro-breadcrumb: 0.875rem;
		--hydro-kicker: 0.875rem;
		--hydro-button: 1.0625rem;
		--hydro-faq-q: 1.125rem;
		--hydro-phone-display: 1.75rem;
		--hydro-wordmark: 1.25rem;
		--hydro-menu-link: 1.125rem;
		--hydro-gutter: 2rem;
		--hydro-section: 5rem;
		--hydro-section-tight: 3.5rem;
		--hydro-stack: 1.5rem;
		--hydro-card-pad: 1.75rem;
		--hydro-hero-top: 4rem;
		--hydro-header-gap: 0.75rem;
		--hydro-logo: 3.25rem;
	}
}

/* ------------------------------------------------------------------ reset and type */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 7rem;
	-webkit-text-size-adjust: 100%;
}

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

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

body {
	margin: 0;
	font-kerning: normal;
	overflow-wrap: break-word; /* a word wider than its column (enlarged text) breaks instead of widening the page */
}

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

a {
	text-underline-offset: 0.2em;
}

a[href^="tel:"] {
	white-space: nowrap;
}

/* Very narrow screens with enlarged text: a phone number may wrap rather than widen the page. */
@media (max-width: 400px) {
	a[href^="tel:"] {
		white-space: normal;
	}
}

h1,
h2,
h3,
h4 {
	margin: 0;
	text-wrap: balance;
}

h2 {
	letter-spacing: -0.03em;
}

p {
	margin: 0;
	text-wrap: pretty;
}

main:focus {
	outline: none;
}

/* The hidden attribute always wins over component display rules. */
[hidden] {
	display: none !important;
}

.screen-reader-text,
.sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	word-wrap: normal !important;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--ocean);
	outline-offset: 3px;
}

html.dialog-open,
html.nav-open {
	overflow: hidden;
}

/* Template parts and main sit flush (no root block gap between header, main and footer). */
.wp-site-blocks > * {
	margin-block: 0;
}

/* Block-library defaults the design replaces. */
.wp-block-image,
figure {
	margin: 0;
}

.wp-block-image img {
	height: auto;
}

.wp-element-caption {
	margin: 0;
}

.wp-block-list {
	margin: 0;
	padding: 0;
}

/* ------------------------------------------------------------------ containers */
.wrap {
	width: min(80rem, 100% - 2 * var(--gutter));
	margin-inline: auto;
}

.site-main--page {
	padding-block: clamp(3rem, 7vw, 6rem) clamp(4rem, 8vw, 7rem);
}

.page-wrap {
	width: min(46rem, 100% - 2 * var(--gutter));
	margin-inline: auto;
}

.page-title {
	margin-bottom: 1.5rem;
	font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem);
	line-height: 1.1;
	letter-spacing: -0.03em;
}

/* Normal reading rhythm on text pages (legal pages, 404 and other plain pages). */
.page-content > * + *,
.page-wrap > .wp-block-buttons {
	margin-top: 1.1rem;
}

.page-wrap > .is-style-kicker {
	margin-bottom: 0.9rem;
}

.page-content h2 {
	margin-top: 2.5rem;
	font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem);
	letter-spacing: -0.02em;
}

.page-content h3 {
	margin-top: 1.75rem;
	font-size: 1.2rem;
}

.page-content ul,
.page-content ol {
	padding-left: 1.4rem;
}

.page-content li + li {
	margin-top: 0.35rem;
}

/* ------------------------------------------------------------------ buttons and links */
.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-height: 3rem;
	border: 1px solid transparent;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.wp-block-button.is-style-cyan .wp-block-button__link {
	background: var(--teal);
	color: var(--navy-2);
}

.wp-block-button.is-style-cyan .wp-block-button__link:hover {
	background: var(--teal-deep);
	color: var(--navy-2);
}

.wp-block-button.btn--lg .wp-block-button__link {
	min-height: 3.4rem;
	padding: 0.9rem 1.7rem;
	font-size: 1.0625rem;
}

/* Arrow icons: "→" for links on the page, "↗" for external websites. */
.has-arrow .wp-block-button__link::after,
.is-style-arrow-link a::after,
.has-ext-arrow .wp-block-button__link::after {
	content: "";
	flex: none;
	width: 1.15em;
	height: 1.15em;
	background: currentColor;
	-webkit-mask: var(--i-arrow) center / contain no-repeat;
	mask: var(--i-arrow) center / contain no-repeat;
	transition: transform 0.25s var(--ease);
}

.has-ext-arrow .wp-block-button__link::after {
	-webkit-mask-image: var(--i-arrow-up-right);
	mask-image: var(--i-arrow-up-right);
}

.has-arrow .wp-block-button__link:hover::after,
.is-style-arrow-link a:hover::after {
	transform: translateX(4px);
}

.is-style-arrow-link a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	max-width: 100%; /* the label wraps inside its column; the arrow stays beside it (approved fix, phase 4) */
	min-height: 2.75rem;
	font: 700 1rem/1.3 var(--sans);
	color: var(--ocean-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.35em;
}

.is-style-arrow-link a:hover {
	text-decoration-thickness: 2px;
}

/* Kicker: a small label (hero, sister company, 404). No rule line before it (owner rule, 2026-10-27;
 * Figma R1: every kicker line removed). */
.is-style-kicker {
	display: flex;
	align-items: center;
	gap: 0;
	font: 600 0.9375rem/1.3 var(--sans);
	color: var(--muted);
}