/* ============================================
   Navigatie — bovenbalk, merk, hamburgerknop, uitklapmenu en tabbalk

   GEDEELD EN IDENTIEK IN ELKE TRAINER. Niet met de hand aanpassen; wijzig de
   skill examenflix-huisstijl en synchroniseer. Hoort bij scripts/nav.js.

   De bovenbalk stond eerder per project in main.css, in drie licht
   verschillende varianten. Die staat nu hier, want een navigatiebalk is het
   eerste wat je van een trainer ziet en dus precies wat identiek moet zijn.
   ============================================ */

/* De balk gebruikt .container voor zijn breedte. Rekenen en verkeer hebben die
   klasse al in main.css staan met exact deze waarden; het sjabloon gebruikt
   .wrap en heeft hem niet. Hier definiëren maakt nav.css zelfstandig zonder in
   die twee iets te veranderen. */
.container {
  max-width: var(--max-breedte);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Bovenbalk ---------- */
.site-nav {
  background: var(--paneel);
  border-bottom: 1px solid var(--border-gray);
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-hoogte);
  gap: 16px;
}

/* ---------- Merk ----------
   Het logo is het merk, het label is het vak. Het logo is een afbeelding en
   krijgt een vaste hoogte; de breedte volgt. Zet er nooit de vaknaam ín.

   De hoogte volgt de balk en vult hem voor driekwart: 60px in de balk van
   80px, 48px zodra die onder 1000px naar 64px gaat, 44px op een telefoon
   (daar telt ook de breedte, want logo plus hamburger moeten naast elkaar).
   Het was 44/34/28px en liet 37px lucht staan, wat niets deed: het merk is het
   eerste wat een bezoeker ziet en het woordmerk stond onnodig klein.

   **Verder oprekken maakt de tagline niet leesbaar.** Die is 6,9% van de
   logohoogte: op 60px is hij 4px en leest hij als een lijntje, en pas rond
   110px worden het woorden. Wil je hem echt laten lézen, zet hem dan als
   tekst neer in plaats van het beeld op te rekken. */
.brand-logo {
  display: flex;
  align-items: center;
  flex: none;
}
/* Het logo is transparant en de balk tekent zijn grond: in het lichte register
   de donkerblauwe plaat waarop het woordmerk (wit) leesbaar is, in donker
   niets — dan valt het logo weg in de balk in plaats van er als rechthoek in
   te liggen. Eerder was het een .jpg met de grond ingebakken (#03–0D), en die
   stond in donker zichtbaar af tegen --paneel (#1D2426) (besluit 422). */
.brand-logo img {
  height: 60px;
  width: auto;
  display: block;
  background: var(--logo-grond);
}
/* Het label hoort tégen het logo aan te staan, niet ertussenin te zweven: de
   balk is space-between, dus het label duwt met margin-right:auto alle
   navigatielinks naar rechts en blijft zelf links plakken. */
.brand-label {
  font-family: var(--font-header);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--steengrijs);
  padding-left: 12px;
  margin-left: 12px;
  margin-right: auto;
  border-left: 1px solid var(--border-gray);
  /* Krimpen mag, verdwijnen niet: een lange vaknaam ("Conflictbemiddeling")
     duwde met flex:none het hamburgermenu van een telefoonscherm af. Nu wijkt
     het label als eerste terug, met een beletselteken, en blijft de navigatie
     bereikbaar. */
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brand-label:empty { display: none; }

/* Het label is óók de weg terug: het logo gaat naar het platform, de vaknaam
   naar de voordeur van déze trainer — het equivalent van de knop Start uit de
   tabbalk, die op een breed scherm niet bestaat. Het blijft eruitzien als een
   label (geen onderstreping, geen linkkleur); alleen de muisaanwijzer en de
   hover verraden dat het een link is. De focusring komt uit brand.css. */
a.brand-label { color: var(--steengrijs); text-decoration: none; cursor: pointer; }
@media (hover: hover) {
  a.brand-label:hover { color: var(--rood-tekst); }
}

/* Tekstwoordmerk — alleen als terugval wanneer er (nog) geen logo is.
   Een trainer hoort het logo te gebruiken; controleer-huisstijl.js meldt het
   wanneer dat niet zo is. */
.brand-logo.tekstmerk {
  font-family: var(--font-header);
  font-weight: 800;
  font-size: 19px;
  align-items: baseline;
  gap: 2px;
  color: var(--inktzwart);
}
.brand-logo .brand-accent { color: var(--examenflix-rood); }
.brand-logo .brand-plain { color: var(--inktzwart); }

