/* =========================================================================
   Header / Menu
   - Eén set markup voor beide weergaves. In de brede stand staan logo, menu en
     acties naast elkaar in de balk; met de class .is-compact wordt dezelfde
     .rw-header__drawer een schermvullend paneel dat je met de hamburger
     openklapt.
   - .is-compact wordt door header-menu.js gezet, niet door een media query.
     Het script meet of de menu-items nog naast het logo en de knop passen en
     schakelt over zodra dat niet meer zo is — handig bij vertalingen, waar
     labels langer worden. Onder de 1024px is het altijd de compacte stand.
   - Submenu's zijn in de brede stand dropdowns en in de compacte stand panelen
     die van rechts inschuiven. Beide gebruiken dezelfde
     <ul class="rw-header__submenu">.
   ========================================================================= */

.rw-header {
    /* Overschrijfbaar via de Elementor-controls (zie header-menu.php). */
    --rw-header-bg: #0F1430;
    --rw-header-height: 64px;
    --rw-header-inline-padding: 30px;
    --rw-header-content-width: 100%;
    --rw-header-border-color: transparent;
    --rw-header-border-width: 0px;
    --rw-header-z: 999;

    --rw-header-link-color: #fff;
    --rw-header-link-color-hover: #fff;
    --rw-header-link-color-current: #fff;
    --rw-header-menu-gap: 2rem;
    --rw-header-menu-align: center;

    --rw-header-submenu-bg: #1C2945;
    --rw-header-submenu-color: #fff;
    --rw-header-submenu-color-hover: #fff;
    --rw-header-submenu-bg-hover: rgba(255, 255, 255, 0.08);

    /* Een menu-item is niet zo hoog als de balk, maar zo hoog als de chevron;
       de rest van de balkhoogte is vrije ruimte boven en onder het item. Door
       die helft mee te rekenen hangt de dropdown onder de balk in plaats van er
       middenin, en schuift hij mee als de balkhoogte verandert. Alleen deze gap
       is bedoeld om aan te draaien. */
    --rw-header-submenu-gap: 0.5rem;
    --rw-header-row-height: 1.125rem;
    --rw-header-submenu-offset: calc(
        (var(--rw-header-bar-height) - var(--rw-header-row-height)) / 2
        + var(--rw-header-submenu-gap)
    );

    --rw-header-drawer-bg: var(--rw-header-bg);
    --rw-header-drawer-link-color: #fff;
    --rw-header-drawer-divider: rgba(255, 255, 255, 0.18);
    --rw-header-arrow-color: rgba(255, 255, 255, 0.85);
    --rw-header-burger-color: #fff;

    --rw-header-contact-color: rgba(255, 255, 255, 0.9);
    --rw-header-contact-icon-color: #fff;

    --rw-header-cta-color: #fff;
    --rw-header-cta-border-color: #c142a2;
    --rw-header-cta-radius: 0.25rem;

    --rw-header-lang-color: rgba(255, 255, 255, 0.7);
    --rw-header-lang-color-active: #fff;

    /* Wordt door de JS gevuld met de gemeten hoogte van de balk; tot dat moment
       valt hij terug op de ingestelde hoogte. */
    --rw-header-bar-height: var(--rw-header-height);

    position: relative;
    width: 100%;
}

/* De widget zit in Elementor-wrappers met een eigen breedte; die mogen de
   vaste balk niet afknellen. */
.rw-header * {
    box-sizing: border-box;
}

/* --- Balk ---------------------------------------------------------------- */
.rw-header__bar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
    min-height: var(--rw-header-height);
    /* De achtergrond loopt door tot de schermranden, de inhoud niet: bij een
       ingestelde maximale breedte groeit de binnenmarge mee, zodat het logo
       links en de knop rechts binnen diezelfde kolom blijven. */
    padding: 0 max(
        var(--rw-header-inline-padding),
        calc((100% - var(--rw-header-content-width)) / 2)
    );
    border-bottom: var(--rw-header-border-width) solid var(--rw-header-border-color);
    background-color: var(--rw-header-bg);
}

