/*--------------------------------------------------------------
# Mobile Header Area
--------------------------------------------------------------*/
.mobile-header-active {
    /* Esempio: Aggiungi uno sfondo o un bordo se necessario */
    /* background-color: #f8f8f8; */
    /* border-bottom: 1px solid #eee; */
    padding-top: 10px; /* Spaziatura interna opzionale */
    padding-bottom: 10px; /* Spaziatura interna opzionale */
    width: 100%; /* Assicura che le barre stesse siano a tutta larghezza */
    box-sizing: border-box;
}

/* Sovrascrive .container per l'header mobile per renderlo a tutta larghezza */
.mobile-header-active > .container.mobile-header-container {
    max-width: none;     /* Rimuove la larghezza massima standard del .container */
    width: 100%;         /* Fa sì che il container interno prenda tutta la larghezza disponibile */
    padding-left: 15px;  /* Aggiunge spaziatura interna per il contenuto, regola se necessario */
    padding-right: 15px; /* Aggiunge spaziatura interna per il contenuto, regola se necessario */
    margin-left: 0;      /* Rimuove eventuali margini laterali che potrebbero centrare il container */
    margin-right: 0;     /* Rimuove eventuali margini laterali che potrebbero centrare il container */
    box-sizing: border-box; /* Include padding nella larghezza totale */
}

.mobile-header-container {
    display: flex;
    justify-content: space-between; /* Allinea gli elementi: toggle a sinistra, logo al centro (con flex-grow), search a destra */
    align-items: center;
    /* width: 100%; è gestito dalla regola per .mobile-header-active > .container.mobile-header-container */
}

/* Stili per il pulsante del menu mobile */
.menu-toggle-mobile {
    background: none;
    border: none;
    padding: 8px; /* Riduci il padding se necessario per guadagnare spazio */
    cursor: pointer;
    display: inline-flex; 
    align-items: center;
    justify-content: center;
    color: #ffffff; 
    order: 1; /* Pulsante menu a sinistra */
}

.menu-toggle-mobile svg {
    width: 24px; 
    height: 24px;
    /* stroke: #ffffff; */ /* Se color non basta */
}

/* Stili per il branding del sito (logo) in mobile */
.site-branding.mobile-site-branding {
    text-align: center; /* Centra il logo */
    flex-grow: 1; /* Permette al logo di occupare lo spazio centrale disponibile */
    order: 2; /* Logo al centro */
    /* Riduci la larghezza massima se il logo è troppo grande e spinge gli altri elementi */
    /* max-width: 150px; */ /* Esempio, da regolare */
}

.site-branding.mobile-site-branding a,
.site-branding.mobile-site-branding svg {
    display: inline-block; /* o block a seconda di come vuoi gestire l'altezza */
    vertical-align: middle;
}

.site-branding.mobile-site-branding svg {
    max-height: 40px; /* Limita l'altezza del logo SVG, regola se necessario */
    width: auto; /* Mantiene le proporzioni */
}


/* Stili per il pulsante di ricerca mobile */
.header-search-mobile {
    order: 3; /* Pulsante ricerca a destra */
}

.search-toggle-mobile {
    background: none;
    border: none;
    padding: 8px; /* Riduci il padding se necessario */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #000000;
}

.search-toggle-mobile svg {
    width: 24px;
    height: 24px;
    /* stroke: #ffffff; */ /* Se color non basta */
}


/*--------------------------------------------------------------
# Navigazione Mobile e Area Ricerca (Dropdown)
--------------------------------------------------------------*/
.main-navigation-mobile,
.mobile-search-form-area {
    background-color: #333; /* Sfondo per i menu a tendina */
    padding: 15px;
    /* display: none; è gestito da JS e inline style, ma puoi aggiungere .is-open qui */
    clear: both; /* Assicura che non ci siano float che interferiscono */
    width: 100%;
    box-sizing: border-box;
    position: absolute; /* Posiziona sotto l'header */
    left: 0;
    z-index: 998; /* Sotto l'header ma sopra il contenuto della pagina */
    /* Aggiungi un bordo o un'ombra se vuoi distinguerlo meglio */
    /* border-top: 1px solid #444; */
    /* box-shadow: 0 2px 5px rgba(0,0,0,0.2); */
}

.main-navigation-mobile.is-open,
.mobile-search-form-area.is-open {
    display: block !important; /* Sovrascrive lo style inline per mostrare */
}

/* Stili per il menu di navigazione mobile */
.main-navigation-mobile ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-navigation-mobile ul li {
    margin-bottom: 0; /* Rimuovi margini se presenti dal CSS generale */
}

.main-navigation-mobile ul li a {
    display: block;
    padding: 10px 0; /* Spaziatura per i link del menu */
    color: #ffffff;
    text-decoration: none;
    border-bottom: 1px solid #444; /* Separatore tra le voci di menu */
}

.main-navigation-mobile ul li:last-child a {
    border-bottom: none; /* Rimuovi il bordo dall'ultima voce */
}

.main-navigation-mobile ul li a:hover,
.main-navigation-mobile ul li a:focus {
    background-color: #444; /* Sfondo al passaggio del mouse/focus */
}

/* Stili per il form di ricerca mobile */
.mobile-search-form-area .search-form {
    display: flex; /* Allinea campo e pulsante */
}

.mobile-search-form-area .search-field {
    flex-grow: 1; /* Il campo di testo occupa lo spazio disponibile */
    padding: 8px;
   
}

.mobile-search-form-area .search-submit {
    padding: 8px 12px;
    background-color: #C481D9; /* Colore del tema per il pulsante */
    color: #ffffff;
    border: none;
    cursor: pointer;
    margin-left: 5px; /* Spazio tra campo e pulsante */
}

.mobile-search-form-area .search-submit:hover {
    background-color: #ae72bf; /* Colore più scuro al passaggio del mouse */
}


/*--------------------------------------------------------------
# Utility Classes
--------------------------------------------------------------*/
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}