/**
 * Mega Menu — Stili
 * ─────────────────────────────────────────────────────────────
 *
 * Su desktop (>1020px) il pannello apre su :hover e :focus-within (CSS only).
 * Sotto i 1020px entra in gioco il pattern "secondo layer":
 *   - Tap su Prestazioni / Visite Specialistiche → pannello in fade-in;
 *     gli altri item del menu si nascondono via :has().
 *   - Pulsante "← {titolo}" in cima al pannello torna al livello principale.
 *   - Palette mobile: bg #004d58, testo #ffffff (allineata al menu mobile
 *     già esistente nel tema).
 *
 * Componenti principali:
 *
 *   .tsmm-mega                  Voce di primo livello che apre il megamenu
 *   .tsmm-mega-trigger          Link/trigger del top-level
 *   .tsmm-mega-panel            Pannello assoluto sotto al trigger (desktop)
 *                               o sostitutivo del menu (mobile)
 *   .tsmm-mega-back             Pulsante "indietro" del layer mobile
 *   .tsmm-mega-grid             Wrapper interno del pannello
 *   .tsmm-mega-list             Lista delle colonne
 *   .tsmm-col                   Singola colonna
 *   .tsmm-col-heading           Intestazione di colonna ("Bassano"/"Monfalcone")
 *   .tsmm-col-items             Lista delle voci dentro una colonna
 *   .tsmm-mega-item             Singola voce (prestazione)
 *   .tsmm-mega-link             Link della voce
 *   .tsmm-mega-icon             Wrapper dell'SVG icona
 *   .tsmm-mega-text             Etichetta testuale della voce
 *
 * Le custom properties qui sotto sono pensate per essere sovrascritte
 * nel CSS principale del tema (style.css) o in un file specifico, così
 * da agganciare i colori del tema senza toccare questo file.
 */

:root {
    --tsmm-bg:               #ffffff;
    --tsmm-text:             #2a2a2a;
    --tsmm-text-muted:       #1a1a1a;
    --tsmm-accent:           #0a6ebd;     /* sostituire col primary del tema */
    --tsmm-accent-soft:      rgba(10, 110, 189, 0.06);
    --tsmm-border:           #e5e5e5;
    --tsmm-shadow:           0 12px 32px rgba(20, 30, 50, 0.10);
    --tsmm-radius:           4px;
    --tsmm-panel-padding:    1.75rem 2rem;
    --tsmm-col-gap:          2.5rem;
    --tsmm-row-gap:          0.4rem;
    --tsmm-icon-size:        18px;
    --tsmm-transition:       150ms ease;
    --tsmm-z-index:          1000;
}

/* ============================================
   Trigger top-level
   ============================================ */
.tsmm-mega {
    position: relative;
}

.tsmm-mega-trigger {
    cursor: pointer;
}

/* ============================================
   Pulsante "Indietro" del layer mobile
   ─────────────────────────────────────────
   Generato dal walker dentro a ogni pannello,
   ma visibile solo sotto i 1020px (vedi media query).
   Su desktop resta nel DOM ma viene nascosto.
   ============================================ */
.tsmm-mega-back {
    display: none;
}

/* ============================================
   Pannello — apertura su hover e focus tastiera (desktop)
   ============================================ */
.tsmm-mega-panel {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: var(--tsmm-z-index);
    background: var(--tsmm-bg);
    border: 1px solid var(--tsmm-border);
    border-radius: var(--tsmm-radius);
    box-shadow: var(--tsmm-shadow);
    padding: var(--tsmm-panel-padding);
    min-width: 480px;
    max-width: min(90vw, 900px);

    /* Stato chiuso */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition:
        opacity    var(--tsmm-transition),
        transform  var(--tsmm-transition),
        visibility 0s linear var(--tsmm-transition);
}

/*
 * Stato aperto: si attiva sia all'hover sulla voce parent che quando
 * il focus tastiera entra nel sottoalbero (:focus-within), così
 * l'utente che naviga col Tab vede comparire il pannello e può
 * tabbare dentro le voci.
 */
.tsmm-mega:hover > .tsmm-mega-panel,
.tsmm-mega:focus-within > .tsmm-mega-panel {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity    var(--tsmm-transition),
        transform  var(--tsmm-transition),
        visibility 0s linear 0s;
}

.tsmm-mega-grid {
    /* Riservato per future estensioni: griglia con sidebar/promo. */
}

/* ============================================
   Colonne
   ============================================ */
.tsmm-mega-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--tsmm-col-gap);
}

.tsmm-col {
    flex: 1 1 180px;
    min-width: 180px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.tsmm-col-heading {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tsmm-text-muted);
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--tsmm-border);
}

.tsmm-col-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--tsmm-row-gap);
}

.tsmm-mega-item {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ============================================
   Link voci (le prestazioni)
   ============================================ */
.tsmm-mega-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.4rem 0.5rem;
    border-radius: var(--tsmm-radius);
    color: var(--tsmm-text);
    text-decoration: none;
    line-height: 1.3;
    transition: background var(--tsmm-transition), color var(--tsmm-transition);
}

.tsmm-mega-link:hover,
.tsmm-mega-link:focus-visible {
    color: var(--tsmm-accent);
    background: var(--tsmm-accent-soft);
    outline: none;
}

