/* Webarts Base — global styles. Tokens come from theme.json (settings.custom). */
:root {
	--wa-accent: var(--wp--custom--color--accent, #3aa89f);
	--wa-dark: var(--wp--custom--color--dark, #061220);
	--wa-darker: var(--wp--custom--color--darker, #040c16);
	--wa-radius: var(--wp--custom--radius, 4px);
	--wa-section-py: var(--wp--custom--section--padding-block, 96px);
	--wa-section-px: var(--wp--custom--section--padding-inline, 24px);
	--wa-gap: 16px;
	/* f2w-tpl02: shared header-overlay clearance, same tokens the header itself is built from
	   (blocks/site-header/style.css: offset 36px + height 72px = 108px at every breakpoint,
	   measured live 375→1920). Reused by search-hero, 404 and legal templates so there is a
	   single source for "how far below the overlay header a page must start". */
	--wa-header-space: 108px;
	--wa-hero-offset: calc(var(--wa-header-space) + 64px);
	/* NMD-04b (1): ≤767 header padding-top is now 21px (was 30px after NMD-04, 36px originally) — see
	   blocks/site-header/style.css for the "visible gap to the logo, not the raw padding" maths. Single
	   source for the header's own CSS and for the ≤767 hero/template literals (hero, service-hero,
	   legal-hero below) that can't read --wa-header-space directly (their own pre-existing formulas). */
	--wa-header-offset-mobile: 21px;
	/* NMD-04b (3): the ONE place that sets the scrolled-state background alpha (site-header/style.css
	   reads it as a fallback-only var(…, 0.4) — declaring it here as well makes it an actual, overridable
	   token instead of just a CSS fallback value). Per the brief: 0.4. */
	--wa-header-scrolled-opacity: 0.4;
	/* NMD-04b (2): the header's SCROLLED total height (.is-scrolled drops padding-top to 0, so this is
	   just the inner row height — 72px desktop/tablet, 44px ≤767, see the media query below and
	   site-header/style.css). Used for scroll-padding-top (anchor links normally get clicked once the
	   user has already scrolled past the hero, i.e. while .is-scrolled is active) — kept separate from
	   --wa-header-space (the SCROLL-0/tallest height, still used to clear the hero itself so nothing is
	   hidden under the header on page load). */
	--wa-header-space-scrolled: 72px;
}
html { scroll-padding-top: var(--wa-header-space-scrolled); }
@media (max-width: 767px) {
	:root {
		/* NMD-04b (1): header scroll-0 total height is now 21 (padding-top) + 44 (inner row) = 65px (was
		   102px after NMD-04) — shift the derived --wa-hero-offset (search-hero/legal-hero/not-found) by
		   the same amount so their distance to the header stays the same as the current live site
		   (102 → 65 = -37px here; hero/service-hero/legal-hero's own literal ≤767 overrides below get the
		   matching absolute values instead, since they don't read this var). */
		--wa-header-space: 65px;
		/* Scrolled ≤767: inner row shrinks to 44px (site-header/style.css, new mobile-only row height). */
		--wa-header-space-scrolled: 44px;
	}
}

body { margin: 0; position: relative; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
.wa-main > .wp-block-post-content > * { margin-block: 0; }

/* Section + backgrounds ------------------------------------------------ */
.wa-section { position: relative; padding: var(--wa-section-py) var(--wa-section-px); background: var(--wa-bg); color: var(--wa-fg); box-sizing: border-box; }
.wa-bg--light  { --wa-bg: var(--wp--custom--color--light, #fff);    --wa-fg: var(--wp--custom--color--text, #232122); --wa-fg-muted: var(--wp--custom--color--text-muted, #75797f); --wa-card-bg: var(--wp--custom--color--card, #f9f9f9); }
.wa-bg--muted  { --wa-bg: var(--wp--custom--color--muted, #f9f9f9); --wa-fg: var(--wp--custom--color--text, #232122); --wa-fg-muted: var(--wp--custom--color--text-muted, #75797f); --wa-card-bg: #fff; }
.wa-bg--dark   { --wa-bg: var(--wa-dark);   --wa-fg: #fff; --wa-fg-muted: rgba(255, 255, 255, .72); --wa-card-bg: rgba(255, 255, 255, .04); }
.wa-bg--darker { --wa-bg: var(--wa-darker); --wa-fg: #fff; --wa-fg-muted: rgba(255, 255, 255, .72); --wa-card-bg: rgba(255, 255, 255, .04); }

.wa-container { width: 100%; max-width: var(--wp--style--global--content-size, 1400px); margin-inline: auto; position: relative; }

/* Typography ------------------------------------------------------------- */
.wa-eyebrow { margin: 0 0 16px; font-size: var(--wp--preset--font-size--eyebrow); line-height: 15px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--wa-accent); }
.wa-display { margin: 0; font-size: var(--wp--preset--font-size--display); line-height: .872; font-weight: 400; }
.wa-title { margin: 0; font-size: var(--wp--preset--font-size--section); line-height: .945; letter-spacing: -.96px; font-weight: 400; }
.wa-title--sm { font-size: var(--wp--preset--font-size--section-sm); line-height: 1.1; letter-spacing: 0; }
.wa-lead { font-size: var(--wp--preset--font-size--lead); line-height: 1.3; }
/* R13-04 (Why Nomadica) — new text styles from tokens.json v2 */
.wa-display--compact { margin: 0; font-size: var(--wp--preset--font-size--heading-60); line-height: 1.067; letter-spacing: -1.2px; font-weight: 700; }
.wa-title--quote { margin: 0; font-size: var(--wp--preset--font-size--section); line-height: 1.107; font-weight: 400; letter-spacing: 0; }
.wa-title--40 { margin: 0; font-size: var(--wp--preset--font-size--heading-40); line-height: .99; letter-spacing: -.72px; font-weight: 400; }
.wa-text { color: var(--wa-fg-muted); font-size: var(--wp--preset--font-size--body); line-height: 1.22; }
.wa-text p { margin: 0 0 16px; }
.wa-text p:last-child { margin-bottom: 0; }

/* Links & buttons -------------------------------------------------------- */
.wa-link, .wa-btn { display: inline-flex; align-items: center; gap: 10px; font-size: var(--wp--preset--font-size--small); line-height: 15px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; text-decoration: none; }
.wa-link { color: var(--wa-accent); }
.wa-link .wa-icon, .wa-btn .wa-icon { transition: transform .2s ease; }
.wa-link:hover .wa-icon, .wa-btn:hover .wa-icon { transform: translateX(3px); }
.wa-btn { min-height: 44px; padding: 14px 24px; border-radius: 2px; border: 1px solid transparent; box-sizing: border-box; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.wa-btn--primary { background: var(--wa-accent); color: #fff; }
.wa-btn--primary:hover { filter: brightness(1.08); }
.wa-btn--secondary { background: transparent; color: var(--wa-fg, #fff); border-color: currentColor; }
/* NMD-01 (Γ): hover/focus-visible for the secondary (outline, dark-bg) button variant — e.g. Hero
   "Explore our services". Background white, label + arrow teal (--wa-accent, same token as every
   other teal use), border stays white (currentColor already resolves to white on this bg before
   hover; pin it explicitly so it does not flip to teal with the text colour). Reuses the same
   background-color/color/border-color transition already declared on .wa-btn above. Contrast of
   teal (#3aa89f) text on white background = 2.88:1 (WCAG AA normal text needs 4.5:1, large text/UI
   components need 3:1) — below AA for the label text itself; reported in qa/report.md, not changed
   here (colour is the Figma/token value, out of this job's scope to invent a different teal). */
.wa-btn--secondary:hover, .wa-btn--secondary:focus-visible { background: #fff; color: var(--wa-accent); border-color: #fff; }
.wa-btn--secondary:focus-visible { outline-offset: 3px; }
.wa-btn--dark { background: var(--wa-darker); color: #fff; }
.wa-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.wa-link:focus-visible, .wa-btn:focus-visible, .wa-main button:focus-visible { outline: 2px solid var(--wa-accent); outline-offset: 3px; }

/* Utilities -------------------------------------------------------------- */
.wa-placeholder { padding: 32px; border: 1px dashed #999; color: #555; font: 14px/1.4 system-ui, sans-serif; text-align: center; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

/* Legal page body (templates/page-legal.html, f2w-tpl03): scoped wrapper around core/post-content.
   Column width/left edge come from the shared .wa-container + this 800px cap — same left edge as
   every other section (incl. the /contact/ hero), no new container width. */
.wa-legal { max-width: 800px; }
.wa-legal h2 {
	margin: 56px 0 16px;
	font-size: clamp(22px, 1.1vw + 18px, 28px);
	line-height: 1.3;
	font-weight: 700;
	color: var(--wa-fg);
	scroll-margin-top: calc(var(--wa-header-space-scrolled) + 24px);
}
.wa-legal h2:first-child { margin-top: 0; }
.wa-legal h3 {
	margin: 32px 0 12px;
	font-size: clamp(18px, .6vw + 16px, 20px);
	line-height: 1.4;
	font-weight: 700;
	color: var(--wa-fg);
	scroll-margin-top: calc(var(--wa-header-space-scrolled) + 24px);
}
.wa-legal p, .wa-legal li { font-size: clamp(16px, .25vw + 15px, 18px); line-height: 1.7; color: var(--wa-fg); }
.wa-legal p { margin: 0 0 20px; }
.wa-legal ul, .wa-legal ol { margin: 0 0 20px; padding-left: 24px; }
.wa-legal li { margin: 0 0 8px; }
.wa-legal ul li::marker { color: var(--wa-accent); } /* teal bullets */
.wa-legal ol li::marker { color: var(--wa-fg); font-weight: 700; }
/* Links: teal-on-white text fails contrast (2.9:1, see QA report) — navy body colour (16:1) with a
   teal underline keeps the brand accent without the low-contrast text colour. */
.wa-legal a {
	color: var(--wa-fg);
	text-decoration: underline;
	text-decoration-color: var(--wa-accent);
	text-underline-offset: 3px;
}
.wa-legal a:hover { text-decoration-color: var(--wa-fg); }
.wa-legal strong { font-weight: 700; }
.wa-legal blockquote {
	margin: 24px 0;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--wa-accent);
	color: var(--wa-fg-muted);
	font-style: italic;
}
.wa-legal table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 16px; }
.wa-legal table th, .wa-legal table td { padding: 12px 16px; border: 1px solid var(--wp--preset--color--gray-100, #f5f5f5); text-align: left; vertical-align: top; }
.wa-legal table th { font-weight: 700; background: var(--wa-card-bg); }
.wa-legal hr { margin: 40px 0; border: none; border-top: 1px solid var(--wp--preset--color--gray-100, #f5f5f5); }

@media (max-width: 1024px) { :root { --wa-section-py: 72px; } }
@media (max-width: 768px)  { :root { --wa-section-py: 56px; --wa-section-px: 20px; } .wa-actions { margin-top: 24px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; } }

/* FIX-01 (f2w-fix01, AUD-02 R1–R5): theme-wide responsive fixes, ≤1023/≤767 only — desktop ≥1024
   untouched. See qa/f2w-aud02-20261007-070143/report.md for the measured defects. */

/* R1 — hero headings/subtitles full width ≤1023. Every Hero variant (acf/hero, legal-hero,
   search-hero, not-found, service-hero) reuses .wa-display--compact / .wa-hero__text /
   .wa-not-found__text. Two-class selectors so this wins over the per-instance desktop
   max-width overrides (blocks/hero/style.css .wa-hero--services, etc.) regardless of load order.
   `!important` only on `.wa-display--compact`: acf/hero's `title_max_width` ACF field renders as
   an inline `style="max-width:…px"` on the H1 (blocks/hero/render.php) — an inline style always
   outranks a stylesheet class, @media or not, so this is the only way to reset it ≤1023; the
   rule stays inside the ≤1023 guard, ≥1024 keeps the Figma-exact per-instance width untouched. */
@media (max-width: 1023px) {
	.wa-hero .wa-display,
	.wa-hero .wa-display--compact,
	.wa-hero .wa-hero__text,
	.wa-hero--service .wa-hero__text,
	.wa-not-found__text {
		max-width: none;
		width: 100%;
	}
	.wa-hero .wa-display--compact { max-width: none !important; }
}

/* R2 — card/section "internal" --wa-section-py overrides must not stay fixed on mobile: any
   block setting its own --wa-section-py must guard it with (min-width:1024px) (see
   blocks/contact-form/style.css for the fix this token supports). No change here — the shared
   token above already answers responsively; this comment documents the rule for future blocks. */

/* R3 — "heading column first" stacking convention for 2-column blocks. The column that carries
   the section's own eyebrow/H2/intro text gets [data-wa-stack="heading"], the card/list/image
   column gets [data-wa-stack="panel"]. DOM order is untouched (CSS `order` only). Each block
   applies `order` to these attributes INSIDE its own existing "collapse to one column" media
   query (900px for split-list-panel/media-section, 1024px for media-cards-split) — not here —
   so a 2-column tablet width where the grid has not collapsed yet never gets its column order
   swapped by accident (only the actual stacked/mobile state is affected). See
   blocks/split-list-panel/style.css, blocks/media-section/style.css,
   blocks/media-cards-split/style.css. */

/* R5 — shared card-padding token. Desktop (≥1024) keeps each block's own literal padding;
   ≤1023/≤767 tiers cap internal card padding at the audit's ≤24px-per-side rule. Blocks opt in by
   using var(--wa-card-pad) in their own ≤1023/≤767 media queries (see contact-form,
   split-list-panel, text-highlights/service-content below) instead of a blanket selector list,
   so unrelated cards are not touched by surprise. */
:root { --wa-card-pad: 24px; }