/* ============================================================
   THRESHOLDS — design system
   Navy / Teal / Jade / Mint / Banaan / Ivory / Graphite
   Archivo (900 headlines) + JetBrains Mono (labels)
   80% neutraal · 15% supporting · 5% banaan — banaan is zout, geen saus.
   ============================================================ */

:root {
  --color-navy: #1E3D52;
  --color-navy-deep: #15304A;
  --color-teal: #1B6F7E;
  --color-jade: #22C3A0;
  --color-mint: #9CE5C8;
  --color-banana: #F4CB46;
  --color-ivory: #F5F2EB;
  --color-ivory-warm: #ECE7D8;
  --color-graphite: #2D3238;
  --color-graphite-soft: #5A6068;
  --color-rule: #DDD8C8;

  --nav-h: 76px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: 'Archivo', system-ui, sans-serif;
  background-color: var(--color-ivory);
  color: var(--color-graphite);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- focus visibility (WCAG) ---------- */
a, button, input, textarea, summary {
  outline-offset: 3px;
}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--color-jade);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- skip link ---------- */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  background: var(--color-navy);
  color: var(--color-ivory);
  padding: .75rem 1.25rem;
  z-index: 100;
  border-radius: 4px;
  transition: top .2s var(--ease);
}
.skip-link:focus {
  top: 1rem;
}

/* ---------- balanced headings ---------- */
h1, h2, h3 {
  text-wrap: balance;
}
p {
  text-wrap: pretty;
}

/* ---------- eyebrow dash ---------- */
.eyebrow::before {
  content: '—';
  opacity: .85;
}

/* ---------- highlight marker ---------- */
.hl-banana {
  background: var(--color-banana);
  color: var(--color-navy);
  padding: 0 .14em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ---------- reveal-on-scroll ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- mobile drawer ---------- */
#mobile-drawer {
  transform: translateX(100%);
  transition: transform .35s var(--ease);
}
#mobile-drawer.is-open {
  transform: translateX(0);
}
body.drawer-open {
  overflow: hidden;
}

/* ---------- FAQ / accordion (native <details>) ---------- */
details.faq-item summary {
  list-style: none;
  cursor: pointer;
}
details.faq-item summary::-webkit-details-marker {
  display: none;
}
details.faq-item .faq-icon {
  transition: transform .25s var(--ease);
}
details.faq-item[open] .faq-icon {
  transform: rotate(45deg);
}

/* ---------- cookie banner ---------- */
#cookie-banner {
  transform: translateY(120%);
  transition: transform .4s var(--ease);
}
#cookie-banner.is-visible {
  transform: translateY(0);
}

/* ---------- nav active state ---------- */
.nav-link[aria-current="page"] {
  color: var(--color-navy);
  font-weight: 700;
  position: relative;
}
.nav-link[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--color-jade);
  border-radius: 1px;
}

/* ---------- lazy image fade-in ---------- */
img[loading="lazy"] {
  background-color: var(--color-rule);
}

/* ---------- selection ---------- */
::selection {
  background: var(--color-banana);
  color: var(--color-navy);
}