/* =========================================================================
   UnIQtalent — het responsieve navigatiesysteem.

   Eén bestand voor alle drie de headers (public/index.html,
   public/werkstudenten.html en de app-header in src/components/Chrome.tsx),
   zodat ze niet uit elkaar lopen. Het wordt ná site.css respectievelijk
   globals.css geladen; de selectoren hieronder leunen niettemin op
   specificiteit in plaats van op laadorde, zodat de app-header ook klopt
   wanneer Next zijn stylesheet later injecteert.

   Drie bewust ontworpen states — géén priority+ waarbij items één voor één
   wegvallen op de pixel:

     full      >= 1240px    de volledige balk, ongewijzigd
     compact   600-1239px   logo + één link + de gouden CTA + hamburger
     minimal   <= 599px     logo + hamburger

   De grenzen komen uit de gemeten balk, niet uit een standaardset. De volle
   werkgeversbalk is 1070px breed (152 logo + 28 gap + 890 links) en heeft met
   tweemaal --edge (60px) dus 1190px viewport nodig; daaronder werd de rij tot
   nu toe geperst. 1240px houdt 50px lucht op die krapste pagina. De compacte
   rij meet ~492px en past met edges vanaf ~532px: 600px geeft daar ruime
   marge en legt de grens onder de kleinste tablet en boven de grootste
   telefoon.

   Elk item in de balk draagt .nav-full (alleen in full) of .nav-keep (full én
   compact). Wat in een state uit de balk valt, blijft bereikbaar in het
   hamburger-paneel: dat bevat altijd de volledige set.

   Daar komt één variant bij: is er een sessie, dan draagt de balk
   .nav-signed-in en maakt de full state plaats voor de inloggegevens. Zie
   "Ingelogd" verderop.
   ========================================================================= */

/* -------------------------------------------------------------------------
   De balk — de drie states
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   Invalshoek — alleen op de app-pagina's (/vacatures en verder). Die zijn
   vanuit beide landingspagina's bereikbaar en horen het menu te tonen van de
   pagina waar de bezoeker vandaan komt. De app rendert beide sets; het inline
   script in src/app/layout.tsx zet data-audience vóór de paint.

   De :not()-vorm is bewust: zonder JS en zonder onthouden keuze staat het
   attribuut er niet, en dan hoort de werkstudentenset te blijven staan in
   plaats van allebei.
   ------------------------------------------------------------------------- */

html:not([data-audience="werkgever"]) .nav-aud-werkgever,
html[data-audience="werkgever"] .nav-aud-werknemer {
  display: none;
}

/* De CTA draagt twee labels: de volledige tekst in de full state, een korte in
   compact. Beide basisregels horen hier en niet in site.css, want de app-header
   gebruikt ze ook. */
.nav-bar .nav-cta-long { display: inline; }
.nav-bar .nav-cta-short { display: none; }

/* Specificiteit (0,3,0) ligt bewust boven `.nav-links a` (0,2,1) en `.btn`
   (0,1,0), zodat het verbergen niet van de laadorde afhangt. */
@media (max-width: 1239px) {
  .nav-bar .nav-links .nav-full { display: none; }
  /* De verkorte CTA-tekst ("Kennismaking", "Inschrijven") houdt de compacte
     rij op één regel; de volledige tekst staat in het paneel. */
  .nav-bar .nav-links .nav-cta-long { display: none; }
  .nav-bar .nav-links .nav-cta-short { display: inline; }
  /* Drie klassen diep, net als de regels hierboven: de basisregel van de
     hamburger staat verderop in dit bestand en zou anders op gelijke
     specificiteit winnen puur omdat hij later komt. */
  .nav-bar .nav-links .nav-burger { display: inline-flex; }
}

@media (max-width: 599px) {
  .nav-bar .nav-links .nav-keep { display: none; }
}

/* De balk mag nooit wrappen: dat verdubbelt de hoogte en laat de hero
   verspringen (site.js meet --nav-h). De states houden de rij kort genoeg. */
.nav-bar .nav-links { flex-wrap: nowrap; }

/* -------------------------------------------------------------------------
   Ingelogd — op alle drie de headers. src/components/Chrome.tsx zet
   .nav-signed-in op de <header> van de app-pagina's; de landingspagina's zijn
   handgeschreven HTML, dus daar zet src/lib/landing/auth.ts de klasse en de
   inloggegevens er bij het serveren in. Beide gebruiken dezelfde markup.

   "Ingelogd als <naam>" plus "Uitloggen" meten samen zo'n 250px. Die passen
   niet náást de volledige set links: de rij werd samengeperst en de labels
   vielen op twee regels. In de volle balk vallen daarom de kruislink ("Voor
   werkgevers" / "Voor werkstudenten") en Contact weg — de twee items die
   src/content/navigation.ts als dropWhenSignedIn markeert — en staat de
   hamburger er wél. Beide blijven bereikbaar in het paneel, dat altijd de
   volledige set bevat.

   Onder 1240px verandert er niets: .nav-full haalt dan sowieso álles uit de
   balk, inclusief de inloggegevens, en het paneel toont ze.
   ------------------------------------------------------------------------- */

