/* Header overlays the page content and scrolls away with it — no JS scroll
   behaviour (hide-on-scroll, solid background, etc). */
.header--absolute {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
}


/* ─── Logos ───────────────────────────────────────────────────────────
   Default (dark bg / white text): show secondary (white) logo.
   .header--nav-dark (light bg / dark text): show primary (coloured) logo.
   Mobile: always show primary logo — the mobile overlay is always white.
   ───────────────────────────────────────────────────────────────────── */

.header-logo--primary   { display: none; }
.header-logo--secondary { display: block; }

.header--nav-dark .header-logo--primary   { display: block; }
.header--nav-dark .header-logo--secondary { display: none; }


/* ─── Nav items ──────────────────────────────────────────────────── */

.main-header-nav .menu-item > a {
    position: relative;
    font-family: var(--font-body);
    font-weight: var(--font-weight-medium);
    font-size: var(--text-base);
    text-transform: lowercase;
    padding-block: 10px;
    transition: color 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}



/* ─── Nav colour variants ─────────────────────────────────────────────
   Dark variant (default): white text on dark/transparent background.
   Light variant (.header--nav-dark): dark text on light/cream background.
   Active and hover accent: orange in both variants.
   ───────────────────────────────────────────────────────────────────── */

/* Dark variant — white text */
.main-header-nav .menu-item > a,
.header-heart {
    color: var(--color-white);
}

.main-header-nav .menu-item > a:hover {
    color: var(--color-orange);
}

.main-header-nav .menu-item.current-menu-item > a,
.main-header-nav .menu-item.current-menu-ancestor > a,
.main-header-nav .menu-item.current-page-ancestor > a {
    text-decoration: underline !important;
    text-underline-offset: 4px;
}

/* Light variant — dark text */
.header--nav-dark .main-header-nav .menu-item > a,
.header--nav-dark .header-heart {
    color: var(--color-dark);
}

.header--nav-dark .main-header-nav .menu-item > a:hover {
    color: var(--header-theme, var(--color-orange));
}

.header--nav-dark .main-header-nav .menu-item.current-menu-item > a,
.header--nav-dark .main-header-nav .menu-item.current-menu-ancestor > a,
.header--nav-dark .main-header-nav .menu-item.current-page-ancestor > a {
    text-decoration: underline !important;
    text-underline-offset: 4px;
}

/* ─── Flyout open: force the primary (dark-text) nav variant ────────────
   Any open dropdown/sub-menu (incl. the domein mega-menu, whose white panel
   slides under the bar) needs the nav legible — dark text + primary logo —
   regardless of the page's default variant. Background is left untouched. */
.header--flyout-active .header-logo--primary   { display: block !important; }
.header--flyout-active .header-logo--secondary { display: none  !important; }

.header--flyout-active .main-header-nav .menu-item > a,
.header--flyout-active .header-heart {
    color: var(--color-dark) !important;
}

.header--flyout-active .main-header-nav .menu-item > a:hover {
    color: var(--header-theme, var(--color-orange)) !important;
}

.header--flyout-active .header-nav__actions .btn--white {
    color: var(--color-dark);
    border-color: var(--color-dark);
}


/* ─── Submenu ────────────────────────────────────────────────────── */

.main-header-nav .menu-item-has-children {
    position: relative;
}

.main-header-nav .menu-item-has-children > a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    pointer-events: none;
    cursor: default;
}

.nav-chevron {
    transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.main-header-nav .menu-item-has-children:hover > a .nav-chevron,
.main-header-nav .menu-item--flyout-open > a .nav-chevron {
    transform: rotate(180deg);
}

.main-header-nav .sub-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 200px;
    list-style: none;
    margin: 0;
    padding-top: 15px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 300;
}

.main-header-nav .sub-menu::before {
    content: '';
    position: absolute;
    top: 16px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-white);
    border-radius: var(--radius-sm);
    z-index: -1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.main-header-nav .menu-item-has-children:hover .sub-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.main-header-nav .sub-menu .menu-item {
    padding-inline: 10px;
}

/* Submenu always sits on a white panel — dark text, orange on hover */
.main-header-nav .sub-menu .menu-item > a {
    display: block;
    padding: 10px;
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-dark);
    white-space: nowrap;
    transition: background 0.1s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-header-nav .sub-menu .menu-item:first-child > a { padding-top: 15px; }
.main-header-nav .sub-menu .menu-item:last-child  > a { padding-bottom: 15px; }

.main-header-nav .sub-menu .menu-item > a:hover,
.main-header-nav .sub-menu .menu-item.current-menu-item > a {
    color: var(--header-theme, var(--color-orange));
}

.main-header-nav .sub-menu .menu-item > a::after {
    display: none;
}


/* ─── Desktop nav layout ─────────────────────────────────────────── */

.header-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 48px;
}

.header-hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-primary);
    padding: 4px;
    line-height: 0;
    transition: color 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ─── Mobile nav ─────────────────────────────────────────────────── */

