/* =====================================================================
   mathreintjens.nl — menukleuren en scheiding
   ---------------------------------------------------------------------
   Plaats dit bestand op /css/menu.css en zet in de <head> van ELKE pagina
   (index.html, de zes boekpagina's, ikwashier/, straks scholen/), ná de
   bestaande <style>-blokken:

     <link rel="stylesheet" href="/css/menu.css">

   Of plak de inhoud onderaan in het laatste <style>-blok van elke pagina.
   De regels hieronder overschrijven alleen de kleur, de tussenruimte en
   de tikgrootte van de menuonderdelen; al het andere blijft zoals het is.
   ===================================================================== */

/* 1. Eén nuance per onderdeel. Allemaal familie van --gloed-2 (#9dc4ee).
      Twee paletten; palet A staat aan. Palet B zet u aan door de
      commentaartekens rond dat blok te verwijderen (en die rond A te zetten). */

/* Palet A — fijn: alles blijft blauw, alleen de helderheid verschilt.     */
:root{
  --nv-verhaal : #c7dbf5;   /* licht, koel: het verhaal                   */
  --nv-boeken  : #eaf2ff;   /* het helderst: de hoofdzaak (= --gloed)     */
  --nv-vragen  : #9dc4ee;   /* = --gloed-2, de huidige kleur              */
  --nv-hand    : #b9c9dc;   /* iets grijzer, als kalk op steen            */
  --nv-contact : #86a6cc;   /* het rustigst                               */
  --nv-scheiding: rgba(157,196,238,.22);
}

/* Palet B — met accent: "Ik was hier" in de gele oker van de handen op de
   wand (dezelfde familie als de handafdrukken). Nu uitgeschakeld.          */
/*
:root{
  --nv-verhaal : #b9d4f3;
  --nv-boeken  : #eaf2ff;
  --nv-vragen  : #9dc4ee;
  --nv-hand    : #e6c98f;
  --nv-contact : #8fb0d6;
}
*/

/* 2. Scheiding tussen de onderdelen: een haarlijn in plaats van alleen
      witruimte. Dit is wat op mobiel het grootste verschil maakt:
      "IK WAS HIER" leest niet meer als drie losse menuwoorden.
      (De boekenplank blijft position:static, anders verspringt het paneel.) */
.balk nav{ gap:0; align-items:stretch; }
.balk nav > a,
.balk nav > .plank > summary{
  display:flex; align-items:center;
  padding:.55rem .8rem;          /* tikvlak van ±44px hoog               */
  white-space:nowrap;
  position:relative;
}
.balk nav > .plank{ position:static; display:flex; align-items:stretch; }
.balk nav > a + a::before,
.balk nav > .plank + a::before,
.balk nav > a + .plank > summary::before{
  content:""; position:absolute; left:0; top:50%;
  height:.95em; width:1px;
  background:var(--nv-scheiding);
  transform:translateY(-50%);
}
.balk nav > a:last-child{ padding-right:0; }

/* 3. De kleuren zelf. */
.balk nav a,
.plank summary{ color:var(--nv-kleur, var(--gloed-2)); transition:color .2s; }
.balk nav a[href$="#verhaal"]  { --nv-kleur:var(--nv-verhaal); }
.plank summary                 { --nv-kleur:var(--nv-boeken);  }
.balk nav a[href$="#vragen"]   { --nv-kleur:var(--nv-vragen);  }
.balk nav a[href*="ikwashier"] { --nv-kleur:var(--nv-hand);    }
.balk nav a[href$="#contact"]  { --nv-kleur:var(--nv-contact); }
.balk nav a[href$="#boeken"]   { --nv-kleur:var(--nv-boeken);  }   /* de wandpagina heeft Boeken als gewone link */
.balk nav > a[aria-current]    { --nv-kleur:var(--nv-hand);    }   /* op de wandpagina: "Ik was hier" is de huidige */

/* 4. Aanwijzen en openstaan: wit, met een streepje in de eigen kleur.
      Zo is het verschil niet alléén kleur (ook voor wie kleuren slecht
      onderscheidt).                                                       */
.balk nav a:hover,
.plank summary:hover,
.plank[open] summary{
  color:#fff;
  box-shadow:inset 0 -2px 0 var(--nv-kleur, var(--gloed-2));
}
.balk nav a[aria-current]{ box-shadow:inset 0 -2px 0 var(--nv-kleur, var(--gloed-2)); }

/* 5. Mobiel: iets groter, iets minder letterafstand, ruimer tikvlak.
      (De oude regels zetten de letter op .62rem met .08em; dat was het
      moment waarop de woorden in elkaar gingen lopen.)                    */
@media (max-width:760px){
  .balk nav{ font-size:.7rem; letter-spacing:.08em; }
  .balk nav > a, .balk nav > .plank > summary{ padding:.6rem .65rem; }
}
@media (max-width:640px){
  /* "Verhaal" en "Vragen" zijn hier verborgen; geen haarlijn vóór het
     eerste zichtbare onderdeel.                                           */
  .balk nav > .nv-klein:first-child + .plank > summary::before,
  .balk nav > .nv-klein:first-child + a::before{ display:none; }
}
@media (max-width:420px){
  .balk nav{ font-size:.66rem; letter-spacing:.06em; }
  .balk nav > a, .balk nav > .plank > summary{ padding:.6rem .55rem; }
}

/* 6. Scholen als uitklapmenu (27 oktober 2026): eigen kleur, en op de
      telefoon verborgen zoals de gewone link ervoor (daar staat
      "Voor scholen" op de voorpagina en in de voettekst).               */
.plank-scholen summary{ --nv-kleur:var(--nv-vragen); }
@media (max-width:640px){ .balk nav > details.nv-klein{ display:none; } }