/* ---------- Hoofdlinks ---------- */
.nav-links {
  display: flex;
  gap: 24px;
  list-style: none;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 6px;
}
.nav-links a {
  color: var(--inktzwart);
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}
@media (hover: hover) {
  .nav-links a:hover { color: var(--rood-tekst); }
}
.nav-links a.actief { color: var(--rood-tekst); }
.nav-links a.nav-cta {
  background: var(--examenflix-rood);
  color: var(--white);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
}
@media (hover: hover) {
  .nav-links a.nav-cta:hover { background: var(--diep-rood); color: var(--white); }
}
.nav-links a.nav-admin { color: var(--steengrijs); font-size: 13px; }

/* Met een sprint- of ranglijstitem erbij past de balk op 1280 net niet meer
   op één regel; iets minder tussenruimte scheelt genoeg. */
@media (max-width: 1400px) {
  .nav-links { gap: 16px; }
}
@media (max-width: 700px) {
  .brand-label { font-size: 12px; padding-left: 8px; }
}

/* ---------- Hamburgerknop ---------- */
.nav-menu-knop {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 42px;
  height: 42px;
  padding: 0 9px;
  border: 1px solid var(--border-gray);
  border-radius: var(--radius-sm);
  background: var(--paneel);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s, background 0.15s;
}
@media (hover: hover) {
  .nav-menu-knop:hover { border-color: var(--examenflix-rood); background: var(--blos); }
}
.nav-menu-knop:focus-visible { outline: 2px solid var(--examenflix-rood); outline-offset: 2px; }
.nav-menu-streep {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--inktzwart);
}

/* Oranje stipje: er staat iets open (nu: de sprint van vandaag). */
.nav-menu-knop .nav-menu-stip {
  position: absolute;
  top: -3px;
  right: -3px;
}
.nav-menu-stip {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--vlam);
  margin-left: 6px;
  flex-shrink: 0;
}

/* ---------- Uitklapmenu ---------- */
.nav-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s;
}
.nav-menu-overlay.open { opacity: 1; visibility: visible; }
body.nav-menu-vast { overflow: hidden; }

.nav-menu-paneel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(340px, 88vw);
  display: flex;
  flex-direction: column;
  background: var(--paneel);
  box-shadow: -8px 0 28px rgba(0, 0, 0, 0.14);
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.nav-menu-overlay.open .nav-menu-paneel { transform: translateX(0); }

.nav-menu-balk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border-gray);
  flex-shrink: 0;
}
.nav-menu-titel {
  font-family: var(--font-header);
  font-weight: 800;
  font-size: 17px;
}
.nav-menu-sluit {
  /* Het kruisje oogt klein, maar het raakvlak eromheen is dat niet: op een
     telefoon is dit de enige manier terug uit het menu. */
  min-width: var(--raakvlak);
  min-height: var(--raakvlak);
  border: none;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  color: var(--steengrijs);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}
@media (hover: hover) {
  .nav-menu-sluit:hover { color: var(--inktzwart); background: var(--mistgrijs); }
}

.nav-menu-inhoud {
  flex: 1;
  overflow-y: auto;
  padding: 12px 0 24px;
  -webkit-overflow-scrolling: touch;
}
.nav-menu-groep { padding: 8px 0; }
.nav-menu-groep + .nav-menu-groep { border-top: 1px solid var(--border-gray); }
.nav-menu-kop {
  padding: 8px 20px 6px;
  font-family: var(--font-header);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--steengrijs);
}
.nav-menu-item {
  min-height: var(--raakvlak);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 20px;
  color: var(--inktzwart);
  font-weight: 600;
  font-size: 15px;
  border-left: 3px solid transparent;
  transition: background 0.12s, border-color 0.12s;
}
@media (hover: hover) {
  .nav-menu-item:hover { background: var(--mistgrijs); }
}
.nav-menu-item.actief {
  border-left-color: var(--examenflix-rood);
  background: var(--blos);
  color: var(--diep-rood);
}
.nav-menu-icoon {
  font-size: 17px;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}

/* De voet neemt de verplaatste <li>'s over: examentype-schakelaar, aanmelden,
   beheer. Die komen uit de bovenbalk en houden hun eigen opmaak, dus hier
   alleen de lijst zelf onder elkaar zetten. */
.nav-menu-voet { padding-top: 14px; }

