/* Samenwerkingspagina's (kringen, studieverenigingen, creators), 4/10/2026.
   Zelfde designtaal als de pilotpagina voor instellingen (apps/pilot):
   donkergroene systeembalk met gouden lijn, genummerde blokken, panelen,
   tijdlijn en strip. Lettertype = Inter uit /fonts/fonts.css (zelf gehost). */

:root {
  --sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --sys: #0A3026;
  --sys-2: #0F3D31;
  --sys-lijn: #2A5A4B;
  --sys-tekst: #E8F1EC;
  --sys-mut: #A9C2B7;
  --canvas: #F1F4F2;
  --paper: #FFFFFF;
  --line: #D5DDD8;
  --line-soft: #E7ECEA;
  --ink: #191E1B;
  --ink-soft: #3A4540;
  --muted: #56615B;
  --accent: #0C4738;
  --accent-2: #165242;
  --accent-tint: #E8F1EC;
  --gold: #8B7355;
  --maxw: 1120px;
  --pad-x: clamp(1rem, 3vw, 2rem);
  --section-y: clamp(2rem, 5vw, 3.25rem);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans); font-size: 15px; line-height: 1.6; color: var(--ink);
  background: var(--canvas); display: flex; flex-direction: column; min-height: 100vh;
}
a { color: var(--accent); }
.in { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x); }
.label { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.skiplink { position: absolute; left: -9999px; }
.skiplink:focus { left: 1rem; top: 0.5rem; z-index: 50; background: var(--paper); padding: 0.5rem 0.8rem; border: 2px solid var(--accent); }

/* systeembalk */
.sys { position: sticky; top: 0; z-index: 20; background: var(--sys); color: var(--sys-tekst); border-top: 3px solid var(--gold); }
.sys .in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 52px; }
.merk { display: inline-flex; align-items: center; gap: 0.55rem; color: inherit; text-decoration: none; min-width: 0; white-space: nowrap; }
.merk svg { width: 26px; height: 26px; display: block; color: #fff; }
.merk b { font-size: 1rem; font-weight: 600; }
.merk .punt { color: var(--sys-mut); }
.merk .sub { font-size: 0.9rem; }
.sys-cta { font-size: 0.85rem; font-weight: 500; color: #fff; text-decoration: none; white-space: nowrap; border: 1px solid var(--sys-lijn); padding: 0.45rem 0.85rem; }
.sys-cta:hover { background: var(--sys-2); border-color: var(--sys-mut); }

nav.tabs { background: var(--paper); border-bottom: 1px solid var(--line); }
nav.tabs .in { display: flex; overflow-x: auto; }
nav.tabs a { font-size: 0.875rem; font-weight: 500; color: var(--muted); text-decoration: none; white-space: nowrap; padding: 0.85rem 1rem 0.75rem; border-bottom: 3px solid transparent; }
nav.tabs a:first-child { padding-left: 0; }
nav.tabs a:hover { color: var(--ink); border-bottom-color: var(--accent); }

/* pagina */
main { padding: var(--section-y) 0 calc(var(--section-y) * 1.3); flex: 1; }
.kop { margin-bottom: 1.6rem; }
h1 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); line-height: 1.15; letter-spacing: -0.015em; font-weight: 650; margin-top: 0.4rem; max-width: 26ch; }
.intro { font-size: 1.04rem; color: var(--ink-soft); max-width: 70ch; margin-top: 0.8rem; }
.intro + .intro { margin-top: 0.6rem; }
.noot { font-size: 0.9rem; color: var(--ink-soft); max-width: 70ch; margin-top: 0.8rem; }
.noot span { display: block; color: var(--muted); font-size: 0.84rem; margin-top: 0.15rem; }
.knoppen { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.3rem; }
.knop { display: inline-block; font-size: 0.9rem; font-weight: 600; text-decoration: none; padding: 0.65rem 1.1rem; border: 1px solid var(--accent); background: var(--accent); color: #fff; }
.knop:hover { background: var(--accent-2); }
.knop.stil { background: var(--paper); color: var(--accent); }
.knop.stil:hover { background: var(--accent-tint); }

.strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 2rem 0 2.4rem; }
.strip div { background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--accent); padding: 0.9rem 1rem; margin-left: -1px; }
.strip div:first-child { margin-left: 0; }
.strip dd { font-size: 0.95rem; font-weight: 600; margin-top: 0.3rem; }

