/* =========================================
   MEGA MENU - Desktop
   =========================================
   Attivo solo in modalità "mega".
   Riutilizza desktop-standard.css per la barra
   orizzontale (mn-nav, link primo livello, caret).
   Questo file aggiunge: pannello, griglia, colonne.
   ========================================= */

/* =========================================
   PANNELLO MEGA (il contenitore che cade sotto la voce)
   ========================================= */
.mn-mode-mega .mn-mega-panel {
    position: absolute;
    top: 100%;
    /* left e width vengono impostati dal JS */
    background: #fff;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    border-radius: 0 0 6px 6px;
    padding: 32px 40px 36px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
    z-index: 998;
}

/* Aperto al hover della voce primo livello */
.mn-mode-mega .mn-nav > li:hover > .mn-mega-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Bordo superiore colorato (accento) */
.mn-mode-mega .mn-mega-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--mn-accent);
    border-radius: 0;
}


/* =========================================
   GRIGLIA COLONNE
   ========================================= */
.mn-mega-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    margin: 0 auto;
    /* max-width viene impostato dal JS in base al parametro mega_content_width */
}

/* Colonne: comportamento automatico (flex: 1) */
.mn-mega-col {
    flex: 1;
    min-width: 140px;
}

/* Colonne forzate tramite data-mega-columns sul panel */
.mn-mega-panel[data-mega-columns="2"] > .mn-mega-grid > .mn-mega-col {
    flex: 0 0 calc(50% - 16px);
}
.mn-mega-panel[data-mega-columns="3"] > .mn-mega-grid > .mn-mega-col {
    flex: 0 0 calc(33.333% - 22px);
}
.mn-mega-panel[data-mega-columns="4"] > .mn-mega-grid > .mn-mega-col {
    flex: 0 0 calc(25% - 24px);
}


/* =========================================
   INTESTAZIONE COLONNA (Titolo lvl 2)
   ========================================= */
.mn-mega-col-title {
    display: block;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--mn-primary);
    text-decoration: none;
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 2px solid var(--mn-accent);
    transition: color 0.2s;
}
.mn-mega-col-title:hover {
    color: var(--mn-accent);
}

/* Versione span (heading / separator nel menu Joomla) */
span.mn-mega-col-title {
    cursor: default;
}


/* =========================================
   LISTA SOTTO LA COLONNA (lvl 3+)
   ========================================= */
.mn-mega-sub {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mn-mega-sub a {
    display: block;
    font-size: 14px;
    color: #555;
    text-decoration: none;
    padding: 5px 0;
    transition: color 0.2s, padding-left 0.2s;
    white-space: nowrap;
}
.mn-mega-sub a:hover {
    color: var(--mn-accent);
    padding-left: 6px;
}

/* Stati attivi */
.mn-mega-sub li.current > a {
    color: var(--mn-accent);
    font-weight: 600;
}
.mn-mega-sub li.active-parent > a {
    color: var(--mn-accent);
}

/* Sotto-sotto lista (lvl 4+): indentata con linea laterale */
.mn-mega-sub .mn-mega-sub {
    margin-top: 6px;
    padding-left: 12px;
    border-left: 2px solid #eee;
}
.mn-mega-sub .mn-mega-sub a {
    font-size: 13px;
    color: #777;
    padding: 3px 0;
}
.mn-mega-sub .mn-mega-sub a:hover {
    color: var(--mn-accent);
    padding-left: 4px;
}



/* =========================================
   OVERRIDE: neutralizza il flip di desktop-standard.js
   sul mega-panel (il pannello è sempre posizionato dal JS)
   ========================================= */
.mn-mode-mega .mn-mega-panel.mn-flip {
    left: inherit !important;
    right: auto !important;
}