/* ============================================================
   Mega-menu — Modulo 3 (Header Ecoricerche)
   Override CSS dei default del widget `mega-menu` di Elementor Pro.
   Le regole nowrap/padding-stretto sono mirate a DESKTOP (>1024px)
   per evitare il wrap di "News" su seconda riga con 8 voci top-level.
   In MOBILE/TABLET il widget passa al layout dropdown verticale e
   le regole desktop sono escluse via media query, altrimenti
   nasconderebbero i sub-items.
   ============================================================ */

@media (min-width: 1025px) {
    /* 1. Forza il menu su singola riga (default: flex-wrap: wrap) */
    .elementor-widget-n-menu.elementor-widget-mega-menu .e-n-menu-heading,
    .elementor-widget-n-menu .e-n-menu-heading {
        --n-menu-heading-wrap: nowrap;
        flex-wrap: nowrap !important;
    }
    /* 2. Riduci padding interno dei title — solo desktop */
    .elementor-widget-n-menu .e-n-menu-title {
        --n-menu-title-padding: 8px 12px;
        white-space: nowrap !important;
    }
    /* 3. Spazio tra item top-level desktop */
    .elementor-widget-n-menu .e-n-menu:not([data-layout=dropdown]) .e-n-menu-item:not(:last-child) {
        margin-inline-end: 16px;
    }
}

/* ============================================================
   MOBILE/TABLET dropdown layout — fix visualizzazione 8 voci
   Sotto 1024px il widget mostra hamburger + dropdown verticale
   ============================================================ */
@media (max-width: 1024px) {
    /* Wrapper del dropdown mobile: piena larghezza, max-height generosa,
       scroll interno se proprio serve (qui 8 voci ci stanno) */
    .elementor-widget-n-menu .e-n-menu[data-layout=dropdown] .e-n-menu-wrapper {
        max-height: calc(100vh - 200px);
        background: #FFFFFF;
        box-shadow: 0 12px 32px rgba(3, 32, 25, 0.15);
        border-radius: 0 0 12px 12px;
        z-index: 9999;
    }
    /* Items verticali full-width + separator soft */
    .elementor-widget-n-menu .e-n-menu[data-layout=dropdown] .e-n-menu-item {
        width: 100%;
        border-bottom: 1px solid rgba(3, 32, 25, 0.08);
    }
    .elementor-widget-n-menu .e-n-menu[data-layout=dropdown] .e-n-menu-item:last-child {
        border-bottom: none;
    }
    /* Title: NIENTE nowrap su mobile (titoli lunghi tipo "Trasporto Merci
       Pericolose ADR/RID/IMDG/ICAO" devono andare a capo) */
    .elementor-widget-n-menu .e-n-menu[data-layout=dropdown] .e-n-menu-title {
        white-space: normal !important;
        padding: 14px 20px !important;
        width: 100%;
        justify-content: space-between;
        font-size: 16px;
    }
    /* Container dropdown del singolo item (Chi Siamo, Servizi) */
    .elementor-widget-n-menu .e-n-menu[data-layout=dropdown] .e-n-menu-content {
        background: #FAF2D5;
    }
    /* Lista link dentro dropdown su mobile: padding ridotto + colonna unica */
    .eco-mm-cols-3,
    .eco-mm-cols-1 {
        grid-template-columns: 1fr !important;
        min-width: 0 !important;
        padding: 8px 12px;
    }
    /* Hamburger toggle: assicura visibilità + z-index alto */
    .elementor-widget-n-menu .e-n-menu-toggle {
        z-index: 10000;
        position: relative;
    }
}

/* ============================================================
   Dropdown content (link list dentro mega-menu)
   ============================================================ */
.eco-mm-list { list-style: none; padding: 0; margin: 0; }
.eco-mm-list li { margin: 0; }
.eco-mm-list a {
    display: block;
    padding: 8px 12px;
    color: #032019;
    text-decoration: none;
    border-radius: 8px;
    font-family: "Host Grotesk", sans-serif;
    font-weight: 500;
    font-size: 14px;
    transition: background 200ms ease-in-out, color 200ms ease-in-out;
    white-space: nowrap;
}
.eco-mm-list a:hover {
    background: rgba(86, 240, 159, 0.10);
    color: #00411D;
}
.eco-mm-cols-1 {
    display: flex;
    flex-direction: column;
    min-width: 280px;
}
.eco-mm-cols-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: 4px 24px;
    min-width: 760px;
}
@media (max-width: 980px) {
    .eco-mm-cols-3 { grid-template-columns: 1fr; min-width: 0; }
    .eco-mm-cols-1 { min-width: 0; }
    .eco-mm-list a { white-space: normal; }
}