/* ============================================================================
   BASE — Reset, Typography, Global Defaults
   ============================================================================ */

/* ── Minimal Reset ──────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* Root font-size — every rem-based token in tokens.css scales from this.
     Bumping 16 → 18 raises the entire type scale by one notch:
       --font-size-base 16 → 18, sm 13 → 14.6, md 18 → 20.3, lg 20 → 22.5, etc. */
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  /* Body weight is intentionally medium (500), not normal (400). At our base
     size on a pale pink page the 400 hairlines of Lora/Montserrat read too
     thin — descriptions, helper text, bullets, and radio labels all feel
     anemic. Setting the base here means every component inherits the right
     weight by default instead of each one bumping it locally. */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-relaxed);
  color: var(--text-primary);
  background: var(--page-bg);
}

/* ── Typography ─────────────────────────────────────────────────────────────── */

/* Headings: Montserrat — no uppercase by default */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--text-primary);
}

h1 { font-size: var(--font-size-3xl); margin-bottom: var(--space-lg); }   /* 32px */
h2 { font-size: var(--font-size-xl);  margin-bottom: var(--space-base); } /* 24px */
h3 { font-size: var(--font-size-lg);  margin-bottom: var(--space-md); }   /* 20px */
h4 { font-size: var(--font-size-md);  margin-bottom: var(--space-sm); }   /* 18px */

p {
  margin-bottom: var(--space-md);
  line-height: var(--line-height-relaxed);
}

/* UI elements: Montserrat (links, buttons, nav, labels, breadcrumbs) */
a {
  font-family: var(--font-ui);
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover {
  color: var(--text-link-hover);
  text-decoration: underline;
}

/* Icons inside links/buttons must never show underlines. Material Symbols
   are text ligatures — the browser underlines them like any other text
   when a parent sets text-decoration: underline. display: inline-flex
   creates an atomic inline box that text-decoration from ancestors
   cannot propagate into. This is a foundational global rule. */
a .material-symbols-outlined,
button .material-symbols-outlined {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

button,
input,
select,
textarea {
  font-family: var(--font-ui);
}

label,
legend {
  font-family: var(--font-ui);
}

ul, ol {
  padding-left: var(--space-xl);
  margin-bottom: var(--space-md);
}
li {
  margin-bottom: var(--space-xs);
  line-height: var(--line-height-relaxed);
}

strong, b {
  font-weight: var(--font-weight-bold);
}

/* ── Utility Classes ────────────────────────────────────────────────────────── */
.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;
}

.text-muted {
  color: var(--text-muted);
}

.text-center {
  text-align: center;
}

.font-ui {
  font-family: var(--font-ui);
}

/* ── Focus Styles ───────────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* ── Selection ──────────────────────────────────────────────────────────────── */
::selection {
  background: var(--nyc-red-light);
  color: var(--text-primary);
}

/* ── Icon Font Loading Guard ────────────────────────────────────────────────
   Material Symbols icons are rendered via ligatures — the span's text content
   is the glyph name (e.g. "account_circle"). Before the icon font finishes
   loading, the browser otherwise renders the literal text, which is jarring.

   We hide icons by default and reveal them once <html> gets the
   `.fonts-ready` class (toggled by the document.fonts.ready promise in
   index.html). Space is reserved during load via the parent element's sizing,
   so layout doesn't shift when icons appear. */
.material-symbols-outlined {
  visibility: hidden;
}
html.fonts-ready .material-symbols-outlined {
  visibility: visible;
}