/* ═══════════════════════════════════════════════════════════════════
   De gedeelde kopbalk van nomadtrading.nl.

   EERST DE FOUT DIE HIER GEMAAKT IS, WANT DIE VERKLAART DIT BESTAND.

   In de eerste versie stond hier een eigen, lichte balk voor de
   subpagina's, terwijl de homepage zijn eigen donkere balk hield. Twee
   balken dus, met een andere vorm, andere knoppen rechts en een ander
   kleurgebruik. Dat is geen site, dat zijn twee sites naast elkaar.

   Nu is er één balk: die van de homepage. Zelfde klassen, zelfde glas,
   zelfde knoppen rechts, op elke publieke pagina. De uitklapmenu's zijn
   toegevoegd aan díé balk in plaats van ernaast gebouwd.

   WAAROM DE KLEUREN HIER VASTSTAAN EN NIET UIT TOKENS KOMEN
   De homepage definieert --text, --blue-soft en --blue-pale in zijn
   eigen <style>; nomad-vsl-1.css doet dat niet. Een gedeeld bestand dat
   op beide moet werken kan die dus niet gebruiken. De balk is altijd
   donker, ongeacht of de pagina licht of donker is, dus vaste waarden
   zijn hier het eerlijkst: ze doen precies wat er staat.

   VOLGORDE IN DE CASCADE
   Op de homepage staat na dit bestand nog de eigen <style> met exact
   dezelfde waarden voor .site-header. Die wint, en dat geeft niets --
   het is hetzelfde. De uitklapmenu's staan alleen hier, zodat er één
   plek is waar ze veranderd worden.

   GEEN JAVASCRIPT VOOR DE MENU'S. Ze werken op :hover en :focus-within,
   dus ook met het toetsenbord en ook als een script faalt. Alleen het
   meescrollende glas (.vast) gebruikt drie regels script, en zonder dat
   script blijft de balk gewoon in zijn glazen stand staan.
   ═══════════════════════════════════════════════════════════════════ */

/* box-sizing staat niet in dit bestand en niet in elke pagina die de
   balk gebruikt. Zonder border-box komt padding bovenop de opgegeven
   breedte: het uitklappaneel werd op een telefoon 366 + 32 padding + 2
   rand = 400 breed en stak dan 23 pixels buiten het scherm. Alles wat
   bij de balk hoort rekent daarom zelf af met zijn eigen randen. */
.site-header,.site-header *,.site-header *::before,.site-header *::after{box-sizing:border-box}

/* ── WAAROM DIT EEN RASTER IS EN GEEN FLEXBOX ─────────────────────
   Met flexbox en justify-content:space-between komt de navigatie
   tússen het logo en de knoppen te hangen. Die twee zijn niet even
   breed -- logo is ~90px, de knoppen rechts ~200px -- dus het midden
   van die ruimte ligt links van het midden van het scherm. Optisch
   staat het menu dan scheef, en dat zie je meteen.

   Een raster van 1fr auto 1fr lost dat op: de buitenste kolommen zijn
   altijd even breed, wat er ook in staat, dus de middelste kolom staat
   exact in het midden van het scherm. */
.site-header{
  --kop-tekst:#F2F4FA;
  --kop-zacht:rgba(242,244,250,.66);
  --kop-blauw:#0052FF;
  --kop-blauw-l:#4D7CFF;
  --kop-paneel:#0C0E16;
  --kop-lijn:rgba(255,255,255,.10);
  --kop-dis:'Archivo',system-ui,sans-serif;
  position:sticky;top:0;z-index:50;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:clamp(12px,2vw,24px);
  padding:16px clamp(16px,2.4vw,32px);
  transition:padding .28s ease;
}
/* Het glas ligt op een laag áchter de inhoud. backdrop-filter houdt
   abrupt op waar het element eindigt en tekent dan een naadje; met een
   mask fadet het naar onderen uit. Geen border-bottom, want een
   transparante rand van 1px gaf in sommige browsers alsnog een streep. */