@keyframes nav-slide-down {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1023px) {
    /* Mobile: pin the header (fixed) so it stays visible while scrolling —
       there's enough vertical room on small screens. Desktop keeps the absolute
       (scrolls-away) header. Cream background avoids a transparent bar behind
       the open nav. */
    .header--absolute {
        position: fixed;
        background-color: var(--color-cream);
    }

    /* Mobile always shows the primary (coloured) logo */
    .header-logo--primary   { display: block !important; }
    .header-logo--secondary { display: none  !important; }

    .header-hamburger {
        display: block;
        position: relative;
        z-index: 210;
        color: var(--color-dark);
    }

    /* Logo also needs position so z-index applies against the nav overlay */
    .site-identity {
        position: relative;
        z-index: 210;
    }

    .site-identity img {
        max-height: 34px;
    }

    .header-nav {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--color-white);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        padding-top: var(--header-height, 104px);
        padding-bottom: 24px;
        z-index: 1;
        overflow-y: auto;
        max-height: 100dvh;
    }

    .header-nav.nav-open {
        display: flex;
        animation: nav-slide-down 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

    .main-header-navbar {
        flex-direction: column !important;
        gap: 0 !important;
    }

    .main-header-nav .menu-item > a {
        display: block;
        padding: 12px 20px;
        color: var(--color-primary) !important;
    }

    .main-header-nav .menu-item > a::after {
        display: none;
    }

    /* Submenus always visible on mobile */
    .main-header-nav .sub-menu {
        position: static;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        padding-top: 0;
        display: block;
        background: var(--color-white);
        border-radius: 0;
        box-shadow: none;
    }

    .main-header-nav .sub-menu::before {
        display: none;
    }

    .main-header-nav .menu-item-has-children > a .nav-chevron {
        display: none;
    }

    .main-header-nav .sub-menu .menu-item > a {
        padding: 10px 30px;
    }

    .main-header-nav .sub-menu .menu-item:first-child > a { padding-top: 12px; }
    .main-header-nav .sub-menu .menu-item:last-child  > a { padding-bottom: 12px; }

    .header-nav__actions {
        padding: 16px 20px 0;
        margin-top: 8px;
    }

    /* Mobile overlay is white — force dark items and hamburger */
    .header-heart,
    .header-hamburger { color: var(--color-dark) !important; }

    /* Vacatures button: dark bg on mobile white overlay */
    .header-nav__actions .btn--white { --btn-bg: var(--color-dark); }
}


/* ─── Nav CTA button ─────────────────────────────────────────────── */

.header-nav__actions .btn {
    height: 48px;
    text-transform: lowercase;
    letter-spacing: normal;
}

/* Active state — underline the button text */
.header-nav__actions .btn.is-active {
    text-decoration: underline !important;
    text-underline-offset: 4px;
}

/* Dark-variant header (.header--nav-dark) — the outline CTA turns orange on hover */
.header--nav-dark .header-nav__actions .btn:hover {
    background: var(--color-orange);
    border-color: var(--color-orange);
    color: var(--color-dark);
}


/* ─── Domein mega-menu ──────────────────────────────────────────────────
   Full-width hover flyout under the "domeinen" nav item. The header outer
   div is full-width (.container { width: 100% }), so an absolute panel with
   left/right: 0 spans the viewport; the inner .container--lg .container__inner
   re-centres the content to the page width.
   Open/close is animated with opacity + translateY (visibility delays the
   collapse so the fade-out is visible before it stops catching pointer).
   ──────────────────────────────────────────────────────────────────────── */

.domein-megamenu {
    position: absolute;
    top: var(--header-pt, 0px);
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    width: 100%;
    max-width: 1344px;
    background: var(--color-white);
    border-radius: 5px;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.08);
    z-index: -1;       /* behind the header's own content (logo + nav stay on top) */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s linear 0.25s;
}

.domein-megamenu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s linear 0s;
}

.domein-megamenu .container__inner {
    padding-top: 150px;
    padding-bottom: 32px;
    padding-inline: 32px;
}

.domein-megamenu__label {
    margin: 0 0 20px;
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: 20px;
    color: var(--color-dark);
}

.domein-megamenu__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.domein-megamenu__card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    padding: 20px 24px;
    min-height: 108px;
    background: #F6F0ED;
    border-radius: 5px;
    color: var(--color-dark);
    transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.domein-megamenu__card:hover {
    background: #E7D7D0;
}

.domein-megamenu__card--no-icon {
    min-height: auto;
    padding: 16px 24px;
}

.domein-megamenu__icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    color: var(--color-dark);
}

.domein-megamenu__icon svg,
.domein-megamenu__icon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.domein-megamenu__name {
    font-family: var(--font-body);
    font-weight: var(--font-weight-medium);
    font-size: var(--text-base);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.3;
    color: var(--color-dark);
}

/* The flyout is a desktop affordance only — the mobile nav flattens itself. */
@media (max-width: 1023px) {
    .domein-megamenu { display: none; }
}


/* ─── Heart ──────────────────────────────────────────────────────── */

.header-heart {
    transition: color 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}