/* ==========================================================================
   MEGA MENU DESKTOP - Alpha Store
   Caricato da functions.php dopo style.css. Attivo solo sul menu principale
   (wp_nav_menu con 'mega_menu' => true).
   Struttura generata dal walker:
     ul.mega-menu > li (1° livello)
        > div.mega-panel > div.mega-inner > ul.mega-level-2
            > li (colonna, 2° livello) > span.mega-heading + ul.mega-sub.mega-level-3
   ========================================================================== */

/* --------------------------------------------------------------------------
   PERSONALIZZAZIONE: modifica qui colori e numero di colonne
   -------------------------------------------------------------------------- */
:root {
    --mega-bg: #ffffff;            /* sfondo del pannello */
    --mega-text: #444444;          /* colore dei link */
    --mega-heading: #000000;       /* colore delle intestazioni (voci di 2° livello con figli) */
    --mega-link-hover: #EF0000;    /* colore dei link al passaggio del mouse */
    --mega-border: #e5e5e5;        /* bordo superiore del pannello e linea sotto le intestazioni */
    --mega-columns: 4;             /* colonne per riga nel pannello (poi va a capo) */
    --mega-inner-max-width: 1170px;/* larghezza massima del contenuto (come .container di Bootstrap) */
}

/* Il pannello è nascosto di default */
.mega-menu .mega-panel {
    display: none;
}

/* --------------------------------------------------------------------------
   DESKTOP (>= 768px)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {

    /* Apertura al rollover della voce di 1° livello */
    .mega-menu > li.mega-has-children:hover > .mega-panel {
        display: block;
    }

    /* Pannello a tutto schermo: left e width sono calcolati da megamenu.js */
    .mega-menu .mega-panel {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100vw;
        max-height: 100vh;          /* altezza = contenuto, ma mai oltre 100vh */
        overflow-y: auto;
        z-index: 1000;
        float: none;
        text-align: left;
        background: var(--mega-bg);
        border-top: 1px solid var(--mega-border);
        box-shadow: 0 8px 12px rgba(0, 0, 0, .12);
    }

    .mega-menu .mega-inner {
        max-width: var(--mega-inner-max-width);
        margin: 0 auto;
        padding: 25px 15px 10px;
    }

    /* 2° livello: voci in orizzontale (colonne) */
    .mega-menu .mega-level-2 {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -15px;
        padding: 0;
        list-style: none;
    }
    .mega-menu .mega-level-2 > li {
        float: none;
        flex: 0 0 calc(100% / var(--mega-columns));
        max-width: calc(100% / var(--mega-columns));
        padding: 0 15px;
        margin: 0 0 20px;
        box-sizing: border-box;
    }

    /* Intestazione (voce di 2° livello che ha un 3° livello): bold, non cliccabile */
    .mega-menu .mega-heading {
        display: block;
        margin: 0 0 8px;
        padding: 5px 0 8px;
        font-weight: 700;
        color: var(--mega-heading);
        border-bottom: 1px solid var(--mega-border);
        cursor: default;
    }

    /* 3° livello (e 4°): elenco verticale sempre visibile */
    .mega-menu .mega-sub {
        display: block;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .mega-menu .mega-sub .mega-sub {      /* 4° livello: rientrato */
        padding-left: 14px;
        font-size: .92em;
    }

    /* Link dentro al pannello */
    .mega-menu .mega-panel li {
        float: none;
        list-style: none;
    }
    .mega-menu .mega-panel a {
        display: block;
        padding: 4px 0;
        color: var(--mega-text);
        background: transparent;
        text-decoration: none;
    }
    .mega-menu .mega-panel a:hover,
    .mega-menu .mega-panel a:focus,
    .mega-menu .mega-panel li.active > a {
        color: var(--mega-link-hover);
        background: transparent;
    }
}

/* --------------------------------------------------------------------------
   MOBILE (< 768px)
   Con "Off Canvas" attivo questo blocco non è mai visibile (si usa mmenu).
   Con menu "Standard" il menu viene mostrato aperto e incolonnato,
   come faceva il tema con i dropdown.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .mega-menu .mega-panel {
        display: block;
        position: static;
    }
    .mega-menu .mega-inner {
        padding: 0 0 0 15px;
    }
    .mega-menu .mega-panel ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .mega-menu .mega-panel .mega-sub {
        padding-left: 10px;
    }
    .mega-menu .mega-panel a,
    .mega-menu .mega-heading {
        display: block;
        padding: 5px 0;
        color: #fff;
    }
    .mega-menu .mega-heading {
        font-weight: 700;
    }
}