/* De balk bovenaan de site, op elke pagina gelijk – ook op de voorpagina en de kaart, en
   die twee zijn handgeschreven en laden geen plek.css. Daarom staat hij hier apart.
   De HTML komt uit `balk_html()` in build.py; die schrijft hem ook in de twee
   handgeschreven pagina's, tussen <!-- BALK --> en <!-- /BALK -->. Eén bron dus.

   Kleuren komen uit de :root van de pagina zelf. De kaartpagina kent --bg en --lopend niet,
   vandaar overal een terugval in de var(). */

.balk { border-bottom: 1px solid var(--rand); padding: 12px 0; font-size: 14.5px;
        position: relative; z-index: 30; background: var(--bg, #0b0d10); }
/* eigen breedte, zodat de balk niet meeschuift met de kolombreedte van de pagina
   eronder: de voorpagina heeft een .binnen van 1120 px en een plekpagina van 1060,
   en dan verspringt het logo als je van de een naar de ander gaat */
.balk .binnen { display: flex; gap: 18px; align-items: center;
                width: min(1100px, 100% - 44px); margin-inline: auto; }
.balk a { color: var(--lopend, #dbe3ea); text-decoration: none; }
.balk a:hover { color: var(--accent); }
.balk .merk { font-weight: 650; color: var(--tekst); white-space: nowrap; }

/* het menu zelf */
.balkmenu { display: flex; gap: 18px; align-items: center; }
.balkgroep { position: relative; }
/* De ingang van een submenu is een knop en geen link: er is geen pagina /verhalen/ en er
   hoort er ook geen te zijn. Een link die nergens heen gaat is het soort ding dat op een
   telefoon precies één keer werkt. */
.balkknop {
  font: inherit; color: var(--lopend, #dbe3ea); background: none; border: 0; padding: 0;
  cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
}
.balkknop:hover, .balkknop[aria-expanded="true"] { color: var(--accent); }
.balkknop::after { content: ""; width: 6px; height: 6px; margin-top: -3px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg); transition: transform .15s; }
.balkknop[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 2px; }

.balksub {
  position: absolute; top: calc(100% + 11px); left: -14px; z-index: 40; min-width: 264px;
  background: var(--paneel); border: 1px solid var(--rand); border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5); padding: 6px; display: none;
}
.balkgroep.open .balksub { display: block; }
.balksub a { display: block; padding: 8px 11px; border-radius: 7px; line-height: 1.35; }
.balksub a:hover, .balksub a:focus-visible { background: #1f262d; color: var(--accent); }
.balksub .bij { display: block; color: var(--zacht); font-size: 13px; }
.balksub a:hover .bij { color: var(--zacht); }

/* de hamburger: alleen op smalle schermen zichtbaar */
.hamburger {
  display: none; margin-left: auto; font: inherit; color: var(--tekst); cursor: pointer;
  background: var(--paneel); border: 1px solid var(--rand); border-radius: 8px;
  padding: 7px 12px 7px 10px; gap: 8px; align-items: center;
}
.hamburger .strepen { display: block; width: 16px; height: 2px; background: currentColor;
  box-shadow: 0 5px currentColor, 0 -5px currentColor; }
.balk.open .hamburger { border-color: var(--accent); color: var(--accent); }

/* ---- het zoekveld in de balk; de code staat in /zoek.js
   De doos is relatief gepositioneerd zodat de trefferlijst eronder hangt zonder de pagina
   te verschuiven. `margin-left: auto` duwt hem naar rechts zolang de balk op één regel past;
   wrapt de balk op een telefoon, dan valt het veld op een eigen regel over de volle breedte. */
.zoekdoos { position: relative; margin-left: auto; flex: 0 1 260px; min-width: 190px; }
.zoekdoos input {
  width: 100%; padding: 7px 11px; border-radius: 8px; border: 1px solid var(--rand);
  background: var(--paneel); color: var(--tekst); font: inherit; -webkit-appearance: none;
}
.zoekdoos input::placeholder { color: var(--zacht); }
.zoekdoos input:focus { outline: none; border-color: var(--accent); }
#zoekuit {
  position: absolute; top: calc(100% + 7px); right: 0; z-index: 20;
  width: min(430px, calc(100vw - 44px)); max-height: min(70vh, 520px); overflow-y: auto;
  background: var(--paneel); border: 1px solid var(--rand); border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5); padding: 6px;
  /* dezelfde schuifbalk als de band 'In de buurt' hieronder, nu staand: zonder dit zet de
     browser er zijn eigen grijs op wit neer, en dat is op een donker paneel een lichte streep
     die harder schreeuwt dan de lijst zelf */
  scrollbar-width: thin; scrollbar-color: var(--accent) var(--paneel);
}
#zoekuit::-webkit-scrollbar { width: 10px; }
#zoekuit::-webkit-scrollbar-track { background: var(--paneel); border-radius: 6px; }
#zoekuit::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 6px;
                                    border: 2px solid var(--paneel); }
#zoekuit::-webkit-scrollbar-thumb:hover { background: #ffe09a; }
.ztreffer {
  display: block; padding: 8px 10px; border-radius: 7px; text-decoration: none;
  color: var(--lopend); line-height: 1.45;
}
.ztreffer b { color: var(--tekst); font-weight: 650; }
.ztreffer:hover, .ztreffer.aan { background: #1f262d; }
.ztreffer .zwaar { color: var(--zacht); font-size: 13px; }
.ztreffer .zflard { display: block; color: var(--zacht); font-size: 13.4px; margin-top: 2px; }
.ztreffer mark { background: none; color: var(--accent); font-weight: 650; }
.zoekniets { color: var(--zacht); font-size: 13.6px; margin: 6px 10px; }

/* ---- telefoon en smalle tablet: het menu klapt onder de balk uit
   Het submenu blijft daar gewoon open staan, ingesprongen. Twee niveaus die allebei moeten
   worden opengeklikt is op een scherm van deze maat één klik te veel. */
@media (max-width: 860px) {
  .balk .binnen { flex-wrap: wrap; }
  .hamburger { display: inline-flex; }
  .balkmenu {
    display: none; order: 4; width: 100%; flex-direction: column; align-items: stretch;
    gap: 0; margin-top: 12px; border-top: 1px solid var(--rand); padding-top: 8px;
  }
  .balk.open .balkmenu { display: flex; }
  .balkmenu > a, .balkknop { padding: 10px 2px; }
  .balkknop { pointer-events: none; color: var(--zacht); font-size: 13px;
              text-transform: uppercase; letter-spacing: .06em; padding-bottom: 2px; }
  .balkknop::after { display: none; }
  .balksub { position: static; display: block; border: 0; box-shadow: none; padding: 0 0 6px;
             background: none; min-width: 0; }
  .balksub a { padding: 9px 2px 9px 14px; border-left: 1px solid var(--rand); border-radius: 0; }
  .balksub a:hover, .balksub a:focus-visible { background: none; }
  /* het zoekveld blijft staan, ook met het menu dicht: dat is op een telefoon de
     snelste weg naar een verhaal en het hoort niet achter een knop te verdwijnen */
  .zoekdoos { order: 3; width: 100%; flex: 1 1 100%; margin-left: 0; margin-top: 10px; }
  #zoekuit { right: auto; left: 0; width: 100%; }
}

/* ---- de voet, ook op elke pagina gelijk */
/* Alle menu-doelen als gewone links onderaan. Zonder JavaScript klapt op een breed scherm
   geen submenu open, en dan is dit de weg – en een crawler die geen knop indrukt vindt ze
   hier ook. */
.voetmenu { margin: 0 0 26px; }
.voetmenu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap;
               gap: 12px 46px; }
.voetmenu ul ul { display: block; margin-top: 4px; }
.voetmenu > ul > li > span { color: var(--tekst); font-weight: 620; }
.voetmenu li li { margin-top: 3px; }
.voetmenu a { color: var(--zacht); text-decoration: none; }
.voetmenu a:hover { color: var(--accent); }