section.blok { margin-top: 2.6rem; scroll-margin-top: 110px; }
.blok-kop { display: flex; align-items: baseline; gap: 0.8rem; margin-bottom: 0.9rem; }
.blok-kop .nr { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; color: var(--gold); }
h2 { font-size: 1.25rem; font-weight: 650; letter-spacing: -0.01em; }

.paneel { background: var(--paper); border: 1px solid var(--line); }
.paneel + .paneel { margin-top: -1px; }
.paneel-lijf { padding: 1.3rem 1.4rem; }
.paneel-lijf p { max-width: 75ch; }
.paneel-lijf p + p { margin-top: 0.7rem; }
.paneel-lijf .label { margin-bottom: 0.5rem; }
.paneel.accent { border-left: 3px solid var(--accent); }

.raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.raster.twee { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raster > div { padding: 1.2rem 1.4rem 1.3rem; border-left: 1px solid var(--line-soft); }
.raster > div:first-child { border-left: 0; }
.raster h3 { font-size: 0.98rem; font-weight: 600; margin: 0.35rem 0 0.4rem; }
.raster p { font-size: 0.9rem; color: var(--ink-soft); }
.raster p + p { margin-top: 0.5rem; }

ul.punten { padding-left: 1.1rem; display: grid; gap: 0.4rem; font-size: 0.92rem; color: var(--ink-soft); max-width: 78ch; }
.paneel-lijf p + ul.punten, .paneel-lijf .label + ul.punten { margin-top: 0.5rem; }

.tijdlijn { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tijdlijn li { background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--accent); margin-left: -1px; padding: 0.9rem 1rem; font-size: 0.88rem; color: var(--ink-soft); }
.tijdlijn li:first-child { margin-left: 0; }
.tijdlijn .label { display: block; margin-bottom: 0.3rem; }
.tijdlijn b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 0.25rem; }

.citaat { background: var(--canvas); border-left: 3px solid var(--gold); padding: 0.9rem 1.1rem; font-size: 0.93rem; color: var(--ink); max-width: 75ch; margin-top: 0.7rem; }
.downloads { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.9rem; }

.faq details { border-top: 1px solid var(--line-soft); }
.faq details:first-child { border-top: 0; }
.faq summary { cursor: pointer; padding: 0.9rem 1.4rem; font-weight: 600; font-size: 0.94rem; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: '+'; display: inline-block; width: 1.1rem; color: var(--accent); }
.faq details[open] summary::before { content: '\2212'; }
.faq details p { padding: 0 1.4rem 1rem 2.5rem; font-size: 0.92rem; color: var(--ink-soft); max-width: 80ch; }

.contact { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; border-left: 3px solid var(--accent); }
.contact p { font-size: 0.95rem; color: var(--ink-soft); max-width: 60ch; }

