/* ============================================================
   VERSIEBEHEER — 06a-header.css
   Bestandsversie: 3.2 · Release: R3 · 2026-07-20 · Full width & designconsistentie
   Changelog:
   3.2  Breadcrumb verborgen op de homepage (.home body-class);
        GP Element Display Rules genoemd als structureel alternatief.
   3.1  Utility-balk: laatste actie optisch op containerrand.
        ONGEWIJZIGD in R3 — meegeleverd voor complete set.
   3.0  Geharmoniseerd op echte GB Pro output; tap-target-token.
   ============================================================ */

/* ============================================================
   WESA — 06a-header.css  (v3 — geharmoniseerd)
   Structuur: site-header > nav > [logo] [toggle] [menu-container > classic-menu]
   GB Pro's classic-menu rendert: ul.gb-menu > li.gb-menu-item > a
   Wij leveren de layout-CSS die GB normaal per-block genereert.
   Breakpoint 48em = de 768px uit data-gb-mobile-breakpoint.
   Wijzigingen t.o.v. v2: 44px → var(--wsa-tap-target); de
   tijdelijke .ws-button-bridge is verhuisd naar 04-components.css.
   ============================================================ */

/* === Site header === */

.ws-site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--wsa-z-header);
  background-color: var(--wsa-clr-page);
  border-block-end: var(--wsa-border-heavy) solid var(--wsa-clr-rule);
}

.ws-nav {
  display: flex;
  align-items: center;
  gap: var(--wsa-space-m);
  min-height: var(--wsa-header-height);
  max-width: var(--wsa-container);
  margin-inline: auto;
  padding-inline: var(--wsa-gutter);
}

/* === Logo === */
/* TODO: bevestigen — 100px inline is vervangen door 3.5rem (56px);
   100px maakt de sticky balk erg hoog. Terugzetten kan hier op één plek. */
.ws-logo {
  display: block;
  block-size: 3.5rem;
  inline-size: auto;
}

.ws-nav > a:has(> .ws-logo) {
  display: inline-flex;
  align-items: center;
  min-height: var(--wsa-tap-target);
  flex-shrink: 0;
}

/* ============================================================
   DESKTOP (≥ 48em / 768px)
   Toggle weg, menu-container inline, menu als horizontale rij rechts.
   ============================================================ */

@media (min-width: 48em) {

  .ws-menu-toggle {
  display: none;
  }

  .ws-menu-container {
  display: flex;
  align-items: center;
  gap: var(--wsa-space-m);
  margin-inline-start: auto;
  }

  /* Dek beide outputs: GB Pro (ul.gb-menu / li.gb-menu-item)
   én WP-walker (ul.menu / li.menu-item) */
  .ws-menu-container :where(ul.gb-menu, ul.menu) {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wsa-space-3xs);
  list-style: none;
  margin: 0;
  padding: 0;
  }

  /* Submenu: dropdown onder het parent-item */
  .ws-menu-container :where(li.gb-menu-item, li.menu-item) {
  position: relative;
  }

  .ws-menu-container :where(ul.gb-sub-menu, ul.sub-menu) {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  min-width: 14rem;
  display: none;
  flex-direction: column;
  gap: 0;
  background-color: var(--wsa-clr-raised);
  border: var(--wsa-border-bold) solid var(--wsa-clr-rule);
  border-radius: var(--wsa-radius-md);
  padding: var(--wsa-space-2xs);
  z-index: var(--wsa-z-overlay);
  }

  .ws-menu-container :where(li.gb-menu-item, li.menu-item):is(:hover, :focus-within)
  > :where(ul.gb-sub-menu, ul.sub-menu) {
  display: flex;
  }
}

/* ============================================================
   MENU-ITEMS (beide viewports)
   ============================================================ */

.ws-menu-container :where(li) {
  list-style: none;
}

.ws-menu-container :where(li) > a {
  display: inline-flex;
  align-items: center;
  min-height: var(--wsa-tap-target);
  padding-inline: var(--wsa-space-xs);
  font-family: var(--wsa-ff-heading);
  font-weight: var(--wsa-fw-heading);
  font-size: var(--wsa-fs-400);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--wsa-clr-text);
  text-decoration: none;
  border-block-end: var(--wsa-border-heavy) solid transparent;
}

