/* Werfstroom — site.css
   Precies drie merkkleuren (merk/huisstijl.md): --donker, --accent, --licht.
   Alles daarnaast is een tint van die drie (color-mix in sRGB, zodat de
   contrasttest het exact kan narekenen). Geen externe bronnen, geen inline
   stijlen (strikte CSP in .htaccess). */

/* ── Lettertypen (zelf gehost, SIL OFL 1.1) ─────────────────────────── */
@font-face { font-family: "Bricolage Grotesque"; src: url("/fonts/bricolage-grotesque-latin.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/fonts/atkinson-hyperlegible-next-latin.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/fonts/atkinson-hyperlegible-next-italic-latin.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }

/* ── Tokens ─────────────────────────────────────────────────────────── */
:root {
  /* de drie merkkleuren */
  --donker: #3E1F47;
  --accent: #FFB38A;
  --licht: #FBF5EF;

  /* tinten van die drie */
  --zacht: color-mix(in srgb, var(--donker) 78%, var(--licht));          /* bijschriften op licht */
  --lijn: color-mix(in srgb, var(--donker) 16%, var(--licht));           /* randen op licht */
  --licht-diep: color-mix(in srgb, var(--donker) 6%, var(--licht));      /* hover op licht */
  --donker-hover: color-mix(in srgb, var(--donker) 86%, var(--licht));   /* hover van donkere knoppen */
  --tekst-op-donker: color-mix(in srgb, var(--licht) 84%, var(--donker));
  --lijn-op-donker: color-mix(in srgb, var(--licht) 20%, var(--donker));
  --vlak-op-donker: color-mix(in srgb, var(--licht) 12%, var(--donker));
  --arcering: color-mix(in srgb, var(--licht) 24%, var(--donker));
  --accent-hover: color-mix(in srgb, var(--accent) 86%, var(--licht));

  --font-kop: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-tekst: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, sans-serif;

  /* typeschaal (ratio ± 1,333; koppen vloeiend) */
  --tekst-xs: 0.8125rem;
  --tekst-sm: 0.9375rem;
  --tekst-basis: 1.0625rem;
  --tekst-lead: clamp(1.1875rem, 1.05rem + 0.5vw, 1.4375rem);
  --kop-3: 1.375rem;
  --kop-2: clamp(2rem, 1.35rem + 2.4vw, 3.25rem);
  --kop-1: clamp(2.75rem, 1.4rem + 5.4vw, 6rem);

  /* ruimte (4pt-schaal) */
  --r-2xs: 0.25rem; --r-xs: 0.5rem; --r-sm: 0.75rem; --r-md: 1rem;
  --r-lg: 1.5rem; --r-xl: 2rem; --r-2xl: 3rem; --r-3xl: 4rem; --r-4xl: 6rem;
  --sectie: clamp(4rem, 2.5rem + 6vw, 8rem);

  --breed: 76rem;
  --maat: 68ch;
  --rand: 1px solid var(--lijn);
  --hoek: 0.5rem;
  --uitloop: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quint */
}

/* ── Basis ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--licht);
  color: var(--donker);
  font-family: var(--font-tekst);
  font-size: var(--tekst-basis);
  line-height: 1.6;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--donker); text-decoration-thickness: 0.08em; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 0.14em; }
:focus-visible { outline: 3px solid var(--donker); outline-offset: 3px; border-radius: 2px; }
.donker :focus-visible, .voet :focus-visible { outline-color: var(--accent); }
h1, h2, h3 { font-family: var(--font-kop); color: var(--donker); margin: 0; font-weight: 800; }
h1 { font-size: var(--kop-1); line-height: 0.98; letter-spacing: -0.035em; }
h2 { font-size: var(--kop-2); line-height: 1.05; letter-spacing: -0.025em; }
h3 { font-size: var(--kop-3); line-height: 1.2; letter-spacing: -0.01em; font-weight: 700; }
p { margin: 0; }
.omhulsel { width: min(100% - 2 * var(--r-lg), var(--breed)); margin-inline: auto; }

.overslaan {
  position: absolute; left: var(--r-md); top: -10rem; z-index: 10;
  background: var(--donker); color: var(--licht); padding: var(--r-sm) var(--r-md); border-radius: var(--hoek);
}
.overslaan:focus { top: var(--r-md); }

/* golflijn uit het beeldmerk, als masker zodat hij elke merkkleur kan aannemen */
.golf {
  height: 24px; background-color: currentColor;
  -webkit-mask: url("/img/golf.svg") repeat-x 0 50% / 60px 24px;
  mask: url("/img/golf.svg") repeat-x 0 50% / 60px 24px;
}

/* ── Knoppen ────────────────────────────────────────────────────────── */
.knop {
  display: inline-flex; align-items: center; gap: var(--r-xs);
  min-height: 3rem; padding: 0.75rem 1.375rem;
  border-radius: 999px; border: 2px solid var(--donker);
  background: var(--donker); color: var(--licht);
  font-family: var(--font-kop); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.005em;
  text-decoration: none; white-space: nowrap;
  transition: transform 200ms var(--uitloop), background-color 200ms var(--uitloop);
}
.knop:hover { background: var(--donker-hover); transform: translateY(-2px); }
.knop:active { transform: translateY(0); }
.knop--klein { min-height: 2.5rem; padding: 0.5rem 1.125rem; font-size: 0.9375rem; }
.pijl { transition: transform 200ms var(--uitloop); }
.knop:hover .pijl, .tekstlink:hover .pijl { transform: translateX(3px); }
.tekstlink { font-weight: 700; display: inline-flex; gap: var(--r-xs); align-items: center; }

/* ── Kop ────────────────────────────────────────────────────────────── */
.kop { border-bottom: var(--rand); }
.kop .omhulsel { display: flex; align-items: center; justify-content: space-between; gap: var(--r-md); min-height: 4.5rem; }
.merk {
  display: inline-flex; align-items: center; gap: 0.625rem;
  font-family: var(--font-kop); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.03em;
  color: var(--donker); text-decoration: none;
}
.merk svg { width: 2.25rem; height: 2.25rem; flex: none; }
/* het beeldmerk volgt de merkkleuren (CSS gaat voor de SVG-attributen) */
.merk svg rect { fill: var(--donker); }
.merk svg path { stroke: var(--accent); }

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero { padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(2rem, 1rem + 3vw, 4rem); }
.hero .omhulsel { display: grid; gap: var(--r-3xl); align-items: center; }
.hero__tekst { display: grid; gap: var(--r-lg); justify-items: start; }
.status {
  display: inline-flex; align-items: center; gap: var(--r-xs);
  padding: 0.375rem 0.875rem 0.375rem 0.625rem; border: var(--rand); border-radius: 1.25rem;
  color: var(--zacht); font-size: var(--tekst-sm); font-weight: 600;
}
.status::before { content: ""; flex: none; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--donker); box-shadow: 0 0 0 3px var(--accent); }
/* markeerstift per regel, precies om de tekst (geen verloop-tekst: de tekst zelf is effen) */
.hero h1 em {
  font-style: normal; color: var(--donker);
  background: linear-gradient(transparent 58%, var(--accent) 58%, var(--accent) 90%, transparent 90%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-inline: 0.04em;
}
.lead { font-size: var(--tekst-lead); line-height: 1.5; max-width: 38rem; }
.acties { display: flex; flex-wrap: wrap; gap: var(--r-md) var(--r-lg); align-items: center; margin-top: var(--r-xs); }

/* Formaten-illustratie: één foto, drie formaten */
.formaten {
  margin: 0; position: relative;
  background: var(--donker); color: var(--licht); border-radius: calc(var(--hoek) * 2);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  display: grid; gap: var(--r-lg);
}
.formaten__golf { color: var(--accent); }
.formaten__rij { display: flex; align-items: flex-end; gap: clamp(0.75rem, 0.5rem + 1vw, 1.25rem); }
.advertentie { flex: 1 1 0; min-width: 0; display: grid; gap: var(--r-xs); }
.advertentie__vlak {
  position: relative; overflow: hidden; border-radius: 0.375rem;
  background:
    repeating-linear-gradient(135deg, transparent 0 10px, var(--arcering) 10px 11px),
    var(--vlak-op-donker);
  display: flex; flex-direction: column; justify-content: flex-end;
  animation: opkomen 900ms var(--uitloop) both;
}
.advertentie--916 .advertentie__vlak { aspect-ratio: 9 / 16; }
.advertentie--45 .advertentie__vlak { aspect-ratio: 4 / 5; animation-delay: 120ms; }
.advertentie--11 .advertentie__vlak { aspect-ratio: 1 / 1; animation-delay: 240ms; }
.advertentie__foto {
  position: absolute; top: 0.5rem; left: 0.5rem;
  font-size: var(--tekst-xs); font-weight: 600; color: var(--tekst-op-donker);
  background: var(--donker); padding: 0.125rem 0.5rem; border-radius: 999px;
}
.advertentie__balk { background: var(--accent); color: var(--donker); padding: 0.5rem 0.625rem 0.625rem; display: grid; gap: 0.125rem; }
.advertentie__functie { font-family: var(--font-kop); font-weight: 800; font-size: clamp(0.8125rem, 0.6rem + 0.6vw, 1.125rem); line-height: 1.1; letter-spacing: -0.01em; }
.advertentie__salaris { font-weight: 700; font-size: clamp(0.75rem, 0.6rem + 0.4vw, 0.9375rem); line-height: 1.25; font-variant-numeric: tabular-nums; }
.advertentie__label { font-family: var(--font-kop); font-weight: 700; font-size: var(--tekst-sm); color: var(--licht); }
.formaten figcaption { font-size: var(--tekst-sm); line-height: 1.55; color: var(--tekst-op-donker); max-width: 34rem; }

@keyframes opkomen { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ── Secties ────────────────────────────────────────────────────────── */
.sectie { padding-block: var(--sectie); }
/* twee lichte secties na elkaar: niet twee keer de ruimte, wel een golflijn als scheiding */
.sectie--licht + .sectie--licht { padding-top: 0; }
.scheiding { color: var(--lijn); margin-bottom: clamp(3rem, 2rem + 4vw, 6rem); grid-column: 1 / -1; }
.sectie__kop { display: grid; gap: var(--r-md); max-width: 46rem; margin-bottom: var(--r-3xl); }
.boventitel { font-family: var(--font-kop); font-weight: 700; font-size: var(--tekst-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--zacht); }

/* Hoe het werkt: drie stappen langs de stroom */
.stappen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--r-2xl); counter-reset: stap; }
.stap { display: grid; gap: var(--r-sm); align-content: start; counter-increment: stap; }
.stap::before {
  content: "0" counter(stap);
  font-family: var(--font-kop); font-weight: 800; font-size: clamp(3.5rem, 2.5rem + 3vw, 5rem); line-height: 0.9; letter-spacing: -0.04em;
  color: var(--donker);
}
.stap p { color: var(--zacht); max-width: 30rem; }
.stappen__golf { color: var(--lijn); margin-bottom: var(--r-2xl); }

/* Donker blok: wat je krijgt */
.donker { background: var(--donker); color: var(--licht); }
.donker h2, .donker h3 { color: var(--licht); }
.donker .boventitel { color: var(--accent); }
.donker p { color: var(--tekst-op-donker); line-height: 1.7; }
.donker a { color: var(--licht); }
.krijgt { display: grid; gap: 0; margin: 0; }
.krijgt__item { display: grid; gap: var(--r-sm); padding-block: var(--r-xl); border-top: 1px solid var(--lijn-op-donker); }
.krijgt__item:last-child { border-bottom: 1px solid var(--lijn-op-donker); }
.krijgt dt { font-family: var(--font-kop); font-weight: 700; font-size: var(--kop-3); line-height: 1.2; color: var(--licht); display: flex; gap: var(--r-sm); align-items: baseline; }
.krijgt dt::before { content: ""; flex: none; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--accent); transform: translateY(-0.1em); }
.krijgt dd { margin: 0; max-width: 40rem; color: var(--tekst-op-donker); }

