/* ==========================================================================
   Complai Header
   Markup: includes/header-renderer.php — controls: widgets/header-widget.php

   Alle instelbare waarden staan als custom property op .cw-header. De
   Elementor-controls schrijven dezelfde properties op `{{WRAPPER}} .cw-header`
   (hogere specificiteit) en overschrijven daarmee de waarden hieronder. Zo
   werkt de header ook zonder Elementor: dan gelden simpelweg deze defaults.
   ========================================================================== */

.cw-header {
    /* Positie + balk */
    --cw-hd-z: 100;
    --cw-hd-max-width: 1400px;
    --cw-hd-offset: 30px;
    --cw-hd-gutter: 20px;
    --cw-hd-bar-bg: #FFFFFF;
    --cw-hd-bar-radius: 50px;
    --cw-hd-bar-padding: 16px 16px 16px 20px;
    --cw-hd-bar-shadow: 0 0 65px rgba(16, 30, 52, .1);

    /* Logo */
    --cw-hd-logo-width: 14rem;

    /* Hoofdnavigatie */
    --cw-hd-nav-gap: 3rem;
    --cw-hd-nav-color: #101E34;
    --cw-hd-nav-color-hover: #4B3265;

    /* Dropdown */
    --cw-hd-dd-bg: #FFFFFF;
    --cw-hd-dd-radius: 1.25rem;
    --cw-hd-dd-padding: 1.5rem;
    --cw-hd-dd-border-color: rgba(0, 0, 0, .05);
    --cw-hd-dd-shadow: 0 1px 2px rgba(16, 30, 52, .04), 0 12px 32px -12px rgba(16, 30, 52, .14);
    --cw-hd-dd-offset: 1rem;
    --cw-hd-dd-width: max-content;
    --cw-hd-dd-gap: .25rem;
    --cw-hd-label-color: #3C4759;
    --cw-hd-label-border-color: #CED1D6;
    --cw-hd-sub-color: #101E34;
    --cw-hd-sub-desc-color: #3C4759;
    --cw-hd-sub-bg-hover: #F3F3F5;
    --cw-hd-sub-radius: .75rem;
    --cw-hd-sub-padding: .5rem 1rem;
    --cw-hd-disabled-color: rgba(16, 30, 52, .33);

    /* Knoppen */
    --cw-hd-btn-gap: 1rem;
    --cw-hd-primary-bg: #101E34;
    --cw-hd-primary-color: #FFFFFF;
    --cw-hd-primary-bg-hover: #FFFFFF;
    --cw-hd-primary-color-hover: #101E34;
    --cw-hd-primary-radius: 50px;
    --cw-hd-primary-padding: 15px 24px;
    --cw-hd-primary-icon-gap: 12px;
    --cw-hd-secondary-color: #101E34;
    --cw-hd-secondary-color-hover: #4B3265;

    /* Mobiel paneel */
    --cw-hd-panel-bg: #FAFAFB;
    --cw-hd-panel-image: none;
    --cw-hd-panel-padding: 1.5rem 1rem;
    /* Wordt door de JS gelijkgezet aan de linkerkant van het logo, zodat de
       menu-items, het logo en de knoppen op één lijn staan. */
    --cw-hd-panel-inline: 1rem;
    --cw-hd-panel-actions-gap: .5rem;
    --cw-hd-panel-title-color: #101E34;
    --cw-hd-card-size: 2.75rem;
    --cw-hd-card-gap: 1.25rem;
    --cw-hd-card-icon-gap: 1.25rem;
    --cw-hd-card-radius: .75rem;
    --cw-hd-panel-sub-color: #101E34;
    --cw-hd-panel-icon-color: #101E34;
    --cw-hd-panel-secondary-bg: #FFFFFF;
    --cw-hd-panel-secondary-color: #101E34;
    --cw-hd-panel-secondary-bg-hover: #101E34;
    --cw-hd-panel-secondary-color-hover: #FFFFFF;
    --cw-hd-panel-secondary-radius: 50px;
    --cw-hd-panel-secondary-padding: 15px 24px;

    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: var(--cw-hd-z);
    box-sizing: border-box;
    padding: var(--cw-hd-offset) var(--cw-hd-gutter) 0;
    font-family: var(--cw-hd-font-family, "Inter"), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    /* De transparante ruimte rond de balk mag geen kliks van de hero opvangen */
    pointer-events: none;
}

