/* ============================================================
   EasyAutoVerkoop — 06a-header.css — GB Pro Site Header + Navigation
   Versie 1.3.0 · 2026-09-14
   Afgestemd op de aangeleverde header-output (site-header a3913ea1,
   navigation 4ab95a25, classic-menu f65aef14, menu-ID 2).
   Sticky-gedrag doet GB Pro (data-gb-sticky-header-type="always");
   wij zetten géén position op de header en géén display/position/
   visibility op .gb-menu-toggle, .gb-menu-container of .gb-sub-menu.
   Mobiel menu-breakpoint = data-gb-mobile-breakpoint = 1000px = --eav-bp-nav.
   ============================================================ */

/* === Header-schil ===
   Géén backdrop-filter, filter of transform op de header: die maken de
   header het containing block voor position:fixed, en dan wordt het
   full-overlay-menu van GB Pro afgekapt op de headerhoogte. */

.Eav-site-header {
  z-index: var(--eav-z-header);
  background-color: var(--eav-clr-bg);
  border-block-end: 1px solid var(--eav-clr-border);
}
/* GB Pro zet .gb-is-sticky zodra de header plakt */
.Eav-site-header.gb-is-sticky {
  box-shadow: var(--eav-shadow-md);
}
@media (prefers-reduced-motion: no-preference) {
  .Eav-site-header { transition: box-shadow var(--eav-transition-base); }
}

/* === Topbar ===
   Desktop: drie feiten op één regel met accentpunt.
   Mobiel: geen regelafbreking, maar één feit tegelijk; de drie wisselen
   traag (4 s per feit, crossfade) — alleen bij motion-voorkeur, anders
   staat het eerste feit stil. Alle drie blijven in de DOM (opacity),
   dus screenreaders lezen ze gewoon achter elkaar. */

.Eav-topbar {
  background-color: var(--eav-clr-bg-alt);
  color: var(--eav-clr-text);
  font-size: var(--eav-fs-300);
  font-weight: 600;
}
.Eav-topbar .Eav-container {
  min-block-size: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--eav-space-l);
}
.Eav-topbar-item {
  display: inline-flex;
  align-items: center;
  gap: var(--eav-space-2xs);
  white-space: nowrap;
}
.Eav-topbar-item::before {
  content: "";
  inline-size: 0.4rem;
  block-size: 0.4rem;
  border-radius: var(--eav-radius-pill);
  background-image: var(--eav-grad-accent);
}

@media (max-width: 47.99em) {
  .Eav-topbar .Eav-container { display: grid; }
  .Eav-topbar-item {
    grid-area: 1 / 1;
    justify-self: center;
    opacity: 0;
  }
  .Eav-topbar-item:first-child { opacity: 1; }

  @media (prefers-reduced-motion: no-preference) {
    .Eav-topbar-item { animation: eav-topbar-cycle 12s var(--eav-ease) infinite; }
    .Eav-topbar-item:nth-child(2) { animation-delay: 4s; }
    .Eav-topbar-item:nth-child(3) { animation-delay: 8s; }
    @keyframes eav-topbar-cycle {
      0%        { opacity: 0; translate: 0 0.25rem; }
      5%, 28%   { opacity: 1; translate: 0 0; }
      33%, 100% { opacity: 0; translate: 0 -0.25rem; }
    }
  }
}

/* === Hoofdrij = de GB Pro Navigation zelf (Eav-nav + Eav-container-wide).
   Layout (display:flex, align-items, gap, flex-grow op de container) staat
   in de block-styles van het Pro-pattern; hier alleen maat en kleur. === */

.Eav-nav {
  min-block-size: 4.5rem;
  padding-block: var(--eav-space-2xs);
}
.Eav-nav .wp-block-site-logo img {
  inline-size: auto;
  max-inline-size: clamp(9rem, 20vw, 16rem);
  block-size: auto;
}

/* Prototype-/fallback-rij zonder GB Pro */
.Eav-header-inner {
  min-block-size: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--eav-space-m);
}

/* === Navigatie — alleen kleur, typografie, spacing === */

