/* Bakker — bewuste CSS-uitzonderingen bovenop het Divi 5 design system.
   Nieuwbouw: dit bestand hoort klein te blijven — alles wat in variabelen,
   presets of native modules kan, hoort dáár (structure-gate-discipline). */

/* ── Sticky header: translucency + backdrop-blur (design system NavBar).
   Niet native in Divi 5: de Filters-optiegroep blurt het element zelf, niet
   wat erachter scrolt. ET's eigen recept is backdrop-filter via CSS:
   elegantthemes.com/blog/divi-resources/how-to-add-css-backdrop-filter-effects-to-a-sticky-header-in-divi
   Fallback (geen backdrop-filter-support): de effen paper-achtergrond die de
   sectie native al heeft. */
.bp-header {
  background: color-mix(in oklab, var(--gcid-bp-surface-page, #F7FAF8) 88%, transparent) !important;
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
}

/* ── Knoppen naast elkaar (KK-precedent, kk-clean.css): de group-flex-attrs
   renderen in deze Divi-versie geen et_flex_group op de front-end, dus
   button-wrappers blijven block en stapelen. Inline-block + marge = de
   bewezen oplossing; flexWrap-gedrag blijft behouden op smalle schermen. */
.et_pb_button_module_wrapper { display: inline-block; }
.et_pb_group .et_pb_button_module_wrapper:not(:last-child) { margin-right: 0.85rem; }

/* ── Inline proza-links in paginacontent (tokens/base.css-idioom):
   ocean-link met subtiele onderstreping, hover → aqua. Gescoped op
   .et-l--post zodat footer- en menulinks (eigen stijl) buiten schot blijven.
   Kleur zelf komt native uit et_divi[link_color] (layer1.php). */
.et-l--post .et_pb_text a {
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--gcid-bp-link, #14625E) 40%, transparent);
  text-underline-offset: 0.16em;
  transition: color 140ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.et-l--post .et_pb_text a:hover {
  color: var(--gcid-bp-link-hover, #1E8F87);
}

/* ── Group-flex-haken (group-layout-attrs renderen niet front-end):
   tariefregels (omschrijving | bedrag) en registratie-badges. */
.bp-price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  column-gap: 1rem;
}
.bp-price-row .et_pb_text { width: auto; }
.bp-price-row .et_pb_text p { margin-bottom: 0; }
.bp-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.bp-badges .et_pb_text { width: auto; margin-bottom: 0 !important; }

/* ── Menu: mint-pill hover + actieve pagina (design system NavBar).
   De Menu-module kent native alleen link-kleurhover; de nieuwe Link-modules
   (Divi 5.7+) kunnen wél native hover-bg+radius maar missen automatische
   current-page-status — daarom Menu-module + deze twee regels. */
.bp-header ul.et-menu {
  /* Divi compenseert de li-padding met margin 0 -11px op de ul; zonder
     li-padding maakt die negatieve marge de ul juist 22px te breed */
  margin: 0 !important;
}
.bp-header .et-menu li {
  margin: 0 !important;
  /* Divi zet 0 11px op de li (ook media-scoped, en bp-clean laadt vóór de
     Divi-styles — vandaar !important); de pill-padding is de ruimte */
  padding: 0 2px !important;
}
.bp-header .et-menu li a {
  border-radius: 999px;
  padding: 0.5rem 0.6rem !important;
  transition: background 140ms cubic-bezier(0.22, 0.61, 0.36, 1),
              color 140ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.bp-header .et-menu li a:hover {
  background: var(--gcid-bp-mint-200, #ECF6F1);
  color: var(--gcid-bp-ocean-800, #124B4B) !important;
  opacity: 1; /* Divi's default hover-opacity .7 uit */
}
.bp-header .et-menu li.current-menu-item > a,
.bp-header .et-menu li.current_page_item > a {
  background: var(--gcid-bp-mint-300, #E1F2EA);
  color: var(--gcid-bp-ocean-900, #0C3B3C) !important;
}
/* Responsive zones voor het menu (gemeten: 6 default-pills hebben ~738px
   nodig; de 3_5-kolom biedt dat pas vanaf ~1366px):
   ≥1366 default pills · 1200-1365 compact · ≤1199 hamburger (Divi's mobiele
   menu). */
@media (max-width: 1365px) and (min-width: 1200px) {
  .bp-header .et-menu li a {
    padding: 0.45rem 0.35rem !important;
    font-size: 0.875rem !important;
    letter-spacing: 0 !important;
  }
}

/* ── Hamburger-zone (≤1199): desktop-pills verbergen, Divi's mobiele nav tonen
   en zowel de hamburger als het uitklapmenu in brand-stijl zetten (Divi levert
   hier standaard een wit blok met accent-bovenrand en grijze links). */
@media (max-width: 1199px) {
  .bp-header .et_pb_menu__menu { display: none; }
  /* De menu-inner-container is een flexbox; standaard centreert die de mobiele
     nav. flex-end drukt de hamburger tegen de rechterrand. */
  .bp-header .et_pb_menu_inner_container { justify-content: flex-end !important; }
  .bp-header .et_mobile_nav_menu { display: flex; justify-content: flex-end; }

  /* Hamburger-icoon: rustig ocean, iets groter tikdoel. */
  .bp-header .mobile_menu_bar::before {
    color: var(--gcid-bp-ocean-800, #124B4B) !important;
    font-size: 2rem;
  }

  /* Uitklapmenu: paper-kaart met hairline, zachte radius + schaduw i.p.v. het
     Divi-witblok. Items als mint-pills met actieve-pagina-markering — zelfde
     idioom als de desktop-pills hierboven. Rechts uitgelijnd onder de
     hamburger, comfortabele breedte i.p.v. Divi's smalle kolomgebonden blok. */
  .bp-header .et_mobile_menu {
    left: auto !important;
    right: 0 !important;
    width: min(78vw, 320px) !important;
    background-color: var(--gcid-bp-surface-page, #F7FAF8) !important;
    border: 1px solid var(--gcid-bp-border-soft, #DCE7E3) !important;
    border-radius: var(--radius-md, 14px) !important;
    box-shadow: 0 8px 24px rgba(12, 59, 60, 0.12) !important;
    padding: 0.4rem !important;
    margin-top: 0.5rem;
  }
  .bp-header .et_mobile_menu li,
  .bp-header .et_mobile_menu li:last-child {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
  .bp-header .et_mobile_menu li a {
    color: var(--gcid-bp-ocean-800, #124B4B) !important;
    padding: 0.7rem 0.9rem !important;
    border-bottom: 0 !important;
    border-radius: var(--radius-pill, 999px);
    font-weight: 600;
    opacity: 1;
    transition: background 140ms cubic-bezier(0.22, 0.61, 0.36, 1),
                color 140ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .bp-header .et_mobile_menu li a:hover {
    background: var(--gcid-bp-mint-200, #ECF6F1);
    color: var(--gcid-bp-ocean-800, #124B4B) !important;
    opacity: 1;
  }
  .bp-header .et_mobile_menu li.current-menu-item > a,
  .bp-header .et_mobile_menu li.current_page_item > a {
    background: var(--gcid-bp-mint-300, #E1F2EA);
    color: var(--gcid-bp-ocean-900, #0C3B3C) !important;
  }

  /* Headerrij horizontaal met de hamburger uiterst rechts: woordmerk links,
     de knopkolom (CTA) verborgen zodat het menu de ruimte vult en de hamburger
     rechts uitlijnt. Geldt in de hele hamburger-zone (ook 981-1199, waar Divi
     anders de 3_5-kolom aanhoudt met een lege 1_5-gap rechts). Aanmelden zit
     hier ín het uitklapmenu, dus de losse knop is overbodig. */
  .bp-header .et_pb_row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    column-gap: 0.75rem;
  }
  .bp-header .et_pb_row > .et_pb_column {
    width: auto !important;
    margin-bottom: 0 !important;
  }
  .bp-header .et_pb_row > .et_pb_column:nth-child(2) { flex: 1 1 auto; }
  .bp-header .et_pb_row > .et_pb_column:last-child { display: none !important; }
}

/* Aanmelden staat als menu-item in het WP-menu zodat het in het mobiele
   uitklapmenu verschijnt; op de desktop-pills is het overbodig (daar is de
   losse CTA-knop) → daar verborgen. */
.bp-header .et_pb_menu__menu .et_pb_menu_page_id-19 { display: none !important; }

/* Zeer smal (≤480): descriptor onder het woordmerk verbergen zodat de rij niet
   krap wordt naast hamburger + CTA. */
@media (max-width: 480px) {
  .bp-header .et_pb_column:first-child .et_pb_text:last-child { display: none; }
}