.cw-header *,
.cw-header *::before,
.cw-header *::after {
    box-sizing: border-box;
}

/* hello-elementor (reset.css) geeft elke <button> een rand en op :hover/:focus
   een achtergrondkleur. Die selectors zijn specifieker dan een enkele class,
   dus de states staan hier expliciet. */
.cw-header .cw-header__link,
.cw-header .cw-header__link:hover,
.cw-header .cw-header__link:focus,
.cw-header .cw-header__link:active,
.cw-header .cw-header__burger,
.cw-header .cw-header__burger:hover,
.cw-header .cw-header__burger:focus,
.cw-header .cw-header__burger:active,
.cw-header .cw-header__panel-title,
.cw-header .cw-header__panel-title:hover,
.cw-header .cw-header__panel-title:focus,
.cw-header .cw-header__panel-title:active {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}

/* Datzelfde reset.css zet button:hover en button:focus ook op color:#fff.
   Na een klik houdt een knop focus, dus zonder deze regels wordt het
   menu-icoon wit zodra je erop tikt. De hover- en open-kleuren staan verderop
   en winnen daar waar ze van toepassing zijn. */
.cw-header .cw-header__burger,
.cw-header .cw-header__burger:hover,
.cw-header .cw-header__burger:focus,
.cw-header .cw-header__burger:active {
    color: var(--cw-hd-panel-icon-color);
}

.cw-header .cw-header__panel-title,
.cw-header .cw-header__panel-title:focus,
.cw-header .cw-header__panel-title:active {
    color: var(--cw-hd-panel-title-color);
}

.cw-header .cw-header__link,
.cw-header .cw-header__link:focus,
.cw-header .cw-header__link:active {
    color: var(--cw-hd-nav-color);
}

/* In de Elementor-editor niet vastzetten, anders zweeft hij over het canvas */
.cw-header--static,
.cw-header--editor {
    position: relative;
}

.cw-header__inner {
    position: relative;
    /* Boven het paneel: logo, Login en het icoon blijven zo staan waar ze staan. */
    z-index: 4;
    width: 100%;
    max-width: var(--cw-hd-max-width);
    margin-inline: auto;
}

.cw-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: var(--cw-hd-bar-padding);
    background-color: var(--cw-hd-bar-bg);
    border-radius: var(--cw-hd-bar-radius);
    box-shadow: var(--cw-hd-bar-shadow);
    pointer-events: auto;
    transition: background-color .22s ease, box-shadow .22s ease;
}

/* Zonder pil boven het open paneel: het logo en het icoon staan op exact
   dezelfde plek, maar direct op de paneelachtergrond. */