/* gedeeld interne linkblok (geïnjecteerd door scripts/inject-seo-links.mjs) */
.lp-related { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 32px var(--pad-x) 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px 32px; border-top: 1px solid var(--line); font-size: 0.9rem; }
.lp-related-title { margin: 0 0 8px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.lp-related ul { list-style: none; margin: 0; padding: 0; }
.lp-related li { margin: 0 0 6px; }
.lp-related a { color: var(--accent); text-decoration: none; }
.lp-related a:hover { text-decoration: underline; }

/* voet */
.lp-footer { background: var(--sys); color: var(--sys-tekst); border-top: 3px solid var(--gold); }
.lp-footer .in { padding-top: 2rem; padding-bottom: 1.6rem; }
.lp-footer a { color: #fff; }
.voet-kop { display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap; padding-bottom: 1.2rem; border-bottom: 1px solid var(--sys-lijn); }
.voet-titel { font-size: 1.2rem; font-weight: 600; color: #fff; letter-spacing: -0.01em; }
.voet-onder { padding-top: 1rem; font-size: 0.76rem; color: var(--sys-mut); display: grid; gap: 0.4rem; }

@media (max-width: 960px) {
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip div { margin-left: 0; margin-top: -1px; }
  .raster, .raster.twee { grid-template-columns: 1fr; }
  .raster > div { border-left: 0; border-top: 1px solid var(--line-soft); }
  .raster > div:first-child { border-top: 0; }
  .tijdlijn { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tijdlijn li { margin-left: 0; margin-top: -1px; }
}
@media (max-width: 600px) {
  .strip, .tijdlijn { grid-template-columns: 1fr; }
  .merk .punt, .merk .sub { display: none; }
}

/* aanvraagformulier (lezing) */
.formulier { display: grid; gap: 0.8rem; max-width: 640px; }
.formulier label { display: grid; gap: 0.3rem; font-size: 0.86rem; font-weight: 600; color: var(--ink); }
.formulier label .veld span { font-weight: 400; color: var(--muted); }
.formulier input, .formulier textarea { font: inherit; font-weight: 400; font-size: 0.95rem; padding: 0.6rem 0.7rem; border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 0; width: 100%; }
.formulier input:focus, .formulier textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.formulier .knop { justify-self: start; cursor: pointer; font-family: inherit; }
.formulier .knop:disabled { opacity: 0.6; cursor: default; }
.formulier .honing { position: absolute; left: -9999px; }
.form-melding { font-weight: 600; color: var(--accent); min-height: 1.2em; }
.form-melding.fout { color: #8A2B1F; }
.noot.privacy { font-size: 0.8rem; color: var(--muted); margin-top: 1rem; max-width: 75ch; }

/* aanmeldformulier kringen (14/10) */
.aanmeld { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); border: 1px solid var(--sys); background: var(--paper); }
.aanmeld-uitleg { background: var(--sys); color: var(--sys-tekst); padding: clamp(1.25rem, 3vw, 2rem); display: flex; flex-direction: column; gap: 0.9rem; }
.aanmeld-uitleg .label { color: var(--sys-mut); }
.aanmeld-titel { font-size: clamp(1.35rem, 2.6vw, 1.75rem); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; margin: 0; }
.aanmeld-stappen { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.85rem; counter-reset: none; }
.aanmeld-stappen li { display: grid; grid-template-columns: 1.9rem 1fr; gap: 0.7rem; align-items: start; font-size: 0.92rem; line-height: 1.5; color: var(--sys-tekst); }
.aanmeld-stappen li span { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border: 1px solid var(--sys-lijn); font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--sys-mut); }
.aanmeld-kaart { padding: clamp(1.25rem, 3vw, 2rem); display: grid; gap: 1rem; align-content: start; }
.aanmeld-form { max-width: none; }
.aanmeld-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 1rem; }
.aanmeld-form input::placeholder { color: #9AA59F; }
.aanmeld-form input:user-invalid { border-color: #8A2B1F; }
.insta-veld { display: flex; align-items: stretch; }
.insta-at { display: grid; place-items: center; padding: 0 0.65rem; border: 1px solid var(--line); border-right: 0; background: var(--accent-tint); color: var(--accent); font-weight: 700; }
.insta-veld input { flex: 1; min-width: 0; }
.insta-veld:focus-within .insta-at { border-color: var(--accent); }
.aanmeld-knop { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1.3rem; font-size: 0.95rem; }
.aanmeld-knop .knop-pijl { transition: transform 160ms ease; }
.aanmeld-knop:hover .knop-pijl { transform: translateX(3px); }
.aanmeld-form.bezig .knop-pijl { animation: aanmeld-puls 900ms ease-in-out infinite; }
@keyframes aanmeld-puls { 50% { transform: translateX(4px); opacity: 0.5; } }
.aanmeld-klaar { display: grid; gap: 0.6rem; justify-items: start; outline: none; animation: aanmeld-in 320ms ease-out; }
.aanmeld-klaar[hidden] { display: none; }
.aanmeld-klaar .aanmeld-titel { color: var(--accent); }
.vinkje { width: 52px; height: 52px; }
.vinkje circle { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 151; stroke-dashoffset: 151; animation: vinkje-teken 500ms ease-out forwards; }
.vinkje path { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: square; stroke-dasharray: 36; stroke-dashoffset: 36; animation: vinkje-teken 300ms 420ms ease-out forwards; }
@keyframes vinkje-teken { to { stroke-dashoffset: 0; } }
@keyframes aanmeld-in { from { opacity: 0; transform: translateY(6px); } }
.aanmeld-kaart .privacy { margin: 0; font-size: 0.74rem; }
@media (max-width: 760px) {
  .aanmeld { grid-template-columns: 1fr; }
  .aanmeld-raster { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .aanmeld-klaar, .vinkje circle, .vinkje path, .aanmeld-form.bezig .knop-pijl { animation: none; stroke-dashoffset: 0; }
}