/*
 * GPIPL base (Phase 3).
 * Layer order is declared ONCE, here, and this file loads first:
 * reset < tokens < base < layout < components < pages < utilities.
 * Later layers win regardless of selector specificity, so components never
 * need !important or long selectors to beat base styles.
 */
@layer reset, tokens, base, layout, components, pages, utilities;

/* ------------------------------------------------------------------ Font
   Archivo variable (SIL OFL 1.1, see assets/fonts/OFL.txt), subset to Latin +
   technical symbols, axes limited to wght 300–800 and wdth 75–125. */
@font-face {
	font-family: "Archivo";
	src: url("../fonts/archivo-variable.woff2") format("woff2");
	font-weight: 300 800;
	font-stretch: 75% 125%;
	font-style: normal;
	font-display: swap;
}

@layer reset {
	*, *::before, *::after { box-sizing: border-box; }
	* { margin: 0; }
	html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
	body { min-height: 100vh; min-height: 100dvh; }
	img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
	input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
	button { cursor: pointer; background: none; border: 0; padding: 0; }
	p, h1, h2, h3, h4, h5, h6, li, dd, figcaption { overflow-wrap: break-word; }
	table { border-collapse: collapse; border-spacing: 0; }
	fieldset { border: 0; padding: 0; min-width: 0; }
}

@layer base {
	html {
		color-scheme: light;
		scroll-behavior: smooth;
		scroll-padding-top: calc(var(--space-2xl) + var(--space-s)); /* clears the sticky header (Phase 4) */
	}

	body {
		font-family: var(--font-sans);
		font-size: var(--step-0);
		font-weight: var(--wght-body);
		font-stretch: var(--wdth-body);
		line-height: var(--lh-body);
		color: var(--color-text);
		background: var(--color-bg);
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-rendering: optimizeLegibility;
		font-kerning: normal;
	}

	/* ------------------------------------------------------------ Headings
	   Sentence case everywhere: no text-transform on any heading or label. */
	h1, h2, h3, h4, h5, h6 {
		color: var(--color-heading);
		font-weight: var(--wght-semibold);
		font-stretch: var(--wdth-heading);
		line-height: var(--lh-heading);
		letter-spacing: var(--tracking-heading);
		text-wrap: balance;
	}
	h1 { font-size: var(--step-5); font-weight: var(--wght-display); font-stretch: var(--wdth-display); line-height: var(--lh-display); letter-spacing: var(--tracking-display); }
	h2 { font-size: var(--step-4); font-weight: var(--wght-display); line-height: var(--lh-display); letter-spacing: var(--tracking-display); }
	h3 { font-size: var(--step-2); }
	h4 { font-size: var(--step-1); }
	h5, h6 { font-size: var(--step-0); letter-spacing: 0; }

	p { text-wrap: pretty; }
	strong, b { font-weight: var(--wght-semibold); }
	small { font-size: var(--step--1); }

	/* Chemical formulae (SO₂, NOₓ, NH₃…) use <sub> because Archivo has no ₓ glyph;
	   positioned so subscripts never change the line height. */
	sub, sup { position: relative; font-size: 0.72em; line-height: 0; vertical-align: baseline; }
	sub { bottom: -0.22em; }
	sup { top: -0.48em; }

	/* ------------------------------------------------------------ Links */
	a {
		color: var(--color-link);
		text-decoration-line: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.22em;
		transition: color var(--dur-fast) var(--ease-out), text-decoration-thickness var(--dur-fast) var(--ease-out);
	}
	a:hover { color: var(--color-link-hover); text-decoration-thickness: 2px; }

	/* ------------------------------------------------------------ Lists, rules, media */
	ul, ol { padding-inline-start: 1.25em; }
	/* Lists used for layout (role="list" keeps list semantics in Safari when bullets are removed). */
	ul[role="list"], ol[role="list"] { list-style: none; padding-inline-start: 0; }
	li::marker { color: var(--color-text-muted); }
	hr { border: 0; border-top: var(--border); margin-block: var(--space-xl); }
	figcaption { margin-top: var(--space-2xs); font-size: var(--step--1); color: var(--color-text-muted); }
	img { background-color: transparent; }

	/* Numbers in data always align. */
	table, .tabular { font-variant-numeric: tabular-nums; }

	::selection { background: var(--color-selection); color: inherit; }

	/* ------------------------------------------------------------ Focus
	   Visible for keyboard users, never removed; 2px ring, offset from the element. */
	:focus-visible {
		outline: var(--focus-ring);
		outline-offset: var(--focus-offset);
		border-radius: var(--radius-s);
	}
	:focus:not(:focus-visible) { outline: none; }
	.site-main:focus { outline: none; }

	/* Windows high-contrast / forced colours: keep system colours and visible focus. */
	@media (forced-colors: active) {
		:focus-visible { outline: 2px solid Highlight; }
	}

	/* ------------------------------------------------------------ Lenis (smooth scroll) */
	html.lenis, html.lenis body { height: auto; }
	.lenis.lenis-stopped { overflow: clip; }
	.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
	.lenis.lenis-smooth iframe { pointer-events: none; }
	.has-smooth-scroll { scroll-behavior: auto; }
}

@layer utilities {
	.screen-reader-text,
	.visually-hidden {
		position: absolute !important;
		width: 1px; height: 1px; padding: 0; margin: -1px;
		overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%);
		white-space: nowrap; border: 0;
	}

	.skip-link {
		position: absolute;
		left: var(--space-s);
		top: 0;
		z-index: var(--z-skip);
		padding: var(--space-xs) var(--space-s);
		background: var(--palette-slate);
		color: var(--palette-paper);
		font-weight: var(--wght-semibold);
		text-decoration: none;
		transform: translateY(-120%);
		transition: transform var(--dur-fast) var(--ease-out);
	}
	.skip-link:focus { transform: translateY(var(--space-s)); color: var(--palette-paper); }

	.text-muted { color: var(--color-text-muted); }
	.text-measure { max-width: var(--measure); }
	.text-lead { font-size: var(--step-1); line-height: var(--lh-snug); color: var(--color-text-muted); max-width: var(--measure-narrow); }
	.text-small { font-size: var(--step--1); }
	.text-data { font-stretch: var(--wdth-data); font-variant-numeric: tabular-nums; }
	.no-wrap { white-space: nowrap; }

	/* Editor-only marker for unconfirmed content (gpipl_needs_confirmation()). */
	.gpipl-flag {
		display: inline-block;
		padding: 0.25em 0.5em;
		font-size: var(--step--1);
		background: var(--color-attention-tint);
		color: var(--color-attention-text);
		border: 1px dashed var(--color-attention-strong);
		border-radius: var(--radius-s);
	}
}