/* ==========================================================================
   MAKENEXT MENU - CUSTOM THEME FILE
   ==========================================================================

========================================================================== */

/* =========================================
   1. VARIABILI GLOBALI (COLORI E FONT)
   Qui comandi tutto il modulo in un colpo solo.
   ========================================= */
:root {
    /* --- COLORI PRINCIPALI --- */
    /* Colore della barra desktop e delle linee dell'hamburger */
    /* --mn-primary: #1E3250; */

    /* Colore "Accento" (usato per Hover, Voci Attive, Focus) */
     --mn-accent: #002ba7;

    /* --- TYPOGRAPHY --- */
    /* Font family personalizzato (assicurati di averlo caricato nel sito) */
    /* font-family: 'Roboto', sans-serif; */

    /* --- TESTI --- */
    /* Colore testo principale (link scuri) */
    /* --mn-text-dark: #333333; */

    /* Colore testo su fondi scuri (es. se metti la navbar scura) */
    /* --mn-text-light: #ffffff; */

    /* --- BACKGROUNDS --- */
    /* Sfondo del pannello mobile / mega menu laterale */
    /* --mn-mobile-bg: #ffffff; */

    /* Sfondo dei sottomenu a tendina (Dropdown) */
    /* --mn-mobile-sub-bg: #f8f9fa; */

    /* --- BORDI --- */
    /* Colore delle linee divisorie nel mobile */
    /* --mn-mobile-border: #e0e0e0; */
}


/* =========================================
   2. STILE BARRA DESKTOP (Menu Orizzontale)
   ========================================= */

/* Sfondo dell'intera barra menu */
.mn-menu-desktop {
    /* background-color: #ffffff; */
    /* border-bottom: 1px solid #eee; */
    /* padding: 10px 0; */
}

/* Link di Primo Livello (quelli visibili sulla barra) */
.mn-menu-desktop a,
.mn-menu-desktop span.mn-separator {
    /* font-size: 16px; */
    /* text-transform: uppercase; */
    /* font-weight: 600; */
    /* padding: 10px 20px; */ /* Spaziatura interna */
    /* border-radius: 4px; */ /* Arrotonda gli angoli al passaggio del mouse */
}

/* Effetto al passaggio del mouse sui link principali */
.mn-menu-desktop a:hover {
    /* background-color: rgba(0,0,0,0.05); */ /* Sfondo grigino all'hover */
    /* color: var(--mn-accent); */
}


/* =========================================
   3. HAMBURGER ICON (Il pulsante a tre linee)
   ========================================= */

/* Personalizzazione dell'icona Hamburger */
.mn-hamburger {
    /* background-color: transparent; */
    /* border-radius: 50%; */ /* Fallo rotondo */
    /* padding: 10px; */      /* Spazio interno se metti lo sfondo */
    /* width: 45px; */        /* Larghezza totale */
    /* height: 45px; */       /* Altezza totale */
}

/* Spessore e colore delle 3 linee */
.mn-icon-bar {
    /* height: 3px; */             /* Più sottile o più spesso */
    /* background-color: #000; */  /* Forza un colore diverso dal primary */
    /* border-radius: 5px; */      /* Punte arrotondate */
}


/* =========================================
   4. PANNELLO LATERALE (Mobile & Hamburger Mega)
   ========================================= */

/* Il contenitore che esce da destra/sinistra */
.mn-mobile-container {
    /* box-shadow: -5px 0 20px rgba(0,0,0,0.1); */ /* Ombra più marcata */
    /* border-left: 1px solid #ddd; */
}

/* Header del pannello (dove c'è la X di chiusura) */
.mn-mobile-header {
    /* background-color: #f5f5f5; */
    /* padding: 15px; */
}

/* Pulsante di chiusura (X) */
.mn-close-btn {
    /* color: red; */
    /* font-size: 28px; */
    /* border: 1px solid #ccc; */
    /* border-radius: 50%; */
    /* width: 40px; height: 40px; text-align: center; line-height: 40px; */
}


/* =========================================
   5. HAMBURGER MEGA (La Griglia Desktop)
   Queste regole valgono SOLO quando si usa la modalità "Hamburger Mega" su Desktop
   ========================================= */

/* I Titoli delle Colonne (Livello 1) */
.mn-mode-hamburger_mega:not(.mn-is-mobile) .mn-mobile-nav > li > .mn-mobile-row > a,
.mn-mode-hamburger_mega:not(.mn-is-mobile) .mn-mobile-nav > li > .mn-mobile-row > span {
    /* font-size: 20px !important; */
    /* color: var(--mn-primary) !important; */
    /* border-bottom: 2px solid var(--mn-accent) !important; */ /* Sottolineatura colorata */
    /* text-align: left !important; */
    /* margin-bottom: 20px !important; */
}

/* I Link dentro le colonne (Livello 2 e 3) */
.mn-mode-hamburger_mega:not(.mn-is-mobile) .mn-mobile-sub a {
    /* font-size: 14px; */
    /* color: #666; */
    /* padding-left: 0; */ /* Rimuove rientri se vuoi una lista piatta */
}

/* Hover sui link dentro la griglia */
.mn-mode-hamburger_mega:not(.mn-is-mobile) .mn-mobile-sub a:hover {
    /* color: var(--mn-accent); */
    /* transform: translateX(5px); */ /* Sposta leggermente a destra */
    /* text-decoration: underline; */
}


/* =========================================
   6. MEGA MENU FULL-WIDTH (Barra orizzontale + Pannellone)
   Queste regole valgono SOLO per la modalità "Mega"
   ========================================= */

/* Il pannellone bianco che scende */
.mn-mega-panel {
    /* background-color: #ffffff; */
    /* border-top: 3px solid var(--mn-accent); */ /* Linea colorata in cima */
    /* box-shadow: 0 10px 40px rgba(0,0,0,0.1); */
    /* border-radius: 0 0 10px 10px; */
}

/* Titoli delle colonne nel Mega Menu */
.mn-mega-col-title {
    /* font-size: 16px; */
    /* font-weight: bold; */
    /* text-transform: uppercase; */
    /* color: var(--mn-primary); */
}


/* =========================================
   7. STILE MOBILE "FISARMONICA" (Accordion)
   Queste regole valgono SOLO su smartphone o tablet
   ========================================= */

/* Riga della voce di menu */
.mn-is-mobile .mn-mobile-row {
    /* padding: 5px 0; */
}

/* Voce attiva (quella cliccata) */
.mn-is-mobile .mn-mobile-row.active {
    /* background-color: #f0f0f0; */
    /* border-left: 4px solid var(--mn-accent); */
}

/* Toggler (il pulsante + / -) */
.mn-is-mobile .mn-toggler {
    /* background-color: #eee; */ /* Sfondo grigino per il bottone + */
    /* color: #333; */
}


/* =========================================
   8. CLASSI DI UTILITÀ (Icone e Immagini)
   ========================================= */

/* Icone FontAwesome accanto alle voci */
.mn-icon {
    /* color: var(--mn-accent); */ /* Colora tutte le icone col colore accento */
    /* font-size: 1.2em; */
}

/* Immagini caricate da Joomla */
.mn-menu-img {
    /* border-radius: 50%; */ /* Immagini tonde */
    /* border: 1px solid #ddd; */
}