/*
  Mobile-first reset and fluid type/spacing scale.
  Deliberately contains NO colors, NO layout/grid decisions, and NO
  component styles — those must come from a per-build stylesheet authored
  fresh from the Step 2 design direction. This file only exists to save
  time on plumbing that's identical on every build.
*/

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

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

body {
  margin: 0;
  min-height: 100svh;
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

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

ul[class], ol[class] {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
}

/* --- Fluid type scale ---
   Tune the min/preferred/max values per build to match the chosen
   typography, but keep the clamp() approach so type scales smoothly
   across viewport widths instead of jumping at breakpoints. */
:root {
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --step-1:  clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.4rem + 1vw, 2rem);
  --step-3:  clamp(2rem, 1.7rem + 1.5vw, 2.75rem);
  --step-4:  clamp(2.5rem, 2rem + 2.5vw, 3.75rem);
}

h1 { font-size: var(--step-4); line-height: 1.1; }
h2 { font-size: var(--step-3); line-height: 1.15; }
h3 { font-size: var(--step-2); line-height: 1.2; }
h4 { font-size: var(--step-1); line-height: 1.3; }
small { font-size: var(--step--1); }

/* --- Fluid spacing scale ---
   Use these (or build-specific equivalents) for section padding/margins
   instead of hard-coded pixel values per breakpoint. */
:root {
  --space-xs: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
  --space-sm: clamp(1rem, 0.85rem + 0.75vw, 1.5rem);
  --space-md: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  --space-lg: clamp(2.5rem, 1.8rem + 3.5vw, 5rem);
  --space-xl: clamp(4rem, 2.8rem + 6vw, 8rem);
}

/* --- Accessibility helpers --- */
.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus {
  position: fixed;
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  padding: var(--space-xs) var(--space-sm);
  z-index: 1000;
}

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

/* --- Mobile nav toggle: structure only, no colors/typography ---
   Pairs with templates/nav-toggle.js and references/navigation.md.
   The "hidden by default, shown via .is-open" rule lives ENTIRELY inside
   the mobile media query below, scoped to :not(.no-js). That's what makes
   this safe: nav-toggle.js only ever toggles a class name, never inline
   styles or the `hidden` attribute, so it can't accidentally hide the nav
   at desktop widths (where this media query doesn't apply, so the nav
   just stays visible regardless of JS state) or if the script never runs
   at all (the .no-js class is never removed, so these rules never match
   and the nav renders as a plain, always-visible list).

   The button also gets its own z-index above the menu's here, not just
   a display toggle: the button and menu are usually DOM siblings inside
   the same header, so once the menu opens (z-index 1000 below), the
   button needs a higher z-index of its own to stay visible/clickable as
   the close affordance — raising the *header's* z-index instead doesn't
   work, since the menu is a descendant inside that same stacking
   context. See references/navigation.md for the full explanation. */
[data-nav-toggle] {
  display: none;
  position: relative;
  z-index: 1200;
}

@media (max-width: 47.99em) {
  html:not(.no-js) [data-nav-toggle] {
    display: inline-flex;
  }

  html:not(.no-js) [data-nav-menu] {
    display: none;
  }

  html:not(.no-js) [data-nav-menu].is-open {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: 1000;
    overflow-y: auto;
  }
}

body.nav-open {
  overflow: hidden;
}

:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}