.ws-menu-container :where(li) > a:hover {
  color: var(--wsa-clr-accent);
}

.ws-menu-container :where(.current-menu-item, .current_page_item, .current-menu-ancestor) > a,
.ws-menu-container a[aria-current="page"] {
  border-block-end-color: var(--wsa-clr-accent);
}

/* Submenu-items: geen condensed uppercase, vol-breed */
.ws-menu-container :where(ul.gb-sub-menu, ul.sub-menu) a {
  inline-size: 100%;
  text-transform: none;
  font-family: var(--wsa-ff-body);
  font-weight: 600;
  border-block-end: 0;
  border-radius: var(--wsa-radius-sm);
}

.ws-menu-container :where(ul.gb-sub-menu, ul.sub-menu) a:hover {
  background-color: var(--wsa-clr-surface);
}

/* ============================================================
   MOBIEL (< 48em): toggle zichtbaar, menu-container als overlay.
   GB Pro toggelt een open-state; wij dekken de gangbare hooks.
   TODO: bevestigen — check in devtools welke class/attribuut GB zet
   bij openen (bv. .gb-menu-open op de nav of [data-gb-menu-open]).
   ============================================================ */

@media (max-width: 47.99em) {

  .ws-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--wsa-tap-target);
  min-height: var(--wsa-tap-target);
  margin-inline-start: auto;
  background: none;
  border: var(--wsa-border-bold) solid var(--wsa-clr-rule);
  border-radius: var(--wsa-radius-md);
  color: var(--wsa-clr-text);
  cursor: pointer;
  }

  .ws-menu-toggle svg {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  }

  /* Dicht: verborgen */
  .ws-menu-container {
  display: none;
  }

  /* Open: full-overlay onder de header */
  .ws-nav:is(.gb-menu-open, [data-gb-menu-open]) .ws-menu-container,
  .ws-menu-container:is(.gb-menu-open, [data-gb-menu-open]) {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset-block-start: var(--wsa-header-height);
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--wsa-z-overlay);
  background-color: var(--wsa-clr-page);
  padding: var(--wsa-space-l) var(--wsa-gutter);
  overflow-y: auto;
  }

  .ws-menu-container :where(ul.gb-menu, ul.menu) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--wsa-space-s);
  list-style: none;
  margin: 0;
  padding: 0;
  }

  .ws-menu-container :where(li) > a {
  font-size: var(--wsa-fs-600);
  }

  .ws-menu-container :where(ul.gb-sub-menu, ul.sub-menu) {
  list-style: none;
  margin: 0;
  padding-inline-start: var(--wsa-space-m);
  }

  .ws-header-cta {
  margin-block-start: var(--wsa-space-m);
  }
}

/* GB's eigen toggle-icoon-wissel (open/close) respecteren */
.ws-menu-toggle[aria-expanded="false"] .gb-menu-close-icon,
.ws-menu-toggle[aria-expanded="true"] .gb-menu-open-icon {
  display: none;
}

/* ============================================================
   UTILITY-BALK — laag 1 van de drielaagse header.
   Inkt, klein, Inter gewone schrijfwijze (ontwerp v4), niet
   sticky (scrolt weg boven de hoofdnav).
   ============================================================ */

.ws-utilitybar {
  background-color: var(--wsa-clr-ink-surface);
  color: var(--wsa-clr-text-on-ink);
  font-size: var(--wsa-fs-300);
  font-weight: 500;
}

.ws-utilitybar-inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--wsa-space-m);
  max-width: var(--wsa-container);
  margin-inline: auto;
  padding-inline: var(--wsa-gutter);
}

.ws-utilitybar-inner > :last-child {
  margin-inline-end: calc(var(--wsa-space-2xs) * -1);
}

/* Merkregel links; duwt via auto-margin de acties naar rechts */
.ws-utilitybar-brand {
  margin-inline-end: auto;
  padding-block: var(--wsa-space-2xs);
  white-space: nowrap;
  max-width: none;
}

