/**
 * Override CSS per il nuovo layout header
 * Aggiungi questo CSS al tuo tema per adattare il layout dopo la rimozione della category-box
 */

/* Rimuove completamente qualsiasi riferimento alla category-box */
.main-header-box .category-box {
    display: none !important;
}

/* Assicura che la navigazione occupi tutto lo spazio disponibile */
.main-header-box .row {
    width: 100%;
    margin: 0;
}

.main-header-box .col-12 {
    padding: 0;
    width: 100%;
}

/* Adatta il menu per occupare tutto lo spazio */
#site-navigation {
    width: 100%;
}

.main-navigation {
    width: 100%;
    text-align: center; /* o 'right' se preferisci allinearlo a destra */
}

.main-navigation .menu {
    width: 100%;
    display: flex;
    justify-content: center; /* Centra il menu - cambia in 'flex-end' per allinearlo a destra */
}

.main-navigation ul {
    width: 100%;
    display: flex;
    justify-content: space-evenly; /* Distribuisce uniformemente le voci del menu */
    align-items: center;
    margin: 0;
    padding: 0;
}

/* Fix per il menu mobile */
@media (max-width: 1024px) {
    .main-header-box .col-12 {
        display: flex;
        justify-content: flex-end; /* Allinea il toggle menu a destra su mobile */
        align-items: center;
    }
    
    .toggle-nav {
        position: relative;
        right: 0;
        margin-left: auto;
    }
}

/* Rimuove stili legacy che potrebbero interferire */
.col-lg-3.col-md-5.col-10,
.col-lg-9.col-md-7.col-sm-2.col-2 {
    /* Reset di eventuali stili residui */
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

/* Assicura che il container nav_wrap usi tutta la larghezza disponibile */
.nav_wrap {
    width: 100%;
}

.nav_wrap .container {
    max-width: 100%;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

/* Opzionale: Se vuoi che il menu sia contenuto in una larghezza massima */
@media (min-width: 1200px) {
    .nav_wrap .container {
        max-width: 1140px; /* Puoi cambiare questo valore secondo le tue esigenze */
        margin: 0 auto;
    }
}

/* Pulisce eventuali padding o margin non necessari */
.menubar {
    padding: 0;
    width: 100%;
}

.innermenubox {
    width: 100%;
}

/* Stili aggiuntivi per migliorare l'aspetto del menu */
.main-navigation li {
    flex: 1; /* Fa sì che ogni voce del menu occupi lo stesso spazio */
    text-align: center;
}

.main-navigation a {
    display: block;
    width: 100%;
    padding: 10px 15px;
    transition: all 0.3s ease;
}

.main-navigation a:hover {
    background-color: rgba(86, 76, 77, 0.1); /* Colore di sfondo al hover */
    border-radius: 4px;
}

/* Fix per sottomenu nel layout 100% */
.main-navigation ul ul {
    width: auto;
    min-width: 200px;
}

/* Assicura che il menu mobile funzioni correttamente */
@media (max-width: 1024px) {
    .main-navigation ul {
        flex-direction: column;
        width: 100%;
    }
    
    .main-navigation li {
        width: 100%;
        text-align: left;
    }
}