/* ═══════════════════════════════════════════════════════════════════════════
   GDU website — shared design layer (3 Nov 2026)
   Loaded after each page's own styles, so these values win. One place for the
   things every page shares: width, type scale, colour contrast, focus, header.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Fill large screens: content grows to 1720px with a fluid gutter (was a fixed 1200px). */
  --max: 1720px;
  --gutter: clamp(1.25rem, 3.2vw, 3rem);
  /* Secondary text dark enough to read on cream (was #6b6560, about 4.3:1; now about 6.6:1). */
  --muted: #514b45;
  --border: rgba(14, 14, 14, 0.13);
  --focus: #d4a017;
}

/* Type scales with the screen: the same rem-based pages read larger on big displays. */
html { font-size: 16px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (min-width: 1440px) { html { font-size: 16.5px; } }
@media (min-width: 1680px) { html { font-size: 17.5px; } }
@media (min-width: 2200px) { html { font-size: 19px; } }
body { text-rendering: optimizeLegibility; font-feature-settings: "ss01" on, "cv11" on; }

/* Gutters follow the screen instead of a fixed 2rem. */
.section, .nav-inner, .page-hero-content, .selector-inner, .main-content, .footer-inner, .footer-grid {
  padding-left: var(--gutter) !important;
  padding-right: var(--gutter) !important;
}

/* Small print that was too small to read. */
.section-desc { font-size: 0.95rem !important; line-height: 1.7; }
.section-eyebrow { font-size: 0.78rem !important; }
.metric-name, .county-meta, .card-meta, .report-meta { font-size: max(0.82rem, 13px); }

/* Keyboard focus that can be seen on every background. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus) !important;
  outline-offset: 3px !important;
  border-radius: 4px;
}

/* Header: the GDU mark stays on phones (it was hidden below 769px). */
@media (max-width: 768px) {
  .nav-inner { height: 76px; gap: 0.75rem; }
  .brand-logo { height: 60px; }
  .brand-logo-2-wrap { display: flex !important; margin-left: auto; }
  .brand-logo-2 { height: 52px; }
}

/* Respect "reduce motion". */
@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; }
}