/*
	Shell CSS. Reset, font wiring, and the two chrome pieces every page shares (the skip
	link and the icon convention).

	This is deliberately NOT the design system. The colour, type and spacing tokens for
	the dark editorial direction land with the home page build; when they do, they belong
	in a tokens layer this file imports, not scattered here. The handful of values below
	exist so a page renders legibly before that lands.
*/

:root {
	--surface: #0a0a0c;
	--ink: #f4f4f5;
	--ink-quiet: #a1a1a8;
	--accent: #ff5c1a;
	--rule: #26262c;

	--font-display: 'Archivo Black', system-ui, sans-serif;
	--font-body: 'Inter Variable', system-ui, sans-serif;
	--font-mono: 'JetBrains Mono Variable', ui-monospace, monospace;
}

/* Scoped with :where() so every rule here has zero specificity and any later
   stylesheet overrides it with a plain selector, no !important and no specificity war. */
:where(*, *::before, *::after) {
	box-sizing: border-box;
}

:where(body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol) {
	margin: 0;
}

:where(ul, ol) {
	padding: 0;
	list-style: none;
}

:where(img, svg, video) {
	display: block;
	max-width: 100%;
}

:where(button, input, select, textarea) {
	font: inherit;
	color: inherit;
}

:where(a) {
	color: inherit;
}

body {
	/* A flex column at full viewport height so the footer's auto margin (below, with
	   the footer rules) pins it to the bottom of short pages: an empty hub or a brief
	   policy page must not leave the footer floating mid-screen. Flow layout inside
	   each section is untouched; the flex only governs the page's vertical stack. */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background: var(--surface);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

/* A visible focus ring on every interactive element, in one place. Removing it
   anywhere is a bug, not a style choice. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* main takes tabindex="-1" so the skip link can move focus to it; that would otherwise
   paint a ring around the whole page when the link is used. */
:where(main):focus {
	outline: none;
}

.skip-link {
	position: absolute;
	left: 0.5rem;
	top: -3rem;
	z-index: 100;
	padding: 0.625rem 1rem;
	background: var(--ink);
	color: var(--surface);
	font-weight: 600;
	text-decoration: none;
	transition: top 120ms ease;

	&:focus {
		top: 0.5rem;
	}
}

/*
	Icons. Built into src/assets/icons/sprite.svg by scripts/util/build-icon-sprite.mjs
	and always referenced same-origin, because browsers block cross-origin SVG <use>:

	<svg class="icon" focusable="false" aria-hidden="true">
		<use href="/assets/icons/sprite.svg#fa-award"></use>
	</svg>
*/
.icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	fill: currentColor;
	vertical-align: -0.125em;
}

/* base.njk renders this footer on every page, the two internal boards included, and
   those load no chrome.css. So the bare bones live here and chrome.css does the
   dressing: without it a page still gets a readable strip and a link row on one line
   rather than seven links stacked down the screen. */
.site-footer {
	padding: 2rem 1.5rem;
	border-top: 1px solid var(--rule);
	color: var(--ink-quiet);
	font-size: 0.875rem;

	a {
		color: var(--ink);
	}
}

/* The auto block-start margin is the sticky-footer half of body's flex column: on a
   page shorter than the viewport it absorbs the slack and the footer sits at the
   bottom; on a long page it computes to zero and nothing moves. No positioning. */
.site-footer {
	margin-block-start: auto;
}

.footer-columns {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.75rem 1.25rem;
	margin-block-end: 1.5rem;
}

.footer-group ul {
	display: grid;
	gap: 0.4rem;
}

/* The one legal line, quiet under the sibling line. It lives here with the footer nav
   because the footer renders on every page, the internal boards included, and the
   boards load none of the site chrome. */
.footer-legal {
	margin-block-start: 0.5rem;
	font-size: 0.78rem;
	color: var(--muted-2, #85858f);
}

@media (prefers-reduced-motion: reduce) {
	:where(*, *::before, *::after) {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}