/*
 * base.css — reset, elements, typography.
 *
 * Design tokens come from theme.json (--wp--preset--* custom properties).
 * This file only wires those tokens onto element defaults and provides a
 * light reset. Theme-authored tokens use the --saqi-* namespace.
 */

:root {
	--saqi-measure: var(--wp--style--global--content-size, 44.44rem);

	/*
	 * Links are not the accent.
	 *
	 * The accent is the brand fuchsia (#c8005a) and it is used as an accent:
	 * a pre-order date, a hover, a focus ring, the underline on an open tab.
	 * The redesign colours *links* separately — `--bde-links-color` is #444
	 * and `--bde-links-color-hover` is #999 — so a page of body copy reads as
	 * body copy rather than as a field of magenta. Ready.Salted's starter
	 * pointed `a` at the accent, which is right for a theme that does not know
	 * its brand yet and wrong once it does.
	 */
	/*
	 * A link is the palette's `mid` — #666, between `muted` #444 and `light`
	 * #999, and since 2026-09-11 also a book's subtitle and a name on hover.
	 * It darkens to the foreground on the rollover. The direction matters now
	 * the underline is gone: with nothing but colour saying a thing is a link,
	 * a hover that *lightens* reads as the link going away. #666 clears 3:1
	 * against the #1a1612 copy it sits inside (3.18:1), which #444 did not —
	 * the contrast note from the 9 September pass. Until 2026-09-16 the two
	 * were #666 and #333 written here; they are palette colours now, so every
	 * colour on the site is one of the palette's (Will).
	 */
	--saqi-link: var(--wp--preset--color--mid);
	--saqi-link-hover: var(--wp--preset--color--foreground);

	/*
	 * One rollover, declared once. Every hover in the theme is a colour change
	 * — a link to the accent, a button inverting, a nav item lighting up — and
	 * they all ease at the same rate so the site feels like one surface. Short
	 * enough to read as a response rather than an animation.
	 */
	--saqi-rollover: 0.15s ease;
}

/* --- Reset --- */

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

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

/*
 * Every page sits on cream, from 2026-09-04; until then only the home page
 * did and the rest were white. Both are brand colours — the design's page
 * ground is #FFF and it uses the cream as a band behind sections — and the
 * decision was that the home page's ground is the site's. The header and
 * footer stay white on it (`layout.css`), as do form fields.
 */
/*
 * The page fills the viewport: header, main, footer in a column, and main
 * takes whatever is left, so a short page — the login, a 404 — still puts
 * the footer at the bottom of the window rather than halfway up it.
 */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
	margin: 0;
	background-color: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--foreground);
	/*
	 * Inter. Ready.Salted defaults to the serif here, being an editorial
	 * starter; Saqi is the other way round -- Aldine for headings, Inter for
	 * running text. Aldine prose is an opt-in, see .serif-prose below.
	 */
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

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

img {
	display: block;
}

/* --- Typography --- */

/*
 * Headings are Adobe Aldine at 400. The redesign's own `heading_font` was
 * Adobe Caslon Pro, also at 400 and the only weight it asked for; Aldine
 * replaced it on 2026-09-16 (Will) for its Arabic transliteration support.
 * Ready.Salted ships this as sans 600; that is the starter's default, not this
 * site's design.
 *
 * `h4` is the exception and is handled below.
 */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 400;
	line-height: 1.15;
	margin: 0 0 0.5em;
	text-wrap: balance;
}

/*
 * `h4` is not a heading in the typographic sense here — the design uses it as
 * a small label, in Inter at 600 with a touch of tracking. The Breakdance
 * build sets it exactly this way, so a converted route matches an unconverted
 * one.
 */
h4 {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--label);
}

p,
ul,
ol,
blockquote,
figure,
table {
	margin: 0 0 var(--wp--preset--spacing--30);
}

p {
	text-wrap: pretty;
}

/*
 * The browser default for `b` and `strong` is `bolder`, which computes to 700
 * from a 400 parent — and the design's whole weight palette is 400/500/600.
 * A 700 next to a 600 is a jump you can see, so emphasis lands on 600 and the
 * site stays inside three weights. There is a lot of it: 48 `<strong>`s on the
 * terms page alone.
 */
b,
strong {
	font-weight: 600;
}

/*
 * The serif for a run of prose, opted into rather than inherited. Its size is
 * the scale's `prose` step, 1.1rem, one of the four the redesign measured
 * (2026-09-16; see the README's house rules).
 *
 * This is the successor to Breakdance's "Serif Paragraph" preset
 * (`50b2e8de-c4ed-451e-868d-ee160db6c057`), which sets Caslon at 1.1rem on a
 * Text element and is what the About page's history and prizes copy uses.
 * It is the wrapper every run of copy carries since 2026-09-16 — About's
 * panels, the rows of the prose pages, an FAQ answer — and `layout.css`
 * sets the rest of the run under "Prose, and the information pages".
 */
.serif-prose {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--prose);
}

/*
 * Links carry colour, not a rule. A page of serif body copy with underlines
 * through it reads as marked-up text; the colour and the rollover are what say
 * a thing is a link, here and everywhere else in the theme.
 */
a {
	color: var(--saqi-link);
	text-decoration: none;
}

a:hover,
a:focus {
	color: var(--saqi-link-hover);
}

/*
 * The rollover itself, in one place. Every hover in the theme changes colour on
 * the element being hovered — nothing reaches into a descendant — so declaring
 * the transition on the things that can be hovered covers all of them, and a
 * component that wants a different one just says so after this.
 */
a,
button,
summary,
label,
[role="tab"],
input[type="submit"],
input[type="button"],
input[type="reset"] {
	transition:
		color var(--saqi-rollover),
		background-color var(--saqi-rollover),
		border-color var(--saqi-rollover);
}

@media (prefers-reduced-motion: reduce) {
	a,
	button,
	summary,
	label,
	[role="tab"],
	input[type="submit"],
	input[type="button"],
	input[type="reset"] {
		transition: none;
	}
}

blockquote {
	margin-inline: 0;
	padding-inline-start: var(--wp--preset--spacing--40);
	border-inline-start: 2px solid var(--wp--preset--color--rule);
}

hr,
.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--rule);
	margin-block: var(--wp--preset--spacing--50);
}

figcaption,
.wp-element-caption {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}

code,
pre,
kbd {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.9em;
}

/* --- Forms --- */

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

.search-field {
	padding: 0.4em 0.6em;
	border: 1px solid var(--wp--preset--color--rule);
	background: var(--wp--preset--color--background);
}

.search-submit,
.nav-toggle {
	padding: 0.4em 0.9em;
	border: 1px solid var(--wp--preset--color--foreground);
	background: var(--wp--preset--color--foreground);
	color: var(--wp--preset--color--background);
	cursor: pointer;
}

/* --- Accessibility helpers --- */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 100;
	padding: 0.6em 1em;
	background: var(--wp--preset--color--foreground);
	color: var(--wp--preset--color--background);
}

/*
 * The link carries `screen-reader-text` as well, and that rule's `clip` and
 * `overflow` are what actually hide it — moving it back on screen is not
 * enough on its own. Until this was added (2026-09-17) the first Tab on every
 * page went to a link that took focus, moved to 8,8, and stayed clipped to a
 * zero-sized rectangle: invisible, so a sighted keyboard user had no way to
 * know where they were.
 */
.skip-link:focus {
	left: 0.5rem;
	top: 0.5rem;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: nowrap;
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}