.site-header::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(3,3,5,.40);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-mask-image:linear-gradient(to bottom,#000 52%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 52%,transparent 100%);
  transition:background .28s ease;
}
.site-header.vast{padding-top:11px;padding-bottom:11px}
.site-header.vast::before{
  background:rgba(3,3,5,.95);
  -webkit-mask-image:linear-gradient(to bottom,#000 88%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 88%,transparent 100%);
}

.site-header .logo{
  justify-self:start;
  font-family:var(--kop-dis);font-weight:800;font-size:clamp(22px,1.9vw,25px);
  text-decoration:none;color:var(--kop-tekst);letter-spacing:-.03em}
.site-header .logo .dot{color:var(--kop-blauw)}

/* min-width:0 is hier niet optioneel. Een flex-item krijgt standaard
   min-width:auto en weigert dan te krimpen onder de breedte van zijn
   inhoud. Zonder deze regel duwt de navigatierij op een telefoon de
   hele balk breder dan het scherm -- en dan schuift de héle pagina
   horizontaal, niet alleen het menu. */
.site-nav{display:flex;align-items:center;justify-content:center;min-width:0;
  gap:clamp(14px,1.9vw,30px)}

/* Een link en een uitklapknop moeten er identiek uitzien, anders valt de
   balk uit elkaar. Daarom dezelfde opmaak op allebei, inclusief het
   streepje dat onder de tekst doorloopt bij hover. */
.site-nav a,.site-nav .nav-top{
  position:relative;padding:6px 0;border:0;background:none;cursor:pointer;
  font-family:var(--kop-dis);font-weight:600;font-size:14px;letter-spacing:-.01em;
  color:var(--kop-zacht);text-decoration:none;white-space:nowrap;
  transition:color .16s ease;
}
.site-nav a:hover,.site-nav .nav-top:hover{color:var(--kop-tekst)}
.site-nav a:focus-visible,.site-nav .nav-top:focus-visible{
  outline:2px solid var(--kop-blauw-l);outline-offset:4px;border-radius:4px}
.site-nav a::after,.site-nav .nav-top::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--kop-blauw-l);transition:right .24s ease}
.site-nav a:hover::after,.site-nav .nav-top:hover::after,
.nav-item:focus-within .nav-top::after{right:0}

.nav-item{position:relative;display:flex;align-items:center}
.nav-top{display:inline-flex;align-items:center;gap:.34rem}
.nav-top .pijl{
  width:.36rem;height:.36rem;margin-top:-.16rem;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);transition:transform .18s ease}
.nav-item:hover .nav-top .pijl,.nav-item:focus-within .nav-top .pijl{
  transform:rotate(-135deg) translate(-.09rem,-.09rem)}

/* Het uitklappaneel. Donker, want de balk is donker -- een wit paneel
   onder een zwarte balk leest als een andere site. */
.nav-paneel{
  position:absolute;left:50%;top:calc(100% + 14px);transform:translateX(-50%) translateY(-.3rem);
  min-width:30rem;padding:1rem;border:1px solid var(--kop-lijn);border-radius:14px;
  background:var(--kop-paneel);
  box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.4);
  opacity:0;visibility:hidden;transition:opacity .16s ease,transform .16s ease,visibility .16s}
