/* =============================================================================
 * PerformAd, token aliases + base layer
 *
 * theme.json is the ONLY place raw values are authored. This file aliases the variables WordPress
 * generates from it (--wp--preset--*, --wp--custom--*) onto short --pa-* names so component CSS
 * reads cleanly, and adds the few things theme.json cannot express: base resets, the focus ring,
 * and the reduced-motion guard.
 *
 * @font-face is NOT declared here, theme.json's fontFace emits it. One declaration, one truth.
 *
 * A metric-matched 'Poppins Fallback' face was tried here on 2026-08-06 and REMOVED the same day.
 * Do not re-add it without re-reading this: it was aimed at layout shift that turned out to come
 * from the count-up animation, not font swap (see resetCounter() in assets/js/site.js), so it
 * fixed nothing that the real fix did not, and it made the hero worse. A single size-adjust cannot
 * serve weights 300 to 800 at once, and the value tuned for the body text under-sized the 800
 * weight the hero H1 uses, re-wrapping it by a whole display line: homepage CLS went 0.066 to
 * 0.262, measured. If a fallback ever is warranted, it needs one face per weight, each measured.
 * ========================================================================== */

:root {
	/* --- surfaces ------------------------------------------------------ */
	--pa-canvas:        var(--wp--preset--color--canvas);
	--pa-surface:       var(--wp--preset--color--surface);
	--pa-raised:        var(--wp--preset--color--raised);
	--pa-overlay:       var(--wp--preset--color--overlay);

	/* --- text ---------------------------------------------------------- */
	--pa-text:          var(--wp--preset--color--text);
	--pa-text-2:        var(--wp--preset--color--text-2);
	--pa-muted:         var(--wp--preset--color--text-muted);
	--pa-ink:           var(--wp--preset--color--text-on-accent);

	/* --- brand --------------------------------------------------------- */
	--pa-green:         var(--wp--preset--color--green-500);
	--pa-green-400:     var(--wp--preset--color--green-400);
	--pa-green-600:     var(--wp--preset--color--green-600);
	--pa-green-700:     var(--wp--preset--color--green-700);
	--pa-silver:        var(--wp--preset--color--silver);
	--pa-error:         var(--wp--preset--color--error);

	/* --- lines --------------------------------------------------------- */
	--pa-border:        var(--wp--preset--color--border);
	--pa-border-strong: var(--wp--preset--color--border-strong);

	/* --- decorative illustration ---------------------------------------
	 * Three muted tones used only inside the hero gauge and the Why flow diagram. They are NOT
	 * palette colours (nothing on the site should be able to pick them as text or background), so
	 * they live in theme.json's `custom` tree rather than in `palette`, and stay out of the editor
	 * colour picker. Before v0.5.5 these were hex literals on the SVG markup. */
	--pa-decor-tick:     var(--wp--custom--decor--tick);
	--pa-decor-flowline: var(--wp--custom--decor--flowline);
	--pa-decor-fin:      var(--wp--custom--decor--fin);

	/* --- type ---------------------------------------------------------- */
	--pa-font:          var(--wp--preset--font-family--poppins);
	--pa-fs-xs:         var(--wp--preset--font-size--xs);
	--pa-fs-sm:         var(--wp--preset--font-size--sm);
	--pa-fs-base:       var(--wp--preset--font-size--base);
	--pa-fs-lead:       var(--wp--preset--font-size--lead);
	--pa-fs-lg:         var(--wp--preset--font-size--lg);
	--pa-fs-xl:         var(--wp--preset--font-size--xl);
	/* WordPress KEBAB-CASES preset slugs when it generates these variables: a slug of `h1` becomes
	 * `--wp--preset--font-size--h-1`, and `2xl` becomes `--…--2-xl`. Any slug mixing letters and
	 * digits therefore produces a variable name you cannot guess from the slug. All of our slugs are
	 * plain lowercase words (`display`, `section`, `xxl`) so the name is exactly the slug. */
	--pa-fs-h2:         var(--wp--preset--font-size--section);
	--pa-fs-h1:         var(--wp--preset--font-size--display);
	--pa-fs-stat:       var(--wp--preset--font-size--stat);
	--pa-fs-metric:     var(--wp--preset--font-size--metric);

	/* --- space --------------------------------------------------------- */
	--pa-xs:            var(--wp--preset--spacing--xs);
	--pa-sm:            var(--wp--preset--spacing--sm);
	--pa-md:            var(--wp--preset--spacing--md);
	--pa-lg:            var(--wp--preset--spacing--lg);
	--pa-xl:            var(--wp--preset--spacing--xl);
	--pa-2xl:           var(--wp--preset--spacing--xxl);
	--pa-3xl:           var(--wp--preset--spacing--xxxl);
	--pa-section:       var(--wp--preset--spacing--section);
	--pa-gutter:        var(--wp--preset--spacing--gutter);

	/* --- shape, motion, chrome ----------------------------------------- */
	--pa-r-sm:          var(--wp--custom--radius--sm);
	--pa-r:             var(--wp--custom--radius--md);
	--pa-r-lg:          var(--wp--custom--radius--lg);
	--pa-r-pill:        var(--wp--custom--radius--pill);
	--pa-glow:          var(--wp--custom--glow--soft);
	--pa-glow-strong:   var(--wp--custom--glow--strong);
	--pa-scrim-nav:     var(--wp--custom--scrim--nav);
	--pa-scrim-chip:    var(--wp--custom--scrim--chip);
	--pa-ease:          var(--wp--custom--ease--out);
	--pa-ease-snap:     var(--wp--custom--ease--snap);
	--pa-t-fast:        var(--wp--custom--duration--fast);
	--pa-t:             var(--wp--custom--duration--base);
	--pa-t-reveal:      var(--wp--custom--duration--reveal);
	--pa-nav-h:         var(--wp--custom--nav--height);
	--pa-container:     var(--wp--custom--container--max);
	/* Hero height budget: 100svh on laptops, capped on tall monitors so the hero does not become a
	   mostly-empty 1400px band. Consumed by home.css; defined here with the other layout tokens. */
	--pa-hero-max:      100svh;
}