/* TODO: bevestigen — merkregel op smal scherm verbergen zodat
   zoeken/contact/taal op één rij passen (320px raakt anders vol) */
@media (max-width: 47.99em) {
  .ws-utilitybar-brand {
  display: none;
  }
}

/* Compacte look, volwaardig hit-target via min-height */
.ws-utilitybar :is(a, button) {
  display: inline-flex;
  align-items: center;
  min-height: var(--wsa-tap-target);
  padding-inline: var(--wsa-space-2xs);
  color: var(--wsa-clr-text-on-ink);
  background: none;
  border: 0;
  cursor: pointer;
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ws-utilitybar :is(a, button):hover {
  color: var(--wsa-clr-accent-on-ink);
}

/* Actieve taal: geen link-styling, wel accent — niet alleen kleur als signaal */
.ws-utilitybar [aria-current="true"] {
  text-decoration: none;
  font-weight: 700;
  color: var(--wsa-clr-accent-on-ink);
}

/* Taalwissel: omkaderde chip zoals in het ontwerp.
   Bordkleur = zand op 50% — via color-mix, geen nieuwe hex */
.ws-lang-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--wsa-space-3xs);
  padding-inline: var(--wsa-space-2xs);
  border: var(--wsa-border-hairline) solid
  color-mix(in srgb, var(--wsa-clr-text-on-ink) 50%, transparent);
  border-radius: var(--wsa-radius-sm);
}

/* Scheiding tussen NL en EN: hairline-divider i.p.v. "/"-pseudo-content
   (pseudo-content ín een link wordt door schermlezers als linknaam
   voorgelezen; een border niet) */
.ws-lang-switch a + a {
  border-inline-start: var(--wsa-border-hairline) solid
  color-mix(in srgb, var(--wsa-clr-text-on-ink) 50%, transparent);
  padding-inline-start: var(--wsa-space-2xs);
}

/* Op smal scherm: kleinere gap, alles blijft één rij */
@media (max-width: 47.99em) {
  .ws-utilitybar-inner {
  gap: var(--wsa-space-s);
  }
}

/* ============================================================
   BREADCRUMB — laag 3 van de drielaagse header.
   Boven de content op elke pagina behalve home.
   Wrapper + eigen-lijst-markup leven hier; Yoast-specifieke
   inner-selectors leven in 07-integrations.css.
   ============================================================ */

/* Niet op de homepage — de voorpagina ís het beginpunt, een kruimel
   'Home' voegt daar niets toe. Via de body-class van WP; structureel
   alternatief: breadcrumb als eigen GP Element met Display Rules
   (hele site, exclusief voorpagina), dan vervalt deze regel. */
.home .ws-breadcrumb {
  display: none;
}

.ws-breadcrumb {
  font-size: var(--wsa-fs-300);
  border-block-end: var(--wsa-border-hairline) solid var(--wsa-clr-border);
  background-color: var(--wsa-clr-page);
}

.ws-breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wsa-space-2xs);
  max-width: var(--wsa-container);
  margin-block: 0;
  margin-inline: auto;
  padding-block: 0;
  padding-inline: var(--wsa-gutter);
  list-style: none;
}

.ws-breadcrumb-list li {
  display: inline-flex;
  align-items: center;
  gap: var(--wsa-space-2xs);
}

/* Scheidingsteken via CSS — decoratief, dus niet in de DOM */
.ws-breadcrumb-list li + li::before {
  content: "›";
  color: var(--wsa-clr-text-muted);
}

/* Schakels: teal én onderstreept (kleur nooit het enige signaal),
   compacte look met volwaardig hit-target via min-height */
.ws-breadcrumb-list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--wsa-tap-target);
  color: var(--wsa-clr-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ws-breadcrumb-list a:hover {
  color: var(--wsa-clr-text);
}

/* Actieve kruimel: inkt, geen link, geen onderstreping */
.ws-breadcrumb-list [aria-current="page"] {
  display: inline-flex;
  align-items: center;
  min-height: var(--wsa-tap-target);
  color: var(--wsa-clr-text);
  font-weight: 600;
  text-decoration: none;
}