.cw-header--plain-on-open.cw-header--panel-open .cw-header__bar {
    /* Ook als custom property, en op de balk zelf: de Elementor-controls
       schrijven hun waarden op een voorouder met vier classes, en een eigen
       declaratie op het element wint altijd van zo'n geërfde waarde. */
    --cw-hd-bar-bg: transparent;
    --cw-hd-bar-shadow: none;
    /* !important is hier bewust: dit is een toestandsregel die moet winnen van
       de gegenereerde Elementor-CSS, die met vier classes prefixt en na dit
       bestand wordt ingeladen. Zonder dit blijft de schaduw staan zolang
       post-XX.css nog de oude regel bevat. */
    background-color: transparent !important;
    box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   Logo
   -------------------------------------------------------------------------- */

.cw-header__logo {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    line-height: 0;
    text-decoration: none;
}

.cw-header__logo img,
.cw-header__logo svg {
    display: block;
    width: var(--cw-hd-logo-width);
    height: auto;
}

/* --------------------------------------------------------------------------
   Hoofdnavigatie (desktop)
   -------------------------------------------------------------------------- */

.cw-header__nav {
    flex: 0 1 auto;
}

.cw-header__menu {
    display: flex;
    align-items: center;
    gap: var(--cw-hd-nav-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

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

.cw-header__link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: 0;
    color: var(--cw-hd-nav-color);
    font-family: inherit;
    font-size: var(--cw-hd-nav-font-size, .938rem);
    font-weight: var(--cw-hd-nav-font-weight, 500);
    line-height: 100%;
    text-decoration: none;
    white-space: nowrap;
    background: none;
    border: 0;
    cursor: pointer;
    transition: color .15s ease;
}

.cw-header .cw-header__link:hover,
.cw-header .cw-header__link:focus-visible,
.cw-header .cw-header__item--current > .cw-header__link,
.cw-header .cw-header__item--open > .cw-header__link {
    color: var(--cw-hd-nav-color-hover);
}

.cw-header__chevron {
    flex: 0 0 auto;
    transition: transform .2s ease;
}

.cw-header__item--open > .cw-header__link .cw-header__chevron {
    transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   Dropdown
   -------------------------------------------------------------------------- */

.cw-header__dropdown {
    position: absolute;
    top: 100%;
    left: calc(-1 * var(--cw-hd-dd-padding));
    z-index: 2;
    width: var(--cw-hd-dd-width);
    max-width: calc(100vw - 2rem);
    padding-top: var(--cw-hd-dd-offset);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-.35rem);
    /* visibility mag niet meelopen in de fade: bij openen direct omslaan,
       bij sluiten pas nadat de fade klaar is. */
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}

/* Geen :focus-within: toetsenbordgebruikers openen met Enter/Space, zodat
   aria-expanded altijd klopt met wat er te zien is. */
.cw-header__item--open > .cw-header__dropdown,
.cw-header__item:hover > .cw-header__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .18s ease, transform .18s ease, visibility 0s;
}

.cw-header__dropdown-card {
    display: flex;
    flex-direction: column;
    gap: var(--cw-hd-dd-gap);
    padding: var(--cw-hd-dd-padding);
    background-color: var(--cw-hd-dd-bg);
    border: 1px solid var(--cw-hd-dd-border-color);
    border-radius: var(--cw-hd-dd-radius);
    box-shadow: var(--cw-hd-dd-shadow);
}

.cw-header__dropdown-label {
    margin: 0 0 .5rem;
    padding: .5rem 0;
    color: var(--cw-hd-label-color);
    font-family: inherit;
    font-size: var(--cw-hd-label-font-size, .938rem);
    font-weight: var(--cw-hd-label-font-weight, 400);
    line-height: 1.5rem;
    text-transform: uppercase;
    border-bottom: 1px solid var(--cw-hd-label-border-color);
}

.cw-header__sub {
    display: flex;
    flex-direction: column;
    gap: var(--cw-hd-dd-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.cw-header__sub > li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cw-header__sublink {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--cw-hd-sub-padding);
    color: var(--cw-hd-sub-color);
    font-family: inherit;
    font-size: var(--cw-hd-sub-font-size, .938rem);
    font-weight: var(--cw-hd-sub-font-weight, 500);
    line-height: 1.75rem;
    text-decoration: none;
    border-radius: var(--cw-hd-sub-radius);
    transition: background-color .15s ease;
}

a.cw-header__sublink:hover,
a.cw-header__sublink:focus-visible,
.cw-header__subitem--current > .cw-header__sublink {
    background-color: var(--cw-hd-sub-bg-hover);
}

.cw-header__subdesc {
    color: var(--cw-hd-sub-desc-color);
    font-size: var(--cw-hd-subdesc-font-size, .938rem);
    font-weight: var(--cw-hd-subdesc-font-weight, 400);
    line-height: 1.5rem;
}

/* Menu-items zonder URL: leesbaar, maar niet klikbaar */
.cw-header__sublink--static,
.cw-header__sublink--static .cw-header__subdesc,
.cw-header .menu-item-disabled > .cw-header__sublink,
.cw-header .menu-item-disabled > .cw-header__sublink .cw-header__subdesc {
    color: var(--cw-hd-disabled-color);
    cursor: default;
}

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

.cw-header__actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: var(--cw-hd-btn-gap);
}

.cw-header__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    line-height: 100%;
    text-decoration: none;
    white-space: nowrap;
    border: 0;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.cw-header__btn-icon {
    flex: 0 0 auto;
}

.cw-header__btn--primary {
    gap: var(--cw-hd-primary-icon-gap);
    padding: var(--cw-hd-primary-padding);
    color: var(--cw-hd-primary-color);
    font-size: var(--cw-hd-primary-font-size, .938rem);
    font-weight: var(--cw-hd-primary-font-weight, 500);
    background-color: var(--cw-hd-primary-bg);
    border-radius: var(--cw-hd-primary-radius);
}

.cw-header__btn--primary:hover,
.cw-header__btn--primary:focus-visible {
    color: var(--cw-hd-primary-color-hover);
    background-color: var(--cw-hd-primary-bg-hover);
}

.cw-header__btn--secondary {
    gap: .5rem;
    padding: 0;
    color: var(--cw-hd-secondary-color);
    font-size: var(--cw-hd-secondary-font-size, .938rem);
    font-weight: var(--cw-hd-secondary-font-weight, 500);
    background: none;
}

.cw-header__btn--secondary:hover,
.cw-header__btn--secondary:focus-visible {
    color: var(--cw-hd-secondary-color-hover);
    background: none;
}

/* --------------------------------------------------------------------------
   Hamburger — zichtbaarheid per breakpoint staat inline bij het widget
   -------------------------------------------------------------------------- */

.cw-header__burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    color: var(--cw-hd-panel-icon-color);
    background: none;
    border: 0;
    cursor: pointer;
}

