/*
 * base.css — element defaults built entirely on tokens.css.
 *
 * Goal: a page looks correct with ZERO widget-level styling in Elementor. If a
 * Heading or Text widget needs a colour/size/font picker touched to look right,
 * the default here is wrong — fix it here, not in the widget. No literal design
 * values live in this file; everything is var(--am-…).
 *
 * The self-hosted Archivo faces are declared below (woff2, font-display: swap),
 * decided in docs/type-tokens-brief.md (brand-instruction §9.2). No CDN, no Google
 * Fonts. Only the three faces the type system uses are declared — Archivo 400/700
 * and Archivo Black 400.
 */

/* -- Self-hosted fonts — Archivo superfamily (OFL, subset Latin + Latin-Ext) --- */
@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/archivo-v25-latin_latin-ext-regular.woff2') format('woff2');
}

@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/archivo-v25-latin_latin-ext-700.woff2') format('woff2');
}

/* Archivo Black is a distinct, single-weight display family — declared at its
   native weight (400/normal). Never request 700 on it, or the browser fakes bold. */
@font-face {
	font-family: 'Archivo Black';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/archivo-black-v23-latin_latin-ext-regular.woff2') format('woff2');
}

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

* {
	margin: 0;
}

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

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* -- Document --------------------------------------------------------------- */
body {
	margin: 0;
	background-color: var(--am-color-bg);
	color: var(--am-color-text);
	font-family: var(--am-font-sans);
	font-size: var(--am-font-size-300);
	font-weight: var(--am-weight-regular);
	line-height: var(--am-leading-normal);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* -- Headings --------------------------------------------------------------- */
/* Type-role rule (type-tokens-brief §): family/weight split by size below.
   Archivo Black is the display voice ONLY at large sizes (h1–h3, >= size-600);
   smaller headings use Archivo (sans) bold, because Black goes muddy small. */
h1, h2, h3, h4, h5, h6 {
	color: var(--am-color-heading);
	line-height: var(--am-leading-tight);
	text-wrap: balance;
}

/* Display headings — Archivo Black at its native weight. Never 700: the face is
   single-weight, so a bolder request would trigger faux-bold. */
h1, h2, h3 {
	font-family: var(--am-font-heading);
	font-weight: var(--am-weight-regular);
	letter-spacing: var(--am-tracking-tight);
}

/* Smaller headings — Archivo (sans), bold. */
h4, h5 {
	font-family: var(--am-font-sans);
	font-weight: var(--am-weight-bold);
}

h1 { font-size: var(--am-font-size-900); }
h2 { font-size: var(--am-font-size-700); }
h3 { font-size: var(--am-font-size-600); }
h4 { font-size: var(--am-font-size-500); }
h5 { font-size: var(--am-font-size-400); }

/* h6 is a small label: Archivo (sans) semibold, uppercase. */
h6 {
	font-family: var(--am-font-sans);
	font-size: var(--am-font-size-300);
	font-weight: var(--am-weight-semibold);
	letter-spacing: var(--am-tracking-wide);
	text-transform: uppercase;
}

/* -- Flow: vertical rhythm between stacked text elements -------------------- */
p, ul, ol, dl, blockquote, figure, table, pre {
	margin-block: 0 var(--am-space-400);
}

h1, h2, h3, h4, h5, h6 {
	margin-block: var(--am-space-600) var(--am-space-300);
}

/* First child of a container shouldn't push down; last shouldn't add tail space. */
:where(h1, h2, h3, h4, h5, h6):first-child {
	margin-block-start: 0;
}

/* -- Running text ----------------------------------------------------------- */
/* Paragraphs fill their container (so a Text widget in Elementor behaves as you'd
   expect). The readable line length lives on reading-column contexts instead —
   am-post__content, am-section__lead, am-hero__promise — and on the opt-in
   .am-measure utility below, not on every <p> globally. */
p {
	text-wrap: pretty;
}

/* Opt-in readable line length — add to a Text widget / block you want constrained. */
.am-measure {
	max-width: var(--am-measure);
}

/* -- Links ------------------------------------------------------------------ */
a {
	color: var(--am-color-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
	transition: color var(--am-transition);
}

a:hover {
	color: var(--am-color-accent-hover);
}

/* -- Lists ------------------------------------------------------------------ */
ul, ol {
	padding-inline-start: var(--am-space-500);
}

li + li {
	margin-block-start: var(--am-space-200);
}

/* -- Emphasis --------------------------------------------------------------- */
strong, b {
	font-weight: var(--am-weight-semibold);
}

small {
	font-size: var(--am-font-size-200);
}

/* -- Quotes ----------------------------------------------------------------- */
blockquote {
	padding-inline-start: var(--am-space-500);
	border-inline-start: 3px solid var(--am-color-accent);
	color: var(--am-color-text-muted);
	font-size: var(--am-font-size-400);
}

/* -- Code ------------------------------------------------------------------- */
code, kbd, samp, pre {
	font-family: var(--am-font-mono);
	font-size: 0.9em;
}

pre {
	padding: var(--am-space-400);
	background-color: var(--am-color-surface-alt);
	border-radius: var(--am-radius-md);
	overflow-x: auto;
}

/* -- Rules ------------------------------------------------------------------ */
hr {
	height: 0;
	margin-block: var(--am-space-700);
	border: 0;
	border-top: 1px solid var(--am-color-border);
}

/* -- Media ------------------------------------------------------------------ */
img, picture, svg, video, canvas {
	display: block;
	max-width: 100%;
	height: auto;
}

/* -- Forms ------------------------------------------------------------------ */
input, button, textarea, select {
	font: inherit;
	color: inherit;
}

/* -- Tables ----------------------------------------------------------------- */
table {
	width: 100%;
	border-collapse: collapse;
}

th, td {
	padding: var(--am-space-300);
	border-bottom: 1px solid var(--am-color-border);
	text-align: start;
}

/* -- Accessibility: visible keyboard focus everywhere ----------------------- */
:focus-visible {
	outline: var(--am-focus-ring);
	outline-offset: var(--am-focus-offset);
}

/* -- Skip link: first focusable element, off-screen until focused ----------- */
.am-skip-link {
	position: fixed;
	inset-block-start: 0;
	inset-inline-start: 0;
	z-index: 1000; /* above sticky header */
	margin: var(--am-space-300);
	padding: var(--am-space-300) var(--am-space-400);
	background-color: var(--am-color-cta);
	color: var(--am-color-on-accent);
	border-radius: var(--am-radius-md);
	box-shadow: var(--am-shadow-md);
	font-weight: var(--am-weight-semibold);
	text-decoration: none;
	transform: translateY(-200%);
	transition: transform var(--am-transition);
}

.am-skip-link:focus {
	transform: translateY(0);
}