/* ==========================================================================
   MIEDEMA ASSISTANCE — SITE HEADER
   /assets/css/ma-header.css

   Architectuur
   ------------
   `data-gb-mobile-breakpoint="10000px"` op de hoofdnav zet GenerateBlocks Pro
   permanent in "mobile" mode. Op elk scherm: hamburger + full-overlay menu.

   Vacature menu
   -------------
   Tweede <nav> = vacature-categorieën-strip onder de header.
   Strategie: desktop-only horizontale balk. De mobile-hide (<768px) is
   geregeld in block-level CSS op de blocks zelf (.gb-element-9b3acf88,
   .gb-navigation-406b4461, .gb-menu-toggle-fab2269d, .gb-menu-container-
   f92ad65e). Items wrappen NIET, scroll horizontaal als ze niet passen.

   Vereiste global classes:
     - .ma-vacature-bar   op de inner-container wrapper
     - .ma-vacature-menu  op de <nav>

   Dependencies: ma-root.css, ma-hero.css (voor .ma-btn defaults)
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. ROOT — hoofd-header
   -------------------------------------------------------------------------- */

.ma-header-root {
  position: relative;
  z-index: var(--ma-z-header);
  background-color: var(--ma-surface-inverse);
  color: var(--ma-ink-inverse);
}

.ma-header-root *,
.ma-header-root *::before,
.ma-header-root *::after {
  border-radius: 0 !important;
}

.ma-header-root ul,
.ma-header-root ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ma-header-root li {
  list-style: none;
}


/* --------------------------------------------------------------------------
   2. HEADER BAR — altijd zichtbare top-strip
   -------------------------------------------------------------------------- */

.ma-header-nav.gb-navigation {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  max-inline-size: var(--ma-wrap-max);
  margin-inline: auto;
  padding-block: clamp(0.5rem, 1.5vw, 0.85rem);
  padding-inline: var(--ma-wrap-gutter);
}

.ma-header-nav .wp-block-site-logo {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  margin: 0;
}

.ma-header-nav .wp-block-site-logo img {
  display: block;
  block-size: auto;
  inline-size: auto;
  max-block-size: clamp(36px, 6vw, 48px);
  max-inline-size: 100%;
  object-fit: contain;
}


/* --------------------------------------------------------------------------
   3. HAMBURGER TOGGLE (hoofdnav)
   -------------------------------------------------------------------------- */

.ma-header-toggle {
  grid-column: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  padding: 0;

  background-color: var(--ma-white);
  color: var(--ma-black);
  border: none;
  cursor: pointer;
  z-index: calc(var(--ma-z-overlay) + 10);

  transition:
    background-color var(--ma-duration-fast) var(--ma-ease),
    color            var(--ma-duration-fast) var(--ma-ease);
}

.ma-header-toggle:is(:hover, :focus-visible) {
  background-color: var(--ma-accent);
  color: var(--ma-accent-ink);
}

.ma-header-toggle svg {
  inline-size: 22px;
  block-size: 22px;
  fill: currentColor;
}

/* Verberg eventuele door GB Pro auto-geïnjecteerde duplicate-toggle binnen
   de overlay-container. De originele .ma-header-toggle staat buiten de
   container (in <nav>) en heeft z-index boven het overlay-niveau, dus
   blijft bereikbaar terwijl de overlay open is. */
.ma-header-menu-container .gb-menu-toggle {
  display: none !important;
}


/* --------------------------------------------------------------------------
   4. CTA GROEP op de bar
   -------------------------------------------------------------------------- */

.ma-header-cta-group {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: clamp(0.4rem, 1vw, 0.6rem);
}

@media (max-width: 32em) {
  .ma-header-cta-group .ma-btn-secondary {
    display: none;
  }
}


/* --------------------------------------------------------------------------
   5. .ma-btn-sm — kleine knop-variant
   -------------------------------------------------------------------------- */

.ma-btn.ma-btn-sm,
a.ma-btn.ma-btn-sm:link,
a.ma-btn.ma-btn-sm:visited {
  padding-block: clamp(0.4rem, 0.5vw, 0.55rem);
  padding-inline: clamp(0.85rem, 1.5vw, 1.25rem);
  font-size: var(--ma-text-xs);
  letter-spacing: var(--ma-tracking-body);
  text-transform: none;
}


/* --------------------------------------------------------------------------
   6. OVERLAY CONTAINER — visuele laag (hoofdmenu-overlay)
   -------------------------------------------------------------------------- */