/* Weergaveschakelaar. Hergebruikt .keuze-switch/.keuze-knop uit main.css — een
   tweede segmentknop bouwen zou twee plekken maken waar dezelfde vorm woont.
   Alleen de marges zijn hier anders, want in het menu staat hij onder een kop
   en niet in een rij tabbladen. */
.nav-thema .keuze-switch { margin: 4px 0 0; }
.nav-thema-uitleg {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--steengrijs);
}
.nav-menu-extra {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 0 20px;
  list-style: none;
}
.nav-menu-extra:empty { display: none; }
.nav-menu-extra li { width: 100%; }
.nav-menu-extra a,
.nav-menu-extra .nav-auth-knop {
  font-size: 14px;
  font-weight: 600;
}

/* ---------- Tabbalk onderaan (mobiel) ---------- */
.tabbalk {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  background: var(--paneel);
  border-top: 1px solid var(--border-gray);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
  padding-bottom: var(--veilig-onder);
}
.tabbalk-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* De ondergrens uit de huisstijl. De tegel is met zijn padding al ongeveer
     zo hoog; dit zorgt dat hij dat blijft als het label ooit korter wordt. */
  min-height: var(--raakvlak);
  gap: 3px;
  padding: 8px 2px 7px;
  color: var(--steengrijs);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  border-top: 2px solid transparent;
  margin-top: -1px;
}
.tabbalk-item.actief {
  color: var(--diep-rood);
  border-top-color: var(--examenflix-rood);
}
.tabbalk-icoon {
  position: relative;
  font-size: 20px;
  line-height: 1;
}
.tabbalk-stip {
  position: absolute;
  top: -2px;
  right: -6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--vlam);
}
.tabbalk-label { letter-spacing: 0.01em; }

/* ---------- Schermbreedtes ---------- */

/* Onder de 1000px hoort de bovenbalk weer één rij te zijn: logo links,
   hamburger rechts. Het blok in main.css zette 'm hieronder in twee rijen
   omdat álle links zichtbaar bleven — die staan nu in het menu. */
@media (max-width: 1000px) {
  .site-nav .container {
    flex-direction: row;
    align-items: center;
    height: 64px;
    gap: 12px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .nav-links { display: none; }
  .nav-menu-extra { display: flex; }   /* in het menu blijft de lijst wél zichtbaar */
  /* De balk is hier 64px in plaats van 80px, dus het logo moet mee terug:
     op 60px hield het maar 2px over en leek het uit de balk te barsten.
     Zelfde verhouding als op een breed scherm — driekwart van de balk. */
  .brand-logo img { height: 48px; }
}

/* Op een telefoon van 375 px past logo + vaklabel + niveauschakelaar +
   hamburger niet meer naast elkaar: het logo mag niet krimpen, dus werd de
   hamburger de balk uit geduwd en scrolde de héle pagina drie pixels zijwaarts.
   Zichtbaar bij rekenen (die heeft een niveauschakelaar 4|3), niet bij verkeer.

   Naast het logo is het vaklabel dan tot een paar pixels samengeknepen. Het
   ging daarom tot 29-09 weg — en daarmee wist een deelnemer op de telefoon
   niet meer in wélke trainer hij oefende of examen deed, terwijl juist daar
   Nederlands 2F en 3F naast elkaar bestaan (besluit 476). Nu krijgt het label
   een eigen regel onder logo en hamburger: de balk wordt twee rijen, de
   bovenste precies zo hoog als de balk van 64px die hij was, samen 79px —
   onder de --nav-hoogte van 80px, waar de plakkende missiebalk op rekent.

   Dit blok staat ná dat voor 1000px, en dat moet: dat blok matcht op een
   telefoon óók en wint bij gelijke specificiteit als het later staat. Hier
   stond ooit een kleinere logohoogte vóór dat blok, en die was stille dode
   code. Het logo houdt onder de 1000px dus overal
   48px, en dat past: op de eerste rij staan alleen logo (213px) en hamburger
   (42px) — op 320px nagemeten, geen zijwaartse overloop. Krijgt die rij ooit
   een derde element, houd dit blok dan ná het 1000px-blok. */
@media (max-width: 460px) {
  .site-nav .container {
    gap: 0 10px;
    padding: 0 14px;
    flex-wrap: wrap;
    height: auto;
  }
  .brand-logo { height: 64px; }
  .brand-label {
    order: 3;
    flex: 1 0 100%;
    margin: -6px 0 0;
    padding: 0 0 4px;
    border-left: 0;
    font-size: 12px;
    line-height: 16px;
  }
}

@media (max-width: 700px) {
  .tabbalk { display: flex; }
  /* Ruimte onder de pagina, anders valt de laatste knop onder de balk. */
  /* De balk zelf is 64px plus de veilige onderrand; de pagina moet allebei
     vrijhouden, anders valt de laatste knop onder de balk of onder de
     home-indicator. */
  body.heeft-tabbalk { padding-bottom: calc(64px + var(--veilig-onder)); }
  .nav-menu-paneel { width: min(320px, 92vw); }
}

@media (prefers-reduced-motion: reduce) {
  .nav-menu-overlay,
  .nav-menu-paneel { transition-duration: 0.01ms; }
}

/* ============================================
   Tekstpagina's (AI-driven, Privacy)
   Leesbare kolom met wat lucht; geen kaarten, want dit is doorlopende tekst.
   ============================================ */
.tekstpagina { max-width: 720px; }
.tekst-lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--steengrijs);
  margin: 0 0 8px;
}
.tekst-blok {
  padding: 26px 0 4px;
  border-top: 1px solid var(--border-gray);
  margin-top: 22px;
}
.tekst-blok h3 {
  font-size: 20px;
  margin-bottom: 12px;
}
.tekst-blok p {
  margin-bottom: 14px;
  line-height: 1.65;
}
.tekst-blok p:last-child { margin-bottom: 0; }
.tekst-blok a { font-weight: 600; text-decoration: underline; }

