/* =========================================================================
   Site header
   Eén balk voor alle weergaves. Boven de breekpunt staan logo, menu en acties
   naast elkaar; eronder klapt de drawer open als paneel onder de balk.
   De breekpunt staat ook in site-header.php en site-header.js.
   ========================================================================= */

.sr-header {
    --sr-header-bar-h: 80px;
    --sr-header-utility-h: 32px;
    --sr-header-pad-x: 40px;
    --sr-header-logo-w: 190px;

    --sr-header-solid: #086675;
    --sr-header-scrolled: var(--sr-header-solid);
    --sr-header-fg: #ffffff;
    --sr-header-accent: #0facd1;
    --sr-header-link-hover: #ffffff;
    --sr-header-nav-gap: 32px;

    --sr-header-dropdown-bg: #086675;
    --sr-header-dropdown-bg-hover: #0facd1;

    --sr-header-cta-bg: #0facd1;
    --sr-header-cta-fg: #ffffff;
    --sr-header-cta-bg-hover: #ffc400;
    --sr-header-cta-fg-hover: #1f1f1a;
    --sr-header-cta-radius: 32px;
    --sr-header-cta-pad: 10px 35px;

    --sr-header-drawer-bg: #1d5f6b;
    --sr-header-drawer-divider: #ffffff;

    --sr-header-focus: #ffc400;
    --sr-header-focus-w: 3px;

    --sr-header-scrim-opacity: 0;
    --sr-header-z: 9999;

    display: block;
    color: var(--sr-header-fg);
    font-family: var(--font-base, inherit);
}

/* Elementor zet zijn widget-wrapper standaard op een eigen breedte; de header
   moet de volle breedte van het scherm pakken. */
.elementor-widget-sr-site-header {
    width: 100%;
}

.sr-header .sr-header__notice {
    padding: 12px 16px;
    background: #fff4d6;
    color: #4a3800;
    font-size: 14px;
}

/* --- Vaste balk ----------------------------------------------------------

   Alleen de hoofdbalk klapt vast bovenaan. De servicebalk erboven scrolt
   gewoon met de pagina mee en komt pas weer in beeld als je terugscrolt naar
   boven. Daarom draagt niet de wrapper de achtergrond maar dragen de twee
   balken die zelf: zodra de hoofdbalk uit de flow gaat, moet hij zijn eigen
   achtergrond meenemen.
   -------------------------------------------------------------------------- */

.sr-header .sr-header__spacer {
    height: 0;
}

.sr-header .sr-header__bar {
    position: relative;
    z-index: var(--sr-header-z);
}

.sr-header .sr-header__utility,
.sr-header .sr-header__main {
    background-color: var(--sr-header-solid);
    transition: background-color 0.25s ease;
}

/* Vastgeklapt: de hoogte die de hoofdbalk uit de flow haalt, houdt de spacer
   open. De JS zet die hoogte, de klasse, en de verschuiving hieronder.

   Die verschuiving is nul, behalve wanneer de WordPress-adminbalk zichtbaar is:
   die staat vast bovenaan op een hogere z-index, dus zonder deze ruimte
   verdwijnt de bovenrand van de header erachter. */
.sr-header--sticky.is-stuck .sr-header__main {
    position: fixed;
    top: var(--sr-header-offset-top, 0px);
    left: 0;
    right: 0;
    z-index: var(--sr-header-z);
}

/* In de editor blijft alles meescrollen, anders ligt de balk over het canvas. */
body.elementor-editor-active .sr-header--sticky.is-stuck .sr-header__main,
body.elementor-editor-preview .sr-header--sticky.is-stuck .sr-header__main {
    position: relative;
}

body.elementor-editor-active .sr-header .sr-header__spacer,
body.elementor-editor-preview .sr-header .sr-header__spacer {
    height: 0 !important;
}

/* --- Transparant boven een hero ------------------------------------------ */

.sr-header--transparent .sr-header__utility,
.sr-header--transparent .sr-header__main {
    background-color: transparent;
}

