/* ed-header.css */

/* Menu's in de header: open/dicht via assets/js/mega-menu.js */
.fade {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, visibility 0.25s;
}

.fade.is-open {
    opacity: 1;
    visibility: visible;
}

[aria-expanded="true"] > .icon--flip { transform: rotate(180deg); }

/* Lichte stand (.is-light): de header hangt boven een lichte sectie met data-header-theme="light" (zie main.js).
   Onder #main-header zodat de transities niet wegvallen tegen .btn in style.css. */
#main-header .header-nlc {
    --btn-fill: color-mix(in srgb, var(--white) 10%, transparent);
    color: var(--white);
    transition: scale 0.15s ease-out, color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease;
}

#main-header.is-light .header-nlc {
    --btn-fill: color-mix(in srgb, var(--dark) 8%, transparent);
    color: var(--dark);
    background-color: color-mix(in srgb, var(--dark) 5%, transparent);
    border-color: color-mix(in srgb, var(--dark) 10%, transparent);
}

/* Hamburger: zachte schaduw zodat hij loskomt van een lichte achtergrond */
#main-header .header-surface { transition: scale 0.15s ease-out, box-shadow 0.4s ease; }

#main-header.is-light .header-surface {
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--dark) 6%, transparent),
        0 12px 32px -12px color-mix(in srgb, var(--dark) 25%, transparent);
}