/**
 * Header menu - fix e stile del dropdown "Noleggio".
 *
 * Il tema ha una regola legacy:  @media (max-width:1199px){ .main-navigation ul{display:flex} }
 * che rende orizzontali le voci del dropdown (desktop 992-1199px) e, combinata
 * con .nav { flex-wrap: wrap } di Bootstrap, manda a capo le voci del menu
 * mobile creando sovrapposizioni. Qui sovrascriviamo con selettori più
 * specifici (#header-top-menu / #menu-mobile vincono su .main-navigation ul).
 */

/* ============================================================
   DESKTOP (>= 992px) - dropdown verticale + apertura on-hover
   ============================================================ */
@media (min-width: 992px) {

    /* Ripristina il corretto show/hide del dropdown (annulla il display:flex) */
    #header-top-menu .dropdown-menu {
        display: none;
        margin-top: 0;
        min-width: 220px;
        padding: 10px;
        border: none;
        border-radius: 12px;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
    }

    #header-top-menu .dropdown-menu.show,
    #header-top-menu .nav-item.dropdown:hover > .dropdown-menu {
        display: block;
    }

    #header-top-menu .dropdown-menu > li {
        width: 100%;
    }

    /* Freccetta che ruota all'apertura */
    #header-top-menu .dropdown-toggle::after {
        margin-left: 6px;
        vertical-align: middle;
        transition: transform 0.2s ease;
    }

    #header-top-menu .nav-item.dropdown:hover .dropdown-toggle::after {
        transform: rotate(180deg);
    }
}

/* Stile voci del dropdown */
#header-top-menu .dropdown-item {
    padding: 10px 14px;
    border-radius: 8px;
    font-weight: 600;
    color: #16232b;
    transition: background-color 0.15s ease, color 0.15s ease;
}

#header-top-menu .dropdown-item:hover,
#header-top-menu .dropdown-item:focus {
    background-color: #f5f6f7;
    color: #c41e3a;
}

#header-top-menu .dropdown-item.active,
#header-top-menu .dropdown-item:active {
    background-color: #c41e3a;
    color: #ffffff;
}

/* ============================================================
   MOBILE (offcanvas) - lista piatta, tutte le voci al primo livello

   Layout a BLOCCO invece che flex: elimina alla radice il flex-wrap di
   Bootstrap (.nav) che, in altezza vincolata dall'offcanvas, mandava le voci
   a capo creando le sovrapposizioni.
   ============================================================ */
#menu-mobile {
    display: block !important;
}

#menu-mobile > li,
#menu-mobile .nav-item {
    width: 100%;
}