/* Platforms: typografische rij, geen logo's */
.platforms { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--r-sm) var(--r-lg); }
.platforms li { font-family: var(--font-kop); font-weight: 800; font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem); letter-spacing: -0.03em; color: var(--donker); line-height: 1.15; }
.noot { margin-top: var(--r-xl); color: var(--zacht); max-width: 46rem; }

/* Voor wie */
.voorwie { display: grid; gap: var(--r-2xl); align-items: start; }
.voorwie .hero__tekst p { max-width: 36rem; font-size: var(--tekst-lead); line-height: 1.5; }
.sectoren { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--r-xs); }
.sectoren li { border: 1.5px solid var(--donker); border-radius: 999px; padding: 0.375rem 1rem; font-weight: 600; color: var(--donker); }

/* Contact */
.contact { background: var(--accent); color: var(--donker); }
.contact .omhulsel { display: grid; gap: var(--r-xl); }
.contact h2 { color: var(--donker); max-width: 18ch; }
.contact p { font-size: var(--tekst-lead); line-height: 1.5; max-width: 40rem; }
.contact .acties a:not(.knop) { color: var(--donker); font-weight: 700; }

/* ── Documentpagina's (privacy, voorwaarden, gegevens verwijderen) ─── */
.document { padding-block: clamp(3rem, 2rem + 3vw, 5rem) var(--sectie); }
.document .omhulsel { display: grid; gap: var(--r-3xl); }
.document__kop { display: grid; gap: var(--r-md); max-width: var(--maat); }
.document__kop h1 { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem); }
.versie { color: var(--zacht); font-size: var(--tekst-sm); }
.inhoud { max-width: var(--maat); display: grid; gap: var(--r-md); }
.inhoud h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); margin-top: var(--r-xl); scroll-margin-top: var(--r-lg); }
.inhoud h3 { margin-top: var(--r-sm); }
.inhoud ul, .inhoud ol { margin: 0; padding-left: 1.25rem; display: grid; gap: var(--r-xs); }
.inhoud li::marker { color: var(--donker); font-weight: 700; }
.inhoudsopgave { border: var(--rand); border-radius: var(--hoek); padding: var(--r-lg); max-width: var(--maat); }
.inhoudsopgave h2 { font-size: var(--kop-3); margin: 0 0 var(--r-sm); }
.inhoudsopgave ol { margin: 0; padding-left: 1.25rem; columns: 2 16rem; column-gap: var(--r-xl); }
.inhoudsopgave li { break-inside: avoid; padding-block: 0.125rem; }
.kader { background: var(--licht-diep); border: var(--rand); border-radius: var(--hoek); padding: var(--r-lg); display: grid; gap: var(--r-sm); }
.engels { border-top: 2px solid var(--donker); padding-top: var(--r-xl); margin-top: var(--r-2xl); }

