/* Balk van Nettogram. Eén bron voor WordPress én de statische drafts op / en /nl/.
   Gegenereerd uit nettogram-shell/template.php op 02-08-2026; wijzig hier,
   niet in het sjabloon. */

/* ---------- balk ---------- */

.lm-nav{
  position:sticky;top:0;z-index:50;
  background:var(--ice);
  border-bottom:1px solid rgba(42,53,64,.14);
}

.lm-nav__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:clamp(64px,9vw,88px);
}

.brand{
  display:inline-flex;align-items:center;
  color:var(--ink);
  font-family:'Clash Display',sans-serif;
  font-weight:600;
  font-size:clamp(1.35rem,4.4vw,1.85rem);
  letter-spacing:-.01em;
  line-height:1;
  padding:.38em .62em;
  margin-left:-.62em;
  border-radius:.36em;
  transition:background .2s var(--ease);
  flex:0 0 auto;
}
.brand:hover{background:#C9EAF8}
/* Het ongelijkteken staat sinds 03-08-2026 vóór de naam in plaats van ertussen.
   Alleen rechts marge dus: links zou het van de rand van het merkvakje duwen. */
.brand svg{display:block;width:.62em;height:.66em;margin:0 .2em 0 0}

/* Alles rechts van het logo. De categorieen mogen schuiven, de landwisselaar
   niet: die moet op elk schermformaat op zijn plek blijven staan. */
.lm-right{
  display:flex;align-items:center;
  gap:clamp(8px,2vw,20px);
  min-width:0;
}

/* De balk schuift horizontaal zodra hij niet past. Afkappen of afbreken
   verstopt categorieen, en dit zijn de enige ingangen die de site heeft. */
.lm-links{
  display:flex;align-items:center;
  gap:clamp(16px,3vw,32px);
  font-size:.96rem;font-weight:500;
  color:var(--ink-ice);
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.lm-links::-webkit-scrollbar{display:none}

.lm-links a{
  padding-bottom:2px;
  white-space:nowrap;
  background:linear-gradient(var(--klm),var(--klm)) no-repeat 0 100%/0 2px;
  transition:color .15s var(--ease),background-size .25s var(--ease);
}
.lm-links a:hover{color:var(--ink);background-size:100% 2px}
.lm-links a[aria-current]{color:var(--ink);background-size:100% 2px}
/* De methodepagina krijgt alleen een iets donkerdere inkt als accent. In de
   draft had dit item een vaste blauwe onderstreping, maar dat is precies het
   signaal dat aria-current gebruikt: dan lijken er twee pagina's tegelijk
   actief. Onderstreept betekent hier "je bent hier", en verder niets. */
.lm-links .howto{color:var(--ink)}

/* De landwisselaar, ongewijzigd uit de draft. Staat buiten de schuivende
   linklijst, want dit is de ene knop die altijd bereikbaar moet blijven. */
.langs{display:inline-flex;align-items:center;gap:2px;flex:0 0 auto}
.lang{
  display:inline-flex;align-items:center;gap:6px;padding:6px 9px;
  border:1px solid transparent;background:none;
  font-family:'JetBrains Mono',monospace;font-size:.74rem;font-weight:600;
  letter-spacing:.06em;color:var(--ink-ice);opacity:.5;
  transition:opacity .15s var(--ease),border-color .15s var(--ease);
}
.lang .flag{width:19px;height:13px;display:block;border:1px solid rgba(42,53,64,.28)}
.lang:hover{opacity:1;background:none}
.lang.on{opacity:1;color:var(--ink);border-color:rgba(42,53,64,.22)}
.lang.on .flag{border-color:rgba(42,53,64,.4)}

/* Onder 900px verdwijnen de letters en blijven de vlaggen staan, net als in de
   draft. De categorieen blijven wel zichtbaar, die schuiven mee. */
@media (max-width:900px){
  .lang{padding:5px 5px}
  .lang span{display:none}
}

/* ---------- onderdelen: zoeken, uitklapmenu's, hamburger ---------- */

.lm-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Basismaat voor de icoontjes. Zonder deze regel valt een inline SVG met alleen
   een viewBox terug op 300x150 px, en dan duwt één icoon de halve balk buiten
   beeld. Dat gebeurde met de hamburger. */
.lm-nav .ico{width:21px;height:21px;display:block;flex:0 0 auto}

/* ---------- ronde icoonknop ---------- */
.lm-iconbtn{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:99px;flex:0 0 auto;
  color:var(--ink-ice,#33566A);cursor:pointer;
  transition:background .18s var(--ease,ease),color .18s var(--ease,ease);
}
.lm-iconbtn:hover{background:#C9EAF8;color:var(--ink,#2A3540)}
.lm-iconbtn .ico{width:21px;height:21px;display:block}
.lm-searchtoggle[aria-expanded="true"]{background:#C9EAF8;color:var(--ink,#2A3540)}

/* ---------- uitklapmenu's ---------- */
.lm-drop{position:relative;flex:0 0 auto}
.lm-drop>summary{
  list-style:none;cursor:pointer;user-select:none;
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 11px;border-radius:99px;
  font-size:.96rem;font-weight:500;color:var(--ink-ice,#33566A);
  transition:background .18s var(--ease,ease),color .18s var(--ease,ease);
}
.lm-drop>summary::-webkit-details-marker{display:none}
.lm-drop>summary::marker{content:""}
.lm-drop>summary:hover{background:#C9EAF8;color:var(--ink,#2A3540)}
.lm-drop>summary.on{color:var(--ink,#2A3540)}
.lm-drop[open]>summary{background:#C9EAF8;color:var(--ink,#2A3540)}
.lm-drop .chev{width:15px;height:15px;transition:transform .18s var(--ease,ease)}
.lm-drop[open] .chev{transform:rotate(180deg)}
.lm-drop .flag{width:19px;height:13px;display:block;border:1px solid rgba(42,53,64,.28)}

.lm-drop__menu{
  position:absolute;top:calc(100% + 8px);left:0;z-index:60;
  min-width:190px;padding:6px;
  background:#fff;border:1px solid var(--hairline,rgba(42,53,64,.12));
  border-radius:12px;box-shadow:0 12px 30px rgba(42,53,64,.13);
  display:flex;flex-direction:column;
}
.lm-drop__menu--right{left:auto;right:0}
.lm-drop__menu--wide{min-width:230px}
.lm-drop__menu a{
  display:flex;align-items:center;gap:9px;
  padding:9px 12px;border-radius:8px;
  font-size:.95rem;color:var(--ink-2,#4E5760);
}
.lm-drop__menu a:hover{background:var(--ice-soft,#EEF8FC);color:var(--ink,#2A3540)}
.lm-drop__menu a[aria-current]{color:var(--ink,#2A3540);font-weight:600}
.lm-drop__menu hr{border:0;border-top:1px solid var(--hairline,rgba(42,53,64,.12));margin:6px 8px}

/* ---------- zoekpaneel ----------
   Staat altijd in de DOM en wordt alleen zichtbaar gemaakt. Dat schuift
   vloeiender dan in- en uitvoegen, en pointer-events:none zorgt dat hij in
   gesloten toestand niets blokkeert. */
.lm-searchpanel{
  position:absolute;top:100%;left:0;right:0;z-index:70;
  border-top:1px solid rgba(42,53,64,.14);
  border-bottom:1px solid rgba(42,53,64,.14);
  background:#fff;box-shadow:0 14px 30px rgba(42,53,64,.10);
  transform:translateY(-8px);opacity:0;pointer-events:none;
  transition:opacity .2s var(--ease,ease),transform .2s var(--ease,ease);
}
.lm-searchpanel.is-open{transform:translateY(0);opacity:1;pointer-events:auto}
.lm-searchpanel__form{
  display:flex;align-items:center;gap:10px;
  padding:7px 0;
}
.lm-searchpanel__form>.ico{width:18px;height:18px;color:var(--ink-2,#4E5760);flex:0 0 auto}
.lm-searchpanel__form input{
  flex:1 1 auto;min-width:0;border:0;background:none;
  font:inherit;font-size:.98rem;color:var(--ink,#2A3540);
}
.lm-searchpanel__form input:focus{outline:none}
/* De ingebouwde wisknop van type="search" eruit: die stond naast onze eigen
   sluitknop en dan zien twee kruisjes er per ongeluk uit als een fout. */
.lm-searchpanel__form input::-webkit-search-cancel-button,
.lm-searchpanel__form input::-webkit-search-decoration{-webkit-appearance:none;display:none}
.lm-searchpanel__close{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border:0;border-radius:99px;background:none;
  color:var(--ink-2,#4E5760);cursor:pointer;
}
.lm-searchpanel__close:hover{background:var(--ice-soft,#EEF8FC);color:var(--ink,#2A3540)}
.lm-searchpanel__close .ico{width:17px;height:17px}

/* ---------- suggesties ----------
   :empty verbergt de bak, anders staat er een lege witte strook onder de balk
   zodra het paneel opengaat. */
.lm-suggest{max-height:min(58vh,420px);overflow-y:auto;padding-bottom:8px}
.lm-suggest:empty{display:none}
.lm-suggest__hit{
  display:flex;align-items:baseline;gap:10px;
  padding:8px 10px;margin:0 -10px;border-radius:8px;
  color:var(--ink,#2A3540);
}
.lm-suggest__hit:hover,.lm-suggest__hit.is-active{background:var(--ice-soft,#EEF8FC)}
.lm-suggest__hit.is-active{outline:2px solid var(--klm,#00A1DE);outline-offset:-2px}
.lm-suggest__n{font-weight:600;font-size:.97rem}
.lm-suggest__n b{color:var(--klm-deep,#00719D);font-weight:700}
.lm-suggest__c{font-size:.82rem;color:var(--ink-2,#4E5760);margin-left:auto;white-space:nowrap}
.lm-suggest__all{
  display:block;padding:9px 10px;margin:4px -10px 0;border-radius:8px;
  border-top:1px solid var(--hairline,rgba(42,53,64,.12));
  font-size:.9rem;color:var(--klm-deep,#00719D);
}
.lm-suggest__all:hover,.lm-suggest__all.is-active{background:var(--ice-soft,#EEF8FC)}
.lm-suggest__none{padding:10px 0 14px;font-size:.9rem;color:var(--ink-2,#4E5760)}

/* ---------- hamburger ----------
   Staat sinds 03-08-2026 op elk schermformaat in de balk, dus hier geen
   display:none meer. De categorieen zitten er altijd in, maar zijn boven 900 px
   verborgen: daar staan ze al in de balk zelf. Verbergen en niet weglaten, want
   twee lijsten die de server per schermbreedte anders vult bestaan niet: dit is
   één stuk HTML dat door twee media-query's wordt bediend. */
.lm-burger-cats{display:none}

/* ---------- smal scherm ---------- */
@media (max-width:900px){
  .lm-links{display:none}
  .lm-burger-cats{display:flex;flex-direction:column}
  .lm-drop--lang>summary span{display:none}
  .lm-drop--lang>summary{gap:4px;padding:8px}
}

/* Krappere maten voor smalle telefoons. Gemeten bij 500px viewport: logo 134,
   zoeken 34, taal 46, hamburger 31, rechterrand op 475. Het past dus, en deze
   regels houden marge over voor de 320px-klasse. Eerder inleveren op ruimte dan
   op onderdelen: alle vier de ingangen blijven staan. */
@media (max-width:560px){
  .lm-nav__inner{gap:10px}
  .lm-right{gap:0}
  .lm-nav .brand{font-size:1.2rem}
  .lm-iconbtn{width:34px;height:34px}
  .lm-nav .ico{width:19px;height:19px}
  .lm-drop--lang>summary{padding:7px 6px;gap:2px}
  .lm-drop--lang .chev{width:13px;height:13px}
  .lm-drop--burger>summary{padding:7px 6px}
  .lm-drop__menu{min-width:170px}
}
@media (prefers-reduced-motion:reduce){
  .lm-iconbtn,.lm-drop>summary,.lm-drop .chev{transition:none}
}