/* ==========================================================================
   base.css
   Reset, base typography, and layout primitives used on every page.

   TABLE OF CONTENTS
   1. Reset
   2. Root and body
   3. Typography defaults
   4. Links and focus
   5. Layout primitives (.container, .section)
   6. Utilities (.visually-hidden, .skip-link, .js-only, .no-js-only)
   7. Reduced motion
   ========================================================================== */

/* ----- 1. Reset --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
img, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
p, h1, h2, h3, h4 { overflow-wrap: break-word; }

/* ----- 2. Root and body ------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;           /* turned off under reduced motion (section 7) */
  scroll-padding-top: calc(var(--header-h) + 16px); /* anchors clear the fixed header */
}
body {
  min-height: 100vh;
  background: var(--navy-900);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;                /* safety net: no sideways scroll at 375px */
}

/* ----- 3. Typography defaults ------------------------------------------ */
h1, h2, h3, h4 { line-height: 1.1; font-weight: 600; }

/* Section headline style (Anton, uppercase). Use .display on any h2. */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: 0.92;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

/* Small uppercase caption used for labels and data captions */
.label {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: 1.4;
}

.lede { font-size: var(--fs-body-lg); color: var(--text-secondary); max-width: 60ch; }

/* ----- 4. Links and focus ---------------------------------------------- */
a { color: var(--tide-aqua); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

/* Visible aqua focus ring on every interactive element (WCAG 2.2) */
:focus-visible {
  outline: 2px solid var(--tide-aqua);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ----- 5. Layout primitives -------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--max-width) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (min-width: 640px) { :root { --gutter: 24px; } }

.section { padding-block: var(--section-pad); position: relative; }
.section--alt { background: var(--navy-800); }

/* ----- 6. Utilities ---------------------------------------------------- */
/* Hides text visually but keeps it for screen readers and search engines */
.visually-hidden {
  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: hidden until focused with Tab */
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 12px 20px; border-radius: var(--radius-pill);
  background: var(--tide-aqua); color: var(--on-aqua);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 16px; }

/* main.js adds class "js" to <html>. Use these to show/hide JS-only UI. */
html:not(.js) .js-only { display: none !important; }
html.js .no-js-only { display: none !important; }

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