/* ====================================================================
   DE header-stijl. Eén bestand voor de hele site, blog en /en/ incluis.

   Stond voorheen in elke pagina apart in een <style>-blok, met per pagina
   kleine afwijkingen. Zo ontstond bijvoorbeeld "Inlo..." op account.html:
   daar was .btn de full-width formulierknop en de lokale kopie van deze
   regels vergat width terug te zetten.

   Alles staat onder `header.nav ...`, zodat het nooit iets buiten de
   header raakt en niet uitmaakt wat een pagina verder met .btn doet.
   Kleuren staan hard in plaats van via var(), want niet elke pagina
   definieert dezelfde custom properties.
   ==================================================================== */

header.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(14, 23, 38, .82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #24344a;
}
header.nav .nav-inner {
  display: flex; flex-direction: row; align-items: center; justify-content: space-between;
  gap: 18px; height: 68px; max-width: 1140px; margin: 0 auto; padding: 0 28px;
}

/* Logo */
header.nav .logo {
  display: flex; align-items: center; gap: 11px; flex-shrink: 0;
  font-family: Sora, sans-serif; font-weight: 800; font-size: 20px;
  color: #fff; letter-spacing: -.03em; text-decoration: none;
}
header.nav .logo .mark { width: 34px; height: 34px; display: block; flex-shrink: 0; background: none; border-radius: 0; }
header.nav .logo .mark img { width: 100%; height: 100%; display: block; object-fit: contain; }

/* Links */
header.nav .nav-links { display: flex; flex-direction: row; align-items: center; gap: 30px; }
header.nav .nav-links a {
  font-size: 14.5px; font-weight: 500; color: #a9c2dc;
  margin: 0; text-decoration: none; white-space: nowrap; transition: color .15s;
}
header.nav .nav-links a:hover { color: #fff; }

/* Knoppen rechts */
header.nav .nav-cta { display: flex; align-items: center; gap: 14px; background: none; padding: 0; border-radius: 0; }
header.nav .nav-login {
  font-size: 14.5px; font-weight: 500; color: #a9c2dc; text-decoration: none;
  cursor: pointer; background: none; padding: 0; border: 0;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
header.nav .nav-login:hover { color: #fff; }
header.nav .nav-logout {
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .22); color: #fff;
  font-family: Sora, sans-serif; font-weight: 500; font-size: 14px; line-height: 1;
  padding: 9px 17px; border-radius: 10px; cursor: pointer;
  white-space: nowrap; transition: background .15s, border-color .15s;
}
header.nav .nav-logout:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .4); }

/* width/height expliciet: op account.html is .btn de formulierknop met
   width:100%, en zonder deze reset claimt "Probeer gratis" de hele nav-cta. */
header.nav .btn {
  width: auto; height: auto;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: Sora, sans-serif; font-weight: 600; font-size: 15px;
  padding: 13px 24px; border-radius: 10px; border: 1.5px solid transparent;
  cursor: pointer; white-space: nowrap; text-decoration: none; margin-top: 0;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
header.nav .btn:active { transform: translateY(1px); }
header.nav .btn-primary { background: #0a8fc4; color: #fff; box-shadow: 0 6px 22px -8px rgba(10, 180, 230, .7); }
header.nav .btn-primary:hover { background: #0a7ba8; box-shadow: 0 10px 30px -8px rgba(10, 180, 230, .8); }
header.nav .btn-sm { padding: 9px 17px; font-size: 14px; }

header.nav .burger { display: none; background: none; border: 0; color: #fff; font-size: 24px; cursor: pointer; }

/* Ingelogd of niet. De klasse op <html> wordt door het inline scriptje in de
   header gezet, tijdens het parsen, dus voor de eerste tekenbeurt. Zonder dit
   ziet de bezoeker eerst de verkeerde knoppen en klapt de header om zodra
   /api/auth/me terug is. */
html.tc-anon   header.nav .tc-authed-only { display: none !important; }
html.tc-authed header.nav .tc-anon-only   { display: none !important; }
/* Geen van beide klassen (JS uit): toon de uitgelogde variant. */
html:not(.tc-anon):not(.tc-authed) header.nav .tc-authed-only { display: none !important; }

/* Taalschakelaar. Staat nu in de HTML in plaats van dat i18n.js hem inspuit,
   dus deze regels moeten hier staan en niet pas als dat script geladen is,
   anders springt de nav alsnog. i18n.js injecteert dezelfde regels nog voor
   pagina's die dit bestand niet laden; dat botst niet, het is identiek. */
header.nav #tc-lang-switch {
  display: inline-flex; align-items: center; gap: 4px; margin-right: 6px;
  padding: 3px; border-radius: 9px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16);
}
header.nav #tc-lang-switch button {
  display: flex; align-items: center; gap: 5px; cursor: pointer;
  border: 0; background: transparent; padding: 4px 7px; border-radius: 6px; line-height: 1;
  font-family: inherit; font-size: 12px; font-weight: 600; color: #a9c2dc;
  transition: background .15s, color .15s;
}
header.nav #tc-lang-switch button:hover { color: #fff; }
header.nav #tc-lang-switch button.active { background: rgba(255, 255, 255, .16); color: #fff; cursor: default; }
header.nav #tc-lang-switch svg { width: 20px; height: 13px; display: block; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); }

@media (max-width: 980px) { header.nav .nav-links { display: none; } header.nav .burger { display: block; } }
@media (max-width: 620px) { header.nav .nav-login { display: none; } }
@media (max-width: 560px) {
  header.nav .nav-inner { padding: 0 20px; }
  header.nav #tc-lang-switch button span { display: none; }
  header.nav #tc-lang-switch button { padding: 5px; }
}
