/*
  ============================================================
  site-nav.css — HET MENU VAN DE PUBLIEKE SITE
  ============================================================
  Eén bestand voor het menu op álle publieke pagina's: de homepage
  én de landingspagina's. Tot 2 september 2026 stond deze opmaak in
  het <style>-blok van website.html, waardoor de andere 27 pagina's
  een ander (korter) menu hadden.

  Bewust NIET in styles.css: dat bestand deelt de ingelogde app zijn
  opmaak, en daar hoort een marketingmenu niet thuis.

  Twee weergaven:
   - Breder dan 860px: kopjes naast elkaar, uitklappen bij hover en
     bij toetsenbordfocus (:focus-within), zodat het ook werkt als je
     met Tab navigeert.
   - Smaller dan 860px: een menuknop, en daaronder dezelfde kopjes
     als uitklapbare groepen. Tot vandaag was er op een telefoon
     helemaal geen navigatie — de links werden simpelweg verborgen.

  05-09-2026 — waarom de mobiele regels `.site-header` ervoor hebben:
  website.html laadt dit bestand in de <head> en zet DAARNA nog een
  eigen <style>-blok met `.site-nav-links { display: flex; align-items:
  center; gap: 26px; }`. Even zwaar, maar later in de bron — dus dat won,
  ook binnen de media query hieronder (media queries verhogen geen
  specificiteit). Gevolg op een telefoon: het menu stond altijd open,
  gecentreerd en met 26px lucht tussen de items. Met `.site-header`
  ervoor wegen deze regels zwaarder en klopt het weer, zonder dat er
  iets aan website.html of de 27 landingspagina's hoeft te veranderen.
*/

/* ---------- gedeeld ---------- */

/*
  HET LOGO IN DE KOPBALK — toegevoegd 9 september 2026.

  Tot vandaag stond er in de kopbalk alleen het WOORD "GainOwner" als
  tekst; het logo kwam nergens op de site voor, terwijl het al wel in de
  favicon en de app-tegel zat. Gekozen concept: nummer 5 ("staafjes"),
  dezelfde die in favicon.svg en de profielfoto's is gebruikt.

  Waarom via CSS en niet door de HTML aan te passen: `.site-brand` staat
  hard in ruim veertig pagina's. Eén achtergrondafbeelding hier raakt ze
  allemaal tegelijk, en het woord blijft gewoon in de HTML staan voor
  voorleessoftware en voor Google — het wordt alleen visueel vervangen.

  Wil je een ander concept? Zet dan het bijbehorende bestand uit
  GainOwner-logo/svg/ in public/ als logo-gainowner.svg. Verder hoeft er
  niets te veranderen.
*/
/*
  VARIANT A: beeldmerk links, woordmerk rechts bij de knoppen.
  Gekozen op 9 september 2026.

  Het beeldmerk vervangt de tekst in `.site-brand` (links). Het woordmerk
  komt er niet als HTML bij — dat zou een aanpassing in ruim veertig
  pagina's betekenen — maar als pseudo-element op de menubalk, met een
  `order` die hem tussen de links en de knop zet.

  Terug naar de gewone lockup (beeldmerk en naam naast elkaar)? Zet dan
  `logo-gainowner.svg` terug in `.site-brand` en haal het blok met
  `.site-nav-links::after` weg. Dat bestand staat er nog.
*/
.site-header .site-brand {
  display: block;
  /* Verhouding van logo-merk.svg is 124 : 64, oftewel 1,94 op 1. */
  width: 66px; height: 34px;
  background: url("/logo-merk.svg") left center / contain no-repeat;
  /* De tekst blijft bestaan maar valt buiten beeld. Niet display:none en
     niet visibility:hidden — dan zou een schermlezer hem overslaan. */
  text-indent: -9999px; white-space: nowrap; overflow: hidden;
}

@media (min-width: 861px) {
  /* Het woordmerk als laatste flex-item vóór de knop. Een pseudo-element
     van een flex-container is zelf ook een flex-item, dus `order` bepaalt
     waar hij belandt: 1 zet hem na de gewone links, 2 duwt de knop erachter. */
  .site-header .site-nav-links::after {
    content: "";
    /* Verhouding van logo-woordmerk.svg is 268 : 46, oftewel 5,83 op 1. */
    width: 128px; height: 22px;
    background: url("/logo-woordmerk.svg") left center / contain no-repeat;
    order: 1;
    margin-left: 10px;
  }
  .site-header .site-nav-links > .btn,
  .site-header .site-nav-links > .btn-secondary { order: 2; }
}

@media (max-width: 860px) {
  /* Op een telefoon klapt het menu open als kolom. Een woordmerk tussen de
     menu-items in slaat daar nergens op, dus laten we het weg — het
     beeldmerk staat dan gewoon links in de balk. */
  .site-header .site-nav-links::after { display: none; }
}

