/* ==========================================================================
   Base — reset, elements, utilities
   ========================================================================== */

/* Self-hosted brand typeface (Instrument Sans, SIL Open Font Licence —
   see /assets/fonts/OFL.txt). Self-hosted rather than loaded from a
   third-party font CDN, so the site has no external runtime dependency. */
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/InstrumentSans-Regular.ttf") format("truetype");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/InstrumentSans-Bold.ttf") format("truetype");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/InstrumentSans-Italic.ttf") format("truetype");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

@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;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01", "tnum" 0;
}

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

/* Icon-set safety net: every icon in /src/lib/icons.js ships without a
   hardcoded width/height so callers control size via CSS. Any icon whose
   container doesn't explicitly size the inner <svg> falls back to a 1em
   box instead of the ~300x150 UA default. More specific component rules
   (e.g. ".feature-card__icon svg") still win via normal cascade rules. */
svg:not([width]) {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

h1, h2, h3, h4 {
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  text-wrap: balance;
}
h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-lg); }

p { color: var(--color-text); }
p + p { margin-top: var(--space-4); }

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

ul, ol { list-style: none; padding: 0; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}
button { cursor: pointer; }

table { border-collapse: collapse; width: 100%; }

/* Numerals used in metrics should always use tabular figures */
.tnum { font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------
   Accessibility primitives
   -------------------------------------------------------------------- */
:focus-visible {
  outline: 2.5px solid var(--color-focus-ring);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: var(--z-modal);
  background: var(--color-navy-900);
  color: #fff;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  font-weight: var(--fw-semibold);
  transition: top var(--duration-base) var(--ease-out);
}
.skip-link:focus {
  top: var(--space-4);
}

.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;
}

/* --------------------------------------------------------------------
   Layout utilities
   -------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--space-24);
}
.section--tight { padding-block: var(--space-16); }
.section--dark {
  background: var(--gradient-navy);
  color: var(--color-text-on-dark);
  position: relative;
  overflow: hidden;
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark p { color: var(--color-text-on-dark-muted); }
.section--subtle { background: var(--color-bg-subtle); }

.stack { display: flex; flex-direction: column; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; }

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

@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------
   Text utilities
   -------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent-text);
}
.section--dark .eyebrow { color: var(--color-green-300); }

.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.lede {
  font-size: var(--fs-md);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
  max-width: 60ch;
}
.section--dark .lede { color: var(--color-text-on-dark-muted); }

.text-muted { color: var(--color-text-muted); }
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }

/* --------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.9rem 1.6rem;
  border-radius: var(--radius-pill);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  line-height: 1;
  white-space: nowrap;
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
  border: 1.5px solid transparent;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--color-orange-500);
  color: #fff;
  box-shadow: var(--shadow-glow-orange);
}
.btn--primary:hover { background: var(--color-orange-600); }

.btn--secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-ink-200);
}
.btn--secondary:hover { border-color: var(--color-ink-900); background: var(--color-ink-50); }

.section--dark .btn--secondary {
  color: #fff;
  border-color: var(--color-border-on-dark);
}
.section--dark .btn--secondary:hover { background: rgba(255,255,255,0.08); }

.btn--ghost {
  background: transparent;
  color: var(--color-accent-text);
  padding-inline: var(--space-2);
}
.btn--ghost:hover { color: var(--color-orange-500); }

.btn--sm { padding: 0.6rem 1.15rem; font-size: var(--fs-xs); }

.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

/* --------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.field label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-ink-700);
}
.field .hint { font-size: var(--fs-2xs); color: var(--color-text-muted); }
.field input,
.field select,
.field textarea {
  border: 1.5px solid var(--color-ink-200);
  border-radius: var(--radius-sm);
  padding: 0.8rem 1rem;
  font-size: var(--fs-sm);
  background: #fff;
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--color-focus-ring);
  box-shadow: 0 0 0 4px rgba(20, 84, 232, 0.12);
  outline: none;
}
.field textarea { resize: vertical; min-height: 110px; }
.field.field--error input,
.field.field--error select,
.field.field--error textarea {
  border-color: #C4300B;
}
.field .error-msg {
  font-size: var(--fs-2xs);
  color: #C4300B;
  display: none;
}
.field.field--error .error-msg { display: block; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 640px) { .field-row { grid-template-columns: 1fr; } }

.checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.checkbox-field input { margin-top: 0.3rem; width: 18px; height: 18px; accent-color: var(--color-orange-500); }
.checkbox-field label { font-size: var(--fs-xs); color: var(--color-text-muted); font-weight: var(--fw-regular); }

.form-status {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  display: none;
}
.form-status[data-state="success"] { display: block; background: var(--color-green-100); color: var(--color-green-700); }
.form-status[data-state="error"] { display: block; background: #FBE7E1; color: #A8320B; }

/* --------------------------------------------------------------------
   Announcement / credibility bar — future-proofing hook, only appears
   when data.announcements is populated (see src/content/data.js and
   src/lib/components.js#announcementBar). Empty by default: renders no
   markup at all, so this rule has no visible effect until content exists.
   -------------------------------------------------------------------- */
.announcement-bar {
  background: var(--color-navy-950);
  color: var(--color-text-on-dark);
  font-size: var(--fs-xs);
}
.announcement-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-6);
  padding-block: var(--space-3);
}
.announcement-bar__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: inherit;
  text-decoration: none;
}
a.announcement-bar__item:hover { text-decoration: underline; }
.announcement-bar__label {
  font-weight: var(--fw-semibold);
  color: var(--color-orange-400);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.announcement-bar__text { color: var(--color-text-on-dark-muted); }