.sr-header--transparent.is-scrolled .sr-header__main {
    background-color: var(--sr-header-scrolled);
}

/* Onder de breekpunt is de balk standaard gewoon solide, zoals nu. */
.sr-header--transparent.is-compact:not(.sr-header--transparent-mobile) .sr-header__utility,
.sr-header--transparent.is-compact:not(.sr-header--transparent-mobile) .sr-header__main {
    background-color: var(--sr-header-solid);
}

/* Zodra de drawer openstaat heeft de balk een eigen achtergrond nodig; anders
   loopt de tekst van de pagina er doorheen. */
.sr-header.is-open .sr-header__main {
    background-color: var(--sr-header-drawer-bg);
}

/* Optioneel verloop dat witte tekst leesbaar houdt boven een lichte foto. */
.sr-header--transparent .sr-header__main::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
    opacity: var(--sr-header-scrim-opacity);
    transition: opacity 0.25s ease;
}

.sr-header--transparent.is-scrolled .sr-header__main::before,
.sr-header.is-open .sr-header__main::before {
    opacity: 0;
}

/* --- Servicebalk --------------------------------------------------------- */

.sr-header .sr-header__utility {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: var(--sr-header-utility-h);
    padding: 0 var(--sr-header-pad-x);
}

.sr-header .sr-header__utility .sr-header__menu {
    gap: var(--sr-header-nav-gap);
}

.sr-header .sr-header__utility .sr-header__link {
    font-size: 12px;
    letter-spacing: 0.3px;
}

/* --- Hoofdbalk ----------------------------------------------------------- */

.sr-header .sr-header__main {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: var(--sr-header-bar-h);
    padding: 0 var(--sr-header-pad-x);
}

.sr-header .sr-header__logo {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    text-decoration: none;
    color: inherit;
}

.sr-header .sr-header__logo-img {
    display: block;
    width: var(--sr-header-logo-w);
    height: auto;
}

.sr-header .sr-header__logo-text {
    font-size: 20px;
    font-weight: 700;
}

.sr-header .sr-header__tools {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 0 0 auto;
    margin-left: auto;
}

/* --- Menu ---------------------------------------------------------------- */

.sr-header .sr-header__drawer {
    display: flex;
    flex: 1 1 auto;
    justify-content: flex-end;
    min-width: 0;
}

.sr-header .sr-header__drawer-scroll {
    display: flex;
    align-items: center;
    gap: var(--sr-header-nav-gap);
}

.sr-header .sr-header__nav {
    display: block;
}