@media (max-width: 480px) {
  .site-header .site-brand { width: 56px; height: 29px; }
}

/* De basisopmaak van de menubalk stond tot 05-09-2026 twee keer:
   inline in website.html én in landing.css, allebei ná dit bestand.
   Daardoor won die kopie van de mobiele regels onderaan en stond het
   menu op de homepage altijd open. Nu staat hij hier, één keer, vóór
   de media queries — precies waar de rest van het menu ook staat. */
.site-nav-links {
  display: flex; align-items: center; gap: 26px;
  font-size: 13.5px; font-weight: 600;
}
.site-nav-links a.text-link {
  text-decoration: none; color: var(--text-muted);
  position: relative; transition: color 0.15s ease;
}
.site-nav-links a.text-link:hover { color: var(--navy); }

/* Alleen de homepage gebruikt .active: site-nav.js zet die klasse op de
   link van de sectie waar je langs scrollt. Op de landingspagina's komt
   de klasse niet voor, dus daar doen deze twee regels niets. */
.site-nav-links a.text-link.active { color: var(--accent-dark); }
.site-nav-links a.text-link.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 2px; background: var(--accent); border-radius: 2px;
}
.site-nav-links .btn, .site-nav-links .btn-secondary {
  text-decoration: none; display: inline-block;
  padding: 9px 16px; border-radius: 8px; font-size: 13px;
}
.site-nav-toggle {
  display: none;
  align-items: center; gap: 8px;
  background: none; border: 1px solid var(--border); border-radius: 9px;
  padding: 8px 13px; font-family: inherit; font-size: 13.5px; font-weight: 700;
  color: var(--navy); cursor: pointer;
}
.site-nav-toggle .streepjes { font-size: 15px; line-height: 1; }
.site-nav-toggle[aria-expanded="true"] { background: var(--bg); }

.nav-item { position: relative; }
.nav-top {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  color: var(--text-muted); font-weight: 600; font-size: 13.5px;
  background: none; border: none; font-family: inherit; padding: 22px 0;
}
.nav-item:hover > .nav-top,
.nav-item:focus-within > .nav-top { color: var(--navy); }
.nav-top .pijl { font-size: 9px; opacity: .6; transition: transform .15s ease; }

.nav-drop {
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 18px 50px rgba(23,32,51,0.14); padding: 18px; z-index: 30;
}
.nav-kolommen { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.nav-kop {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-muted); margin: 0 0 8px; padding: 0 8px;
}
.nav-drop a {
  display: block; text-decoration: none; padding: 8px; border-radius: 9px;
  color: var(--navy); font-size: 13px; font-weight: 600; line-height: 1.35;
}
.nav-drop a:hover { background: #F4F7FD; }
.nav-drop a small { display: block; font-weight: 500; font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.nav-drop .nav-voet {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--text-muted); padding-left: 8px;
}
.nav-drop .nav-voet a { display: inline; padding: 0; font-size: 12px; color: var(--accent-dark); }

/* ---------- breed scherm ---------- */
@media (min-width: 861px) {
  .nav-drop {
    position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%) translateY(6px);
    opacity: 0; visibility: hidden;
    transition: opacity .15s ease, transform .15s ease;
  }
  .nav-item:hover .nav-drop,
  .nav-item:focus-within .nav-drop {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
  }
  .nav-item:hover .nav-top .pijl,
  .nav-item:focus-within .nav-top .pijl { transform: rotate(180deg); }
  .nav-drop.breed { width: 640px; }
  .nav-drop.smal  { width: 300px; }
}

/* ---------- telefoon en kleine tablet ---------- */
@media (max-width: 860px) {
  .site-nav-toggle { display: inline-flex; }

  .site-header .site-nav-links {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 20px 40px rgba(23,32,51,0.10);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 10px 20px 20px; max-height: calc(100vh - 70px); overflow-y: auto;
  }
  .site-header { position: sticky; }
  .site-header .site-nav-links.open { display: flex; }

  .nav-item { position: static; border-bottom: 1px solid var(--border); }
  .nav-top {
    width: 100%; justify-content: space-between; padding: 15px 0;
    font-size: 15px; color: var(--navy);
  }
  .nav-top .pijl { font-size: 11px; }
  .nav-item.open .nav-top .pijl { transform: rotate(180deg); }

  .nav-drop {
    display: none; border: none; box-shadow: none; padding: 0 0 14px;
    border-radius: 0; width: auto;
  }
  .nav-item.open .nav-drop { display: block; }
  .nav-kolommen { grid-template-columns: 1fr; gap: 14px; }
  .nav-drop a { padding: 10px 8px; font-size: 14px; }

  .site-header .site-nav-links > a.text-link {
    display: block; padding: 15px 0; font-size: 15px; color: var(--navy);
    border-bottom: 1px solid var(--border); text-decoration: none;
  }
  .site-header .site-nav-links > a.btn { margin-top: 16px; text-align: center; }
}