/* =========================== HEADER =========================== */

/* De header ligt over de hero heen en krijgt een vaste achtergrond na de scroll */
.w--header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px 0 60px;
    background-color: transparent;
    z-index: 1000;
}

.w--header.is-sticky {
    position: fixed;
    background-color: var(--color-black);
}

body.admin-bar .w--header.is-sticky {
    top: 32px;
}

.w--header--logolink {
    display: block;
}

/* Twee versies van het logo: negatief (wit) op donker, positief (zwart) op licht */
.w--header--logo .logo {
    display: block;
    width: clamp(170px, 15vw, 250px);
    height: auto;
}

.w--header--logo .logo--positief {
    display: none;
}

.w--header--licht:not(.is-sticky) .logo--negatief {
    display: none;
}

.w--header--licht:not(.is-sticky) .logo--positief {
    display: block;
}

.w--header--naam {
    color: var(--color-white);
    font-weight: 700;
    text-transform: uppercase;
}

/* =========================== MENU =========================== */

.w--header--menu ul {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.w--header--menu li {
    position: relative;
    padding: 20px 0;
}

.w--header--menu a {
    display: block;
    margin: 0 30px;
    color: var(--color-white);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.w--header--menu a:hover,
.w--header--menu a:focus-visible {
    color: var(--color-white);
}

/* Het streepje voor het actieve en gehoverde item */
.w--header--menu li::after {
    content: "";
    position: absolute;
    top: 47%;
    left: 0;
    width: 20px;
    height: 2px;
    background-color: var(--color-primary);
    transform: scaleX(0);
    transform-origin: 0 100%;
    transition: transform 0.3s ease-in-out;
}

.w--header--menu li:hover::after,
.w--header--menu li.current-menu-item::after,
.w--header--menu li.current-menu-ancestor::after {
    transform: scaleX(1);
}

/* De importcalculator valt op als gevulde knop en staat altijd helemaal rechts, waar hij ook in het menu staat.
   Contacteer ons blijft een gewoon item. De hover is dezelfde als bij de andere knoppen: donker met rode rand. */
.w--header--menu li:has(> a[href*="importcalculator"]) {
    order: 99;
}

.w--header--menu li:has(> a[href*="importcalculator"])::after {
    display: none;
}

.w--header--menu a[href*="importcalculator"],
.w--header--licht:not(.is-sticky) .w--header--menu a[href*="importcalculator"] {
    margin: 0 10px;
    padding: 11px 23px;
    border: 1px solid var(--color-primary);
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    transition: background-color 0.5s ease, color 0.5s ease;
}

.w--header--menu a[href*="importcalculator"]:hover,
.w--header--menu a[href*="importcalculator"]:focus-visible,
.w--header--licht:not(.is-sticky) .w--header--menu a[href*="importcalculator"]:hover {
    background-color: var(--color-dark);
    color: var(--color-primary);
}

/* Lichte variant, voor pagina's zonder donkere hero */
.w--header--licht:not(.is-sticky) .w--header--menu a,
.w--header--licht:not(.is-sticky) .w--header--naam {
    color: var(--color-black);
}

/* =========================== BURGER =========================== */

.w--burger {
    display: none;
    position: relative;
    width: 40px;
    height: 30px;
    margin-right: 20px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    z-index: 1002;
}

.w--burger--wrapper,
.w--burger--wrapper::before,
.w--burger--wrapper::after {
    position: absolute;
    left: 0;
    width: 40px;
    height: 4px;
    border-radius: 4px;
    background-color: var(--color-white);
    content: "";
    transition: transform 0.3s ease, top 0.3s ease, opacity 0.3s ease;
}

.w--burger--wrapper {
    top: 13px;
}

.w--burger--wrapper::before {
    top: -12px;
}

.w--burger--wrapper::after {
    top: 12px;
}

html.menu-open .w--burger--wrapper {
    transform: rotate(45deg);
}

html.menu-open .w--burger--wrapper::before {
    top: 0;
    transform: rotate(-90deg);
}

html.menu-open .w--burger--wrapper::after {
    top: 0;
    opacity: 0;
}

html.menu-open {
    overflow: hidden;
}

.w--menu--contact {
    display: none;
}

/* =========================== RESPONSIVE =========================== */

@media (max-width: 1599px) and (min-width: 1024px) {

    .w--header--menu a {
        margin: 0 15px;
        font-size: 0.7rem;
    }

    .w--header--menu li::after {
        width: 10px;
    }
}


/* Onder 1024px wordt het menu een scherm over de hele pagina */
@media (max-width: 1023px) {
    .w--header {
        height: 90px;
        padding: 0 0 0 20px;
    }

    .w--header--licht,
    html.menu-open .w--header {
        background-color: var(--color-black);
    }

    .w--header--logo .logo {
        width: 170px;
    }

    /* Op mobiel is de lichte header zwart, dus ook daar het negatieve logo */
    .w--header--licht:not(.is-sticky) .logo--negatief {
        display: block;
    }

    .w--header--licht:not(.is-sticky) .logo--positief {
        display: none;
    }

    .w--burger {
        display: block;
        width: 44px;
        height: 44px;
        margin-right: 20px;
    }

    .w--burger--wrapper,
    .w--burger--wrapper::before,
    .w--burger--wrapper::after {
        left: 7px;
        width: 30px;
        height: 3px;
    }

    .w--burger--wrapper {
        top: 20px;
    }

    .w--burger--wrapper::before {
        top: -9px;
    }

    .w--burger--wrapper::after {
        top: 9px;
    }

    /* Het kruisje: de middelste streep verdwijnt, de andere twee kruisen elkaar in het midden */
    html.menu-open .w--burger--wrapper {
        transform: none;
        background-color: transparent;
    }

    html.menu-open .w--burger--wrapper::before {
        top: 0;
        transform: rotate(45deg);
    }

    html.menu-open .w--burger--wrapper::after {
        top: 0;
        opacity: 1;
        transform: rotate(-45deg);
    }

    /* Het menuscherm, onder de header, met het menu bovenaan en de contactgegevens onderaan */
    .w--header--menu {
        position: fixed;
        top: 90px;
        left: 0;
        width: 100%;
        height: calc(100vh - 90px);
        height: calc(100dvh - 90px);
        display: flex;
        flex-direction: column;
        padding: 16px 24px 32px;
        overflow-y: auto;
        background-color: var(--color-dark);
        border-top: 3px solid var(--color-primary);
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    body.admin-bar .w--header--menu {
        top: 136px;
        height: calc(100dvh - 136px);
    }

    html.menu-open .w--header--menu {
        visibility: visible;
        opacity: 1;
    }

    .w--header--menu ul {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        height: auto;
        margin: 0;
    }

    .w--header--menu li,
    .w--header--menu li:last-child {
        margin: 0;
        padding: 0;
        border: 0;
        border-bottom: 1px solid rgb(255 255 255 / 12%);
        text-align: left;
    }

    .w--header--menu li::after {
        display: none;
    }

    /* Grote links in de stijl van de koppen, met een rode // ervoor bij het actieve item */
    .w--header--menu a,
    .w--header--licht:not(.is-sticky) .w--header--menu a {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 0;
        padding: 20px 0;
        color: var(--color-white);
        font-size: clamp(1.75rem, 8vw, 2.5rem);
        font-style: italic;
        font-weight: 900;
        letter-spacing: 0;
        line-height: 1.1;
    }

    .w--header--menu li.current-menu-item a::before,
    .w--header--menu li.current-menu-ancestor a::before {
        content: "";
        flex: none;
        width: 1.15em;
        height: 0.85em;
        background-color: var(--color-primary);
        -webkit-mask: var(--streepjes) no-repeat center / contain;
        mask: var(--streepjes) no-repeat center / contain;
    }

    .w--header--menu li:has(> a[href*="importcalculator"]) {
        margin-top: 28px;
        border-bottom: 0;
    }

    /* De importcalculator wordt een rode knop */
    .w--header--menu li > a[href*="importcalculator"],
    .w--header--licht:not(.is-sticky) .w--header--menu li > a[href*="importcalculator"] {
        justify-content: center;
        padding: 18px 24px;
        background-color: var(--color-primary);
        color: var(--color-on-primary);
        font-size: 1.125rem;
        font-style: normal;
        font-weight: 700;
        letter-spacing: 0.08em;
    }

    /* Telefoon en mail onderaan het menuscherm */
    .w--menu--contact {
        display: block;
        margin-top: auto;
        padding-top: 32px;
        color: rgb(255 255 255 / 75%);
        font-size: 1rem;
        line-height: 1.8;
    }

    .w--header--menu .w--menu--contact a,
    .w--header--licht:not(.is-sticky) .w--header--menu .w--menu--contact a {
        display: inline;
        padding: 0;
        letter-spacing: 0;
        text-transform: none;
        font-size: 1.125rem;
        font-style: normal;
        font-weight: 700;
        line-height: 1.8;
    }
}