/* ===========================================================================
   hsb-navbar.css — de menubalk en het uitklapmenu

   Hoort bij includes/navbar.php. Hierin stond een <style>-blok; dat staat
   midden in de body en komt dus op elke pagina van de site mee, ná de eerste
   weergave. Nu laadt includes/head-base.php dit bestand in de <head>.

   Alles wat in dat blok stond is meeverhuisd: de hover-animatie van het
   uitklapmenu, de zoekbalk, de mobiele zoekbalk en de knoppenbalk onderin op
   mobiel. Daar is de nieuwe opmaak van het uitklapmenu bij gekomen.
   =========================================================================== */

.dropdown-mega {
  --mega-vlak: #eef4f9;
  --mega-lijn: #d9e2eb;
  --mega-kop: #103856;
  --mega-tekst: #26394b;
  --mega-accent: #c24d16;
  --mega-schaduw: 0 18px 40px rgba(16, 56, 86, .14);
}


/* ===========================================================================
   HET UITKLAPMENU

   WAAROM HET LICHT IS GEWORDEN
   Het was donkerblauw: hetzelfde blauw als de hero eronder. Daardoor viel er
   bij het openklappen een zwaar blok over de pagina, en stond er wit op
   donkerblauw terwijl elk ander lijstje op de site juist donkerblauw op licht
   is. Nu hetzelfde lichtblauw als de blokjes op de landingspagina's en de
   kaders op de boekpagina, met de tekst in het blauw van de huisstijl.

   Terug naar donkerblauw is één regel: --mega-vlak op #103856, --mega-tekst
   en --mega-kop op #fff, --mega-lijn op rgba(255,255,255,.25).
   =========================================================================== */

.dropdown-mega {
  /* Het paneel loopt over de volle breedte van de menubalk. Het <li> eromheen
     heeft position-static, dus de plek wordt bepaald door de balk erboven.
     Zonder deze twee regels hangt de linkerkant aan het menu-item waar je op
     staat, en valt de rechterkolom buiten beeld. */
  left: 0;
  right: 0;

  display: block;
  visibility: hidden;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;

  background: var(--mega-vlak);
  color: var(--mega-tekst);
  border-top: 1px solid var(--mega-lijn);
  /* De hoek rechtsonder rond, linksonder scherp: dezelfde vorm als de
     kaarten en de blauwe vlakken elders op de site. Boven blijft recht,
     want daar sluit hij aan op de menubalk. */
  border-radius: 0 0 40px 2px;
  box-shadow: var(--mega-schaduw);
  overflow: hidden;
}

.nav-item.dropdown.show .dropdown-mega {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity .25s ease, transform .25s ease, visibility 0s;
}

/* Wat lucht onderin, zodat de ronde hoek niet tegen de laatste regel aan komt. */
.dropdown-mega > .container { padding-bottom: 2.25rem; }

/* --- de kopjes boven de kolommen ------------------------------------------ */
.dropdown-mega__kop {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: 1rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--mega-kop);
}
.dropdown-mega__kop i { color: var(--mega-accent); font-size: 1rem; }

/* --- de links -------------------------------------------------------------- */
.dropdown-mega a {
  color: var(--mega-tekst);
  text-decoration: none;
  transition: color .2s ease, transform .2s ease;
}
.dropdown-mega a:hover { color: var(--mega-accent); transform: translateX(4px); }

/* Het pijltje voor elke link. Stond op opacity .4 wit; nu oranje, zodat het
   dezelfde accentkleur heeft als de knoppen. */
.dropdown-mega a::before {
  content: "\203A";
  margin-right: 6px;
  color: var(--mega-accent);
  opacity: .55;
}
.dropdown-mega a:hover::before { opacity: 1; }

.dropdown-mega__link {
  display: inline-block;
  padding: .22rem 0;
  font-size: .97rem;
  line-height: 1.45;
}

