/* ed-header.css */

/* Panelen in de header (dropdown, gsm-menu): open/dicht via assets/js/mega-menu.js */
.fade {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, visibility 0.25s, translate 0.3s ease-out;
}

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

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

/* Desktop- of gsm-header. Eigen breekpunt (1280px i.p.v. t-- = 1024px): daaronder passen de zeven categorieën
   niet naast elkaar in de menubalk, dus toont de header dan de gsm-versie met het menu. */
@media (max-width: 1279px) {
    .header-desktop { display: none; }
}

@media (min-width: 1280px) {
    .header-gsm { display: none; }
}

/* Sticky header (assets/js/header.js): schaduw na 120px scrollen. Desktop: bij omlaag scrollen schuift de witte balk
   weg (--balk-hoogte) en blijft de groene menubalk bovenaan (.is-compact). */
.header-balk { transition: box-shadow 0.3s; }
.is-scrolled .header-balk { box-shadow: 0 8px 24px -12px color-mix(in srgb, var(--dark) 20%, transparent); }

@media (min-width: 1280px) {
    #main-header { transition: translate 0.35s cubic-bezier(0.33, 1, 0.68, 1); }
    #main-header.is-compact { translate: 0 calc(var(--balk-hoogte, 0px) * -1); }
    .header-menu { transition: box-shadow 0.3s; }
    .is-compact .header-menu { box-shadow: 0 8px 24px -12px color-mix(in srgb, var(--dark) 35%, transparent); }
}

/* Menulinks: ruimte schaalt mee met het scherm (8px op 1280, 24px vanaf 1600), zodat alle categorieën en
   "Over ons" ook op 1280px naast elkaar passen */
.header-menu li > .menu-link { padding-inline: clamp(0.5rem, calc((100vw - 80rem) / 20 + 0.5rem), 1.375rem); }

/* Hoofdcategorie met megamenu (Figma 94:408): open = licht vlak over de volle hoogte + gele balk onderaan */
.menu-link--mega { position: relative; transition: background-color 0.2s; }
.menu-link--mega::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background-color: var(--secondary);
    scale: 0 1;
    transform-origin: left;
    transition: scale 0.3s ease-out;
}
/* Zelfde stand bij hover, bij een open megamenu en voor de categorie waarin je zit */
.menu-link--mega:hover,
.menu-link--mega:focus-visible,
.menu-link--mega.is-actief,
.menu-link--mega[aria-expanded="true"] { background-color: color-mix(in srgb, var(--white) 10%, transparent); }
.menu-link--mega:hover::before,
.menu-link--mega:focus-visible::before,
.menu-link--mega.is-actief::before,
.menu-link--mega[aria-expanded="true"]::before { scale: 1 1; }
.header-menu .menu-link--mega > span::after { display: none; }

/* Menulinks: onderlijn die van links inschuift */
.menu-link > span { position: relative; }

.menu-link > span::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.375rem;
    height: 1px;
    background-color: currentColor;
    scale: 0 1;
    transform-origin: left;
    transition: scale 0.3s ease-out;
}

.menu-link:hover > span::after,
.menu-link:focus-visible > span::after,
.menu-link[aria-expanded="true"] > span::after,
.menu-link[aria-current="page"] > span::after { scale: 1 1; }

/* Megamenu (inc/componenten/navigatie.php): paneel onder de menubalk, schuift open van boven */
.megamenu {
    top: 100%;
    border-radius: 0 0 0.75rem 0.75rem;
    box-shadow: 0 24px 60px color-mix(in srgb, var(--black) 16%, transparent);
    overflow: hidden;
    clip-path: inset(0 0 100% 0);
    transition: opacity 0.25s, visibility 0.35s, clip-path 0.35s cubic-bezier(0.33, 1, 0.68, 1);
}

.megamenu.is-open { clip-path: inset(0 0 -4rem 0); }

/* Overlay onder het megamenu; de header-balken blijven erboven */
.menu-overlay { backdrop-filter: blur(2px); }

