/*
  Lokaal geserveerde fonts. Gegenereerd door tools/fonts.mjs — niet met de hand
  bijwerken. De bestanden staan in src/fonts/ en worden door build.mjs naar
  dist/fonts/ gekopieerd.

  Alleen de subsets latin en latin-ext. font-display: swap zodat tekst meteen
  leesbaar is in de terugvalletter en niet onzichtbaar blijft tot het font er is.
*/
@font-face {
  font-display: swap;
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-display: swap;
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-display: swap;
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/manrope-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-display: swap;
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/manrope-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-display: swap;
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/manrope-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-display: swap;
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/manrope-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
  FestiGo — publieke website
  ==========================

  Merkwaarden overgenomen uit de bestaande site (gemeten 2026-09-10):
  ink #14121A, acid #C8FF2E, paper #EFEDE8, Manrope voor koppen in hoofdletters
  met strakke letterafstand, JetBrains Mono voor tekst en labels.

  De bestaande site zet zwaar in op vlakken, hoofdletters en één felle
  accentkleur. Dat is hier aangehouden, maar leesbaar gemaakt voor pagina's met
  echte tekst: lopende tekst staat niet in hoofdletters en niet in mono op
  paragraaflengte.
*/

:root {
  --ink:        #14121A;
  --ink-2:      #2A2833;
  --ink-3:      #423F4C;
  --acid:       #C8FF2E;
  --acid-dim:   #A8DC1E;
  --acid-deep:  #7FA00F;
  --paper:      #EFEDE8;
  --paper-2:    #E3E1DB;
  --grey:       #9C99A3;
  --grey-2:     #6E6B77;
  --white:      #FFFFFF;

  --font-display: Manrope, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-text:    Manrope, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --measure: 66ch;
  --gutter: clamp(20px, 5vw, 48px);
  --wrap: 1160px;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: clamp(16px, 1.05vw, 17.5px);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.98;
  text-transform: uppercase;
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 6vw, 4.2rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.6rem); margin-top: 0; }
h3 { font-size: clamp(1rem, 1.5vw, 1.2rem); letter-spacing: -0.01em; }

p, li { max-width: var(--measure); }
p { margin: 0 0 1.1em; }

a { color: var(--acid-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

:focus-visible { outline: 3px solid var(--acid-deep); outline-offset: 2px; }

/* --- structuur ---------------------------------------------------------- */

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

section { padding-block: clamp(48px, 7vw, 92px); }

.dark { background: var(--ink); color: var(--paper); }
.dark h1, .dark h2, .dark h3 { color: var(--paper); }
.dark a { color: var(--acid); }
.dark a:hover { color: var(--white); }

.soft { background: var(--paper-2); }

/* --- overslaan-link ----------------------------------------------------- */

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--acid); color: var(--ink);
  padding: 12px 18px; z-index: 100; font-weight: 800;
}
.skip:focus { left: 0; }

/* --- navigatie ---------------------------------------------------------- */

.site-head {
  background: var(--ink);
  border-bottom: 1px solid rgba(255,255,255,.14);
  position: sticky; top: 0; z-index: 50;
}
.site-head .wrap {
  display: flex; align-items: center; gap: 18px;
  flex-wrap: wrap; padding-block: 13px;
}

.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.1rem; letter-spacing: -0.02em; text-transform: uppercase;
  color: var(--paper); text-decoration: none;
}
.brand:hover { color: var(--acid); }
.brand svg { flex: none; }

.site-nav { display: flex; gap: clamp(10px, 1.6vw, 22px); flex-wrap: wrap; margin-left: auto; align-items: center; }
.site-nav a {
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .02em;
  color: var(--grey);
  text-decoration: none;
  padding-block: 4px;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--paper); }
.site-nav a[aria-current="page"] { color: var(--paper); border-bottom-color: var(--acid); }

/* --- knoppen ------------------------------------------------------------ */

.btn {
  display: inline-block;
  background: var(--acid); color: var(--ink);
  font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: .02em;
  font-size: .95rem; padding: 14px 26px;
  text-decoration: none; border: 2px solid var(--acid);
  transition: background .15s ease, color .15s ease;
}
.btn:hover { background: var(--acid-dim); border-color: var(--acid-dim); color: var(--ink); }

.btn-ghost { background: transparent; color: var(--paper); border-color: rgba(255,255,255,.35); }
.btn-ghost:hover { background: rgba(255,255,255,.1); border-color: var(--paper); color: var(--paper); }

