/**
 * Kata base stylesheet.
 *
 * Design primitives only — no section styling. Every homepage section ships its
 * own stylesheet from the kata-blocks plugin.
 *
 * Authoring rules enforced here and in every block sheet:
 *  - Logical properties only (inline-start/end, margin-inline, padding-block).
 *    The site is RTL-first; a future LTR/English switch must be a `dir` change,
 *    never a stylesheet fork. Physical left/right is a review failure.
 *  - No hardcoded colours, font stacks or type sizes. Everything resolves to a
 *    theme.json token via var(--wp--preset--*) or var(--wp--custom--*).
 */

/* -------------------------------------------------------------------------
 * Token aliases
 *
 * theme.json generates verbose custom-property names. These short aliases are
 * what block stylesheets consume, so a token rename touches one file.
 * ---------------------------------------------------------------------- */

:root {
	/* Motion */
	--kata-duration-fast: var( --wp--custom--motion--duration-fast );
	--kata-duration-base: var( --wp--custom--motion--duration-base );
	--kata-duration-slow: var( --wp--custom--motion--duration-slow );
	--kata-duration-mosaic: var( --wp--custom--motion--duration-mosaic );
	--kata-ease-out: var( --wp--custom--motion--ease-out );
	--kata-ease-in-out: var( --wp--custom--motion--ease-in-out );
	--kata-hover-intent: var( --wp--custom--motion--hover-intent );

	/* Layout */
	--kata-grid-gap: var( --wp--custom--grid--gap );
	--kata-mosaic-cell-ratio: var( --wp--custom--grid--mosaic-cell-ratio );

	/* Surfaces */
	--kata-shadow-popup: var( --wp--custom--shadow--popup );
	--kata-glass-blur: var( --wp--custom--glass--blur );
	--kata-glass-tint-strength: var( --wp--custom--glass--tint-strength );

	/* Focus */
	--kata-focus-width: var( --wp--custom--focus--width );
	--kata-focus-offset: var( --wp--custom--focus--offset );
	--kata-focus-color: var( --wp--preset--color--blue );

	/*
	 * Category accent. Every category-sensitive element (map marker, legend
	 * glyph, glass tint, chip, label) reads this one variable. The value is set
	 * inline per element from the term's palette slug at render time, never
	 * copied into a block attribute — so editing a term's colour updates every
	 * use with no post re-save.
	 */
	--kata-accent: var( --wp--preset--color--magenta );
}

/* -------------------------------------------------------------------------
 * Base
 * ---------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/*
 * The page never scrolls horizontally. Individual wide children (mosaics,
 * tables, code blocks) must scroll inside their own overflow container.
 */
body {
	overflow-x: clip;
}

/*
 * Full-bleed is the default for this design. theme.json already sets root
 * padding to 0; this guarantees no inherited max-width sneaks onto a section.
 */
.wp-site-blocks > * {
	margin-block: 0;
}

img,
video,
canvas,
svg {
	max-width: 100%;
	height: auto;
}

/*
 * Main region. Templates give it a `default` layout so homepage sections reach
 * the viewport edges; anything that genuinely needs a readable measure opts in
 * with .kata-prose instead of the whole page being constrained.
 */
.kata-main {
	display: block;
	min-block-size: 40svh;
}

/*
 * THE SECTIONS MEET. THEY DO NOT SIT APART.
 *
 * Every drawn page in this project butts its sections edge to edge — the lobby
 * runs 1200, 2850, 3650, 4450 with nothing between, and the category page the
 * same. The theme's block gap is a quarter of an inch of air, and the layout
 * puts it between every child of the main group: four sections down the lobby
 * that is 96 of drift, so the FAQ began 80 lower than the frame draws it and
 * every section below the first was measured against the wrong number.
 *
 * The gap is right for a column of paragraphs, which is what it was set for.
 * It is wrong for a stack of full-bleed sections that each carry their own
 * padding, and this is the only place that stack is assembled.
 *
 * Two classes deep to beat core's `.wp-block-group.is-layout-flow > :where(*+*)`,
 * whose `:where()` costs it nothing but whose two classes do.
 */
/*
 * AND THE CONTENT WRAPPER IS NOT A SECTION — it is the page's own blocks.
 *
 * These pages hold their content where an editor can reach it, so the sections
 * arrive inside `post-content` rather than as direct children of the main
 * group. That is one level deeper than the rule below was written for, so the
 * gap it exists to remove came straight back — 24 between every section, which
 * is the drift the note above describes, one layer down.
 *
 * The wrapper is not a layout of its own: it is transparent, and what it holds
 * meets edge to edge exactly as if the template had listed it.
 */
.wp-block-group.kata-main > .wp-block-post-content,
.wp-block-group.kata-main > .kata-hosted {
	display: block;
	inline-size: 100%;
	max-inline-size: none;
}

.wp-block-group.kata-main > *,
.wp-block-group.kata-main > .wp-block-post-content > *,
.wp-block-group.kata-main > .kata-hosted > * {
	margin-block-start: 0;
}