.tsmm-mega-link:focus-visible {
    box-shadow: 0 0 0 2px var(--tsmm-accent);
}

.tsmm-mega-icon {
    flex-shrink: 0;
    width: var(--tsmm-icon-size);
    height: var(--tsmm-icon-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--tsmm-accent);
}

.tsmm-mega-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.tsmm-mega-text {
    flex: 1;
    font-size: 12px;
}

/* ============================================
   Mobile / Tablet — sotto i 1020px
   ─────────────────────────────────────────
   Pattern "secondo layer":
   - Pannello hidden di default (display: none).
   - Tap sul trigger aggiunge `.is-mobile-active` al <li>: gli altri
     item del menu vengono nascosti via :has(), il trigger si nasconde,
     il pannello compare in fade-in con il back button in cima.
   - Tap sul back button rimuove `.is-mobile-active` e ripristina la
     vista del menu principale.
   - Palette ribaltata: bg scuro (#004d58) e testi bianchi, allineata
     al menu mobile già presente nel tema. L'override avviene sulle
     custom properties dentro al pannello, così TUTTI gli elementi
     figli (link, heading, icone, back button) ereditano i nuovi
     colori senza dover ridichiarare ogni regola.
   ============================================ */
@media (max-width: 1020px) {

    /* Reset visuale del pannello: niente più posizionamento assoluto
       né effetto card flottante; il pannello prende il posto del menu. */
    .tsmm-mega-panel {
        /* Palette mobile: override delle custom properties.
           I figli (link, heading, icone) le ereditano per cascade. */
        --tsmm-bg:           #004d58;
        --tsmm-text:         #ffffff;
        --tsmm-text-muted:   rgba(255, 255, 255, 0.75);
        --tsmm-accent:       #ffffff;
        --tsmm-accent-soft:  rgba(255, 255, 255, 0.10);
        --tsmm-border:       rgba(255, 255, 255, 0.18);

        position: static;
        min-width: 0;
        max-width: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
        padding: 1rem 1.25rem 1.5rem;
        background: var(--tsmm-bg);
        color: var(--tsmm-text);

        /* Default: nascosto. La transition desktop (visibility/opacity)
           viene neutralizzata: il toggle è display-driven con animation. */
        display: none;
        visibility: visible;
        opacity: 1;
        transform: none;
        transition: none;
    }

    /* Quando UN qualsiasi <li.tsmm-mega> dentro al <ul> ha la classe
       .is-mobile-active, nascondo i suoi fratelli: visualmente resta
       solo il pannello attivo, come una "schermata" sostitutiva. */
    ul:has(> .tsmm-mega.is-mobile-active) > li:not(.is-mobile-active) {
        display: none;
    }

    /* Nascondo anche il trigger del megamenu attivo: il back button
       lo sostituisce visivamente in cima al pannello. */
    .tsmm-mega.is-mobile-active > .tsmm-mega-trigger {
        display: none;
    }

    /* Mostro il pannello attivo, con fade-in via @keyframes
       (display:none → block + animation, non transition). */
    .tsmm-mega.is-mobile-active > .tsmm-mega-panel {
        display: block;
        animation: tsmm-fade-in 200ms ease-out both;
    }

    /* Back button: visibile solo su mobile (la regola desktop lo
       nasconde con display:none, qui lo riporto a display:flex). */
    .tsmm-mega-back {
        display: flex;
        align-items: center;
        gap: 0.5rem;

        width: 100%;
        min-height: 44px;        /* target tap accessibile */
        padding: 0.5rem 0;
        margin-bottom: 1rem;

        /* Reset stili nativi del <button> */
        background: transparent;
        border: 0;
        border-bottom: 1px solid var(--tsmm-border);
        cursor: pointer;
        font: inherit;
        text-align: left;

        color: var(--tsmm-text);
        font-weight: 600;
        font-size: 1rem;
    }

    .tsmm-mega-back:focus-visible {
        outline: 2px solid var(--tsmm-accent);
        outline-offset: 2px;
    }

    .tsmm-mega-back-arrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .tsmm-mega-back-arrow svg {
        display: block;
    }

    .tsmm-mega-back-text {
        flex: 1;
    }

    /* Colonne impilate in verticale. */
    .tsmm-mega-list {
        flex-direction: column;
        gap: 1.25rem;
    }

    .tsmm-col {
        flex: 1 1 100%;
        min-width: 0;
    }

    /* Link voci: la palette eredita le custom properties mobile,
       qui aggiusto soltanto il tap target (più alto). */
    .tsmm-mega-link {
        padding: 0.6rem 0.5rem;
        min-height: 40px;
    }

    /* Su touch il testo voce a 12px è troppo piccolo, lo ingrandisco. */
    .tsmm-mega-text {
        font-size: 0.95rem;
    }

    .tsmm-col-heading {
        font-size: 14px;
    }
}

@keyframes tsmm-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ============================================
   Accessibilità: rispetta le preferenze utente
   sul movimento ridotto.
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .tsmm-mega-panel,
    .tsmm-mega-link {
        transition: none;
    }
    .tsmm-mega.is-mobile-active > .tsmm-mega-panel {
        animation: none;
    }
}