/*
 * Scott Pool 2026 -- universal element resets.
 *
 * Deliberately minimal: only the resets every future phase (header, hero,
 * page sections) depends on. Heading/body typography, colors and spacing
 * are already handled by theme.json's generated CSS -- this file exists for
 * the handful of things theme.json's `styles` block can't express at the
 * element level, ported from the design system's tokens/base.css.
 */

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

/* Matches the design system's universal focus treatment: a 2px info-blue
   outline plus a soft halo, on every interactive element. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--border-focus);
	outline-offset: 2px;
	box-shadow: var(--focus-ring);
}

img { max-width: 100%; }

/* ===== Page-section layout utilities (Phase 3, Meet Scott) =====
   Ported from the design system's tokens/base.css sp-container/sp-section/
   sp-grid utilities, verbatim in spacing scale (design system's --space-8
   and --space-4 map exactly to --wp--preset--spacing--8 / --4, so grid-gap
   values below aren't invented, just re-expressed in this theme's token
   names). Lives in base.css rather than a component stylesheet because,
   like sp-container, these are cross-page layout primitives every future
   page-content phase depends on, not styling scoped to one component. */

.sp-container {
	width: 100%;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--gutter);
}
.sp-container--prose {
	max-width: 720px; /* design system's --container-prose */
}

.sp-section {
	padding: var(--wp--preset--spacing--20) 0;
}
.sp-section--muted {
	background: var(--surface-muted);
}

.sp-grid {
	display: grid;
	gap: var(--wp--preset--spacing--8); /* design system's --grid-gap: 32px */
}
.sp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sp-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Every .sp-grid block's editor layout type is still "default" (flow),
   stamped `is-layout-flow` in markup, even though it's display:grid here --
   core doesn't know that, so it still applies its flow-layout block-gap
   rule (`:where(.is-layout-flow) > *`, zero specificity but real margin) as
   margin-block-start on every child after the first. Spacing between grid
   cells is already fully handled by this rule's own `gap` above; that
   extra per-item margin only ever adds unwanted extra space on top of it,
   pushing every card but the first one down out of alignment with it --
   confirmed via computed-style inspection: first .sp-rule-card/.sp-card in
   a row sits 32px higher than its row-mates. Same root cause as the header
   and footer fixes elsewhere in this theme; same fix. */
.sp-grid > * {
	margin-block-start: 0;
}

/* Scroll reveal: add .sp-reveal, then content.js toggles .is-visible via
   IntersectionObserver as each element scrolls into view. */
.sp-reveal {
	opacity: 0;
	transform: translateY(var(--reveal-distance));
	transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}
.sp-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (max-width: 1023px) {
	.sp-grid--3, .sp-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.sp-container { padding: 0 var(--gutter-m); }
	.sp-section { padding: var(--wp--preset--spacing--12) 0; }
	.sp-grid { gap: var(--wp--preset--spacing--4); } /* design system's --grid-gap-m: 16px */
	.sp-grid--2, .sp-grid--3, .sp-grid--4 { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
	.sp-reveal { opacity: 1; transform: none; }
}

/* ===================================================================
   Phase 23.2B -- homepage design-correction pass (audit 23.2A).
   Every rule below is scoped to .home (the front page, page ID 18).
   .sp-container / .sp-container--prose / .sp-section / .sp-section--muted
   are cross-page primitives -- interior pages are intentionally untouched.
   =================================================================== */

/* 1. One desktop grid line for every section heading.
   The prose sections (Why Scott Is Running, Why This Race Became Personal,
   Get Involved) used the centred 720px .sp-container--prose, so their H2s
   began ~240px right of the wide-container sections -- the left edge
   zig-zagged on every scroll. Give those containers the same 1200px outer
   box as .sp-container (the element already carries that class, so it keeps
   its auto-centring + gutter), and restore the reading measure on the
   paragraphs themselves, left-aligned. */
.home .sp-container--prose {
	max-width: var(--container-max);
}
.home .sp-container--prose > * {
	/* core's .is-layout-constrained > :where(:not(.align*)) centres every
	   child with margin-inline:auto !important -- same override pattern as
	   .sp-page-hero__lede in content.css. */
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.home .sp-container--prose > p {
	max-width: 31em; /* ~62-68 characters at the 18px body size */
}
.home .sp-container--prose > .sp-pullline {
	max-width: none !important; /* the turning-point line is one short phrase */
}

/* 4. Inter-section rhythm. Adjacent full-bleed sections already carry their
   own 80px (48px mobile) top+bottom padding; core's 32px flow block-gap
   stacked an extra, inconsistent seam between them (some pairs collapsed
   it, some did not). Remove it on Home and let the padding + background
   change set the rhythm. The banner->hero (24px) and hero->first-section
   (0) seams keep their own deliberate values from hero.css. */
.home .sp-section + .sp-section,
.home .sp-section + .sp-callout,
.home .sp-callout + .sp-section {
	margin-block-start: 0;
}

/* Desktop section padding trimmed 80px -> 64px on Home only (mobile keeps
   its existing 48px). With the redundant block-gap gone, 80px + 80px read
   as slightly too airy at several boundaries; 64px keeps a clear major
   boundary without the dead space. */
@media (min-width: 768px) {
	.home .sp-section {
		padding-block: var(--wp--preset--spacing--16);
	}
	.home .sp-callout {
		padding-block: var(--wp--preset--spacing--16);
	}
}