/* ==========================================================================
   base.css — gedeelde basis: design tokens (licht + donker), de .btn-basis
   en de footer.

   Wordt door alle pagina's geladen via <link rel="stylesheet"
   href="/assets/base.css">, vóór header.css en vóór het pagina-eigen
   <style>-blok. header.css leunt op de tokens die hier staan.

   Wijzig tokens, .btn of de footer UITSLUITEND hier.

   Bewust NIET hier:
   - .ctaband/.band knopvarianten (.btn-primary, .btn-ghost, ...). Die zijn
     sectie-gebonden; ze globaal maken zou ze op andere pagina's laten
     aanslaan waar ze nu niet gelden.
   - de [data-theme="dark"] footer-regels. Die hebben dezelfde specificiteit
     als de donkere blokken die per pagina inline staan (.stem.navy,
     .chatkop, .toolbox) en winnen nu op volgorde. Hierheen verplaatsen zou
     die volgorde omdraaien en de witte hover in de footer slopen.
   ========================================================================== */

:root {
    --color-paper:           #FFFFFF;
    --color-ink:             #222222;
    --color-ink-2:           #4F4F4F;
    --color-blue:            #00A1E1;
    --color-blue-hover:      #0088C8;
    --color-blue-dark:       #006EAE;
    --color-navy:            #00004D;
    --color-navy-hover:      #000034;
    --color-baby-blue:       #D9F1FB;
    --color-baby-blue-light: #ECF8FD;
    --color-red:             #DC2E29;
    --color-red-dark:        #CD1712;
    --color-border:          rgba(34, 34, 34, 0.16);
    --radius-s: 2px;
    --radius-m: 4px;
    --radius-l: 8px;
    --radius-xl: 16px;
    --radius-round: 999px;
    --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --font-body: 'Mulish', Avenir, Arial, sans-serif;
    --dur: .15s;
    --ease-out: cubic-bezier(.2,.7,.2,1);
    --color-navy-text:       #00004D;
    --color-on-brand:        #FFFFFF;
    color-scheme: light;
  }
[data-theme="dark"] {
    --color-paper:           #0B0E1F;
    --color-ink:             #EDEFF7;
    --color-ink-2:           #A9AFC6;
    --color-blue:            #00A1E2;
    --color-blue-hover:      #5CC7ED;
    --color-blue-dark:       #7DD3F0;
    --color-navy:            #00004D;
    --color-navy-hover:      #000034;
    --color-navy-text:       #AFC2EE;
    --color-on-brand:        #FFFFFF;
    --color-baby-blue:       #14203A;
    --color-baby-blue-light: #101A30;
    --color-red:             #E4322E;
    --color-red-dark:        #DC2E29;
    --color-border:          rgba(237, 239, 247, 0.18);
    color-scheme: dark;
  }
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-family: var(--font-body); font-weight: 800; font-size: .95rem;
    text-decoration: none; white-space: nowrap;
    padding: .85rem 1.6rem; border-radius: var(--radius-m);
    border: 0; cursor: pointer;
    transition: background-color var(--dur), color var(--dur), border-color var(--dur);
  }
.footband { background: var(--color-navy); }
footer.site {
    padding: 2.5rem 0 3rem;
    display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  }
footer.site, footer.site a { color: var(--color-baby-blue); font-size: .85rem; text-decoration: none; }
footer.site a { text-decoration: underline; text-underline-offset: 3px; transition: color var(--dur); }
footer.site a:hover { color: var(--color-on-brand); }
footer.site a:focus-visible { outline-color: var(--color-baby-blue); }
footer.site .label {
    font-family: var(--font-display); font-weight: 600; font-size: .95rem;
    letter-spacing: .08em; text-transform: uppercase; color: var(--color-on-brand);
  }

/* Tekst die alleen voor schermlezers bestaat, bijvoorbeeld de aankondiging
   dat een link in een nieuw tabblad opent. Niet `display: none` en niet
   `visibility: hidden`: die halen het element uit de toegankelijkheidsboom en
   dan wordt het juist niet voorgelezen. Vandaar het uitknippen tot 1px. */
.visueel-verborgen {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }


/* leerlijn — de fasen van het leerproces als genummerde baan.
   Gedeeld door voor-onderwijs en hoe-leer-je (NL + EN), vandaar hier en niet
   in een page-style. Mobiel is het een verticale tijdlijn; vanaf 62rem klapt
   het om naar een horizontale baan waarin de rail doorloopt van bol 1 tot de
   laatste bol. De rail is per <li> een ::after die van celrand tot celrand
   loopt; omdat de grid gap 0 is sluiten de segmenten naadloos op elkaar aan. */
.leerlijn{ list-style: none; display: grid; gap: 0; margin-top: 2rem; counter-reset: fase; }
.leerlijn li{ position: relative; counter-increment: fase; padding: 0 0 1.6rem 3.2rem; }
.leerlijn li:last-child{ padding-bottom: 0; }
.leerlijn li::before{
    content: counter(fase); position: absolute; top: 0; left: 0; z-index: 1;
    width: 2.1rem; height: 2.1rem; border-radius: var(--radius-round);
    background: var(--color-navy); border: 2px solid var(--color-blue);
    /* vast navy vlak in beide thema's: literal wit, geen token */
    color: #FFFFFF; font-family: var(--font-display); font-weight: 600; font-size: .95rem;
    display: grid; place-items: center;
  }
.leerlijn li::after{
    content: ""; position: absolute; left: 1.05rem; top: 2.1rem; bottom: 0;
    width: 2px; margin-left: -1px; background: var(--color-baby-blue);
  }
.leerlijn li:last-child::after{ display: none; }
.leerlijn .fase{
    font-family: var(--font-display); font-weight: 600; font-size: .95rem;
    letter-spacing: .05em; text-transform: uppercase;
    color: var(--color-blue-dark); margin-bottom: .35rem;
  }
/* op hoe-leer-je is de fasenaam een sprong naar de bijbehorende botgroep */
.leerlijn .fase a{ color: inherit; text-decoration: none; }
.leerlijn .fase a:hover{ text-decoration: underline; text-underline-offset: 3px; }
.leerlijn .fase-bots{ font-size: .88rem; color: var(--color-ink-2); margin-bottom: .5rem; }
/* eigen chip in plaats van .waarde: die is niet op elke pagina globaal */
.leerlijn .aantal{
    display: inline-block; font-family: var(--font-display); font-weight: 600;
    font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
    background: var(--color-baby-blue); color: var(--color-blue-dark);
    border-radius: var(--radius-round); padding: .15rem .6rem;
  }
@media (min-width: 62rem){
    .leerlijn{ grid-template-columns: repeat(6, 1fr); margin-top: 2.5rem; }
    .leerlijn li{
      padding: 3rem .7rem 0;
      display: flex; flex-direction: column; align-items: flex-start;
    }
    /* chips op één lijn, ongeacht hoe lang de botopsomming erboven is */
    .leerlijn .aantal{ margin-top: auto; }
    .leerlijn li:first-child{ padding-left: 0; }
    .leerlijn li:last-child{ padding-right: 0; }
    .leerlijn li::after{
      left: 0; right: 0; top: 1.05rem; bottom: auto;
      width: auto; height: 2px; margin-left: 0;
    }
    /* rail loopt van de eerste bol tot de laatste, niet daarbuiten */
    .leerlijn li:first-child::after{ left: 1.05rem; }
    .leerlijn li:last-child::after{ display: block; right: calc(100% - 1.05rem); }
  }