.Eav-nav .gb-menu {
  flex-wrap: wrap;
  gap: var(--eav-space-3xs);
  margin: 0;
  padding: 0;
  list-style: none;
}
.Eav-nav .gb-menu-item {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: transparent;
  font-size: var(--eav-fs-400);
}
.Eav-nav .gb-menu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--eav-space-2xs);
  min-block-size: 44px;
  padding-block: var(--eav-space-2xs);
  padding-inline: var(--eav-space-s);
  border-radius: var(--eav-radius-pill);
  color: var(--eav-clr-text);
  font-weight: 600;
  text-decoration: none;
}
.Eav-nav .gb-menu-link:is(:hover, :focus-visible) {
  background-color: var(--eav-clr-bg-alt);
  color: var(--eav-clr-text);
}
.Eav-nav .current-menu-item > .gb-menu-link,
.Eav-nav .current-menu-ancestor > .gb-menu-link {
  color: var(--eav-clr-primary);
}
@media (prefers-reduced-motion: no-preference) {
  .Eav-nav .gb-menu-link { transition: background-color var(--eav-transition-fast), color var(--eav-transition-fast); }
}

/* Submenu (desktop): kaartje. Positie/zichtbaarheid komt van GB Pro. */
.Eav-nav .gb-sub-menu {
  min-inline-size: 14rem;
  margin: 0;
  padding: var(--eav-space-2xs);
  list-style: none;
  background-color: var(--eav-clr-bg);
  border: var(--eav-border-width) solid var(--eav-clr-border);
  border-radius: var(--eav-radius-lg);
  box-shadow: var(--eav-shadow-lg);
}
.Eav-nav .gb-sub-menu .gb-menu-item { background-color: transparent; color: var(--eav-clr-text); }
.Eav-nav .gb-sub-menu .gb-menu-link { border-radius: var(--eav-radius-md); }

/* Toggle: uiterlijk. Géén display/align/justify: GB Pro verbergt de toggle
   boven de breakpoint met display:none en dat mag niet overschreven worden. */
.Eav-nav .gb-menu-toggle {
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  border: 1px solid var(--eav-clr-border);
  border-radius: var(--eav-radius-md);
  background-color: transparent;
  color: var(--eav-clr-text);
  cursor: pointer;
}
.Eav-nav .gb-menu-toggle svg { inline-size: 1.25rem; block-size: 1.25rem; fill: currentColor; }
.Eav-nav .gb-menu-toggle:is(:hover, :focus-visible) {
  background-color: var(--eav-clr-bg-alt);
  color: var(--eav-clr-text);
}
.Eav-nav .gb-menu-toggle.gb-menu-toggle--toggled {
  background-color: var(--eav-clr-accent);
  color: var(--eav-clr-text-on-accent);
  border-color: transparent;
}

/* Overlay-kop (alleen zichtbaar in het geopende menu, via gb-menu-show-on-toggled) */
.Eav-overlay-head { padding-inline: var(--eav-space-s); }
.Eav-overlay-title {
  font-size: var(--eav-fs-500);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--eav-clr-text);
}

/* Mobiel paneel (full-overlay): kleur en spacing. Position/display doet het block. */
.Eav-nav .gb-menu-container--mobile {
  --eav-clr-bg: var(--eav-raw-ink);
  --eav-clr-bg-alt: color-mix(in oklch, var(--eav-raw-ink) 88%, white);
  --eav-clr-text: var(--eav-raw-paper);
  --eav-clr-text-muted: color-mix(in oklch, var(--eav-raw-paper) 76%, var(--eav-raw-ink));
  --eav-clr-border: color-mix(in oklch, var(--eav-raw-paper) 18%, transparent);
  --eav-clr-primary: var(--eav-raw-accent);
  color-scheme: dark;
  background-color: var(--eav-clr-bg);
  color: var(--eav-clr-text);
  padding: var(--eav-space-2xl) var(--eav-gutter) var(--eav-space-2xl);
}
.Eav-nav .gb-menu-container--mobile .gb-menu {
  flex-direction: column;
  gap: var(--eav-space-2xs);
}
.Eav-nav .gb-menu-container--mobile .gb-menu-item { background-color: transparent; color: var(--eav-clr-text); }
.Eav-nav .gb-menu-container--mobile .gb-menu-link {
  font-size: var(--eav-fs-600);
  font-weight: 700;
  padding-block: var(--eav-space-xs);
  color: var(--eav-clr-text);
}
.Eav-nav .gb-menu-container--mobile .gb-menu-link:is(:hover, :focus-visible) {
  background-color: var(--eav-clr-bg-alt);
  color: var(--eav-clr-text);
}
.Eav-nav .gb-menu-container--mobile .gb-sub-menu {
  background-color: transparent;
  border: 0;
  box-shadow: none;
  padding-inline-start: var(--eav-space-m);
}

/* CTA in de header verdwijnt onder de nav-breakpoint (1000px = 62.5em);
   de knop in de hero neemt het over. */
@media (max-width: 62.49em) {
  .Eav-site-header a.Eav-header-cta { display: none; }
}