/**
 * Trustd design tokens.
 *
 * Hand-friendly aliases over WordPress's generated CSS custom properties.
 * Components should reference --trustd-* names; this file is the only place
 * that knows about the underlying --wp--* naming.
 *
 * Section inversion: wrap a block with `.is-style-inverse` to flip the
 * semantic colour tokens to their inverse-mode values. Components don't need
 * to know — they just read --trustd-color-* and the values change in scope.
 */

/* Global box-sizing so `width: 100%` + padding never blows past the parent —
 * the cause of every "why does the page scroll sideways" mystery. Block-level
 * authors don't have to remember to set border-box on each padded container. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Vertical rhythm comes from flex / grid `gap`, never from the browser's
 * default heading / paragraph margins (the UA `0.83em` etc.). Zero them
 * globally so a bare heading or paragraph dropped into a gapped slot — e.g.
 * the free-composition MediaText slot — doesn't add a phantom margin that
 * fights the gap. Components that need spacing set it explicitly.
 * Also pin everything LEFT-aligned per the TAPA app design system. */
h1,
h2,
h3,
h4,
h5,
h6,
p {
	margin: 0;
	text-align: left;
}

/* Belt-and-braces against horizontal scroll. `clip` (not `hidden`) prevents
 * sideways scroll without creating a scroll container — `overflow-x:
 * hidden` on html/body silently kills `position: sticky` on the header
 * because sticky needs an unscrolled / scrollable ancestor and `hidden`
 * registers as scrollable. */
html,
body {
	overflow-x: clip;
}

/* Brand the text-selection highlight: secondary (cyan) fill, on-secondary text.
 * Reads semantic tokens so it flips automatically inside `.is-style-inverse`. */
::selection {
	background-color: var(--trustd-color-secondary);
	color: var(--trustd-color-on-secondary);
}