.sr-header .sr-header__menu,
.sr-header .sr-header__submenu {
    display: flex;
    align-items: center;
    gap: var(--sr-header-nav-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.sr-header .sr-header__item {
    position: relative;
}

.sr-header .sr-header__row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sr-header .sr-header__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 0;
    border: 0;
    background: none;
    color: var(--sr-header-fg);
    font: inherit;
    font-size: 16px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    position: relative;
}

/* Het streepje onder het item. Als los element in plaats van een border, zodat
   het van links naar rechts kan groeien zonder de regelhoogte te wijzigen. */
.sr-header__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-color: var(--sr-header-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.25s ease;
}

.sr-header .sr-header__link:hover::after,
.sr-header .sr-header__link:focus-visible::after,
.sr-header .sr-header__item.is-current > .sr-header__row > .sr-header__link::after,
.sr-header .sr-header__item.is-ancestor > .sr-header__row > .sr-header__link::after {
    transform: scaleX(1);
}

.sr-header .sr-header__link:hover {
    color: var(--sr-header-link-hover);
}

.sr-header .sr-header__toggle {
    font-size: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
}

.sr-header .sr-header__chevron {
    transition: transform 0.4s ease;
}

.sr-header .sr-header__item.is-open > .sr-header__row .sr-header__chevron {
    transform: rotate(180deg);
}

/* --- Submenu op desktop -------------------------------------------------- */

.sr-header .sr-header__submenu-wrap {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    padding-top: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

/* Openen gebeurt uitsluitend via de klasse die de JS zet. Hover en focus
   worden daar ook afgehandeld, zodat aria-expanded altijd hetzelfde zegt als
   wat er te zien is; met een :hover-regel erbij zou het paneel open kunnen
   staan terwijl de knop "dicht" meldt. */
.sr-header .sr-header__item.is-open > .sr-header__submenu-wrap {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.sr-header .sr-header__submenu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background-color: var(--sr-header-dropdown-bg);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

.sr-header .sr-header__submenu .sr-header__link {
    padding: 12px 18px;
    width: 100%;
}

.sr-header .sr-header__submenu .sr-header__link::after {
    display: none;
}

.sr-header .sr-header__submenu .sr-header__link:hover,
.sr-header .sr-header__submenu .sr-header__link:focus-visible {
    background-color: var(--sr-header-dropdown-bg-hover);
}

/* --- Knoppen ------------------------------------------------------------- */

.sr-header .sr-header__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--sr-header-cta-pad);
    border-radius: var(--sr-header-cta-radius);
    background-color: var(--sr-header-cta-bg);
    color: var(--sr-header-cta-fg);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.sr-header .sr-header__cta:hover,
.sr-header .sr-header__cta:focus-visible {
    background-color: var(--sr-header-cta-bg-hover);
    color: var(--sr-header-cta-fg-hover);
}

.sr-header .sr-header__cta--ghost {
    background-color: transparent;
    color: var(--sr-header-fg);
    box-shadow: inset 0 0 0 2px currentColor;
}

.sr-header .sr-header__drawer-actions {
    display: none;
    gap: 12px;
    flex-wrap: wrap;
}

/* --- Hamburger ----------------------------------------------------------- */

.sr-header .sr-header__burger {
    font-size: inherit;
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--sr-header-fg);
    cursor: pointer;
}

.sr-header .sr-header__burger-box {
    position: relative;
    display: block;
    width: 26px;
    height: 16px;
}

.sr-header .sr-header__burger-line {
    position: absolute;
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background-color: currentColor;
    transition: transform 0.3s ease, opacity 0.2s ease, top 0.3s ease;
}

.sr-header .sr-header__burger-line:nth-child(1) { top: 0; }
.sr-header .sr-header__burger-line:nth-child(2) { top: calc(50% - 1px); }
.sr-header .sr-header__burger-line:nth-child(3) { top: calc(100% - 2px); }

/* Open: de bovenste en onderste lijn vormen samen het kruisje. */
.sr-header.is-open .sr-header__burger-line:nth-child(1) {
    top: calc(50% - 1px);
    transform: rotate(45deg);
}

.sr-header.is-open .sr-header__burger-line:nth-child(2) {
    opacity: 0;
}

.sr-header.is-open .sr-header__burger-line:nth-child(3) {
    top: calc(50% - 1px);
    transform: rotate(-45deg);
}

/* --- Taalwissel ---------------------------------------------------------- */

.sr-header .sr-header__lang {
    position: relative;
    flex: 0 0 auto;
}

.sr-header .sr-header__lang-toggle,
.sr-header .sr-header__lang-link {
    font-size: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.sr-header .sr-header__flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* De taalcode ligt onder de vlag en komt tevoorschijn zodra die niet getoond
   wordt — in hoog-contrastmodus verdwijnen achtergrondafbeeldingen namelijk,
   en dan blijft er anders een lege cirkel over. */
.sr-header .sr-header__flag-code {
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.2px;
    opacity: 0;
}

.sr-header .sr-header__lang-list {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -4px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 2;
}

.sr-header .sr-header__lang.is-open .sr-header__lang-list {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.sr-header .sr-header__lang-item.is-current .sr-header__lang-link {
    cursor: default;
    box-shadow: 0 0 0 2px var(--sr-header-accent);
}

.sr-header .sr-header__lang-link:hover .sr-header__flag {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
}

/* --- Alleen voor schermlezers -------------------------------------------- */

.sr-header .sr-header__sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- Focus --------------------------------------------------------------- */

/* De Elementor-kit geeft elke <button> op de site een knopuiterlijk, ook op
   :hover en :focus. Binnen de header zijn dat menu-items en iconen, geen
   knoppen; deze regel haalt dat uiterlijk er weer af. */
.sr-header .sr-header__link:hover,
.sr-header .sr-header__link:focus,
.sr-header .sr-header__toggle:hover,
.sr-header .sr-header__toggle:focus,
.sr-header .sr-header__burger:hover,
.sr-header .sr-header__burger:focus,
.sr-header .sr-header__lang-toggle:hover,
.sr-header .sr-header__lang-toggle:focus {
    background-color: transparent;
    color: inherit;
}


/* Twee ringen in plaats van één. De gele rand alleen is onzichtbaar op de
   blauwe actieknop (1,68:1, waar 3:1 nodig is); de donkere binnenring ligt daar
   tussen en houdt het verschil op elke ondergrond zichtbaar — op de knop, op de
   teal balk en boven een foto. */
.sr-header a:focus-visible,
.sr-header button:focus-visible {
    outline: var(--sr-header-focus-w) solid var(--sr-header-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px rgba(31, 31, 26, 0.9);
    border-radius: 2px;
}

/* De knop heeft zelf al ronde hoeken; de ringen volgen die. */
.sr-header .sr-header__cta:focus-visible {
    border-radius: var(--sr-header-cta-radius);
}

.sr-header .sr-header__lang-toggle:focus-visible,
.sr-header .sr-header__lang-link:focus-visible {
    border-radius: 50%;
}

/* =========================================================================
   Onder de breekpunt: de drawer
   is-compact wordt door de JS gezet (en door een regeltje in de render, zodat
   het al staat vóór het eerste tekenen).
   ========================================================================= */

.sr-header.is-compact .sr-header__utility {
    display: none;
}

.sr-header.is-compact .sr-header__burger {
    display: inline-flex;
}

.sr-header.is-compact .sr-header__drawer {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: block;
    /* Vult altijd de rest van het scherm onder de balk, ook bij een kort menu.
       De verschuiving telt mee, want ingelogd staat de balk onder de
       WordPress-adminbalk en blijft er dus minder scherm over.

       dvh boven vh: vh rekent met het scherm alsof de adresbalk van een mobiele
       browser er niet is, waardoor de onderkant van het paneel buiten beeld valt
       zolang die balk wél zichtbaar is. De vh-regel blijft als terugval staan
       voor browsers die dvh niet kennen. */
    height: calc(100vh - var(--sr-header-offset-top, 0px) - var(--sr-header-bar-h));
    height: calc(100dvh - var(--sr-header-offset-top, 0px) - var(--sr-header-bar-h));
    background-color: var(--sr-header-drawer-bg);
    opacity: 0;
    visibility: hidden;
    transform: translateX(100%);
    transition: transform 0.3s ease, opacity 0.2s ease, visibility 0.3s;
    overflow: hidden;
}

.sr-header.is-compact.is-open .sr-header__drawer {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.sr-header.is-compact .sr-header__drawer-scroll {
    display: block;
    height: 100%;
    padding: 8px var(--sr-header-pad-x) 40px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.sr-header.is-compact .sr-header__menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

.sr-header.is-compact .sr-header__item {
    border-bottom: 1px solid var(--sr-header-drawer-divider);
}

.sr-header.is-compact .sr-header__row {
    justify-content: space-between;
    gap: 12px;
}

.sr-header.is-compact .sr-header__link {
    flex: 1 1 auto;
    padding: 16px 0;
    font-weight: 500;
}

.sr-header.is-compact .sr-header__link::after {
    display: none;
}

.sr-header.is-compact .sr-header__item.is-current > .sr-header__row > .sr-header__link {
    color: var(--sr-header-cta-bg);
}

.sr-header.is-compact .sr-header__toggle {
    width: 44px;
    height: 44px;
    margin-right: -10px;
}

/* Het submenu schuift als accordeon open in plaats van als dropdown. */
.sr-header.is-compact .sr-header__submenu-wrap {
    position: static;
    min-width: 0;
    padding-top: 0;
    display: grid;
    grid-template-rows: 0fr;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: grid-template-rows 0.25s ease;
}

.sr-header.is-compact .sr-header__item.is-open > .sr-header__submenu-wrap {
    grid-template-rows: 1fr;
}

.sr-header.is-compact .sr-header__submenu {
    min-height: 0;
    overflow: hidden;
    background: none;
    border-radius: 0;
    box-shadow: none;
}

.sr-header.is-compact .sr-header__submenu .sr-header__link {
    padding: 12px 0 12px 16px;
    font-weight: 400;
}

.sr-header.is-compact .sr-header__submenu .sr-header__link:hover,
.sr-header.is-compact .sr-header__submenu .sr-header__link:focus-visible {
    background: none;
    text-decoration: underline;
}

.sr-header.is-compact .sr-header__submenu .sr-header__item {
    border-bottom: 0;
}

/* In de drawer staan de knoppen onder elkaar over de volle breedte: een rij
   van twee wordt op een smal scherm te krap, en een knop die de hele regel
   beslaat is met een duim makkelijker te raken. */
.sr-header.is-compact .sr-header__drawer-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-top: 3rem;
}

.sr-header.is-compact .sr-header__drawer-actions .sr-header__cta {
    width: 100%;
}

/* Boven de breekpunt hoort de drawer-inhoud in de balk te staan. */
.sr-header:not(.is-compact) .sr-header__drawer-actions {
    display: none;
}

.sr-header:not(.is-compact) .sr-header__nav--drawer {
    display: none;
}

.sr-header--split-menus.is-compact .sr-header__nav--bar {
    display: none;
}

/* --- Telefoon ------------------------------------------------------------ */

@media (max-width: 767px) {
    .sr-header .sr-header__cta--hide-phone.sr-header__cta--bar {
        display: none;
    }
}

/* --- Voorkeuren van de bezoeker ------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .sr-header .sr-header__bar,
.sr-header .sr-header__bar::before,
.sr-header .sr-header__burger-line,
.sr-header .sr-header__chevron,
.sr-header .sr-header__drawer,
.sr-header .sr-header__submenu-wrap,
.sr-header .sr-header__lang-list,
.sr-header .sr-header__link::after,
.sr-header .sr-header__cta {
        transition-duration: 0.01ms !important;
    }
}

/* In hoog-contrastmodus vallen achtergrondafbeeldingen weg. De taalcode neemt
   dan de plaats van de vlag in, en de balk krijgt een zichtbare onderrand. */
@media (forced-colors: active) {
    .sr-header .sr-header__flag {
        background-image: none !important;
        border: 1px solid CanvasText;
    }

    .sr-header .sr-header__flag-code {
        opacity: 1;
    }

    .sr-header .sr-header__bar {
        border-bottom: 1px solid CanvasText;
    }

    .sr-header .sr-header__burger-line {
        background-color: CanvasText;
    }

    .sr-header a:focus-visible,
.sr-header button:focus-visible {
        outline-color: Highlight;
    }
}

/* De pagina onder de drawer mag niet meescrollen zolang het paneel het scherm
   vult. De JS zet en haalt deze klasse. */
body.sr-header-locked {
    overflow: hidden;
}

/* --- Overzichtslink in het submenu --------------------------------------- */

.sr-header .sr-header__item--overview {
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

/* Ook onder de breekpunt, waar de algemene submenu-regel anders wint. */
.sr-header .sr-header__submenu .sr-header__item--overview .sr-header__link,
.sr-header.is-compact .sr-header__submenu .sr-header__item--overview .sr-header__link {
    font-weight: 600;
}