/* 404 */
.nietgevonden { padding-block: var(--sectie); }
.nietgevonden .omhulsel { display: grid; gap: var(--r-lg); justify-items: start; }
.nietgevonden__golf { width: min(20rem, 70vw); color: var(--zacht); }

/* ── Voettekst ──────────────────────────────────────────────────────── */
.voet { background: var(--donker); color: var(--tekst-op-donker); padding-block: var(--r-3xl) var(--r-2xl); font-size: var(--tekst-sm); line-height: 1.7; }
.voet .omhulsel { display: grid; gap: var(--r-2xl); }
.voet .merk { color: var(--licht); }
.voet__gegevens { display: grid; gap: var(--r-2xs); }
.voet__gegevens p:first-of-type { color: var(--licht); font-weight: 600; }
.voet a { color: var(--licht); }
.voet a:hover { color: var(--accent); }
.voet__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--r-xs) var(--r-lg); }
.voet__links a { display: inline-block; padding-block: 0.375rem; }
.voet__onder { border-top: 1px solid var(--lijn-op-donker); padding-top: var(--r-lg); }

/* ── Grotere schermen ───────────────────────────────────────────────── */
@media (min-width: 52rem) {
  .hero .omhulsel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .stappen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--r-xl); }
  .platforms { display: flex; flex-wrap: wrap; gap: var(--r-xs) var(--r-xl); }
  .platforms li:not(:last-child)::after { content: "·"; margin-left: var(--r-xl); color: var(--lijn); }
  .krijgt { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--r-3xl); }
  .krijgt__item:nth-last-child(2) { border-bottom: 1px solid var(--lijn-op-donker); }
  .voorwie { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .contact .omhulsel { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; }
  .voet .omhulsel { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .voet__onder { grid-column: 1 / -1; }
}

/* ── Minder beweging ────────────────────────────────────────────────── */
@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; }
}