/* "Ontdek alle thema's", "Alle sectoren": de laatste regel van een kolom. */
.dropdown-mega__alle {
  display: inline-block;
  margin-top: .2rem;
  padding-top: .6rem;
  border-top: 1px solid var(--mega-lijn);
  font-weight: 700;
  color: var(--mega-kop) !important;
}
.dropdown-mega__alle:hover { color: var(--mega-accent) !important; }

.dropdown-mega__streep {
  height: 1px;
  margin: .9rem 0;
  background: var(--mega-lijn);
  list-style: none;
}


/* ===========================================================================
   HET PIJLTJE IN DE MENUBALK

   Twee dingen klopten er niet aan:

     1. De link is een flexrij met align-items: end. Daardoor hing het pijltje
        aan de ONDERKANT van de regel, een paar pixels lager dan de letters.
        In navbar.php staat nu align-items-center.

     2. Bootstrap zet bij .dropdown-toggle zelf ook een driehoekje neer, via
        ::after. Dat werd nooit verborgen, dus stonden er twee tekens naast
        elkaar -- en in een flexrij telt zo'n ::after als een eigen kolom,
        dus hij schoof ook nog mee naar onderen.

   Hier gaat het driehoekje weg en draait het overgebleven pijltje een halve
   slag als het menu openstaat.
   =========================================================================== */

/* --- de menu-items ---------------------------------------------------------
   HIER STOND EEN BLOK DAT DE ITEMS GECENTREERD ZETTE. DAT WAS FOUT.

   site.css zet het menu bewust ONDERAAN de balk van 80px:

       #navbarDesktop .navbar-desktop-menu > .nav-item > .nav-link {
         height: 80px; display: flex; align-items: flex-end; padding-bottom: 18px;
       }

   Door "Sprekers" en "Over ons" te centreren haalde ik juist die twee uit de
   rij -- en dat is wat je zag: die twee hoger dan de andere drie. Ze staan nu
   weer alle vijf onderaan, zoals het bedoeld is.

   Wat hier wel blijft: steviger letters, zoals je vroeg.
   --------------------------------------------------------------------------- */

#navbarDesktop .navbar-desktop-menu > .nav-item > .nav-link {
  font-weight: 600;
}

/* Bootstrap zet bij .dropdown-toggle zelf een driehoekje neer via ::after.
   site.css verbergt dat al; deze regel staat er als vangnet bij, voor het
   geval die ooit verdwijnt. */
#navbarDesktop .dropdown-toggle::after { display: none; }

/* HET PIJLTJE

   Het stond op 16px naast letters van 16px. Twee dingen gingen daar mis.

   1. TE KLEIN. Een chevron vult maar een derde van zijn vierkant, dus zo'n
      pijltje oogt half zo groot als de letters ernaast en verdwijnt.

   2. HIJ ZWEEFDE. De link lijnt onderaan uit (align-items: flex-end uit
      site.css). Daarmee komt de ONDERKANT van het pijltjesvierkant gelijk te
      liggen met de onderkant van de tekstregel -- en die loopt door tot onder
      de staart van een "p". Een vierkant van 16px dat daar hangt, heeft zijn
      midden hoger dan het midden van de letters. Vandaar dat het boven de
      tekst leek te zweven.

   De oplossing is dat het vierkant even hoog wordt als de tekstregel zelf.
   De regelhoogte is 19,2px (16px maal 1,2), dus een pijltje van 19px heeft
   zijn midden op het midden van de letters -- op een tiende pixel na. Geen
   losse correctie nodig die bij een andere lettergrootte weer scheef gaat
   staan.

   De tussenruimte van gap-1 (4px) is krap voor een pijltje met zo veel wit
   om zich heen; 7px leest rustiger. */