.ma-header-menu-container.gb-menu-container--mobile {
  background-color: var(--ma-surface-inverse);
  color: var(--ma-ink-inverse);

  padding-block:
    clamp(4.5rem, 10vw, 7rem)
    clamp(2rem, 5vw, 3rem);
  padding-inline: clamp(1.5rem, 5vw, 3rem);

  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(1.25rem, 3vw, 2rem);

  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (min-width: 64em) {
  .ma-header-menu-container.gb-menu-container--mobile {
    padding-inline:
      max(
        var(--ma-wrap-gutter),
        calc((100% - var(--ma-wrap-max)) / 2 + var(--ma-wrap-gutter))
      );
  }
}


/* --------------------------------------------------------------------------
   7. OVERLAY TOP — logo bovenin
   -------------------------------------------------------------------------- */

.ma-header-overlay-top {
  display: flex;
  align-items: center;
  padding-block-end: clamp(0.5rem, 2vw, 1rem);
  border-block-end: 1px solid color-mix(in srgb, var(--ma-white) 12%, transparent);
}

.ma-header-overlay-top a {
  display: inline-flex;
  text-decoration: none;
}

.ma-header-overlay-logo {
  block-size: clamp(40px, 7vw, 56px);
  inline-size: auto;
  max-inline-size: 100%;
  object-fit: contain;
}


/* --------------------------------------------------------------------------
   8. MENU IN OVERLAY — display-typografie + 01/02/03 nummering
   -------------------------------------------------------------------------- */

.ma-header-menu-container.gb-menu-container--mobile .ma-header-menu,
.ma-header-menu-container.gb-menu-container--mobile .gb-menu {
  display: flex;
  flex-direction: column;
  gap: clamp(0.25rem, 1vw, 0.5rem);
  inline-size: 100%;
  counter-reset: ma-menu;
}

.ma-header-menu-container.gb-menu-container--mobile .ma-header-menu > li,
.ma-header-menu-container.gb-menu-container--mobile .gb-menu > li {
  counter-increment: ma-menu;
  position: relative;
  padding-inline-start: 3.25em;
}

.ma-header-menu-container.gb-menu-container--mobile .ma-header-menu > li::before,
.ma-header-menu-container.gb-menu-container--mobile .gb-menu > li::before {
  content: "0" counter(ma-menu);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: clamp(0.85rem, 2vw, 1.2rem);

  font-size: var(--ma-text-2xs);
  font-weight: var(--ma-weight-semibold);
  letter-spacing: var(--ma-tracking-widest);
  color: var(--ma-accent);
}

.ma-header-menu-container.gb-menu-container--mobile .ma-header-menu > li > a,
.ma-header-menu-container.gb-menu-container--mobile .ma-header-menu > li > .gb-menu-link,
.ma-header-menu-container.gb-menu-container--mobile .gb-menu > li > a,
.ma-header-menu-container.gb-menu-container--mobile .gb-menu > li > .gb-menu-link {
  display: flex;
  align-items: center;
  gap: 0.5em;

  padding-block: clamp(0.4rem, 1.2vw, 0.7rem);
  padding-inline: 0;

  font-size: clamp(1.6rem, 1rem + 2.5vw, 2.75rem);
  font-weight: var(--ma-weight-bold);
  line-height: 1.05;
  letter-spacing: var(--ma-tracking-tight);

  color: var(--ma-white);
  text-decoration: none;

  transition: color var(--ma-duration-fast) var(--ma-ease);
}

.ma-header-menu-container.gb-menu-container--mobile .ma-header-menu > li > a:link,
.ma-header-menu-container.gb-menu-container--mobile .ma-header-menu > li > a:visited,
.ma-header-menu-container.gb-menu-container--mobile .ma-header-menu > li > .gb-menu-link:link,
.ma-header-menu-container.gb-menu-container--mobile .ma-header-menu > li > .gb-menu-link:visited,
.ma-header-menu-container.gb-menu-container--mobile .gb-menu > li > a:link,
.ma-header-menu-container.gb-menu-container--mobile .gb-menu > li > a:visited {
  color: var(--ma-white);
}

.ma-header-menu-container.gb-menu-container--mobile .ma-header-menu > li > a:is(:hover, :focus-visible),
.ma-header-menu-container.gb-menu-container--mobile .ma-header-menu > li > .gb-menu-link:is(:hover, :focus-visible),
.ma-header-menu-container.gb-menu-container--mobile .gb-menu > li > a:is(:hover, :focus-visible),
.ma-header-menu-container.gb-menu-container--mobile .gb-menu > li > .gb-menu-link:is(:hover, :focus-visible) {
  color: var(--ma-accent);
}

.ma-header-menu-container.gb-menu-container--mobile .current-menu-item > a,
.ma-header-menu-container.gb-menu-container--mobile .current-menu-item > .gb-menu-link {
  color: var(--ma-accent);
}

.ma-header-menu-container.gb-menu-container--mobile .ma-header-menu .gb-menu-link svg,
.ma-header-menu-container.gb-menu-container--mobile .gb-menu .gb-menu-link svg {
  inline-size: 0.5em;
  block-size: 0.5em;
  opacity: 0.5;
  flex-shrink: 0;
}


/* --------------------------------------------------------------------------
   9. SUBMENU IN OVERLAY — ingesprongen, kleinere typografie
   BELANGRIJK: geen display-rule op de UL — GB Pro Classic Menu handelt
   de open/dicht state native af. Spacing via margin-block-start op
   opeenvolgende <li>, niet via gap (gap vereist flex/grid display).
   -------------------------------------------------------------------------- */

.ma-header-menu-container.gb-menu-container--mobile .sub-menu,
.ma-header-menu-container.gb-menu-container--mobile .gb-sub-menu {
  margin-block-start: clamp(0.3rem, 1vw, 0.5rem);
  padding-inline-start: clamp(0.85rem, 2vw, 1.25rem);

  border-inline-start: 1px solid color-mix(in srgb, var(--ma-white) 18%, transparent);
}

.ma-header-menu-container.gb-menu-container--mobile .sub-menu > li,
.ma-header-menu-container.gb-menu-container--mobile .gb-sub-menu > li {
  padding-inline-start: 0;
  counter-increment: none;
}

.ma-header-menu-container.gb-menu-container--mobile .sub-menu > li + li,
.ma-header-menu-container.gb-menu-container--mobile .gb-sub-menu > li + li {
  margin-block-start: clamp(0.15rem, 0.5vw, 0.3rem);
}

.ma-header-menu-container.gb-menu-container--mobile .sub-menu > li::before,
.ma-header-menu-container.gb-menu-container--mobile .gb-sub-menu > li::before {
  content: none;
}

.ma-header-menu-container.gb-menu-container--mobile .sub-menu a,
.ma-header-menu-container.gb-menu-container--mobile .sub-menu .gb-menu-link,
.ma-header-menu-container.gb-menu-container--mobile .gb-sub-menu a,
.ma-header-menu-container.gb-menu-container--mobile .gb-sub-menu .gb-menu-link {
  display: flex;
  align-items: center;

  padding-block: clamp(0.3rem, 0.8vw, 0.45rem);
  padding-inline: 0;

  font-size: var(--ma-text-base);
  font-weight: var(--ma-weight-regular);
  letter-spacing: var(--ma-tracking-body);
  line-height: 1.4;

  color: var(--ma-off-white);
  text-decoration: none;

  transition: color var(--ma-duration-fast) var(--ma-ease);
}

.ma-header-menu-container.gb-menu-container--mobile .sub-menu a:link,
.ma-header-menu-container.gb-menu-container--mobile .sub-menu a:visited,
.ma-header-menu-container.gb-menu-container--mobile .gb-sub-menu a:link,
.ma-header-menu-container.gb-menu-container--mobile .gb-sub-menu a:visited {
  color: var(--ma-off-white);
}

.ma-header-menu-container.gb-menu-container--mobile .sub-menu a:is(:hover, :focus-visible),
.ma-header-menu-container.gb-menu-container--mobile .sub-menu .gb-menu-link:is(:hover, :focus-visible),
.ma-header-menu-container.gb-menu-container--mobile .gb-sub-menu a:is(:hover, :focus-visible),
.ma-header-menu-container.gb-menu-container--mobile .gb-sub-menu .gb-menu-link:is(:hover, :focus-visible) {
  color: var(--ma-white);
}


/* --------------------------------------------------------------------------
   10. OVERLAY CTA-GROEP
   -------------------------------------------------------------------------- */

.ma-header-overlay-cta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.5rem, 1.5vw, 0.85rem);

  padding-block-start: clamp(1rem, 3vw, 1.5rem);
  border-block-start: 1px solid color-mix(in srgb, var(--ma-white) 12%, transparent);
}

