/* De Leqture-kopbalk voor de overgenomen sites.

   Wellbeing Weekly en Mental Health Day zijn handgebouwde sites met een eigen
   stylesheet. Ze krijgen bij het bouwen het Leqture-menu ingezet, maar niet
   onze stylesheet: die zou hun hele pagina overnemen. Zonder regels voor
   .nav-item .sub klapten de twee submenus als losse tekst open en groeide de
   kopbalk uit tot een muur van links.

   Dit bestand bevat alleen de kopbalk, alles onder .nav geschreven zodat er
   niets van hun eigen opmaak sneuvelt. De kleuren staan er voluit in: hun
   stylesheets definieren dezelfde tokennamen met andere waarden. */

nav.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(20, 20, 20, .94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(246, 242, 239, .14);
  padding: 0; margin: 0;
}
/* Zie de toelichting in leqture-d8.css: uitlijnen op het woordmerk, niet op
   het midden van woordmerk plus tagline. */
nav.nav .container {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 22px; width: 100%; max-width: 1280px; margin: 0 auto;
  padding: 18px 32px;
}
nav.nav .container > .nav-links { margin-top: 8px; }
nav.nav .container > .btn { margin-top: 4px; }
nav.nav a { text-decoration: none; }
nav.nav .brand {
  display: flex; align-items: center; gap: 12px;
  color: #F6F2EF; flex: 0 0 auto;
}
nav.nav .brand-stacked { flex-direction: column; align-items: flex-start; gap: 8px; }
nav.nav .brand .logo { height: 30px; width: auto; }
nav.nav .brand .tag {
  display: block; font-size: 10px; font-weight: 400; letter-spacing: .18em;
  line-height: 1.5; text-transform: uppercase;
  color: rgba(246, 242, 239, .7); white-space: nowrap;
}
nav.nav .nav-links { display: flex; align-items: center; gap: 30px; }
nav.nav .nav-links > a,
nav.nav .nav-item > a {
  font-size: 15px; font-weight: 400; letter-spacing: -.01em;
  color: #F6F2EF; white-space: nowrap;
  padding-bottom: 2px; border-bottom: 1px solid transparent;
}
nav.nav .nav-links > a:hover,
nav.nav .nav-item > a:hover { border-bottom-color: #FF8250; }

/* De twee uitklappers. */
nav.nav .nav-item { position: relative; display: inline-flex; align-items: center; }
nav.nav .nav-item .sub {
  position: absolute; top: 100%; left: -14px; z-index: 60;
  display: block; min-width: 268px; padding: 10px 0;
  background: #141414; border: 1px solid rgba(246, 242, 239, .16);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
nav.nav .nav-item:hover .sub,
nav.nav .nav-item:focus-within .sub { opacity: 1; visibility: visible; transform: translateY(0); }
nav.nav .nav-item .sub a {
  display: block; padding: 9px 18px; font-size: 15px; line-height: 1.3;
  font-weight: 400; letter-spacing: -.01em; text-transform: none;
  color: #F6F2EF; white-space: nowrap; border: 0;
}
nav.nav .nav-item .sub a:hover,
nav.nav .nav-item .sub a:focus-visible { background: #FF8250; color: #141414; }
nav.nav .nav-item .sub a:first-child {
  font-weight: 500; border-bottom: 1px solid rgba(246, 242, 239, .16);
  margin-bottom: 6px; padding-bottom: 12px;
}
/* Onzichtbare brug, anders valt het menu dicht tussen knop en lijst. */
nav.nav .nav-item .sub::before {
  content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 10px;
}

/* De knop rechts, met de tekstballonstaart van D8. */
nav.nav .btn {
  position: relative; display: inline-block; flex: 0 0 auto;
  font-size: 15px; line-height: 22px; padding: 9px 18px;
  font-weight: 500; letter-spacing: -.01em; border-radius: 0;
  background: #FF8250; border: 1px solid #FF8250; color: #141414;
}
nav.nav .btn:hover { background: #FF9468; border-color: #FF9468; }
nav.nav .btn::after {
  content: ''; position: absolute; right: 14px; bottom: -7px;
  border-style: solid; border-width: 7px 9px 0 0;
  border-color: #FF8250 transparent transparent transparent;
}
nav.nav .btn:hover::after { border-top-color: #FF9468; }

/* Zie leqture-d8.css en assets/nav.js: op een smal scherm een knop die een
   paneel over de pagina opent, met de submenus dicht tot je erop tikt. */
nav.nav .nav-burger, nav.nav .nav-klap { display: none; }
@media (max-width: 1100px) {
  /* Zie leqture-d8.css: backdrop-filter breekt position:fixed van het paneel. */
  nav.nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: #141414; }
  nav.nav .container { padding: 11px 16px; gap: 8px; flex-wrap: nowrap; }
  nav.nav .brand { min-width: 0; flex: 0 1 auto; gap: 4px; }
  nav.nav .brand .logo { height: 24px; }
  nav.nav .brand .tag { display: none; }
  nav.nav .container > .btn {
    margin-left: auto; flex: 0 1 auto; min-width: 0;
    font-size: 13px; padding: 8px 10px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
  }
  nav.nav .nav-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0 10px; flex: none; order: 3;
    background: transparent; border: 0; cursor: pointer;
  }
  nav.nav .nav-burger span { display: block; height: 2px; width: 100%; background: #F6F2EF; }
  nav.nav.menu-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  nav.nav.menu-open .nav-burger span:nth-child(2) { opacity: 0; }
  nav.nav.menu-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  nav.nav .nav-links {
    display: none; position: fixed; left: 0; right: 0; bottom: 0;
    top: var(--nav-h, 68px); z-index: 60;
    flex-direction: column; align-items: stretch; gap: 0;
    margin: 0; padding: 6px 20px 40px; overflow-y: auto;
    background: #141414; border-top: 1px solid rgba(246, 242, 239, .16);
  }
  nav.nav.menu-open .nav-links { display: flex; }
  nav.nav .nav-links > a, nav.nav .nav-item > a {
    display: block; padding: 15px 2px; font-size: 17px;
    border-bottom: 1px solid rgba(246, 242, 239, .12);
  }
  nav.nav .nav-item {
    display: grid; grid-template-columns: 1fr 44px; align-items: center;
    width: 100%; border-bottom: 1px solid rgba(246, 242, 239, .12);
  }
  nav.nav .nav-item > a { border-bottom: 0; }
  nav.nav .nav-klap {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; background: transparent;
    border: 0; color: #F6F2EF; cursor: pointer;
  }
  nav.nav .nav-klap svg { width: 20px; height: 20px; transition: transform .18s ease; }
  nav.nav .nav-item.sub-open .nav-klap svg { transform: rotate(180deg); }
  nav.nav .nav-item .sub {
    grid-column: 1 / -1; position: static; display: none;
    opacity: 1; visibility: visible; transform: none; min-width: 0;
    padding: 2px 0 12px 14px; background: transparent; border: 0;
  }
  nav.nav .nav-item.sub-open .sub { display: block; }
  nav.nav .nav-item .sub::before { content: none; }
  nav.nav .nav-item .sub a {
    padding: 11px 0; font-size: 15px; color: rgba(246, 242, 239, .82);
    white-space: normal;
  }
  nav.nav .nav-item .sub a:first-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 11px; }
}

/* iOS zoomt de pagina in zodra je een formulierveld aanraakt dat kleiner is
   dan 16px, en zoomt daarna niet vanzelf terug. Dat overkomt je op elk veld
   dat voor het oog prima 14 of 15px kan zijn. Op een telefoon dus altijd 16;
   op een breed scherm blijft alles zoals het was. */
@media (max-width: 900px) {
  /* De overgenomen stylesheets zetten hun eigen maat met een specifieker
     pad, dus hier telt de uitzondering. Het gaat niet om smaak maar om
     gedrag: onder 16px zoomt iOS de pagina in en niet terug. */
  input, select, textarea { font-size: 16px !important; }
}