.tekst-knopje {
  display: inline-block;
  border: 1px solid var(--border-gray);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  background: var(--paneel);
}

.tekst-tabel {
  width: 100%;
  border-collapse: collapse;
  margin: 4px 0 16px;
  font-size: 14px;
}
.tekst-tabel th,
.tekst-tabel td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border-gray);
  vertical-align: top;
}
.tekst-tabel th {
  font-family: var(--font-header);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--steengrijs);
  background: var(--mistgrijs);
}
.tekst-tabel td:last-child { color: var(--steengrijs); white-space: nowrap; }

.tekst-klein { font-size: 13.5px; color: var(--steengrijs); }
.tekst-voet {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--border-gray);
  font-size: 14px;
  color: var(--steengrijs);
}
.tekst-voet a { font-weight: 600; }

@media (max-width: 600px) {
  .tekst-tabel td:last-child { white-space: normal; }
}

/* ---------- Werkbankbalk (beheer) ----------
   Boven elke beheerpagina die over één trainer gaat: terug naar de kaart,
   welke trainer je bekijkt, en de zusterpagina's van diezelfde trainer. Het is
   geen tweede hoofdnavigatie maar een onderverdeling van de eerste, dus
   lichter getekend: geen kader, alleen een lijn eronder. */
.werkbank {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  padding: 0 0 12px;
  margin: 0 0 20px;
  border-bottom: 1px solid var(--border-gray);
}
.werkbank-terug {
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
}
.werkbank-context {
  font-size: 13px;
  color: var(--steengrijs);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Een flex-item krimpt standaard niet onder zijn inhoud, en de breedte van
     een <select> volgt zijn langste optie. Zonder deze regel duwt de langste
     trainernaam de hele pagina op een telefoon over de rand. */
  min-width: 0;
}
.werkbank-context select {
  font: inherit;
  font-size: var(--tekst-invoer);
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid var(--border-gray);
  border-radius: var(--radius-s);
  background: var(--paneel);
  color: var(--inkt);
  max-width: 100%;
  /* Óók hier, niet alleen op het label: het <select> is zelf een flex-item van
     dat label en houdt anders zijn eigen minimumbreedte aan — die van de
     langste trainernaam. `max-width: 100%` helpt dan niet. */
  min-width: 0;
}
.werkbank-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 4px;
  margin-left: auto;
}
.werkbank-tabs a {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--steengrijs);
  padding: 8px 12px;
  border-radius: var(--pil);
  line-height: 1.2;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.werkbank-tabs a[aria-current="page"] {
  background: var(--mistgrijs);
  color: var(--inkt);
}
/* Een tab die zonder trainer niets betekent blijft staan en zegt waarom —
   verdwijnen zou de indeling per pagina laten verspringen. */
.werkbank-tabs a[aria-disabled="true"] { opacity: 0.5; }
@media (hover: hover) {
  .werkbank-tabs a:hover { background: var(--mistgrijs); color: var(--inkt); }
}
@media (max-width: 700px) {
  .werkbank-tabs { margin-left: 0; width: 100%; }
}