/* Eén balk voor de hele site.

   De 930 contentpagina's bouwen de kop met <details class="langdd"> en
   <details class="curdd">; de 20 rekenmachinepagina's met #langToggle en
   #currencyToggle. Die twee stonden op verschillende maten: 34 pixels hoog
   tegen 38, en de valutaknop donker en smal tegen wit met EUR erin. Daardoor
   verschoof het menu zodra je van Vergelijken naar Informatie klikte.

   Hieronder krijgen de knoppen op de rekenmachinepagina's dezelfde maten,
   randen en kleuren als op de rest van de site. Alleen opmaak; er verandert
   niets aan wat de knoppen doen. */

.nav .nav-actions .langbtn,
.nav .nav-actions .currencybtn,
.nav-grid .nav-actions .langbtn,
.nav-grid .nav-actions .currencybtn {
  height: 38px !important;
  border-radius: 11px !important;
  border: 1.5px solid var(--line) !important;
  background: #fff !important;
  color: var(--muted) !important;
  box-shadow: none !important;
}

.nav .nav-actions .langbtn,
.nav-grid .nav-actions .langbtn {
  /* Op de 930 andere pagina's meet de taalknop 54 bij 42. Vier pixels hoger dan
     de knoppen ernaast, maar dat is overal zo; hier gelijk houden is wat telt. */
  width: 54px !important;
  height: 42px !important;
  gap: 5px !important;
}

.nav .nav-actions .currencybtn,
.nav-grid .nav-actions .currencybtn {
  width: auto !important;
  min-width: 52px !important;
  padding: 0 9px !important;
  gap: 5px !important;
}

/* De statische contentheader gebruikt <details>, de calculators gebruiken
   wrappers met buttons. Houd de buitenmaten exact gelijk; een verschil van
   twee pixels in de taalkiezer verplaatste de gecentreerde navigatie circa
   één pixel bij het wisselen tussen Vergelijken en Over. */
.nav-actions .lang-wrap,
.nav-actions .langdd:not(.curdd),
.nav-actions .langdd:not(.curdd) > summary {
  width: 54px !important;
}

.nav-actions .langdd:not(.curdd),
.nav-actions .langdd:not(.curdd) > summary {
  height: 42px !important;
}

.nav-actions .currency-wrap,
.nav-actions .curdd,
.nav-actions .curdd > summary {
  width: 62px !important;
}

/* De code stond verborgen; op de andere pagina's staat hij er altijd. */
.nav .nav-actions .currencybtn .currency-code,
.nav-grid .nav-actions .currencybtn .currency-code {
  display: inline !important;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
}

.nav .nav-actions .langbtn:hover,
.nav .nav-actions .currencybtn:hover,
.nav-grid .nav-actions .langbtn:hover,
.nav-grid .nav-actions .currencybtn:hover {
  border-color: #BCC7DB !important;
  color: var(--ink) !important;
}

/* Open paneel: dezelfde blauwe rand als bij de taalkiezer elders. */
.nav .nav-actions .currencybtn[aria-expanded="true"],
.nav-grid .nav-actions .currencybtn[aria-expanded="true"],
.nav .nav-actions .langbtn[aria-expanded="true"],
.nav-grid .nav-actions .langbtn[aria-expanded="true"] {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* ---------- Menuruimte ----------

   De acht menulabels stonden tussen 1321 en 1520 pixels op elkaar geplakt:
   6 pixels padding, geen tussenruimte, 13,5 pixels letter. Boven 1520 sprong
   hij ineens naar de ruime opzet: 12 pixels padding, 8 tussenruimte, 14 letter.
   Dat is nu een vloeiende overgang, zodat het menu op elke breedte zo ruim
   staat als er past en nergens verspringt.

   De bovengrens is gemeten, niet geschat: bij 11 pixels padding houdt de
   krapste taal (Oekraïens) op 1440 nog 40 pixels over aan weerszijden. Bij de
   oude 12 pixels was dat 10, en dat is te dicht op de knoppen.

   Beide stijlbladen van de site laden dit bestand, dus .nav en .nav-grid
   krijgen exact dezelfde maten. */

@media(min-width:1321px){
  .wrap.nav .navlinks,
  .wrap.nav-grid .navlinks{
    gap: clamp(0px, calc((100vw - 1321px) * 0.044), 7px) !important;
  }
  .wrap.nav .navlinks .nav-item .nav-trigger,
  .wrap.nav-grid .navlinks .nav-item .nav-trigger,
  /* De tien tokenrekenmachines hebben geen .nav-item om de links heen; die
     pagina's zijn ooit met de hand gebouwd. Zonder deze regel bleven ze op
     2 pixels padding staan en verspringt het menu daar alsnog. */
  .wrap.nav .navlinks > .nav-trigger,
  .wrap.nav-grid .navlinks > .nav-trigger{
    padding: 0 clamp(6px, calc(6px + (100vw - 1321px) * 0.0314), 11px) !important;
    font-size: clamp(13.5px, calc(13.5px + (100vw - 1321px) * 0.00314), 14px) !important;
  }
}


/* ---------- Vaste breedte voor de knop rechts ----------

   Op de rekenmachinepagina's wisselt de taal zonder paginalaad: de menulabels
   en de tekst in de knop worden ter plekke vervangen. Die knop verschilt fors
   per taal — gemeten in de eigen letter: Koreaans 100 pixels, Italiaans 149,
   Nederlands 165, Oekraïens 178, Duits 180. Tachtig pixels verschil, en omdat
   de knoppenkolom op inhoudsbreedte stond, schoof het hele menu mee.

   De knop krijgt hier de breedte van de langste vertaling, plus wat marge voor
   letterverschillen tussen machines. Daarmee staat het blok rechts stil, in elke
   taal en op beide soorten pagina's. Alleen boven 1181 pixels, want daaronder
   heeft de balk een eigen indeling. */

@media(min-width:1181px){
  .nav .nav-actions .nav-cta,
  .nav-grid .nav-actions .nav-cta{
    min-width: 186px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
}