/* --- base ------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	/* Anchor targets clear the fixed header. */
	scroll-padding-block-start: calc(var(--pa-nav-h) + var(--pa-sm));
}

body {
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img,
svg,
video,
canvas {
	display: block;
	max-width: 100%;
}

img,
video {
	height: auto;
}

::selection {
	background: var(--pa-green);
	color: var(--pa-ink);
}

/* --- focus ------------------------------------------------------------ */

:focus-visible {
	outline: 2px solid var(--pa-green);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Only suppress the default ring where :focus-visible is supported. */
:focus:not(:focus-visible) {
	outline: none;
}

/* --- screen-reader utility -------------------------------------------- */

.pa-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --- large screens ------------------------------------------------------
 * Client report (2026-07-29, screenshot at ~2000px wide): "spacing and size becomes too much".
 * Root cause: every type clamp tops out around 1440 and the container is fixed at 1200px, while
 * the hero keeps growing with 100svh, so on a big monitor small content floats in a tall empty
 * band. The theme.json presets are emitted as custom properties on :root, so a media query here
 * can re-declare exactly the handful that matter, without touching theme.json or any component.
 * Two steps rather than one so 4K does not overshoot. */

@media (min-width: 1680px) {
	:root {
		--wp--custom--container--max: 1360px;
		--wp--preset--font-size--display: clamp(4.6rem, 4.3vw, 5.2rem);
		--wp--preset--font-size--section: clamp(2.9rem, 2.4vw, 3.2rem);
		--wp--preset--font-size--lead: 1.12rem;
		--wp--preset--font-size--base: 0.98rem;
		--wp--preset--font-size--stat: 3.2rem;
		--wp--preset--font-size--metric: 3.5rem;
		--wp--preset--spacing--section: clamp(5rem, 7vw, 8rem);
		/* Caps the hero: on a 1440p monitor 100svh is ~1300px of mostly empty band. */
		--pa-hero-max: 1020px;
	}
}

@media (min-width: 2200px) {
	:root {
		--wp--custom--container--max: 1520px;
		--wp--preset--font-size--display: 5.6rem;
		--wp--preset--font-size--section: 3.4rem;
		--wp--preset--font-size--lead: 1.2rem;
		--wp--preset--font-size--base: 1.05rem;
		--pa-hero-max: 1100px;
	}
}

/* --- reduced motion --------------------------------------------------- */

@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;
		scroll-behavior: auto !important;
	}
}