/* Base resets and defaults — see docs/design-system.md */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--nac-font-body);
  font-size: var(--nac-fs-body);
  line-height: var(--nac-lh-normal);
  color: var(--nac-ink);
  background: var(--nac-white);
}
/* H-D2V-R3 §6: Explore / Kids / About render on the default white body, which
   the approved design wants black. Those three page templates
   (page-explore/kids/about.php) add the `nac-page-dark` body class for their
   request only; paint the body and the .nac-page content wrappers on the site
   black token with legible light text. Scoped to the class — no other page is
   affected. */
body.nac-page-dark { background: var(--nac-navy-950); color: var(--nac-white); }
body.nac-page-dark .nac-page,
body.nac-page-dark .nac-page__inner,
body.nac-page-dark .nac-page__content { background: transparent; color: var(--nac-white); }
body.nac-page-dark .nac-page__title { color: var(--nac-white); }
body.nac-page-dark .nac-page__content a { color: var(--nac-orange); }
/* H-D2V-R4A (item H): the homepage body backdrop matches the sampled
   bottom-center color of the approved hero image (--nac-bg-page,
   tokens.css) so overscroll and any exposed body area read as the same
   night surface instead of flashing the white default. Background only —
   text color is left alone because every homepage section styles its own
   text on its own surface. Scoped to .home; no other page changes. */
body.home { background: var(--nac-bg-page); }
h1, h2, h3, h4 { font-family: var(--nac-font-display); font-weight: var(--nac-fw-medium); margin: 0 0 var(--nac-space-3); }
/* H-D2V-R1 §3C: Archivo ExtraLight 200 is the primary text weight. Set on
 * leaf text selectors (paragraphs, list content) rather than globally on
 * body/header/nav — a bare 400 request would font-match up to the 500 we
 * ship, reading heavier than the approved design. */
p, li { font-weight: var(--nac-fw-regular); }
p { margin: 0 0 var(--nac-space-4); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font-family: inherit; cursor: pointer; }

.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;
  top: 0;
  background: var(--nac-ink);
  color: var(--nac-white);
  padding: var(--nac-space-3) var(--nac-space-4);
  z-index: 10000;
}
.skip-link:focus {
  left: var(--nac-space-4);
  top: var(--nac-space-4);
}

/* Visible focus state everywhere — docs/accessibility-spec.md §3 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--nac-shadow-focus);
  border-radius: var(--nac-radius-sm);
}

/* Buttons — docs/design-system.md §6 */
.nac-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--nac-space-2);
  min-height: 44px;
  padding: 14px 28px;
  border-radius: var(--nac-radius-pill);
  font: var(--nac-fw-bold) var(--nac-fs-body) var(--nac-font-display);
  text-decoration: none;
  border: none;
  transition: background var(--nac-duration-fast) var(--nac-ease-standard), transform var(--nac-duration-fast) var(--nac-ease-standard), box-shadow var(--nac-duration-fast) var(--nac-ease-standard);
}
.nac-btn--primary {
  background: var(--nac-gradient-primary);
  color: var(--nac-white);
  box-shadow: var(--nac-shadow-button);
}
.nac-btn--primary:hover { background: var(--nac-gradient-primary-hover); transform: translateY(-1px); }
.nac-btn--outline {
  background: transparent;
  color: var(--nac-white);
  border: 1px solid rgba(255,255,255,0.4);
}
.nac-btn--tinted { color: var(--nac-ink); border: 1px solid transparent; }
.nac-btn--teal { background: var(--nac-teal); color: #fff; }
.nac-btn--purple { background: var(--nac-purple); color: #fff; }
.nac-btn--orange { background: var(--nac-orange); color: #fff; }
.nac-btn--teal-outline { background: transparent; border-color: var(--nac-teal); color: var(--nac-teal); }

.nac-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--nac-space-1) var(--nac-space-3);
  border-radius: var(--nac-radius-pill);
  font: var(--nac-fw-bold) var(--nac-fs-micro) var(--nac-font-display);
  letter-spacing: var(--nac-tracking-eyebrow);
  text-transform: uppercase;
}
.nac-badge--gold { background: var(--nac-gold); color: var(--nac-ink); }

/*
 * PHASE 2.2 FIX (docs/phase-2-2-visual-parity-report.md): `.nac-section` and
 * `.nac-container`/`.wrap` are used as the outer wrapper on every major
 * homepage section below the hero (template-parts/builder.php,
 * template-parts/explore.php, template-parts/kids-printables.php,
 * template-parts/sponsor-strip.php) but had ZERO CSS rules anywhere in the
 * theme — confirmed via a full-directory search of every stylesheet. Every
 * one of those sections was rendering completely unstyled: no max-width
 * containment, no consistent vertical rhythm/padding, content running edge
 * to edge. This is very likely the single biggest contributor to the
 * "excessively long and visually fragmented" / "unstyled legacy grid" /
 * "sponsor CTA is a mostly empty dark block" feedback — those sections were
 * never actually laid out, at any point in Phase 2 or 2.1. Fixing this one
 * gap should visibly improve nearly every section below the hero.
 */
.nac-section {
  padding: var(--nac-space-20) 0;
}
.nac-container.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--nac-space-8);
}
.nac-section__title { font-size: var(--nac-fs-h2); margin-bottom: var(--nac-space-2); }
.nac-section__sub { color: var(--nac-muted-on-light); max-width: 60ch; margin-bottom: var(--nac-space-8); }

/* Dark sections (builder, dark-themed cards) need the light-on-dark
   variants of the same title/sub styles. */
.nac-builder .nac-section__title,
.nac-builder .nac-section__sub { color: var(--nac-white); }
.nac-builder .nac-section__sub { color: var(--nac-muted); }

@media (max-width: 767px) {
  .nac-section { padding: var(--nac-space-10) 0; }
  .nac-container.wrap { padding: 0 var(--nac-space-4); }
}

/* H-D2: homepage legacy-DOM compatibility wrapper. The Explore/Kids
 * sections render on their own pages now, but their DOM must remain on the
 * homepage for route-app.js's monolithic init (unguarded id references —
 * see front-page.php). True non-rendering treatment, NOT off-screen
 * positioning: no layout, no paint, no a11y-tree exposure, unfocusable.
 * !important so no section/component rule can accidentally re-show it. */
.nac-home-legacy-compat,
.nac-page-legacy-compat {
  display: none !important;
}