.cw-header__burger svg,
.cw-header__burger img {
    display: block;
    width: 1.5rem;
    height: auto;
}

/* Standaard-icoon: drie balkjes die ter plekke naar een kruis draaien.
   Alleen transform en opacity animeren, dus geen layout-werk. */
/* De kleur staat op de <span>, niet op de <button>: het thema stuurt via
   button:hover/:focus ook color aan, en currentColor binnen de knop pikt dat
   op. Een span raakt het thema niet aan, dus dit blijft altijd kloppen. */
.cw-header__burger-icon,
.cw-header__burger-swap {
    color: var(--cw-hd-panel-icon-color);
}

.cw-header__burger-icon {
    position: relative;
    display: block;
    width: 1.5rem;
    height: 1.125rem;
}

.cw-header__burger-icon > span {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2.6px;
    background-color: currentColor;
    border-radius: 2px;
    transition: transform .28s cubic-bezier(.4, 0, .2, 1), opacity .16s ease;
}

.cw-header__burger-icon > span:nth-child(1) { transform: translateY(calc(-50% - .45rem)); }
.cw-header__burger-icon > span:nth-child(2) { transform: translateY(-50%); }
.cw-header__burger-icon > span:nth-child(3) { transform: translateY(calc(-50% + .45rem)); }

.cw-header--panel-open .cw-header__burger-icon > span:nth-child(1) {
    transform: translateY(-50%) rotate(45deg);
}

.cw-header--panel-open .cw-header__burger-icon > span:nth-child(2) {
    opacity: 0;
    transform: translateY(-50%) scaleX(.2);
}

.cw-header--panel-open .cw-header__burger-icon > span:nth-child(3) {
    transform: translateY(-50%) rotate(-45deg);
}

/* Eigen icoon ingesteld: kruisvloeiend wisselen in plaats van morphen. */
.cw-header__burger-swap {
    display: grid;
    place-items: center;
}

.cw-header__burger-swap > span {
    grid-area: 1 / 1;
    display: flex;
    transition: opacity .2s ease, transform .2s ease;
}

.cw-header__burger-shut,
.cw-header--panel-open .cw-header__burger-open {
    opacity: 0;
    transform: rotate(-45deg);
}

.cw-header--panel-open .cw-header__burger-shut {
    opacity: 1;
    transform: rotate(0);
}

/* --------------------------------------------------------------------------
   Mobiel paneel
   -------------------------------------------------------------------------- */

.cw-header__panel {
    position: fixed;
    inset: 0;
    /* Onder de balk: die blijft zichtbaar en op zijn plek. */
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    /* Ruimte voor de balk erboven; de hoogte wordt door de JS gemeten. Deze
       ruimte hoort niet mee te scrollen, anders schuift de inhoud onder het
       logo en het kruisje door. Het scrollen gebeurt daarom een niveau dieper,
       in .cw-header__panel-content. */
    padding-top: calc(var(--cw-hd-offset) + var(--cw-hd-bar-height, 4.5rem));
    overflow: hidden;
    background-color: var(--cw-hd-panel-bg);
    background-image: var(--cw-hd-panel-image);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, visibility 0s linear .22s;
}

.cw-header--panel-open .cw-header__panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .22s ease, visibility 0s;
}