.kata-prose {
	padding-block: var( --wp--preset--spacing--60 );
	padding-inline: var( --wp--preset--spacing--40 );
}

/* -------------------------------------------------------------------------
 * Typography scaling beyond the fluid clamp ceiling
 *
 * The theme.json fluid clamps top out around a 1600px viewport, which is the
 * Figma frame width. On wide and 4K displays the macro layout keeps expanding
 * (per spec) but type would otherwise island in whitespace, so the root size
 * steps up in two controlled increments. Type still grows only within bounds —
 * this is not unrestricted viewport typography.
 * ---------------------------------------------------------------------- */

@media ( min-width: 1600px ) {
	:root {
		/*
		 * A ramp rather than the two steps that were here (17px at 2200, 18px
		 * at 3000). Those were set when the macro layout was partly CAPPED —
		 * the stat tiles stopped growing at 413px tall — so type only had to
		 * keep up with a little of it. The tiles now hold their drawn
		 * proportion at any width, which means they are 2.4x their 1600 size on
		 * a 3840 screen, and 18px type against that read as islands again.
		 *
		 * Deliberately NOT proportional: matching the layout exactly would mean
		 * a 38px root at 3840, which would wreck the measure of every paragraph.
		 * This tracks roughly the square root of the layout's growth — about
		 * 1.5x where the layout is 2.4x — which keeps the composition together
		 * without body copy turning into headlines.
		 *
		 * 16px at exactly 1600 by construction, so nothing at or below the
		 * Figma frame width changes at all.
		 */
		font-size: clamp( 16px, calc( 0.55vw + 7.2px ), 24px );
	}
}

/* -------------------------------------------------------------------------
 * Focus visibility
 *
 * Every interactive control must show a visible focus ring. Accordion panels,
 * markers, slides and mosaic cards are all real links or buttons, so this one
 * rule covers them.
 * ---------------------------------------------------------------------- */

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

/* Only suppress the default ring where focus-visible is supported. */
@supports selector( :focus-visible ) {
	:where( a, button, input, select, textarea, summary ):focus:not( :focus-visible ) {
		outline: none;
	}
}

/* -------------------------------------------------------------------------
 * Screen-reader utilities
 * ---------------------------------------------------------------------- */

.kata-visually-hidden:not( :focus ):not( :active ) {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

/*
 * Controls that exist for keyboard and assistive technology only — the hero's
 * pause and previous/next affordances. Hidden until focused, at which point
 * they become fully visible, so the autoplay-led composition stays uncluttered
 * (per the approved A19 adjustment) without stranding keyboard users.
 */
.kata-a11y-control:not( :focus-visible ) {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * Reduced motion
 *
 * Content hierarchy is preserved: sections render in their final designed
 * state, sticky sequences unpin, and canvas effects never initialise. The JS
 * side checks the same media query, so this is belt-and-braces for CSS-driven
 * transitions.
 * ---------------------------------------------------------------------- */

@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;
	}
}

/* -------------------------------------------------------------------------
 * The scrollbar
 *
 * The site is dark end to end, and the browser was still painting a light
 * scrollbar down the side of it — the one piece of chrome on the page that had
 * never been designed.
 *
 * `color-scheme` FIRST, because it is the part that is not decoration: it tells
 * the browser this document is dark, and the whole native layer follows —
 * scrollbars, form controls, the tap highlight, and the canvas behind a
 * rubber-band scroll. Without it, an overscroll on a Mac still flashes white.
 *
 * Then the bar itself, twice over, because no single syntax covers everything:
 * `scrollbar-color` is the standard one and is what Firefox reads; the
 * `::-webkit-` pseudo-elements are what Chrome and Safari read, and they allow
 * the rounded thumb the rest of the interface is drawn with.
 *
 * The thumb is white at a fifth rather than a brand colour. It sits beside
 * every page on the site — the lime and the magenta belong to what a section
 * is saying, and a permanent accent down the edge of the window would compete
 * with all of them.
 * ---------------------------------------------------------------------- */

:root {
	color-scheme: dark;

	/* Firefox, and Chrome 121+. */
	scrollbar-color: rgba( 255, 255, 255, 0.2 ) var( --wp--preset--color--surface-deep, #111314 );
	scrollbar-width: thin;
}

::-webkit-scrollbar {
	inline-size: 10px;
	block-size: 10px;
}

::-webkit-scrollbar-track {
	background-color: var( --wp--preset--color--surface-deep, #111314 );
}

::-webkit-scrollbar-thumb {
	border: 2px solid transparent;
	border-radius: 999px;
	/* Drawn on the padding box so the border reads as breathing room. */
	background-clip: padding-box;
	background-color: rgba( 255, 255, 255, 0.2 );
}

::-webkit-scrollbar-thumb:hover {
	background-color: rgba( 255, 255, 255, 0.34 );
}

/* The corner where two bars meet, which otherwise stays the default grey. */
::-webkit-scrollbar-corner {
	background-color: var( --wp--preset--color--surface-deep, #111314 );
}