/* (0,4,0) — bewust boven de state-regels hierboven, zodat het niet van de
   laadorde afhangt. */
.nav-bar.nav-signed-in .nav-links .nav-auth-drop { display: none; }
.nav-bar.nav-signed-in .nav-links .nav-burger { display: inline-flex; }

/* Het label is op de server al op een vast aantal tekens afgekapt (zie
   truncateIdentity in src/lib/format.ts); dit houdt het daarnaast op één
   regel, zodat het nooit alsnog om de balk heen breekt. */
.nav-bar .nav-links .nav-identity { white-space: nowrap; }

/* -------------------------------------------------------------------------
   Hamburger — drie zware goudbalken, hetzelfde motief als de eyebrows en de
   dubbele regel uit het woordmerk.
   ------------------------------------------------------------------------- */

.nav-bar .nav-burger {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  /* 44px blijft het minimum voor een betrouwbaar raakvlak op touch. */
  width: 44px;
  height: 44px;
  padding: 0;
  appearance: none;
  background: transparent;
  border: 1px solid rgba(191, 150, 51, 0.42);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}
.nav-bar .nav-burger:hover {
  border-color: var(--gold-bright, #d9ae4a);
  background: rgba(191, 150, 51, 0.12);
}

.nav-burger-bars {
  position: relative;
  display: block;
  width: 22px;
  height: 3px;
  background: var(--gold-bright, #d9ae4a);
}
.nav-burger-bars::before,
.nav-burger-bars::after {
  content: "";
  position: absolute;
  left: 0;
  height: 3px;
  background: var(--gold-bright, #d9ae4a);
}
.nav-burger-bars::before { top: -7px; width: 22px; }
/* De onderste balk loopt korter uit — dezelfde ongelijke uitloop als de
   dubbele regel in het woordmerk. */
.nav-burger-bars::after { top: 7px; width: 14px; }

/* -------------------------------------------------------------------------
   Het paneel — native popover, hetzelfde idioom als de login-pop-up: de
   browser levert light-dismiss, Escape, de top layer en focusherstel. Geen
   eigen focus-trap nodig.

   `display` staat hier expliciet: in een browser zonder popover-ondersteuning
   blijft het paneel daardoor verborgen in plaats van als losse blok midden in
   de pagina te verschijnen.
   ------------------------------------------------------------------------- */

.nav-menu {
  display: none;
  position: fixed;
  /* Rechts aangeschoven paneel in compact; onder 600px schermvullend. */
  inset: 0 0 0 auto;
  width: min(420px, 100vw);
  max-width: 100vw;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid rgba(191, 150, 51, 0.28);
  background: var(--ink, #0a0a0b);
  color: var(--on-dark, #f2efe8);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nav-menu:popover-open {
  display: flex;
  flex-direction: column;
}
.nav-menu::backdrop { background: rgba(10, 10, 11, 0.55); }

@media (max-width: 599px) {
  .nav-menu {
    inset: 0;
    width: 100vw;
    border-left: 0;
  }
}

/* Het paneel schuift in vanaf de rand waar de hamburger staat. @starting-style
   geeft de begintoestand; allow-discrete laat `display` en `overlay` mee-
   animeren zodat het sluiten ook zichtbaar is. */
.nav-menu {
  opacity: 0;
  translate: 100% 0;
  transition:
    opacity 0.2s ease,
    translate 0.26s cubic-bezier(0.2, 0.7, 0.2, 1),
    overlay 0.26s allow-discrete,
    display 0.26s allow-discrete;
}
.nav-menu:popover-open {
  opacity: 1;
  translate: none;
}
@starting-style {
  .nav-menu:popover-open {
    opacity: 0;
    translate: 100% 0;
  }
}
.nav-menu::backdrop {
  opacity: 0;
  transition: opacity 0.2s ease, overlay 0.26s allow-discrete, display 0.26s allow-discrete;
}
.nav-menu:popover-open::backdrop { opacity: 1; }
@starting-style {
  .nav-menu:popover-open::backdrop { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-menu,
  .nav-menu::backdrop {
    transition: none;
    translate: none;
  }
}

/* De pagina eronder mag niet meescrollen. De compensatie voorkomt dat de
   inhoud opzij springt wanneer een klassieke scrollbalk verdwijnt; nav.js meet
   die breedte bij het openen. */
html:has(.nav-menu:popover-open) body {
  overflow: hidden;
  padding-right: var(--nav-sbw, 0px);
}

/* -- kop ------------------------------------------------------------------ */

.nav-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* Zelfde hoogte als de balk zelf, zodat de sluitknop op de hamburger valt. */
  min-height: 68px;
  padding: 12px clamp(20px, 5vw, 32px);
  border-bottom: 1px solid rgba(191, 150, 51, 0.28);
}
.nav-menu-title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-dark, #f2efe8);
}
/* De korte goudbalk uit de eyebrow-markering. */
.nav-menu-title::before {
  content: "";
  flex: none;
  width: 26px;
  height: 5px;
  background: var(--gold, #bf9633);
}
.nav-menu-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  appearance: none;
  background: transparent;
  border: 1px solid rgba(242, 239, 232, 0.28);
  border-radius: 6px;
  color: var(--on-dark, #f2efe8);
  font: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.nav-menu-close:hover {
  border-color: var(--gold-bright, #d9ae4a);
  color: var(--gold-bright, #d9ae4a);
}

/* -- links ---------------------------------------------------------------- */

.nav-menu-links {
  display: flex;
  flex-direction: column;
  padding: clamp(8px, 2vw, 16px) clamp(20px, 5vw, 32px);
}
.nav-menu-links a {
  display: block;
  padding-block: 15px;
  border-bottom: 1px solid rgba(242, 239, 232, 0.1);
  color: var(--on-dark, #f2efe8);
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.16s ease;
}
.nav-menu-links a:last-child { border-bottom: 0; }
.nav-menu-links a:hover { color: var(--gold-bright, #d9ae4a); }

/* -- voet: de knoppen ----------------------------------------------------- */

.nav-menu-foot {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* margin-top:auto duwt de knoppen naar onderen zolang er ruimte over is. */
  margin-top: auto;
  padding: clamp(16px, 3vw, 24px) clamp(20px, 5vw, 32px)
    calc(clamp(16px, 3vw, 24px) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(191, 150, 51, 0.28);
}
.nav-menu-foot .btn { width: 100%; }

/* `.nav-links a` zet in site.css én globals.css de lichte balktekstkleur, en
   die selector (0,1,1) wint van `.btn-gold` / `.btn-accent` (0,1,0). De gouden
   CTA verliest daardoor zijn donkere tekst en wordt wit op goud. site.css
   herstelt dat al voor .btn-gold; de app-header had die regel nooit, dus daar
   stond de knop wit. Hier staat het voor beide knopnamen, met (0,3,1) zodat de
   laadorde niet uitmaakt. */
.nav-bar .nav-links a.btn-gold,
.nav-bar .nav-links a.btn-accent,
.nav-bar .nav-links a.btn-gold:hover,
.nav-bar .nav-links a.btn-accent:hover {
  color: var(--ink, #0a0a0b);
}

/* De app-pagina's kennen geen knopvariant voor een donkere ondergrond: .btn is
   daar donkere tekst op papier. Binnen het navigatiesysteem staat elke knop op
   --ink, dus de ghost-variant hoort hier — meteen ook voor de "Uitloggen"-knop
   in de app-balk, die tot nu toe donker op donker stond. */
.nav-bar .btn-ghost,
.nav-menu .btn-ghost {
  background: transparent;
  color: var(--on-dark, #f2efe8);
  border-color: rgba(242, 239, 232, 0.55);
}
.nav-bar .btn-ghost:hover,
.nav-menu .btn-ghost:hover {
  background: rgba(242, 239, 232, 0.12);
  color: var(--on-dark, #f2efe8);
  border-color: rgba(242, 239, 232, 0.55);
}

/* -------------------------------------------------------------------------
   De knopmaat in de balk — hier, want de drie headers delen hem.

   De rij is 68px hoog; de basisknop van 48px laat daar te weinig lucht
   omheen. Die 42px stond daarom als inline stijl in de twee documenten en
   nóg een keer in src/lib/landing/auth.ts, terwijl de app-header .btn-sm
   gebruikte: 38px, smallere padding, kleinere letter. Dezelfde uitlogknop was
   daardoor op /vacatures zichtbaar kleiner dan op "/".

   Specificiteit (0,3,0) ligt boven .btn-sm (0,1,0) en boven de basis .btn,
   dus dit wint ongeacht de laadorde van site.css/globals.css en nav.css.
   Alleen de balk: het paneel (.nav-menu) houdt de volle knopmaat, want daar
   staan de knoppen onder elkaar op volle breedte.
   ------------------------------------------------------------------------- */
.nav-bar .nav-links .btn {
  min-height: 42px;
  padding-inline: 20px;
  font-size: 15px;
}