/* Vaste balk: position fixed in plaats van sticky, omdat sticky binnen de
   Elementor-kolom niet verder plakt dan de kolom zelf hoog is. De spacer
   eronder houdt de ruimte in de pagina open.

   De balk staat eerst gewoon in de pagina en scrolt mee omhoog; pas voorbij de
   ingestelde afstand zet header-menu.js de class .is-stuck erop en klapt hij
   vast bovenaan. */
.rw-header--sticky.is-stuck .rw-header__bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--rw-header-z);
    animation: rw-header-drop 0.28s ease;
}

/* Van boven het scherm naar binnen schuiven, zodat hij niet ineens verschijnt. */
@keyframes rw-header-drop {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

/* Houdt de ruimte van de vaste balk open zodra hij uit de pagina stroom gaat,
   anders springt de inhoud een balkhoogte omhoog. */
.rw-header__spacer {
    height: 0;
}

.rw-header--sticky.is-stuck .rw-header__spacer,
.rw-header.is-open .rw-header__spacer {
    height: var(--rw-header-bar-height);
}

/* In de editor blijft de balk meescrollen, anders ligt hij over de rest van de
   pagina heen en kun je er niet omheen werken. Staat het menu open, dan moet de
   balk wél vast staan — anders verdwijnt de sluitknop. */
body.elementor-editor-active .rw-header--sticky.is-stuck:not(.is-open) .rw-header__bar,
body.elementor-editor-preview .rw-header--sticky.is-stuck:not(.is-open) .rw-header__bar {
    position: relative;
    animation: none;
}

body.elementor-editor-active .rw-header__spacer,
body.elementor-editor-preview .rw-header__spacer {
    display: none;
}

/* Op desktop is .rw-header__inner alleen het logo; de rest zit in de drawer
   ernaast. Onder de breakpoint wordt dit de bovenste rij met logo + hamburger. */
.rw-header__inner {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

/* --- Logo ---------------------------------------------------------------- */
.rw-header__logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    line-height: 0;
}

.rw-header .rw-header__logo-img {
    display: block;
    width: 170px;
    max-width: 100%;
    height: auto;
}

.rw-header .rw-header__logo-text {
    color: #fff;
    font-family: var(--primary-font, "Klavika", sans-serif);
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.2;
}

/* --- Drawer -------------------------------------------------------------- */
/* Desktop: gewoon de tweede kolom van de balk. */
.rw-header__drawer {
    flex: 1 1 auto;
    min-width: 0;
}

.rw-header__drawer-scroll {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
}

/* --- Menu (desktop) ------------------------------------------------------ */
.rw-header__nav {
    flex: 1 1 auto;
    min-width: 0;
}

.rw-header .rw-header__menu {
    display: flex;
    align-items: center;
    justify-content: var(--rw-header-menu-align);
    gap: var(--rw-header-menu-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.rw-header .rw-header__item {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rw-header__row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.rw-header .rw-header__link {
    display: inline-block;
    color: var(--rw-header-link-color);
    font-family: var(--primary-font, "Klavika", sans-serif);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.rw-header .rw-header__link:hover,
.rw-header .rw-header__link:focus-visible {
    color: var(--rw-header-link-color-hover);
    opacity: 0.75;
}

.rw-header .rw-header__item.is-current > .rw-header__row > .rw-header__link,
.rw-header .rw-header__item.is-ancestor > .rw-header__row > .rw-header__link {
    color: var(--rw-header-link-color-current);
}

/* --- Pijltjes en toggles ------------------------------------------------- */
.rw-header .rw-header__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--rw-header-arrow-color);
    cursor: pointer;
    line-height: 0;
}

.rw-header__icon {
    display: block;
    width: 1.125rem;
    height: 1.125rem;
}

/* Op desktop krijgt alleen een item mét submenu een teken, en dat is de chevron
   naar beneden. De pijl naar rechts hoort bij het mobiele paneel, dus die en de
   lege plaatshouders staan hier uit. */
.rw-header .rw-header__toggle--static {
    display: none;
}

.rw-header .rw-header__icon--arrow {
    display: none;
}

.rw-header .rw-header__icon--chevron {
    display: block;
}

/* --- Dropdown (desktop) -------------------------------------------------- */
.rw-header .rw-header__submenu {
    position: absolute;
    top: calc(100% + var(--rw-header-submenu-offset));
    left: 0;
    z-index: 2;
    min-width: 13rem;
    margin: 0;
    padding: 0.5rem 0;
    border-radius: 0.25rem;
    background-color: var(--rw-header-submenu-bg);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
    list-style: none;

    /* Verborgen, maar wel meetbaar: zo blijft de overgang vloeiend. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.375rem);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

/* Onzichtbare brug over het gat tussen de link en de dropdown. Zonder deze
   strook verliest het item zijn :hover zodra de muis het gat oversteekt en
   klapt het submenu dicht voordat je er bent. Zit op het submenu zelf, dus hij
   bestaat alleen als het open is (een dicht submenu is visibility: hidden en
   vangt geen muis). */
.rw-header:not(.is-compact) .rw-header__menu > .rw-header__item--has-children > .rw-header__submenu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: var(--rw-header-submenu-offset);
}

/* Bewust visibility en niet display: zo staat een dicht submenu ook niet in de
   voorleesvolgorde en zijn de links er niet met tab te bereiken. */
.rw-header__item--has-children:hover > .rw-header__submenu,
.rw-header__item--has-children.is-open > .rw-header__submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.rw-header .rw-header__submenu .rw-header__item {
    width: 100%;
}

.rw-header .rw-header__submenu .rw-header__row {
    width: 100%;
}

.rw-header .rw-header__submenu .rw-header__link {
    width: 100%;
    padding: 0.625rem 1.25rem;
    color: var(--rw-header-submenu-color);
    white-space: normal;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.rw-header .rw-header__submenu .rw-header__link:hover,
.rw-header .rw-header__submenu .rw-header__link:focus-visible {
    background-color: var(--rw-header-submenu-bg-hover);
    color: var(--rw-header-submenu-color-hover);
    opacity: 1;
}

/* De terug-knop hoort bij het mobiele paneel. */
.rw-header .rw-header__back-item {
    display: none;
}

/* Diepere niveaus klappen op desktop naar rechts uit. */
.rw-header .rw-header__submenu .rw-header__submenu {
    top: -0.5rem;
    left: 100%;
}

/* --- Acties (taalwissel + knop) ------------------------------------------ */
.rw-header__actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex: 0 0 auto;
}

.rw-header__lang {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--primary-font, "Klavika", sans-serif);
    font-size: 0.8125rem;
    line-height: 1;
}

.rw-header .rw-header__lang-link {
    color: var(--rw-header-lang-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

.rw-header .rw-header__lang-link:hover,
.rw-header .rw-header__lang-link:focus-visible {
    color: var(--rw-header-lang-color-active);
}

.rw-header .rw-header__lang-link.is-current {
    color: var(--rw-header-lang-color-active);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rw-header__lang-sep {
    color: var(--rw-header-lang-color);
}

/* --- Contactknop --------------------------------------------------------- */
.rw-header .rw-header__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0.75rem 1.5rem;
    border: 1px solid var(--rw-header-cta-border-color);
    border-radius: var(--rw-header-cta-radius);
    /* Zelfde verloop als de knoppen in de Kennismaken-CTA. */
    background: linear-gradient(61deg, #a52a87 13.96%, #c14da5 86.04%);
    color: var(--rw-header-cta-color);
    font-family: var(--primary-font, "Klavika", sans-serif);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: filter 0.25s ease;
}

.rw-header .rw-header__cta:hover,
.rw-header .rw-header__cta:focus-visible {
    filter: brightness(0.92);
    color: var(--rw-header-cta-color);
}

/* --- Hamburger ----------------------------------------------------------- */
.rw-header .rw-header__burger {
    display: none;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    margin-right: -0.625rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--rw-header-burger-color);
    cursor: pointer;
}

.rw-header__burger-box {
    position: relative;
    display: block;
    width: 1.5rem;
    height: 1rem;
}

.rw-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;
}

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

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

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

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

/* --- Contactgegevens (alleen mobiel) ------------------------------------- */
.rw-header .rw-header__contact {
    display: none;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* --- Focus --------------------------------------------------------------- */
.rw-header a:focus-visible,
.rw-header button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* --- Editor-melding ------------------------------------------------------ */
.rw-header__notice {
    padding: 0.75rem 1rem;
    background-color: #fff3cd;
    color: #664d03;
    font-family: var(--primary-font, "Klavika", sans-serif);
    font-size: 0.875rem;
}

/* =========================================================================
   Mobiel en tablet — de drawer wordt een schermvullend paneel.
   Let op: dezelfde breakpoint staat in header-menu.js.
   ========================================================================= */

.rw-header.is-compact {
    --rw-header-inline-padding: 20px;
}

/* De balk is nu alleen nog de bovenste rij; de drawer eronder ligt
   schermvullend en wordt los gepositioneerd. */
.rw-header.is-compact .rw-header__bar {
    display: block;
    padding: 0;
}

.rw-header.is-compact .rw-header__inner {
    position: relative;
    z-index: 2;
    justify-content: space-between;
    width: 100%;
    min-height: var(--rw-header-height);
    padding: 0 var(--rw-header-inline-padding);
    background-color: var(--rw-header-bg);
}

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

/* Het paneel vult het scherm onder de balk. Verborgen met visibility, zodat
   links niet bereikbaar zijn met tab of schermlezer als het dicht is. */
.rw-header.is-compact .rw-header__drawer {
    position: fixed;
    top: var(--rw-header-bar-height);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--rw-header-z);
    overflow: hidden;
    background-color: var(--rw-header-drawer-bg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.5rem);
    transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s;
}

/* De balk met logo en sluitknop staat altijd bovenaan zolang het menu open is,
   ook als de header niet op sticky staat. Anders was hij met de pagina mee naar
   boven gescrold en bleef er alleen een lege strook boven het paneel over. */
.rw-header.is-open .rw-header__bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--rw-header-z);
}

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

.rw-header.is-compact .rw-header__drawer-scroll {
    display: block;
    max-width: none;
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 1.5rem var(--rw-header-inline-padding) 2.5rem;
}

/* --- Menu-items als rijen met scheidingslijn ------------------------- */
.rw-header.is-compact .rw-header__menu {
    display: block;
    margin: 0 0 2rem;
}

.rw-header.is-compact .rw-header__item {
    position: static; /* het submenu wordt t.o.v. de drawer gepositioneerd */
    border-bottom: 1px solid var(--rw-header-drawer-divider);
}

.rw-header.is-compact .rw-header__row {
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
}

.rw-header.is-compact .rw-header__drawer .rw-header__link {
    flex: 1 1 auto;
    padding: 1.125rem 0;
    color: var(--rw-header-drawer-link-color);
    font-size: 1.375rem;
    font-weight: 400;
    white-space: normal;
}

.rw-header.is-compact .rw-header__drawer .rw-header__link:hover,
.rw-header.is-compact .rw-header__drawer .rw-header__link:focus-visible {
    opacity: 1;
}

.rw-header.is-compact .rw-header__toggle {
    width: 2.75rem;
    height: 2.75rem;
    margin-right: -0.5rem;
}

.rw-header.is-compact .rw-header__icon {
    width: 1.375rem;
    height: 1.375rem;
}

/* Op mobiel krijgt élke regel dezelfde pijl naar rechts — ook items zonder
   submenu, zodat de rijen er gelijk uitzien zoals in het ontwerp. */
.rw-header.is-compact .rw-header__toggle--static {
    display: inline-flex;
}

.rw-header.is-compact .rw-header__icon--arrow {
    display: block;
}

.rw-header.is-compact .rw-header__icon--chevron {
    display: none;
}

/* --- Submenu als paneel dat inschuift -------------------------------- */
.rw-header.is-compact .rw-header__submenu {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    min-width: 0;
    margin: 0;
    padding: 1.5rem var(--rw-header-inline-padding) 2.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 0;
    background-color: var(--rw-header-drawer-bg);
    box-shadow: none;

    opacity: 1;
    visibility: hidden;
    transform: translateX(100%);
    transition: transform 0.3s ease, visibility 0.3s;
}

/* Hover mag op mobiel niets openen — een tik blijft op touch als hover
   hangen. Alleen de knop opent het paneel. */
.rw-header.is-compact .rw-header__item--has-children:hover > .rw-header__submenu {
    visibility: hidden;
    transform: translateX(100%);
}

.rw-header.is-compact .rw-header__submenu.is-open,
.rw-header.is-compact .rw-header__item--has-children:hover > .rw-header__submenu.is-open {
    visibility: visible;
    transform: translateX(0);
}

.rw-header.is-compact .rw-header__submenu .rw-header__link {
    padding: 1.125rem 0;
    background: none;
    color: var(--rw-header-drawer-link-color);
}

.rw-header.is-compact .rw-header__submenu .rw-header__link:hover,
.rw-header.is-compact .rw-header__submenu .rw-header__link:focus-visible {
    background: none;
}

/* Diepere niveaus schuiven ook van rechts in, niet naar opzij. */
.rw-header.is-compact .rw-header__submenu .rw-header__submenu {
    top: 0;
    left: 0;
}

/* --- Terug-knop ------------------------------------------------------ */
.rw-header.is-compact .rw-header__back-item {
    display: block;
    border-bottom: 1px solid var(--rw-header-drawer-divider);
}

.rw-header.is-compact .rw-header__back {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 1.125rem 0;
    border: 0;
    background: none;
    color: var(--rw-header-drawer-link-color);
    font-family: var(--primary-font, "Klavika", sans-serif);
    font-size: 1rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    opacity: 0.8;
}

/* --- Contactgegevens ------------------------------------------------- */
.rw-header.is-compact .rw-header__contact {
    display: block;
    margin: 0 0 2rem;
}

.rw-header.is-compact .rw-header__contact-item + .rw-header__contact-item {
    margin-top: 1.125rem;
}

.rw-header.is-compact .rw-header__contact-link {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    color: var(--rw-header-contact-color);
    font-family: var(--primary-font, "Klavika", sans-serif);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.2;
    text-decoration: none;
}

.rw-header.is-compact .rw-header__contact-icon {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--rw-header-contact-icon-color);
}

/* --- Acties onderin -------------------------------------------------- */
.rw-header.is-compact .rw-header__actions {
    display: block;
}

.rw-header.is-compact .rw-header__lang {
    margin-bottom: 1.75rem;
    font-size: 1rem;
}

.rw-header.is-compact .rw-header__cta {
    display: flex;
    width: 100%;
    padding: 1rem 1.5rem;
    font-size: 1rem;
}

/* Als het menu openstaat mag de pagina eronder niet meescrollen. */
body.rw-header-open {
    overflow: hidden;
}

/* --- Beperkte beweging --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    .rw-header__drawer,
    .rw-header .rw-header__submenu,
    .rw-header__burger-line,
    .rw-header .rw-header__link,
    .rw-header .rw-header__cta {
        transition-duration: 0.01ms !important;
    }

    /* De balk klapt dan meteen vast, zonder het inschuiven van bovenaf. */
    .rw-header--sticky.is-stuck .rw-header__bar {
        animation: none;
    }
}