:root {

	/* ----- Semantic colours (default mode) ------------------------------ */
	--trustd-color-primary: var(--wp--preset--color--primary);
	--trustd-color-on-primary: var(--wp--preset--color--on-primary);
	--trustd-color-primary-container: var(--wp--preset--color--primary-container);
	--trustd-color-on-primary-container: var(--wp--preset--color--on-primary-container);
	--trustd-color-secondary: var(--wp--preset--color--secondary);
	--trustd-color-on-secondary: var(--wp--preset--color--on-secondary);
	--trustd-color-surface: var(--wp--preset--color--surface);
	--trustd-color-surface-opacity-090: var(--wp--preset--color--surface-opacity-090);
	--trustd-color-surface-container: var(--wp--preset--color--surface-container);
	--trustd-color-surface-container-opacity-090: var(
		--wp--preset--color--surface-container-opacity-090
	);
	--trustd-color-on-surface: var(--wp--preset--color--on-surface);
	--trustd-color-on-surface-variant: var(--wp--preset--color--on-surface-variant);
	--trustd-color-surface-inverted: var(--wp--preset--color--surface-inverted);
	--trustd-color-on-surface-inverted: var(--wp--preset--color--on-surface-inverted);
	--trustd-color-outline: var(--wp--preset--color--outline);
	--trustd-color-outline-variant: var(--wp--preset--color--outline-variant);

	/* ----- Gradients ---------------------------------------------------- */
	--trustd-gradient-cta-default: var(--wp--preset--gradient--cta-default);
	--trustd-gradient-cta-hover: var(--wp--preset--gradient--cta-hover);

	/* Brand emphasis — cyan → navy left-to-right. Used by the Statement
	 * `headingEmphasis` clause and the Hero block's `__heading-emphasis`.
	 * Raw primitives (not semantic tokens) so the gradient stays the same
	 * cyan→navy regardless of inverse-mode token flips. */
	--trustd-gradient-emphasis: linear-gradient(
		90deg,
		var(--wp--custom--color--teal--400),
		var(--wp--custom--color--blue--700)
	);

	/* ----- Type --------------------------------------------------------- */
	--trustd-font-montserrat: var(--wp--preset--font-family--montserrat);

	/* Body copy is Montserrat in this build. The legacy --trustd-font-inter
	 * alias is repointed at the Montserrat family so every body-copy consumer
	 * (the .has-body-* role classes plus any block CSS still referencing this
	 * token) renders Montserrat without per-block edits. */
	--trustd-font-inter: var(--wp--preset--font-family--montserrat);

	--trustd-text-overline: var(--wp--preset--font-size--overline);
	--trustd-text-body-small: var(--wp--preset--font-size--body-small);
	--trustd-text-body-medium: var(--wp--preset--font-size--body-medium);
	--trustd-text-body-large: var(--wp--preset--font-size--body-large);
	--trustd-text-label-large: var(--wp--preset--font-size--label-large);
	--trustd-text-title-medium: var(--wp--preset--font-size--title-medium);
	--trustd-text-headline-small: var(--wp--preset--font-size--headline-small);
	--trustd-text-headline-medium: var(--wp--preset--font-size--headline-medium);
	--trustd-text-display-medium: var(--wp--preset--font-size--display-medium);
	--trustd-text-display-large: var(--wp--preset--font-size--display-large);

	--trustd-leading-overline: var(--wp--custom--line-height--overline);
	--trustd-leading-body-small: var(--wp--custom--line-height--body-small);
	--trustd-leading-body-medium: var(--wp--custom--line-height--body-medium);
	--trustd-leading-body-large: var(--wp--custom--line-height--body-large);
	--trustd-leading-label-large: var(--wp--custom--line-height--label-large);
	--trustd-leading-title-medium: var(--wp--custom--line-height--title-medium);
	--trustd-leading-headline-small: var(--wp--custom--line-height--headline-small);
	--trustd-leading-headline-medium: var(--wp--custom--line-height--headline-medium);
	--trustd-leading-display-medium: var(--wp--custom--line-height--display-medium);
	--trustd-leading-display-large: var(--wp--custom--line-height--display-large);

	--trustd-tracking-overline: var(--wp--custom--letter-spacing--overline);

	/* ----- Spacing ------------------------------------------------------ */
	--trustd-space-xs: var(--wp--preset--spacing--xs);
	--trustd-space-sm: var(--wp--preset--spacing--sm);
	--trustd-space-md: var(--wp--preset--spacing--md);
	--trustd-space-lg: var(--wp--preset--spacing--lg);
	--trustd-space-xl: var(--wp--preset--spacing--xl);

	/* Note: WordPress prefixes slugs starting with a digit with a dash in the
	 * generated CSS var name (`2xl` → `--wp--preset--spacing--2-xl`). */
	--trustd-space-2xl: var(--wp--preset--spacing--2-xl);
	--trustd-space-3xl: var(--wp--preset--spacing--3-xl);
	--trustd-space-4xl: var(--wp--preset--spacing--4-xl);
	--trustd-space-5xl: var(--wp--preset--spacing--5-xl);
	--trustd-space-6xl: var(--wp--preset--spacing--6-xl);

	/* ----- Radius ------------------------------------------------------- */
	--trustd-radius-none: var(--wp--custom--radius--none);
	--trustd-radius-sm: var(--wp--custom--radius--sm);
	--trustd-radius-md: var(--wp--custom--radius--md);
	--trustd-radius-lg: var(--wp--custom--radius--lg);
	--trustd-radius-xl: var(--wp--custom--radius--xl);
	--trustd-radius-2xl: var(--wp--custom--radius--2-xl);
	--trustd-radius-full: var(--wp--custom--radius--full);

	/* ----- Shadow ------------------------------------------------------- */
	--trustd-shadow-sm: var(--wp--preset--shadow--sm);
	--trustd-shadow-button: var(--wp--preset--shadow--button);

	/* ----- Header height ------------------------------------------------ *
	 * Mobile default. The Header block flips between mobile and desktop  *
	 * layouts at container width 1140px (dense 40px CTA → normal 56px    *
	 * CTA), so the rendered height changes accordingly. Dark-led pages   *
	 * can read this token to overlap the sticky header by the            *
	 * exact rendered amount — fixing the value here in CSS (instead of   *
	 * measuring in JS post-hydration) avoids the layout shift that was   *
	 * causing the browser to accumulate scroll position across reloads. *
	 * Desktop override lives in the @media block below.                  */
	--trustd-header-height: 5.625rem;

	/* ----- Motion ------------------------------------------------------- *
	 * Snappy, clean-cut, responsive feel. Short durations + a sharp        *
	 * ease-out curve (Linear/Vercel-style) with almost no decelerate tail. *
	 * `--easing-standard` is reserved for choreographed multi-step motion  *
	 * (e.g. the menu-toggle burger morph) where a softer curve reads as    *
	 * deliberate rather than soft. The reduce-motion rule below collapses  *
	 * all of these to ~0ms.                                                */
	--trustd-duration-fast: 120ms;
	--trustd-duration-base: 180ms;
	--trustd-duration-slow: 240ms;
	--trustd-easing-snap: cubic-bezier(0.32, 0.72, 0, 1);
	--trustd-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);

	/* Press feedback — three tiers because `scale()` is proportional:
	 *   - labelled buttons (56px+): subtle, the whole surface squashes
	 *   - icon-only at 56px: deeper, single glyph carries the feedback
	 *   - icon-only at 40px (dense): deepest, smallest target needs the
	 *     most squash to be visible at all
	 * Combined with the fast snap easing above, the effect is "confident
	 * click" not "spongy mash". */
	--trustd-scale-press: 0.975;
	--trustd-scale-press-icon: 0.9;
	--trustd-scale-press-icon-dense: 0.85;
}