.cw-header__panel-content {
    display: flex;
    flex: 1 1 auto;
    /* min-height: 0 is nodig om een flex-item te laten krimpen en scrollen. */
    min-height: 0;
    flex-direction: column;
    /* Geen justify-content: center. Bij inhoud die groter is dan het scherm
       knipt dat de bovenkant weg zonder dat je er nog naartoe kunt scrollen.
       De auto-marges hieronder centreren wél, maar geven ruimte terug zodra
       die op is. */
    justify-content: flex-start;
    gap: 3rem;
    padding: 1rem var(--cw-hd-panel-inline);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.cw-header__panel-content > :first-child {
    margin-top: auto;
}

.cw-header__panel-content > :last-child {
    margin-bottom: auto;
}

.cw-header__panel-nav {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.cw-header__panel-menu {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cw-header__panel-menu > li {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cw-header__panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    width: 100%;
    padding: 0;
    color: var(--cw-hd-panel-title-color);
    font-family: inherit;
    font-size: var(--cw-hd-panel-title-font-size, 1rem);
    font-weight: var(--cw-hd-panel-title-font-weight, 600);
    line-height: 2.375rem;
    text-align: left;
    text-decoration: none;
    background: none;
    border: 0;
    cursor: pointer;
}

.cw-header__panel-block {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cw-header__panel-cards {
    display: flex;
    flex-direction: column;
    gap: var(--cw-hd-card-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.cw-header__panel-cards > li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cw-header__panel-card {
    display: flex;
    align-items: center;
    gap: var(--cw-hd-card-icon-gap);
    color: var(--cw-hd-panel-sub-color);
    font-family: inherit;
    font-size: var(--cw-hd-panel-sub-font-size, 1rem);
    font-weight: var(--cw-hd-panel-sub-font-weight, 400);
    line-height: 1.4;
    text-decoration: none;
}

.cw-header__panel-card-icon {
    display: flex;
    flex: 0 0 auto;
    width: var(--cw-hd-card-size);
}

.cw-header__panel-card-icon img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--cw-hd-card-radius);
}

.cw-header__panel-sub {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cw-header__panel-sub > li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cw-header__panel-sublink {
    display: block;
    color: var(--cw-hd-panel-sub-color);
    font-family: inherit;
    font-size: var(--cw-hd-panel-sub-font-size, 1rem);
    font-weight: var(--cw-hd-panel-sub-font-weight, 400);
    line-height: 1.5556;
    text-decoration: none;
}

.cw-header__panel-sublink--static,
.cw-header .menu-item-disabled > .cw-header__panel-sublink {
    color: var(--cw-hd-disabled-color);
    cursor: default;
}

.cw-header__panel-actions {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: var(--cw-hd-panel-actions-gap);
    /* Geen eigen zijpadding: die staat al op .cw-header__panel-content, anders
       springen de knoppen verder in dan de menu-items. */
    padding: 0 0 1rem;
}

.cw-header__panel-actions .cw-header__btn--primary {
    width: 100%;
}

/* In de balk is Login een tekstlink, in het paneel een volwaardige knop. */
.cw-header__panel-actions .cw-header__btn--secondary {
    justify-content: center;
    width: 100%;
    padding: var(--cw-hd-panel-secondary-padding);
    color: var(--cw-hd-panel-secondary-color);
    background-color: var(--cw-hd-panel-secondary-bg);
    border-radius: var(--cw-hd-panel-secondary-radius);
}

.cw-header__panel-actions .cw-header__btn--secondary:hover,
.cw-header__panel-actions .cw-header__btn--secondary:focus-visible {
    color: var(--cw-hd-panel-secondary-color-hover);
    background-color: var(--cw-hd-panel-secondary-bg-hover);
}

/* Scroll blokkeren zolang het paneel open staat */
html.cw-header-panel-open,
html.cw-header-panel-open body {
    overflow: hidden;
}

/* De scroll-lock laat de scrollbar verdwijnen; zonder compensatie schuift de
   vaste balk daardoor opzij. Op mobiel is deze waarde 0. */
html.cw-header-panel-open .cw-header {
    padding-right: calc(var(--cw-hd-gutter) + var(--cw-hd-scrollbar, 0px));
}

/* --------------------------------------------------------------------------
   Fallback-breakpoints (gelden als het widget buiten Elementor wordt gebruikt;
   binnen Elementor zetten de responsive controls dezelfde properties)
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .cw-header {
        --cw-hd-offset: 24px;
        --cw-hd-bar-padding: 16px 24px;
    }
}

@media (max-width: 767px) {
    .cw-header {
        --cw-hd-offset: 18px;
        --cw-hd-gutter: 10px;
        --cw-hd-logo-width: 10rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cw-header *,
    .cw-header__panel {
        transition-duration: .01ms !important;
    }
}