.ma-header-overlay-cta .ma-btn,
.ma-header-overlay-cta .gb-button {
  flex: 1 1 14rem;
  justify-content: center;
}


/* --------------------------------------------------------------------------
   11. OVERLAY META
   -------------------------------------------------------------------------- */

.ma-header-overlay-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.5rem, 1.5vw, 0.85rem);

  padding-block-start: clamp(1rem, 3vw, 1.5rem);
  border-block-start: 1px solid color-mix(in srgb, var(--ma-white) 12%, transparent);

  font-size: var(--ma-text-sm);
  line-height: 1.5;
  color: var(--ma-off-white);
}

@media (min-width: 40em) {
  .ma-header-overlay-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.5rem, 1.5vw, 0.85rem) clamp(1rem, 3vw, 2rem);
  }
}

.ma-header-overlay-meta p {
  margin: 0;
  max-inline-size: none;
}

.ma-header-overlay-meta a {
  color: var(--ma-white);
  text-decoration: none;
  transition: color var(--ma-duration-fast) var(--ma-ease);
}

.ma-header-overlay-meta a:is(:hover, :focus-visible) {
  color: var(--ma-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ma-header-overlay-meta p:last-child {
  font-size: var(--ma-text-xs);
  color: color-mix(in srgb, var(--ma-white) 55%, transparent);
  letter-spacing: var(--ma-tracking-wider);
  text-transform: uppercase;
}


/* ==========================================================================
   12. VACATURE MENU (kandidaten-strip) — desktop, één rij + horizontale scroll
   --------------------------------------------------------------------------
   Vereiste global classes:
     <div class="inner-container ma-vacature-bar">
       <nav class="gb-navigation ma-vacature-menu">

   Layout-strategie (kritiek voor scroll):
     - Nav  → block layout (geen flex), max-inline-size: wrap-max
     - Container → block-level, inline-size: 100%, neemt nav-breedte over
     - Menu UL → flex container met overflow-x: auto, scroll-context

   Op deze manier krijgt de UL een vaste maximale breedte (van de nav) en
   triggert overflow-x correct wanneer items niet passen.

   Mobile-hide (<768px) is geregeld op block-niveau in de editor — niet
   meer in deze stylesheet. Eén bron voor die regel.
   ========================================================================== */


/* ---- BAR WRAPPER --------------------------------------------------------- */

.ma-vacature-bar {
  background-color: var(--ma-surface-inverse) !important;
  color: var(--ma-ink-inverse) !important;
  border-block-end: 1px solid color-mix(in srgb, var(--ma-white) 8%, transparent) !important;

  max-inline-size: none !important;
  inline-size: 100% !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
}

.ma-vacature-bar *,
.ma-vacature-bar *::before,
.ma-vacature-bar *::after {
  border-radius: 0 !important;
}

.ma-vacature-bar ul,
.ma-vacature-bar ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ma-vacature-bar li {
  list-style: none;
}


/* ---- NAV — block-layout (GEEN flex), constrained door max-inline-size --- */

.ma-vacature-menu.gb-navigation {
  display: block;
  max-inline-size: var(--ma-wrap-max);
  margin-inline: auto;
  padding-inline: var(--ma-wrap-gutter);
}


/* ---- MENU CONTAINER — block-level, vult de nav exact -------------------- */

.ma-vacature-menu .gb-menu-container {
  display: block;
  inline-size: 100%;
}


/* ---- MENU UL — DE scroll-context: één rij, overflow-x auto -------------- */

.ma-vacature-menu .gb-menu {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  inline-size: 100%;
  list-style: none;
  margin: 0;
  padding: 0;

  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;

  /* Scrollbar verbergen — Firefox/IE/Edge */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* WebKit (Chrome/Safari) */
.ma-vacature-menu .gb-menu::-webkit-scrollbar {
  display: none;
}


/* ---- MENU ITEMS — flex-shrink: 0 zodat items hun natuurlijke breedte
       behouden, anders zou flex ze willen krimpen om in te passen. -------- */

.ma-vacature-menu .gb-menu > .gb-menu-item {
  display: flex;
  align-items: stretch;
  position: relative;
  flex-shrink: 0;
}

.ma-vacature-menu .gb-menu > .gb-menu-item:not(:first-child) {
  border-inline-start: 1px solid color-mix(in srgb, var(--ma-white) 18%, transparent);
}


/* ---- TOP-LEVEL LINKS — caps, letter-spacing, klikvlak ------------------- */

.ma-vacature-menu .gb-menu .gb-menu-link {
  display: inline-flex !important;
  align-items: center;

  padding: clamp(0.85rem, 1.8vw, 1.15rem) clamp(0.85rem, 2vw, 1.4rem) !important;

  font-size: var(--ma-text-3xs);
  font-weight: var(--ma-weight-medium);
  letter-spacing: var(--ma-tracking-widest);
  text-transform: uppercase;

  color: var(--ma-off-white) !important;
  text-decoration: none !important;
  white-space: nowrap;

  position: relative;

  transition:
    color            var(--ma-duration-fast) var(--ma-ease),
    background-color var(--ma-duration-fast) var(--ma-ease);
}

.ma-vacature-menu .gb-menu .gb-menu-link:link,
.ma-vacature-menu .gb-menu .gb-menu-link:visited {
  color: var(--ma-off-white) !important;
}

.ma-vacature-menu .gb-menu .gb-menu-link:is(:hover, :focus-visible) {
  color: var(--ma-white) !important;
  background-color: color-mix(in srgb, var(--ma-white) 6%, transparent);
}


/* ---- CURRENT MENU ITEM — 3px groene onderlijn --------------------------- */

.ma-vacature-menu .gb-menu .current-menu-item > .gb-menu-link,
.ma-vacature-menu .gb-menu .current-menu-ancestor > .gb-menu-link {
  color: var(--ma-white) !important;
  box-shadow: inset 0 -3px 0 var(--ma-accent);
}


/* ---- DROPDOWN VISIBILITY — expliciete hide/show ------------------------- */

.ma-vacature-menu .gb-sub-menu {
  background-color: var(--ma-surface-inverse);
  border: 1px solid color-mix(in srgb, var(--ma-white) 12%, transparent);
  list-style: none;
  margin: 0;
  padding: 0;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);

  transition:
    opacity    0.18s var(--ma-ease),
    transform  0.18s var(--ma-ease),
    visibility 0.18s linear;
}

.ma-vacature-menu .gb-menu-item:hover > .gb-sub-menu,
.ma-vacature-menu .gb-menu-item:focus-within > .gb-sub-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.ma-vacature-menu .gb-sub-menu .gb-menu-item {
  border-inline-start: none !important;
  display: block;
}

.ma-vacature-menu .gb-sub-menu .gb-menu-link {
  display: block !important;
  padding: clamp(0.5rem, 1vw, 0.7rem) clamp(0.85rem, 1.5vw, 1.1rem) !important;
  font-size: var(--ma-text-3xs);
  font-weight: var(--ma-weight-regular);
  letter-spacing: var(--ma-tracking-body);
  text-transform: none;
  white-space: nowrap;
}

.ma-vacature-menu .gb-sub-menu .gb-menu-link:is(:hover, :focus-visible) {
  color: var(--ma-white) !important;
  background-color: color-mix(in srgb, var(--ma-white) 6%, transparent);
}


/* --------------------------------------------------------------------------
   13. BREADCRUMB BAR
   -------------------------------------------------------------------------- */

.ma-header-breadcrumb-bar {
  background-color: var(--ma-surface-inverse);
  border-block-end: 1px solid color-mix(in srgb, var(--ma-white) 12%, transparent);
}

.ma-header-breadcrumb {
  max-inline-size: var(--ma-wrap-max);
  margin-inline: auto;
  padding-block: clamp(0.25rem, 0.6vw, 0.4rem);
  padding-inline: var(--ma-wrap-gutter);
}

.font-clamp-breadcrumb {
  font-size: var(--ma-text-xs);
  letter-spacing: var(--ma-tracking-body);
  color: var(--ma-off-white);
}

.font-clamp-breadcrumb a,
.font-clamp-breadcrumb a:link,
.font-clamp-breadcrumb a:visited {
  color: var(--ma-off-white);
  font-weight: var(--ma-weight-semibold);
  text-decoration: none;
  transition: color var(--ma-duration-fast) var(--ma-ease);
}

.font-clamp-breadcrumb a:is(:hover, :focus-visible) {
  color: var(--ma-white);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* --------------------------------------------------------------------------
   14. BODY SCROLL LOCK WANNEER HOOFDMENU-OVERLAY OPEN
   -------------------------------------------------------------------------- */

body:has(.ma-header-toggle[aria-expanded="true"]) {
  overflow: hidden;
}


/* --------------------------------------------------------------------------
   15. REDUCED MOTION
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .ma-header-toggle,
  .ma-header-menu a,
  .ma-vacature-menu a,
  .ma-vacature-menu .gb-menu,
  .ma-vacature-menu .gb-sub-menu,
  .ma-header-overlay-meta a,
  .font-clamp-breadcrumb a {
    transition: none;
    scroll-behavior: auto;
  }
}

/* --------------------------------------------------------------------------
   16. GLASS-EFFECTEN
   --------------------------------------------------------------------------
   Alpha-lagen zijn mode-neutraal (transparant wit/zwart op onderliggende
   content) — geen aparte dark-varianten nodig.
   -------------------------------------------------------------------------- */

.ma-glas {
  background: color-mix(in srgb, var(--ma-white) 8%, transparent);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 1px 15px color-mix(in srgb, var(--ma-blue-500) 25%, transparent);
  color: var(--ma-blue-300); /* was `color: #3e84b3:` — syntaxfout gefixt */
}

.liquid-glass-black-deep {
  background: color-mix(in srgb, var(--ma-black) 45%, transparent);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border-bottom: 1px solid color-mix(in srgb, var(--ma-white) 8%, transparent);
  box-shadow:
    0 8px 28px color-mix(in srgb, var(--ma-black) 55%, transparent),
    inset 0 1px 2px color-mix(in srgb, var(--ma-white) 15%, transparent);
}

.liquid-glass-black {
  background: color-mix(in srgb, var(--ma-black) 35%, transparent);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  box-shadow:
    0 6px 20px color-mix(in srgb, var(--ma-black) 45%, transparent),
    inset 0 1px 1px color-mix(in srgb, var(--ma-white) 12%, transparent);
}

.liquid-glass-black-secondary {
  background: color-mix(in srgb, var(--ma-black) 42%, transparent);
  backdrop-filter: blur(26px) saturate(185%);
  -webkit-backdrop-filter: blur(26px) saturate(185%);
  border-top: 1px solid color-mix(in srgb, var(--ma-white) 8%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ma-white) 10%, transparent);
  box-shadow:
    0 4px 14px color-mix(in srgb, var(--ma-black) 40%, transparent),
    inset 0 1px 2px color-mix(in srgb, var(--ma-white) 18%, transparent);
}

/* Was een genest, ongeldig blok (.ma--glass-transition-top {
   apple-glass-transition-top.soft { … } }) — samengevoegd tot één geldige
   class; beide selector-spellingen ondersteund. */
.ma--glass-transition-top,
.ma-glass-transition-top {
  --fade-strength: 14px;
  background-image:
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--ma-white) 0%, transparent) 0%,
      color-mix(in srgb, var(--ma-white) 35%, transparent) 40%,
      color-mix(in srgb, var(--ma-black) 32%, transparent) 100%
    );
}