/* Desktop header height — see token comment above for context. */
@media (min-width: 1141px) {

	:root {
		--trustd-header-height: 6.625rem;
	}
}

/* -----------------------------------------------------------------------
 * Typography roles
 *
 * WordPress's font-size preset only carries the size value. The rest of a
 * typography role (family, weight, line-height, transform, letter-spacing)
 * gets attached here via the .has-{slug}-font-size classes the block editor
 * auto-generates whenever a font-size preset is applied. This way picking a
 * font-size in the block panel actually applies the full Figma style.
 * --------------------------------------------------------------------- */

.has-overline-font-size {
	font-family: var(--trustd-font-montserrat);
	font-weight: 700;
	line-height: var(--trustd-leading-overline);
	letter-spacing: var(--trustd-tracking-overline);
	text-transform: uppercase;
}

.has-body-small-font-size,
.has-body-medium-font-size,
.has-body-large-font-size {
	font-family: var(--trustd-font-montserrat);
	font-weight: 400;
}

.has-body-small-font-size {
	line-height: var(--trustd-leading-body-small);
}

.has-body-medium-font-size {
	line-height: var(--trustd-leading-body-medium);
}

.has-body-large-font-size {
	line-height: var(--trustd-leading-body-large);
}

.has-label-large-font-size {
	font-family: var(--trustd-font-montserrat);
	font-weight: 500;
	line-height: var(--trustd-leading-label-large);
}

.has-title-medium-font-size {
	font-family: var(--trustd-font-montserrat);
	font-weight: 700;
	line-height: var(--trustd-leading-title-medium);
}

.has-headline-small-font-size {
	font-family: var(--trustd-font-montserrat);
	font-weight: 700;
	line-height: var(--trustd-leading-headline-small);
}

.has-headline-medium-font-size {
	font-family: var(--trustd-font-montserrat);
	font-weight: 700;
	line-height: var(--trustd-leading-headline-medium);
}

.has-display-medium-font-size {
	font-family: var(--trustd-font-montserrat);
	font-weight: 700;
	line-height: var(--trustd-leading-display-medium);
}

.has-display-large-font-size {
	font-family: var(--trustd-font-montserrat);
	font-weight: 700;
	line-height: var(--trustd-leading-display-large);
}

