/* Reset + base typography/layout. Mobile-first (DESIGN_SYSTEM.md). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg);
}
img, picture, svg, video { max-width: 100%; display: block; }
/* color: var(--text-primary) explicit, not inherited — a section like
   .hero that locally redefines --text-primary (dark bg -> light text)
   only affects elements that re-read the variable in their OWN color
   declaration. Without this, h1-h4 silently inherit body's already-
   resolved value from outside the section and go invisible on dark
   backgrounds (real bug, hit in production: white-ish body text, black
   invisible headline, same .hero used on every page's hero section). */
h1, h2, h3, h4 { font-weight: 700; line-height: 1.1; margin: 0 0 var(--space-3); letter-spacing: -0.02em; color: var(--text-primary); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); font-weight: 600; }
h3 { font-size: var(--fs-h3); font-weight: 600; }
h4 { font-size: var(--fs-h4); font-weight: 600; }
p { margin: 0 0 var(--space-3); color: var(--text-secondary); }
/* Body-text links use navy, not the gold accent: gold at paragraph-text
   size on a white background reads washed out and risks failing WCAG AA
   (see tokens.css comment on --accent-*). Buttons/badges/icons stay gold.
   --link/--link-hover (not --navy-700/900 directly) so dark mode can swap
   them for values readable against its near-black --bg/--surface. */
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.container {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

/* auto-fit/minmax, not a fixed N-column template: card rows here hold a
   variable number of items (3, 4, 6...) with no explicit grid-column span
   per card. A fixed repeat(12,1fr) left each card defaulting to a single
   1/12-width track — narrow, tall, with most of the row empty (real bug,
   hit in production on both the 3-card and 6-card homepage sections).
   auto-fit sizes columns to fill the row regardless of item count.
   Layouts that need asymmetric columns (footer, trust-bar) already
   override grid-template-columns with !important and are unaffected. */
.grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
@media (min-width: 768px) {
  .container { padding-inline: var(--space-4); }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--fs-body);
  border: none;
  cursor: pointer;
  transition: transform var(--duration-micro) var(--ease-out),
              background-color var(--duration-micro) var(--ease-out);
}
.btn:hover { transform: translateY(-1px); }
/* Navy-on-gold, not white-on-gold: white text on the gold fill measures
   ~2:1 contrast (fails WCAG AA's 4.5:1 for normal text). Navy-900 on
   gold-500 measures ~8.65:1, comfortably passing AA and AAA. */
.btn-primary { background: var(--accent-600); color: var(--navy-900); }
.btn-primary:hover { background: var(--accent-700); color: var(--navy-900); }
.btn-secondary { background: transparent; color: var(--text-primary); border: 1px solid var(--border); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.section { padding-block: var(--space-7); }
@media (min-width: 1024px) { .section { padding-block: var(--space-8); } }

.is-hidden { display: none !important; }

/* Font-size utilities — referenced across templates (hero subheadlines,
   eyebrow captions) since early in the build but never actually defined,
   same bug class as .sr-only below: every var(--fs-body-lg)/--fs-caption
   size intent silently fell back to the plain <p> default instead. */
.fs-body-lg { font-size: var(--fs-body-lg); }
.fs-caption { font-size: var(--fs-caption); }

/* Screen-reader-only text — used in header.php's mobile menu toggle. Was
   referenced but never defined, so "Menu" was rendering as visible,
   unstyled text overlapping the hamburger icon (real bug, caught by a
   Lighthouse contrast audit — same clip-rect technique already proven
   safe on the form honeypot in components.css). */
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap;
}

/* Scroll-reveal hook — JS toggles .is-visible; CSS owns the animation */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--duration-reveal) var(--ease-out),
              transform var(--duration-reveal) var(--ease-out);
}
[data-reveal].is-visible { opacity: 1; transform: none; }