.navbar-desktop-menu .dropdown-toggle .icoon {
  flex: 0 0 auto;
  /* 1.2em = de regelhoogte, dus het pijltje is even hoog als de regel. */
  width: 1.2em;
  height: 1.2em;
  /* En dan nog omhoog. De onderkant van een tekstregel ligt niet op de
     onderkant van de letters: daar zit nog de staart van een "p" plus wat
     regelafstand onder. Een pijltje dat met de regel meelijnt, hangt daardoor
     onder de letters. Deze 0.25em haalt dat eruit.

     In em, niet in pixels: zet je de menuletter ooit groter, dan schuift de
     correctie mee in plaats van opnieuw scheef te gaan staan. */
  margin-bottom: .25em;
  transition: transform .25s ease;
}
.navbar-desktop-menu .dropdown-toggle { gap: 7px !important; }
.navbar-desktop-menu .nav-item.dropdown.show .dropdown-toggle .icoon {
  transform: rotate(180deg);
}


/* De icoontjes rechts (zoeken, bellen, delen, favorieten, licht/donker)
   hebben hun opmaak in assets/css/hsb-merk.css: .nav-actie, 40 bij 40 met een
   icoon van 22. Die zijn al gelijk, dus hier staat er niets over. */


/* ===========================================================================
   DE DONKERE STAND

   Dezelfde tinten als hsb-nacht.css gebruikt, zodat het menu niet als een
   licht vlak in een donkere pagina blijft staan.
   =========================================================================== */

/* HIER STOND EEN @media (prefers-color-scheme: dark)-BLOK. DAT WAS FOUT.

   Die regel kijkt naar de instelling van je computer, niet naar de stand van
   de site. Staat jouw macOS op donker, dan sloeg hij aan -- ook op een pagina
   die gewoon licht was. Gevolg: een zwart uitklapmenu boven een witte pagina.

   De stand van de site wordt gezet door assets/js/hsb-thema.js, met
   data-thema op <html>. Daar kijkt hij nu alleen nog naar. */

:root[data-thema="donker"] .dropdown-mega {
  --mega-vlak: #17181C;
  --mega-lijn: #2B2D33;
  --mega-kop: #F2F3F5;
  --mega-tekst: #D7DAE0;
  --mega-accent: #F58A4B;
  --mega-schaduw: 0 18px 40px rgba(0, 0, 0, .5);
}


/* ===========================================================================
   SMALLERE SCHERMEN

   Onder 992px klapt Bootstrap het menu om naar de mobiele variant en wordt
   dit paneel niet meer gebruikt. De ronde hoek gaat er dan af, voor het
   geval hij toch ergens in beeld komt.
   =========================================================================== */

@media (max-width: 991.98px) {
  .dropdown-mega { border-radius: 0; box-shadow: none; }
}


/* ===========================================================================
   HIERONDER: ONGEWIJZIGD UIT HET <style>-BLOK VAN navbar.php
   =========================================================================== */

.bg-orange { background-color: #f28c00 !important; }

.badge-fav {
  min-width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  font-size: 12px;
  line-height: 1;
}

/* Desktop zoekbalk */
.nav-search { position: relative; display: flex; align-items: center; width: 48px; justify-content: flex-end; }
.nav-search-form {
  position: absolute; right: 48px; top: 50%; transform: translateY(-50%);
  width: 0; overflow: hidden; transition: width .25s ease; pointer-events: none;
}
.nav-search-input { width: 260px; border-radius: 999px; padding-left: 14px; padding-right: 14px; }
.nav-search.is-open .nav-search-form { width: 260px; pointer-events: auto; }
.nav-search-btn { padding: 0; border: 0; background: transparent; }
@media (min-width: 1400px) {
  .nav-search-input { width: 320px; }
  .nav-search.is-open .nav-search-form { width: 320px; }
}

/* Mobiele zoekbalk */
#mobileSearchBar.collapse:not(.show) { display: none; }
#mobileSearchBar.collapse.show {
  display: block;
  animation: slideInDownSearch 0.3s ease-out;
}
@keyframes slideInDownSearch {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* De knoppenbalk onderin op mobiel */
.mobile-cta {
  background-color: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}