.metablockstyling {
  background: linear-gradient(
    234deg,
    var(--ma-white) 0%,
    color-mix(in srgb, var(--ma-white) 60%, transparent) 40%,
    color-mix(in srgb, var(--ma-black) 85%, transparent) 100%
  );
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
}


/* --------------------------------------------------------------------------
   17. TOPBALK, HERO-OVERLAY & LOGO
   -------------------------------------------------------------------------- */

/* Vaste donkere merkbalk — blijft donker in beide modes, witte content erop.
   TODO: bevestigen — #0D1C3A zit niet in het merkpalet (dichtstbijzijnde
   token: var(--ma-blue-600) #003152). */
.header-bovenste-balk {
  background-color: #0D1C3A;
  padding-top: env(safe-area-inset-top);
}

/* Default: header in normale flow */
.site-header {
  position: relative;
}

/* Alleen met hero op de pagina: header als overlay erbovenop */
body:has(.hp-hero) .site-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: var(--ma-z-header);
}

.hp-hero {
  margin-top: 0;
  padding-top: 0;
}

/* Alleen de hero-inhoud zakt onder de header */
.hp-hero > .gb-inside-container {
  padding-top: var(--header-h, var(--ma-header-h));
}

@media (max-width: 768px) {
  .wp-block-site-logo img {
    max-width: 100px;
    height: auto;
  }
}