/* -----------------------------------------------------------------------
 * Text gradient utility
 *
 * Paints text with the brand horizontal gradient (secondary → primary,
 * left → right) via background-clip. Standalone class so it composes onto
 * any inline element (`<em>`, `<span>`, block-name spans) and any font-size
 * role — independent of the typography ladder.
 * --------------------------------------------------------------------- */

.trustd-text-gradient {
	background-image: linear-gradient(
		90deg,
		var(--trustd-color-secondary),
		var(--trustd-color-primary)
	);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

/* -----------------------------------------------------------------------
 * Focus rings
 *
 * theme.json :focus paints the outline; this strips it again for click /
 * touch users (where :focus-visible would not fire) so only keyboard users
 * see the ring.
 * --------------------------------------------------------------------- */

:where(a, button, .wp-element-button, .wp-block-button__link, [role='button']):focus:not(
		:focus-visible
	) {
	outline: none;
}

/* -----------------------------------------------------------------------
 * Reduced motion
 *
 * Honour OS-level "reduce motion" by collapsing every animation and
 * transition to an effectively-instant duration. Done as a single global
 * rule so individual components do not have to opt in.
 * --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

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

/* -----------------------------------------------------------------------
 * Inverse mode (dark sections)
 *
 * Same token names, redefined to point at inverse-mode primitives. Apply
 * `.is-style-inverse` to any block (registered via register_block_style in
 * functions.php) and every nested component using --trustd-color-* will flip.
 * --------------------------------------------------------------------- */
.is-style-inverse {
	--trustd-color-primary: var(--wp--custom--color--blue--300);
	--trustd-color-on-primary: var(--wp--custom--color--neutral--900);
	--trustd-color-primary-container: var(--wp--custom--color--blue--800);
	--trustd-color-on-primary-container: var(--wp--custom--color--blue--100);
	--trustd-color-secondary: var(--wp--custom--color--teal--300);
	--trustd-color-on-secondary: var(--wp--custom--color--neutral--900);
	--trustd-color-surface: var(--wp--custom--color--blue--700);
	--trustd-color-surface-opacity-090: color-mix(
		in srgb,
		var(--wp--custom--color--blue--700) 90%,
		transparent
	);
	--trustd-color-surface-container: var(--wp--custom--color--blue--800);
	--trustd-color-surface-container-opacity-090: color-mix(
		in srgb,
		var(--wp--custom--color--blue--800) 90%,
		transparent
	);
	--trustd-color-on-surface: var(--wp--custom--color--neutral--0);
	--trustd-color-on-surface-variant: var(--wp--custom--color--neutral--300);
	--trustd-color-surface-inverted: var(--wp--custom--color--neutral--0);
	--trustd-color-on-surface-inverted: var(--wp--custom--color--neutral--900);
	--trustd-color-outline: var(--wp--custom--color--neutral--400);
	--trustd-color-outline-variant: var(--wp--custom--color--neutral--500);

	/* CTA gradients re-stop to lighter teal/blue shades so filled buttons
	 * remain luminous against the dark surface and the (now-dark) on-primary
	 * text stays readable. Ellipse geometry and stop count match the default
	 * (5 stops) so the visual rhythm of the bloom is identical. */
	--trustd-gradient-cta-default: radial-gradient(
		ellipse 94% 211% at 14% 188%,
		var(--wp--custom--color--teal--300) 0%,
		rgb(120 220 242) 25%,
		rgb(124 208 241) 50%,
		rgb(128 194 240) 75%,
		var(--wp--custom--color--blue--300) 100%
	);
	--trustd-gradient-cta-hover: radial-gradient(
		ellipse 106% 229% at 24% 143%,
		var(--wp--custom--color--teal--300) 0%,
		rgb(120 220 242) 25%,
		rgb(124 208 241) 50%,
		rgb(128 194 240) 75%,
		var(--wp--custom--color--blue--300) 100%
	);
}