/* ============================================================
   AWCF Mega Menu (Assortiment) — cascade/drill-down
   Vormgeving conform referentie (menu.png):
   - kolomtitels (huisstijlblauw) boven de subitems
   - "Bekijk alles in …"-link (cyaan-accent) met chevron rechts
   - items met dieper niveau: chevron rechts uitgelijnd
   - lichtgrijze hover/actief-achtergrond, dunne rij-randen
   - kolommen op gelijke hoogte, witte panel-achtergrond
   Alleen desktop; mobiel houdt de standaard weergave.
   ============================================================ */

:root {
    --awcf-mega-title:   #044A76;  /* kolomtitel / huisstijlblauw */
    --awcf-mega-accent:  #147E99;  /* 'Bekijk alles'-link + accent */
    --awcf-mega-text:    #1F2E54;  /* itemtekst (navy) */
    --awcf-mega-hover:   #E2F1EF;  /* hover/actief achtergrond */
    --awcf-mega-border:  #EAEAEA;  /* randen */
}

/* Paneel verborgen tot .is-open (alleen desktop) */
.awcf-mega {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #ffffff;
    border-top: 1px solid var(--awcf-mega-border);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
    pointer-events: none;
}

.awcf-mega.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.awcf-mega__cols {
    display: flex;
    align-items: stretch;       /* kolommen op gelijke hoogte */
    width: 100%;
}

/* Iedere kolom vaste breedte (1/3), links uitgelijnd */
.awcf-mega__col {
    flex: 0 0 33.333%;
    max-width: 33.333%;
    padding: 24px 0 28px;
    border-right: 1px solid var(--awcf-mega-border);
}
.awcf-mega__col:last-child {
    border-right: 0;
}

/* Kolomtitel */
.awcf-mega__title {
    color: var(--awcf-mega-title);
    font-weight: 700;
    font-size: 17px;
    line-height: 1.2;
    padding: 0 28px;
    margin-bottom: 10px;
}

/* "Bekijk alles in …" */
.awcf-mega__all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--awcf-mega-accent);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    padding: 10px 28px;
    border-bottom: 1px solid var(--awcf-mega-border);
}
.awcf-mega__all span {
    text-decoration: underline;
}
.awcf-mega__all::after {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--awcf-mega-accent);
    border-top: 2px solid var(--awcf-mega-accent);
    transform: rotate(45deg);
}

/* Item-rijen */
.awcf-mega__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--awcf-mega-text);
    font-size: 15px;
    line-height: 1.3;
    text-decoration: none;
    padding: 12px 28px;
    border-bottom: 1px solid var(--awcf-mega-border);
    transition: background-color .12s ease;
}

.awcf-mega__link:hover,
.awcf-mega__link.is-active {
    background: var(--awcf-mega-hover);
    color: var(--awcf-mega-text);
}
.awcf-mega__link.is-active {
    font-weight: 600;
}

/* Chevron rechts uitgelijnd bij items met dieper niveau */
.awcf-mega__link.has-children::after {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: .6;
}

/* Verberg de standaard SmartMenus-dropdown van het Assortiment-item op desktop,
   want we vervangen die door het mega-paneel. */
@media (min-width: 1025px) {
    .elementor-nav-menu--main .awcf-mega-root > .sub-menu {
        display: none !important;
    }
}

/* Mobiel: geen mega-paneel, standaard menu blijft werken */
@media (max-width: 1024px) {
    .awcf-mega {
        display: none !important;
    }
}