/* ==========================================================================
   NavigatieInbouwen.nl, laag 1: tokens, reset, basis, knoppen
   Tokens 1-op-1 overgenomen uit de mockup (:root).
   ========================================================================== */

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

:root {
  --black: #000000;
  --dark: #0a0a0a;
  --dark-2: #121212;
  --dark-3: #1a1a1a;
  --yellow: #febe14;
  --yellow-deep: #e0a800;
  --green: #23a455;
  --green-deep: #1b8443;
  --white: #ffffff;
  --off: #f6f6f4;
  --grey: #9a9a96;
  --grey-dark: #555552;
  --line-dark: #242424;
  --line-light: #e6e4de;

  --font-head: 'Sora', sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  --max: 1240px;
  --gutter: clamp(1.2rem, 4vw, 2.5rem);
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--white);
  background: var(--black);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
ul { list-style: none; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }

.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

h1, h2, h3 { font-family: var(--font-head); line-height: 1.12; letter-spacing: -0.02em; }

.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 16px;
}
.kicker::before { content: ""; width: 28px; height: 2px; background: var(--yellow); }
.kicker--center { justify-content: center; }

.section-title { font-size: clamp(28px, 3.6vw, 44px); font-weight: 700; }
.section-sub { color: var(--grey); margin-top: 14px; max-width: 60ch; font-size: 16px; }
.section-sub--center { margin-left: auto; margin-right: auto; }

/* ---------- Knoppen ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 30px;
  border-radius: var(--radius-pill);
  font-weight: 600; font-size: 15.5px;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), transform 0.2s var(--ease), box-shadow 0.25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--green {
  background: var(--green); color: var(--white);
  box-shadow: 0 8px 28px rgba(35, 164, 85, 0.35);
}
.btn--green:hover { background: var(--green-deep); box-shadow: 0 12px 34px rgba(35, 164, 85, 0.45); }
.btn--yellow { background: var(--yellow); color: var(--black); }
.btn--yellow:hover { background: var(--yellow-deep); }
.btn--ghost { background: transparent; color: var(--white); border: 1.5px solid rgba(255,255,255,0.3); }
.btn--ghost:hover { border-color: var(--yellow); color: var(--yellow); }

a:focus-visible, button:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 6px;
}

/* Toegankelijkheid: skip-link + screenreader-tekst */
.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0;
  position: absolute; word-wrap: normal !important;
}
.skip-link:focus {
  clip: auto; clip-path: none; height: auto; width: auto;
  left: 12px; top: 12px; z-index: 100000;
  background: var(--yellow); color: var(--black);
  padding: 12px 20px; border-radius: var(--radius);
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}