.nav-item:hover .nav-paneel,.nav-item:focus-within .nav-paneel{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
/* Onzichtbare brug tussen knop en paneel, anders valt het menu dicht
   zodra de muis door het gat van 14px beweegt. */
.nav-paneel::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
/* Het kopje stond eerst in mono-kapitalen met veel letterruimte. Daar
   kwam het woord NOMAD in te staan als grof blokschrift, vlak naast het
   logo dat juist strak en rond is. Twee keer dezelfde naam in twee
   tegengestelde vormen, en dat leest slordig.
   Nu gewoon klein, in de huisletter, zonder kapitalen. Een kopje hoort
   je te vertellen waar je kijkt, niet om aandacht te vragen. */
.nav-paneel .kopje{
  margin:0 0 .55rem;padding-left:.55rem;
  font:600 .74rem var(--kop-dis);letter-spacing:-.005em;
  color:rgba(242,244,250,.42)}
.nav-raster{display:grid;grid-template-columns:1fr 1fr;gap:.15rem .8rem;margin:0;padding:0;list-style:none}
.nav-raster a{display:block;padding:.5rem .55rem;border-radius:9px;text-decoration:none;white-space:normal}
.nav-raster a::after{display:none}
.nav-raster a:hover{background:rgba(255,255,255,.055)}
.nav-raster b{display:block;font:700 .89rem var(--kop-dis);color:var(--kop-tekst);line-height:1.3}
.nav-raster span{display:block;margin-top:.12rem;font:400 .79rem/1.4 system-ui,sans-serif;color:rgba(242,244,250,.52)}
.nav-alles{
  display:block;margin-top:.7rem;padding-top:.7rem;border-top:1px solid var(--kop-lijn);
  font:700 .85rem var(--kop-dis);color:var(--kop-blauw-l);text-decoration:none}
.nav-alles::after{display:none}

.header-right{display:flex;align-items:center;justify-content:flex-end;gap:clamp(12px,1.4vw,20px)}
.header-right .nav-link{
  padding:6px 2px;font:600 14px var(--kop-dis);color:var(--kop-zacht);
  text-decoration:none;white-space:nowrap;transition:color .16s ease}
.header-right .nav-link:hover{color:var(--kop-tekst)}
.site-header .desk-status{
  display:inline-flex;align-items:center;gap:7px;padding:5px 11px;
  border:1px solid var(--kop-lijn);border-radius:999px;
  font:500 10.5px 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.12em;
  text-transform:uppercase;color:var(--kop-zacht);white-space:nowrap}
.site-header .desk-status i{width:6px;height:6px;border-radius:50%;background:#3ddc97;
  box-shadow:0 0 0 3px rgba(61,220,151,.18)}
.site-header .btn--nav{
  display:inline-flex;align-items:center;gap:7px;margin-top:0;
  padding:9px 16px;border-radius:10px;background:var(--kop-blauw);color:#fff;
  font:700 13.5px var(--kop-dis);text-decoration:none;white-space:nowrap;
  box-shadow:0 6px 20px rgba(0,82,255,.32);transition:filter .16s ease}
.site-header .btn--nav:hover{filter:brightness(1.1)}

/* ── De grens tussen de twee menu's ────────────────────────────────
   HIER GING HET EERDER MIS, TWEE KEER.

   Eerst stonden de uitklappanelen onder 1040px op display:none terwijl
   de knoppen bleven staan. Dan klik je op Onderzoek en gebeurt er
   niets, en zijn de zes instrumentpagina's vanuit de balk onbereikbaar.

   Daarna bleek de homepage zijn navigatie al te verbergen onder 1140px,
   terwijl het mobiele menu pas bij 900px verscheen. Tussen 901 en 1140
   was er dus helemaal géén navigatie -- precies de breedte van een
   half scherm op een laptop.

   Daarom één grens voor de hele site, gelijk aan die van de homepage:
   boven 1140px de balk met uitklapmenu's, daaronder het mobiele menu.
   Er is geen breedte waarop je niets hebt. */
@media (max-width:1140px){
  .site-nav{display:none}
  .site-header .desk-status{display:none}
}

/* ── De balk op een lichte pagina ──────────────────────────────────
   Het glas is gemaakt voor de donkere homepage. Op een lichte pagina
   staat er achter de balk niets dan wit -- de balk is sticky, dus de
   donkere kopband begint eronder en niet erachter. rgba(3,3,5,.40)
   over wit is dan grijs, en dat ziet er uitgewassen uit.

   Deze variant maakt de balk vol zwart. Niet lichter maar juist voller:
   overal dezelfde balk, en glas alleen waar er iets is om doorheen te
   kijken.

   LET OP BIJ HET VERPLAATSEN VAN DIT BLOK: hij is bij een eerdere
   herschrijving een keer weggevallen terwijl de klasse op alle
   pagina's bleef staan. Dan is er geen foutmelding -- de balk wordt
   gewoon stilletjes grijs. */
.site-header.op-licht::before{
  background:#06070D;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  -webkit-mask-image:none;mask-image:none;
}
.site-header.op-licht{border-bottom:1px solid rgba(255,255,255,.07)}
.site-header.op-licht.vast::before{background:#06070D}

/* ═══ HET MOBIELE MENU ══════════════════════════════════════════════
   VERSIE TWEE. De eerste was een zwevend kaartje rechtsboven, en dat
   was de verkeerde vorm. Op een telefoon is een menu geen uitklapje
   naast een knop -- het is een scherm. Elk groot bedrijf doet dat zo,
   en niet omdat het mode is: een kaartje van 320 breed midden op een
   scherm van 390 laat de pagina eromheen zien, en dan weet je niet of
   je in het menu zit of op de pagina.

   Wat er nu staat:
   - Het paneel vult alles onder de balk. Geen rand, geen schaduw, geen
     zwevend blok: je bent in het menu of je bent het niet.
   - Rijen van 56 pixels hoog. Dat is de ondergrens voor een duim; de
     vorige versie zat op 40 en daar mis je op.
   - Een chevron rechts op elke rij, zodat zichtbaar is dat het ergens
     heen gaat.
   - De knop wordt een kruis, op dezelfde plek. Niets verspringt.
   - Onderin de twee acties, de belangrijkste over de volle breedte.

   Nog steeds <details>: browser-eigen, werkt met toetsenbord en
   schermlezer, en zonder JavaScript. Het script doet alleen het
   vergrendelen van het scrollen -- en als dat niet laadt, werkt het
   menu gewoon, het blad eronder schuift dan alleen mee.
   ═══════════════════════════════════════════════════════════════════ */
.nk-mob{display:none}
.nk-mob > summary{
  list-style:none;display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;margin-left:auto;border-radius:11px;
  border:1px solid var(--kop-lijn);background:rgba(255,255,255,.03);
  cursor:pointer;-webkit-tap-highlight-color:transparent}
.nk-mob > summary::-webkit-details-marker{display:none}
.nk-mob > summary:focus-visible{outline:2px solid var(--kop-blauw-l);outline-offset:3px}
.nk-streep{position:relative;display:block;width:17px;height:1.6px;background:var(--kop-tekst);
  border-radius:2px;transition:background .16s ease}
.nk-streep::before,.nk-streep::after{
  content:"";position:absolute;left:0;width:17px;height:1.6px;background:var(--kop-tekst);
  border-radius:2px;transition:transform .2s ease,top .2s ease}
.nk-streep::before{top:-5.5px}
.nk-streep::after{top:5.5px}
.nk-mob[open] > summary{background:rgba(255,255,255,.09)}
.nk-mob[open] .nk-streep{background:transparent}
.nk-mob[open] .nk-streep::before{top:0;transform:rotate(45deg)}
.nk-mob[open] .nk-streep::after{top:0;transform:rotate(-45deg)}

/* Het scherm. Vult alles onder de balk -- dvh en niet vh, want op een
   telefoon verandert de zichtbare hoogte als de adresbalk mee scrollt
   en met vh valt de onderkant dan weg achter de browserbalk. */
.nk-mob-paneel{
  position:fixed;left:0;right:0;z-index:-1;
  top:var(--kop-hoogte,64px);
  height:calc(100dvh - var(--kop-hoogte,64px));
  background:#06070D;
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:.4rem 0 2rem;
  animation:nk-in .22s cubic-bezier(.22,.8,.3,1) both}
@supports not (height:100dvh){
  .nk-mob-paneel{height:calc(100vh - var(--kop-hoogte,64px))}
}
@keyframes nk-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

.nk-mob-paneel .kopje{
  margin:1.5rem 0 .2rem;padding:0 clamp(18px,5vw,26px);
  font:600 .7rem var(--kop-dis);letter-spacing:.06em;text-transform:uppercase;
  color:rgba(242,244,250,.34)}
.nk-mob-paneel .kopje:first-child{margin-top:.7rem}

/* Rijen van 56px. Een chevron rechts maakt zichtbaar dat het een link
   is en geen kopje -- zonder dat scant een oog erover heen. */
/* Een raster en geen flexbox. Met flexbox werden de titel en de
   omschrijving twee losse kolommen naast elkaar -- "Positionering" links
   en "Wie staat er aan de andere kant" rechts -- en dat leest nergens
   naar. Nu staan ze onder elkaar in kolom 1 en spant de chevron beide
   rijen in kolom 2. */
.nk-mob-paneel a{
  display:grid;grid-template-columns:1fr auto;column-gap:1rem;align-items:center;
  min-height:56px;padding:.7rem clamp(18px,5vw,26px);
  text-decoration:none;color:var(--kop-tekst);
  border-bottom:1px solid rgba(255,255,255,.055)}
.nk-mob-paneel a:last-of-type{border-bottom:0}
.nk-mob-paneel a b{grid-column:1;grid-row:1;font:700 1.02rem var(--kop-dis);letter-spacing:-.015em}
.nk-mob-paneel a span{grid-column:1;grid-row:2;margin-top:.14rem;
  font:400 .82rem/1.35 system-ui,sans-serif;color:rgba(242,244,250,.48)}
.nk-mob-paneel a::after{
  content:"";grid-column:2;grid-row:1 / span 2;align-self:center;
  width:.42rem;height:.42rem;
  border-right:1.7px solid rgba(242,244,250,.3);border-bottom:1.7px solid rgba(242,244,250,.3);
  transform:rotate(-45deg)}
.nk-mob-paneel a:active{background:rgba(255,255,255,.05)}

/* De twee acties onderin. De belangrijkste over de volle breedte, want
   dat is waar een duim vanzelf terechtkomt. */
.nk-acties{padding:1.6rem clamp(18px,5vw,26px) 0;display:grid;gap:.6rem}
.nk-acties a{
  display:flex;grid-template-columns:none;align-items:center;justify-content:center;gap:.5rem;
  min-height:52px;padding:.8rem 1rem;border-radius:12px;border-bottom:0;
  font:700 .98rem var(--kop-dis);text-decoration:none}
.nk-acties a::after{display:none}
.nk-acties .hoofd{background:var(--kop-blauw);color:#fff;box-shadow:0 10px 28px rgba(0,82,255,.32)}
.nk-acties .bij{border:1px solid rgba(255,255,255,.16);color:rgba(242,244,250,.86)}

@media (max-width:1140px){
  .nk-mob{display:block}
  /* Drie kolommen: logo links, knop rechts, menuknop uiterst rechts.
     De blauwe knop bleef eerst weg op mobiel omdat er anders geen
     ruimte was -- maar dat is de knop waar mensen op drukken, dus die
     weghalen is geen opmaakkeuze maar een conversiekeuze, en de
     verkeerde. Wat er wél weg kan zijn de statusregel en Inloggen:
     die staan allebei in het menu. */
  .site-header{grid-template-columns:auto 1fr auto}
  .site-nav{display:none}
  .site-header .desk-status{display:none}
  /* grid-row:1 is hier niet overbodig. In de HTML staat het menu vóór de
     knoppen, dus zonder expliciete rij plaatst de browser het menu in
     kolom 3 van rij 1 en valt de knop daarna door naar rij 2 -- de
     balk wordt dan twee lagen hoog met de knop er los onder. */
  .header-right{display:flex;grid-column:2;grid-row:1;justify-content:flex-end}
  .header-right .nav-link{display:none}
  .nk-mob{grid-column:3;grid-row:1}
}
@media (max-width:480px){
  .site-header{padding:13px 14px;gap:8px}
  .site-header .logo{font-size:20px}
  .site-header .btn--nav{padding:8px 13px;font-size:12.5px}
  .site-header .btn--nav .arrow{display:none}
}
/* Onder 360px past het alleen nog zonder de pijl en met minder lucht.
   De knop blijft -- die verdwijnt niet meer. */
@media (max-width:359px){
  .site-header{padding:12px 11px;gap:6px}
  .site-header .logo{font-size:18px}
  .site-header .btn--nav{padding:7px 10px;font-size:11.5px}
  .nk-mob > summary{width:38px;height:38px}
}
@media (prefers-reduced-motion:reduce){
  .nk-mob-paneel{animation:none}
  .nk-streep,.nk-streep::before,.nk-streep::after{transition:none}
}

/* ── het brede uitklappaneel ──
   Onder Artikelen staan zeven reeksen in plaats van vier of zes
   koppelingen. Op twee kolommen wordt dat te smal voor de omschrijving,
   dus dit paneel krijgt meer ruimte en schuift naar links zodat het
   binnen het scherm blijft. */
/* Alleen breder maken. Het grondpatroon centreert met left:50% en een
   translateX(-50%); die niet aanraken, anders schuift het paneel een
   halve breedte naar rechts het scherm uit. */
.nav-paneel.breed{min-width:0;width:min(38rem,calc(100vw - 2.5rem))}

/* ── de leeslijn onderaan een artikel ──
   Elk stuk wijst naar het volgende in zijn reeks en naar twee stukken
   die ermee samenhangen. Staat in nomad-kop.css omdat alle artikelen
   dat bestand toch al laden; de klassen komen alleen daar voor. */
.hierna{margin:3.4rem 0 0;padding-top:1.9rem;border-top:1px solid var(--pp-line,#E3E6EB)}
.hierna-kop{margin:0 0 .75rem;font:600 11.5px var(--pp-label,system-ui);letter-spacing:.11em;
  text-transform:uppercase;color:var(--pp-stil,#787F8C)}
.hierna-volgend{display:block;border:1px solid var(--pp-line,#E3E6EB);border-radius:14px;
  background:var(--pp-panel,#fff);padding:1.15rem 1.25rem;text-decoration:none;
  transition:border-color .15s,transform .15s}
.hierna-volgend:hover{border-color:var(--pp-blue,#0052FF);transform:translateY(-1px)}
.hierna-volgend i{display:block;font:600 11.5px var(--pp-label,system-ui);font-style:normal;
  letter-spacing:.06em;color:var(--pp-blue,#0052FF)}
.hierna-volgend b{display:block;margin-top:.3rem;font:800 1.32rem var(--pp-display,system-ui);
  letter-spacing:-.025em;color:var(--pp-ink,#0B0D12)}
.hierna-volgend span{display:block;margin-top:.35rem;font-size:.93rem;line-height:1.6;
  color:var(--pp-muted,#454B57)}
.hierna-volgend u{display:inline-block;margin-top:.7rem;font:600 .88rem var(--pp-label,system-ui);
  color:var(--pp-blue,#0052FF);text-decoration:none}
.hierna .hierna-kop+.hierna-zij,.hierna-volgend+.hierna-kop{margin-top:1.6rem}
.hierna-zij{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.hierna-zij a{display:block;border:1px solid var(--pp-line,#E3E6EB);border-radius:12px;
  background:var(--pp-panel,#fff);padding:.85rem 1rem;text-decoration:none;
  transition:border-color .15s}
.hierna-zij a:hover{border-color:var(--pp-blue,#0052FF)}
.hierna-zij b{display:block;font:700 .97rem var(--pp-display,system-ui);letter-spacing:-.015em;
  color:var(--pp-ink,#0B0D12)}
.hierna-zij span{display:block;margin-top:.18rem;font:500 .8rem var(--pp-label,system-ui);
  color:var(--pp-stil,#787F8C)}
.hierna-terug{display:inline-block;margin-top:1.25rem;font:600 .88rem var(--pp-label,system-ui);
  color:var(--pp-stil,#787F8C);text-decoration:none;border-bottom:1px solid var(--pp-line-2,#D4D9E0)}
.hierna-terug:hover{color:var(--pp-blue,#0052FF);border-bottom-color:var(--pp-blue,#0052FF)}
@media (max-width:640px){
  .hierna-zij{grid-template-columns:1fr}
  .hierna-volgend b{font-size:1.18rem}
}