/* ============================================================
   FOUNDATION — RESET, BASE ELEMENTS, LAYOUT, A11Y BASELINE
   FILE: assets/css/base.css
   Phase 1.2 of the Final Master Roadmap, Stage 1.
   Depends on: tokens.css (loaded before this file).
   Owns: predictable cross-browser defaults, the container/grid
   utility, and the project-wide prefers-reduced-motion rule.
   Does NOT style any specific section (Header, Hero, etc.).
   ============================================================ */

/* ----------------------------------------------------------
   1. BOX SIZING
---------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ----------------------------------------------------------
   2. MARGIN / PADDING NORMALIZATION
---------------------------------------------------------- */
* {
  margin: 0;
  padding: 0;
}

/* ----------------------------------------------------------
   3. BODY DEFAULTS
---------------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--line-height-body);
  color: var(--color-dark-gray);
  background-color: var(--color-white);
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: antialiased;
}

/* ----------------------------------------------------------
   4. TYPOGRAPHY INHERITANCE
   (fonts/sizes themselves are set per-component; this only
   ensures headings/links/inputs don't silently fall back to
   the browser default font)
---------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: var(--line-height-heading);
  font-weight: 600;
}

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

a {
  color: inherit;
  text-decoration: none;
}

/* ----------------------------------------------------------
   5. IMAGE BEHAVIOR
---------------------------------------------------------- */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ----------------------------------------------------------
   6. BUTTON / LINK INHERITANCE
---------------------------------------------------------- */
button {
  background: none;
  border: none;
  cursor: pointer;
}

/* ----------------------------------------------------------
   7. LIST RESET WHERE SEMANTICALLY A NAV/GROUP, NOT PROSE
   (scoped to avoid stripping real content lists elsewhere)
---------------------------------------------------------- */
nav ul,
nav ol {
  list-style: none;
}

/* ----------------------------------------------------------
   8. CONTAINER / GRID UTILITY
---------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-inline);
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-3);
}

/* ----------------------------------------------------------
   9. ACCESSIBILITY FOUNDATION
---------------------------------------------------------- */

/* Skip-to-content link: visually hidden until focused */
.skip-link {
  position: absolute;
  top: -48px;
  left: var(--space-2);
  z-index: var(--z-toast);
  background: var(--color-navy);
  color: var(--color-white);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: top var(--duration-fast) var(--ease-premium);
}

.skip-link:focus {
  top: var(--space-2);
}

/* Focus-visible baseline — every interactive element gets a
   consistent, visible ring unless a component explicitly
   overrides it with an equally visible alternative */
:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

/* Minimum touch target reference (applied by components, not
   forced globally, since not every element is touch-interactive) */
:root {
  --touch-target-min: 44px;
}

/* Visually-hidden utility for screen-reader-only text */
.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;
}

/* ----------------------------------------------------------
   10. GLOBAL REDUCED-MOTION RULE
   When set, resolves all motion utilities (animation-core.js
   and any CSS transition/animation) to an instant, no-motion
   state. This is the single global switch every later phase's
   motion depends on.
---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}