.btn-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 1.7em; }

/* --- hero --------------------------------------------------------------- */

.hero { padding-block: clamp(56px, 9vw, 120px); }
.hero p.lead {
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  color: var(--paper); max-width: 56ch;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--acid); margin: 0 0 1em;
}

/* --- roosters ----------------------------------------------------------- */

.grid {
  display: grid; gap: clamp(16px, 2.2vw, 26px);
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  margin-top: 2em;
}

.card {
  background: var(--white);
  border: 1px solid rgba(20,18,26,.14);
  padding: clamp(20px, 2.4vw, 28px);
}
.card h3 { margin-top: 0; }
.card p { max-width: none; }
.card p:last-child { margin-bottom: 0; }

.dark .card { background: var(--ink-2); border-color: rgba(255,255,255,.14); }

.card-num {
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .12em;
  color: var(--acid-deep); display: block; margin-bottom: .8em;
}
.dark .card-num { color: var(--acid); }

/* --- modulelijst -------------------------------------------------------- */

.modules { list-style: none; padding: 0; margin: 2em 0 0; }
.modules li {
  border-top: 1px solid rgba(20,18,26,.14);
  padding: 20px 0;
  max-width: none;
  display: grid;
  gap: 4px 26px;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
}
.dark .modules li { border-color: rgba(255,255,255,.14); }
.modules li:last-child { border-bottom: 1px solid rgba(20,18,26,.14); }
.dark .modules li:last-child { border-color: rgba(255,255,255,.14); }
.modules h3 { margin: 0; }
.modules p { margin: 0; }
@media (max-width: 640px) { .modules li { grid-template-columns: 1fr; } }

/* --- statusmelding ------------------------------------------------------ */

.status {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: .8rem;
  letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--acid-deep); color: var(--ink);
  padding: 7px 15px;
}
.dark .status { color: var(--acid); border-color: var(--acid); }
.status::before { content: ""; width: 7px; height: 7px; background: var(--acid); flex: none; }

/* --- formulier ---------------------------------------------------------- */

.form { max-width: 560px; margin-top: 2em; }
.form label {
  display: block; font-family: var(--font-mono); font-size: .8rem;
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px;
}
.form input, .form select, .form textarea {
  width: 100%; font: inherit; font-size: 1rem; padding: 11px 13px;
  border: 1px solid rgba(20,18,26,.3); background: var(--white);
  color: var(--ink); margin-bottom: 18px;
}
.form textarea { min-height: 140px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--acid-deep); }

.note { font-size: .9rem; color: var(--grey-2); max-width: var(--measure); }

/* --- kruimelpad --------------------------------------------------------- */

.crumbs { font-family: var(--font-mono); font-size: .78rem; color: var(--grey); padding-top: 22px; letter-spacing: .04em; }
.crumbs a { color: var(--grey); }
.crumbs a:hover { color: var(--paper); }

/* --- voettekst ---------------------------------------------------------- */

.site-foot { background: var(--ink); color: var(--grey); padding-block: clamp(40px, 5vw, 66px); }
.site-foot h2 { font-size: .82rem; color: var(--paper); letter-spacing: .12em; font-family: var(--font-mono); font-weight: 400; }
.site-foot a { color: var(--grey); text-decoration: none; }
.site-foot a:hover { color: var(--acid); text-decoration: underline; }
.site-foot ul { list-style: none; padding: 0; margin: 0; }
.site-foot li { margin-bottom: 8px; }
.foot-grid { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.foot-base {
  margin-top: 36px; padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.14);
  font-family: var(--font-mono); font-size: .78rem;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}

/* --- formuliermeldingen en honeypot ------------------------------------- */

/*
  Het honeypot-veld moet voor een bot bestaan en voor een mens niet. Daarom
  niet `display:none` — sommige bots slaan verborgen velden juist over — maar
  wel volledig uit beeld en uit de tabvolgorde.
*/
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.melding {
  border-left: 4px solid;
  padding: 14px 18px;
  margin: 0 0 1.6em;
  max-width: var(--measure);
  font-size: .97rem;
}
.melding-geslaagd { border-color: var(--acid-deep); background: rgba(200,255,46,.16); }
.melding-fout     { border-color: #C4553D; background: rgba(196,85,61,.10); }

.optioneel {
  font-weight: 400;
  color: var(--grey-2);
  text-transform: none;
  letter-spacing: 0;
}