/* Offerte-type: actieve subcategorie, items en pijltjes */
.megamenu__sub.is-actief,
.megamenu__sub:hover { background-color: var(--light); }
.megamenu__sub.is-actief { color: var(--primary); font-weight: 600; }
.megamenu__detail:not([hidden]) { animation: detail-in 0.2s ease-out; }

@keyframes detail-in { from { opacity: 0; translate: 0.5rem 0; } }

.megamenu__pijl { opacity: 0; translate: -0.25rem 0; transition: opacity 0.2s, translate 0.2s; }
.megamenu__item:hover,
.megamenu__item:focus-visible,
.megamenu__item:hover .megamenu__pijl,
.megamenu__item:focus-visible .megamenu__pijl,

/* Winkel-type: lijn boven het blok wordt groen bij hover */

/* Links met een pijl die opschuift */
@media (hover: hover) {
    .pijl-link:hover svg { translate: 0.25rem 0; }
}

/* Gsm-menu: terugknop (chevron naar links), uitklappen van winkel-subcategorieën */
.icon--terug { rotate: 180deg; }
.gsm-menu summary { list-style: none; }
.gsm-menu summary::-webkit-details-marker { display: none; }
.gsm-menu__klap[open] .gsm-menu__chevron { rotate: 180deg; }
.gsm-menu__paneel:not([hidden]) { animation: detail-in 0.25s ease-out; }

/* Dropdown "Over ons" */
.dropdown {
    top: 100%;
    translate: 0 -0.5rem;
    box-shadow: 0 16px 40px color-mix(in srgb, var(--black) 16%, transparent);
}

.dropdown.is-open { translate: 0 0; }

.dropdown__pijl { opacity: 0; translate: -0.25rem 0; transition: opacity 0.2s, translate 0.2s; }
.dropdown__link:hover .dropdown__pijl,
.dropdown__link:focus-visible .dropdown__pijl { opacity: 1; translate: 0 0; }

/* Offertemandje-knop: gevuld (.is-gevuld via de mandje-module) wordt een zwarte pil met label en gele teller */
.mandje-knop__label,
.mandje-knop__teller { display: none; }

.mandje-knop.is-gevuld {
    width: auto;
    padding-inline: 1.5rem 0.5rem;
    background-color: var(--dark);
    color: var(--white);
}

.mandje-knop.is-gevuld .mandje-knop__label { display: block; }
.mandje-knop.is-gevuld .mandje-knop__teller { display: flex; width: 2.5rem; height: 2.5rem; }

/* Tooltip "Uw offertemandje is nog leeg": onder de knop, enkel bij een leeg mandje */
.mandje-knop__tip {
    top: calc(100% + 0.5rem);
    opacity: 0;
    visibility: hidden;
    translate: 0 -0.25rem;
    transition: opacity 0.2s, visibility 0.2s, translate 0.2s ease-out;
}

.mandje-knop:not(.is-gevuld):hover .mandje-knop__tip,
.mandje-knop:not(.is-gevuld):focus-visible .mandje-knop__tip {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
}

.mandje-knop.is-gevuld .mandje-knop__tip { display: none; }

/* Gsm: de knop blijft rond, de teller wordt een badge rechtsboven */
.mandje-knop--gsm.is-gevuld { width: 3rem; padding: 0; background-color: var(--light); color: var(--dark); }

.mandje-knop--gsm.is-gevuld .mandje-knop__teller {
    position: absolute;
    top: -0.125rem;
    right: -0.125rem;
    width: 1.25rem;
    height: 1.25rem;
    font-size: 0.625rem;
}

/* Menuknop (gsm): hamburger ↔ kruisje */
.menu-knop[aria-expanded="false"] .menu-knop__sluit,
.menu-knop[aria-expanded="true"] .menu-knop__open { display: none; }

/* Gsm-menu: vanaf de onderkant van de witte balk (--menu-top, gezet door header.js) tot onderaan het scherm */
.menu-mobiel {
    top: var(--menu-top, 4rem);
    translate: 0 -0.5rem;
}

.menu-mobiel.is-open { translate: 0 0; }

/* Niet scrollen achter het open gsm-menu */
html:has(.menu-mobiel.is-open) { overflow: hidden; }