/*
 * Water Concepts
 * Mega panel "Assortiment"
 *
 * The cards themselves are styled by category-cards.css
 * (same markup, same classes) — this file only positions
 * the panel and styles the trigger.
 *
 * Panel is rendered inside #site-navigation (see
 * megamenu.inc.php). #site-navigation is sticky, and so a
 * positioned element: the panel anchors to it with
 * top: 100% and spans the full width. Content width via
 * .grid-container, same as utility bar and header.
 *
 * Desktop only (≥1025px). Below that the primary menu is
 * replaced by the off-canvas panel.
 */


/* ==========================================
   ANCHOR
   .inside-navigation is the grid-container (max 1600px).
   If it were positioned, the panel would anchor to it
   instead of to the full-width nav. Static = anchor on
   #site-navigation.
========================================== */

#site-navigation .inside-navigation {
    position: static;
}


/* ==========================================
   PANEL
========================================== */

.wc-mega-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1;

    max-height: calc(100vh - 8rem);
    max-height: calc(100dvh - 8rem);
    overflow-y: auto;
    overscroll-behavior: contain;

    background: var(--white);
    box-shadow: 0 16px 32px rgba(8, 45, 75, 0.12);
}

.wc-mega-panel[hidden] {
    display: none;
}


/* ==========================================
   TRANSITION: fade + 8px omlaag
   Pure CSS, megamenu.js blijft ongewijzigd (die
   toggelt alleen [hidden]). @starting-style +
   allow-discrete laten display: none meeanimeren.
   Browsers zonder support openen/sluiten gewoon
   direct, zonder animatie.
   Open 200ms, dicht 150ms (sluiten mag sneller).
========================================== */

.wc-mega-panel {
    opacity: 1;
    transform: translateY(0);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        display 0.2s allow-discrete;
}

.wc-mega-panel[hidden] {
    opacity: 0;
    transform: translateY(-8px);

    transition-duration: 0.15s;
}

@starting-style {

    .wc-mega-panel:not([hidden]) {
        opacity: 0;
        transform: translateY(-8px);
    }
}

.wc-mega-panel__inner {
    box-sizing: border-box;
    padding: 1.5rem 30px 2rem;
}

/* ==========================================
   RESET: GP-NAVSTIJLEN LEKKEN IN HET PANEEL
   Het paneel staat binnen .main-navigation, dus GP's
   regels voor ".main-navigation a" (typografie van het
   primaire menu: 700, menu-fontgrootte; display) gelden
   ook voor de kaarten. Hier teruggezet naar de waarden
   van category-cards.css, met #site-navigation voor
   voldoende specificiteit.
========================================== */

#site-navigation .wc-mega-panel {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: normal;
    text-transform: none;
}

#site-navigation .wc-mega-panel a.category-card {
    display: flex;
    flex-direction: column;

    padding: 0;

    font-size: 1rem;
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: normal;
    text-transform: none;
}

#site-navigation .wc-mega-panel a.category-card--all {
    justify-content: space-between;
}

#site-navigation .wc-mega-panel .category-card__subtitle {
    font-weight: 400;
}

#site-navigation .wc-mega-panel .category-card__all-button {
    display: inline-flex;
    align-self: flex-start;
}


/* Iets compacter dan op de pagina: minder ruimte
   in een dropdown dan in een sectie. */
.wc-mega-panel .category-cards__grid {
    gap: 16px;
}

.wc-mega-panel .category-card__media {
    aspect-ratio: 1 / 1;
}

#site-navigation .wc-mega-panel a.category-card--all {
    padding: 24px;
}

.wc-mega-panel .category-card__all-title {
    font-size: 1.375rem;
}


/* ==========================================
   TRIGGER
   Chevron after the label; rotates when open.
   Underline (header.css) also shows while open.
========================================== */

.wc-mega-chevron {
    display: inline-flex;
    align-items: center;

    margin-left: 0.375rem;

    vertical-align: middle;

    transition: transform 0.2s ease;
}

.wc-mega-chevron svg {
    width: 12px;
    height: 12px;
}

[data-mega-trigger][aria-expanded="true"] .wc-mega-chevron {
    transform: rotate(180deg);
}

@media (min-width: 1025px) {

    #site-navigation .main-nav > ul > li > a[aria-expanded="true"] {
        color: var(--blue-500);
    }

    #site-navigation .main-nav > ul > li > a[aria-expanded="true"]::after {
        background: var(--blue-400);
        transform: scaleX(1);
    }
}


/* ==========================================
   ≤1024px: panel never shown
========================================== */

@media (max-width: 1024px) {

    .wc-mega-panel {
        display: none !important;
    }
}


/* ==========================================
   REDUCED MOTION
========================================== */

@media (prefers-reduced-motion: reduce) {

    .wc-mega-chevron,
    .wc-mega-panel,
    .wc-mega-panel[hidden] {
        transition: none;
    }

    .wc-mega-panel,
    .wc-mega-panel[hidden] {
        transform: none;
    }
}