/* ==========================================================================
   MEGA MENU - CONTROLLO LARGHEZZA CONTRO LO SCHIACCIAMENTO
   ========================================================================== */

/* --- 1. BARRA DI NAVIGAZIONE PRINCIPALE --- */
nav.main-navigation {
    position: relative !important;
}

/* Rimuove i vincoli di larghezza dai singoli LI per far espandere il mega menu */
nav.main-navigation .menu-item {
    position: static !important; 
}

nav.main-navigation .menu-item > a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* --- 2. CONTENITORE DEL MEGA MENU (Blindato contro lo schiacciamento) --- */
.mega-menu-dropdown-container {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    
    /* Forza il menu a prendere la larghezza desiderata ignorando i blocchi del tema */
    width: 1140px !important;       /* Imposta una larghezza fissa ottimale per desktop */
    max-width: 95vw !important;     /* Evita che esca dallo schermo sui display più piccoli */
    min-width: 1000px !important;    /* Impedisce categoricamente lo schiacciamento a 100px */
    
    background: #ffffff !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08) !important;
    border-top: 1px solid #f0f0f0 !important;
    border-radius: 0 0 8px 8px !important;
    padding: 40px !important;
    box-sizing: border-box !important;
    
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 99999 !important;
}

/* Attivazione Menu */
.menu-item:hover .mega-menu-dropdown-container,
li:hover > .mega-menu-dropdown-container {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* --- 3. DISPOSIZIONE IN COLONNE FLUIDE --- */
.mega-menu-dropdown-container ul.top-level-menu {
    display: block !important;
    column-count: 4 !important;     /* 4 colonne affiancate */
    column-gap: 40px !important;    /* Spazio tra le colonne */
    width: 100% !important;
    box-sizing: border-box !important;
	text-align: left !important;
}

.mega-menu-dropdown-container ul.top-level-menu > li {
    display: inline-block !important;
    width: 100% !important;
    break-inside: avoid !important; 
    page-break-inside: avoid !important;
    -webkit-column-break-inside: avoid !important;
    margin-bottom: 0.7rem;
}

/* --- 4. STILE DELLE MACRO-CATEGORIE (Titoli) --- */
.mega-menu-dropdown-container ul.top-level-menu > li > a {
    display: block !important;
    white-space: normal !important; /* Permette al testo lungo di andare a capo normalmente per righe intere */
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #111111 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding-bottom: 8px !important;
    margin-bottom: 12px !important;
    border-bottom: 2px solid #f4f4f4 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
	line-height: 1.5;
}

.mega-menu-dropdown-container ul.top-level-menu > li > a:hover {
    color: #720e9e !important;
    background: transparent !important;
}

.mega-menu-dropdown-container .menu-arrow-icon {
    display: none !important;
}

/* --- 5. STILE SOTTO-CATEGORIE (Unificati) --- */
.mega-menu-dropdown-container ul.second-level-menu,
.mega-menu-dropdown-container ul.third-level-menu {
    display: block !important;
}

.mega-menu-dropdown-container ul.second-level-menu li,
.mega-menu-dropdown-container ul.third-level-menu li {
    display: block !important;
}

.mega-menu-dropdown-container ul.second-level-menu a,
.mega-menu-dropdown-container ul.third-level-menu a {
    display: inline-block !important;
    text-align: left !important;
    white-space: normal !important; /* Evita qualsiasi forzatura verticale delle parole */
    font-weight: 400 !important;
    text-decoration: none !important;
    padding: 3px 0 !important;
    transition: transform 0.2s ease, color 0.2s ease !important;
}

.mega-menu-dropdown-container ul.second-level-menu > li > a {
    font-size: 13.5px !important;
    color: #555555 !important;
}

.mega-menu-dropdown-container ul.third-level-menu > li > a {
    font-size: 12.5px !important;
    color: #888888 !important;
}

.mega-menu-dropdown-container ul.second-level-menu a:hover,
.mega-menu-dropdown-container ul.third-level-menu a:hover {
    color: #720e9e !important;
    transform: translateX(4px) !important;
    background: transparent !important;
}

.mega-menu-dropdown-container ul.third-level-menu {
    padding-left: 15px !important;
    margin-top: 6px !important;
    border-left: 2px solid #f0f0f0 !important;
}

/* --- 6. FRECCIA NAVBAR --- */
.main-menu-arrow {
    display: inline-block !important;
    vertical-align: middle !important;
    transition: transform 0.2s ease !important;
}

.menu-item:hover > a .main-menu-arrow {
    transform: rotate(180deg) !important;
}