/* ============================================
   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. */
.brand-logo {
  display: flex;
  align-items: center;
  flex: none;
}
.brand-logo img {
  height: 44px;
  width: auto;
  display: block;
}
/* 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; }

/* 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;
}
.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);
}
.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-logo img { height: 34px; }
  .brand-label { font-size: 12px; padding-left: 8px; }
}

/* 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.

   Het vaklabel is dan tóch al tot een paar pixels samengeknepen en zegt niets
   meer — dat gaat weg. Het logo krimpt mee, want een merk dat de knop van de
   pagina duwt dient het merk niet. */
@media (max-width: 460px) {
  .site-nav .container { gap: 10px; padding: 0 14px; }
  .brand-logo img { height: 28px; }
  .brand-label { display: none; }
}


/* ---------- 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(--white);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s, background 0.15s;
}
.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(--white);
  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 {
  border: none;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  color: var(--steengrijs);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}
.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 {
  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;
}
.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; }
.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(--white);
  border-top: 1px solid var(--border-gray);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbalk-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  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 */
}

@media (max-width: 700px) {
  .tabbalk { display: flex; }
  /* Ruimte onder de pagina, anders valt de laatste knop onder de balk. */
  body.heeft-tabbalk { padding-bottom: 64px; }
  .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(--white);
}

.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; }
}