/*
 * layout.css
 *
 * Contiene gli stili CSS per il layout generale degli elementi principali del sito,
 * come l'header, la navigazione (inclusa quella mobile), gli elementi fissi specifici per mobile,
 * e il footer. Le media query relative a questi componenti sono integrate direttamente qui.
 *
 * Ultimo aggiornamento: 18 Agosto 2025
 */

/* ==========================================================================
   Sezione 2.1: Stili per l'Header e la Navigazione Principale
   ========================================================================== */

/*
 * Stile per l'elemento <header>.
 * Rende l'header fisso in alto nella viewport, con uno sfondo scuro semitrasparente e un'ombra.
 * Utilizza Flexbox per l'allineamento centrale dei suoi contenuti principali.
 */
header {
    background-color: rgba(14, 52, 71, 0.9); /* Sfondo scuro con leggera trasparenza per un effetto semitrasparente */
    color: white; /* Colore del testo predefinito per l'header */
    padding: 0 20px; /* Padding orizzontale interno dell'header */
    display: flex; /* Abilita Flexbox per un controllo flessibile dei suoi elementi interni */
    justify-content: center; /* Centra orizzontalmente il contenuto principale dell'header (header-main-content) */
    align-items: center; /* Centra verticalmente il contenuto dell'header */
    position: fixed; /* Rende l'header fisso in alto durante lo scroll della pagina */
    width: 100%; /* L'header occupa l'intera larghezza della viewport */
    top: 0; /* Posiziona l'header all'estremità superiore della viewport */
    left: 0; /* Posiziona l'header all'estremità sinistra della viewport */
    z-index: 1002; /* Posiziona l'header sopra la maggior parte degli altri elementi per visibilità */
    box-shadow: 0 2px 10px rgba(0,0,0,0.2); /* Ombra leggera sotto l'header per un effetto di profondità */
    height: var(--header-fixed-height-desktop); /* Altezza fissa dell'header su desktop, definita tramite variabile CSS */
    box-sizing: border-box; /* Include padding e bordo nel calcolo dell'altezza per un controllo preciso */
}

/*
 * Contenitore principale all'interno dell'header.
 * Gestisce il layout tra la sezione sinistra (logo/titolo) e la sezione destra (badge/menu).
 */
.header-main-content {
    display: flex; /* Abilita Flexbox per la disposizione orizzontale degli elementi */
    justify-content: space-between; /* Distribuisce lo spazio equamente tra gli elementi figli (sinistra e destra) */
    align-items: stretch; /* Fa allungare gli elementi figli (header-left, header-right) per tutta l'altezza disponibile */
    width: 100%; /* Occupa l'intera larghezza disponibile all'interno dell'header */
    max-width: 1200px; /* Limita la larghezza massima del contenuto dell'header per una migliore leggibilità */
    height: 100%; /* Assicura che questo contenitore prenda l'altezza completa dal suo genitore (header) */
    gap: 10px; /* Spazio (gutter) tra gli elementi flex (header-left e header-right) */
}

/*
 * Sezione sinistra dell'header (.header-left).
 * Contiene il logo e il titolo del sito.
 */
.header-left {
    display: flex; /* Abilita Flexbox */
    align-items: center; /* Centra gli elementi (logo, titolo) verticalmente */
    gap: 15px; /* Spazio tra il logo e il titolo */
    position: relative; /* Necessario per posizionare il logo-container */
    height: 100%; /* Assicura che prenda l'altezza dal padre (.header-main-content) */
}

/*
 * Regole per il contenitore del logo (.logo-container).
 * Questo elemento è nascosto di default su mobile e viene mostrato e stilizzato diversamente
 * su desktop tramite media query.
 */
.logo-container {
    display: none; /* Nascosto di default per le larghezze inferiori a 860px (gestito da media query) */
    background-color: white; /* Sfondo bianco per il contenitore del logo */
    width: 120px; /* Larghezza fissa del contenitore del logo */
    height: 100%; /* Altezza pari a quella dell'header */
    position: absolute; /* Posizionamento assoluto rispetto al .header-left */
    left: 0; /* Allineato a sinistra del suo genitore posizionato */
    top: 0; /* Allineato in alto del suo genitore posizionato */
    display: flex; /* Abilita Flexbox per centrare l'immagine al suo interno */
    justify-content: center; /* Centra orizzontalmente l'immagine */
    align-items: center; /* Centra verticalmente l'immagine */
    overflow: hidden; /* Nasconde eventuali parti dell'immagine che fuoriescono dal contenitore */
    border-right: 1px solid rgba(255,255,255,0.2); /* Bordo destro leggero per separazione visiva */
    z-index: 1; /* Posiziona il logo leggermente sopra altri elementi se necessario */
    box-shadow: 2px 0 5px rgba(0,0,0,0.1); /* Ombra a destra del contenitore del logo */
}

/* Stile per l'immagine del logo all'interno del suo contenitore. */
.logo-container img {
    height: 70%; /* L'immagine occupa il 70% dell'altezza del suo contenitore */
    width: auto; /* Mantiene le proporzioni dell'immagine durante il ridimensionamento */
    object-fit: contain; /* Assicura che l'intera immagine sia visibile senza ritagli, adattandosi allo spazio */
}

/*
 * Stile per il titolo del sito nell'header (h1 all'interno di .header-left).
 */
.header-left h1 {
    margin: 0; /* Rimuove i margini predefiniti dell'h1 */
    font-family: 'Montserrat', sans-serif; /* Font specifico per il titolo del sito */
    font-size: 1.6rem; /* Dimensione del font per il titolo */
    font-weight: 300; /* Spessore del font più leggero per un look moderno */
    line-height: 0.9em; /* Altezza della riga per compattare il testo del titolo */
    text-align: justify; /* Allineamento del testo giustificato (utile per titoli lunghi) */
    margin-left: 0; /* Margine sinistro iniziale (sarà sovrascritto da media query su desktop) */
}

/* Stile per il link che avvolge il titolo del sito. */
.header-left a {
   color: #fff; /* Colore del link bianco */
   text-decoration: none; /* Rimuove la sottolineatura predefinita dai link */
}

/*
 * Sezione destra dell'header (.header-right).
 * Contiene i badge di patrocinio e la navigazione principale del sito.
 */
.header-right {
    display: flex; /* Abilita Flexbox */
    flex-direction: column; /* Organizza i badge e il menu di navigazione in colonna */
    justify-content: flex-end; /* Allinea il contenuto (badge e nav) in basso all'interno della colonna */
    align-items: flex-end; /* Allinea il contenuto a destra */
    height: 100%; /* Assicura che prenda l'altezza completa dal padre (.header-main-content) */
    position: relative; /* Posizionamento relativo per eventuali elementi figli assoluti */
    padding-bottom: 5px; /* Spazio dal bordo inferiore dell'header */
}

/*
 * Regole per i badge (immagini di enti patrocinanti) nell'header.
 * Nascosti di default su mobile e mostrati e disposti in griglia tramite media query su desktop.
 */
.header-right-badges {
    display: none; /* Nascosto di default per mobile (sarà mostrato su desktop via media query) */
    gap: 10px; /* Spazio tra i badge */
    margin-bottom: 5px; /* Spazio sotto i badge per separarli dal menu di navigazione */
    align-items: center; /* Centra verticalmente i badge */
}

/* Stile per le immagini dei badge. */
.header-right-badges img {
    height: 40px; /* Altezza fissa per i badge */
    width: auto; /* Mantiene le proporzioni */
    object-fit: contain; /* Assicura che l'immagine si adatti senza essere tagliata */
}

/*
 * Navigazione Principale (#main-nav).
 * Stili per il menu di navigazione principale del sito.
 */
#main-nav {
    text-align: right; /* Allineamento del testo a destra */
    z-index: 90; /* Posiziona il menu sotto l'header ma sopra il contenuto generale */
    font-size: 1em; /* Dimensione base del font per il menu (compatta) */
    height: 100%; /* Assicura che prenda l'altezza dal padre (.header-right) */
    display: flex; /* Abilita Flexbox per il contenitore del menu */
    align-items: flex-end; /* Allinea il suo contenuto (ul) in basso */
}

/* Stile per la lista non ordinata (ul) all'interno del menu. */
#main-nav ul {
    list-style: none; /* Rimuove i bullet points dalla lista */
    padding: 0; /* Rimuove il padding predefinito */
    margin: 0; /* Rimuove i margini predefiniti */
    display: flex; /* Abilita Flexbox per gli elementi della lista */
    justify-content: flex-end; /* Allinea gli elementi della lista a destra */
    gap: 0; /* Rimuove lo spazio tra gli elementi LI */
    height: 100%; /* Assicura che UL prenda tutta l'altezza del suo genitore (#main-nav) */
    align-items: stretch; /* Fa allungare gli elementi LI per riempire l'altezza del UL */
}

/* Stile per ogni elemento di lista (li) nel menu. */
#main-nav li {
    display: flex; /* Rende ogni elemento LI un contenitore flex */
    height: 100%; /* Fai allungare ogni LI per riempire l'altezza del UL */
}

/* Stile per i link (a) all'interno degli elementi di lista del menu. */
#main-nav li a {
    color: #ADD8E6; /* Colore del testo dei link */
    text-decoration: none; /* Rimuove la sottolineatura */
    padding: 8px 10px; /* Padding interno del link (compatto) */
    display: flex; /* Abilita Flexbox per il link (per icona e testo) */
    flex-direction: column; /* Organizza icona sopra testo per i link di navigazione */
    align-items: flex-start; /* Allinea icona e testo a sinistra all'interno del link */
    height: 100%; /* Fai allungare il link per riempire l'altezza del LI */
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease; /* Transizioni fluide per gli effetti hover/active */
    border-radius: 0; /* Angoli non arrotondati (squadrati) */
    font-weight: 600; /* Spessore del font */
    text-align: left; /* Allinea il testo a sinistra sotto l'icona */
    justify-content: center; /* Centra verticalmente il blocco icona-testo all'interno del link */
    border-bottom: none; /* Rimuove ogni possibile bordo inferiore di default */
}

/* Stile al passaggio del mouse (hover) e per lo stato attivo dei link del menu. */
#main-nav li a:hover,
#main-nav li a.active {
    background-color: white; /* Sfondo bianco al passaggio del mouse o quando attivo */
    color: #ff0000; /* Colore rosso per il testo al passaggio del mouse o quando attivo */
    border-radius: 0; /* Mantiene angoli squadrati */
    transform: translateY(1px); /* Lieve spostamento verso il basso per un effetto "premuto" */
    border-bottom: none !important; /* Rimuove definitivamente il bordo inferiore in questi stati (specificità massima) */
}

/* Stile per le icone all'interno dei link di navigazione. */
#main-nav li a i {
    margin-right: 0; /* Rimuove margine destro (icona sopra testo) */
    margin-bottom: 5px; /* Spazio sotto l'icona per separarla dal testo */
    font-size: 1.2em; /* Dimensione delle icone */
    color: #ADD8E6; /* Colore predefinito delle icone */
    transition: color 0.3s ease; /* Transizione fluida per il cambio colore */
}

/* Stile per le icone al passaggio del mouse e per lo stato attivo. */
#main-nav li a:hover i,
#main-nav li a.active i {
    color: #ff0000; /* Colore rosso per le icone al passaggio del mouse o quando attivo */
}

/*
 * Pulsante Hamburger (.hamburger-menu).
 * Nascosto di default su desktop e mostrato su mobile tramite media query.
 */
.hamburger-menu {
    display: none; /* Nascosto su desktop */
    background: none; /* Nessuno sfondo */
    border: none; /* Nessun bordo */
    cursor: pointer; /* Cursore a puntatore per indicare l'interattività */
    padding: 10px; /* Padding intorno al pulsante */
    z-index: 1001; /* Posiziona sopra il menu quando è chiuso */
    margin-left: 20px; /* Margine a sinistra */
}

/* Stile per ogni 'barra' del pulsante hamburger. */
.hamburger-menu .bar {
    display: block; /* Ogni "barra" è un blocco */
    width: 25px; /* Larghezza delle barre */
    height: 3px; /* Altezza delle barre */
    background-color: white; /* Colore delle barre */
    margin: 5px 0; /* Margine verticale tra le barre */
    transition: all 0.3s ease-in-out; /* Transizione per l'animazione di trasformazione */
    border-radius: 2px; /* Angoli arrotondati per le barre */
}

/* Animazione del pulsante Hamburger a 'X' quando è attivo. */
.hamburger-menu.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg); /* Trasla la prima barra e la ruota */
}
.hamburger-menu.active .bar:nth-child(2) {
    opacity: 0; /* Rende invisibile la barra centrale */
}
.hamburger-menu.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg); /* Trasla la terza barra e la ruota */
}

/* ==========================================================================
   Sezione 2.2: Stili per Elementi Fissi su Mobile (Header e Ricerca)
   ========================================================================== */

/*
 * Contenitore per gli elementi fissi specifici per mobile (#mobile-fixed-elements).
 * Contiene i filtri di ricerca e il pulsante "Mostra Tutti" per mobile.
 * Nascosto di default su desktop e mostrato tramite media query mobile.
 */
#mobile-fixed-elements {
    display: none; /* Nascosto di default su desktop */
    position: fixed; /* Rende il contenitore fisso nella viewport */
    top: var(--header-fixed-height-mobile); /* Posizionato subito sotto l'header mobile */
    left: 0; /* Allineato a sinistra */
    width: 100%; /* Larghezza completa */
    background-color: #FFFFFF; /* Sfondo bianco */
    z-index: 1000; /* Posiziona sopra il contenuto principale ma sotto l'header */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Ombra leggera */
    flex-direction: column; /* Contenuto in colonna */
    box-sizing: border-box; /* Include padding e bordo nella larghezza/altezza */
    height: var(--search-filter-fixed-height-mobile); /* Altezza fissa (variabile) */
    justify-content: space-around; /* Distribuisce spazio intorno agli elementi */
    align-items: center; /* Centra gli elementi orizzontalmente */
    padding: 10px 10px; /* Padding interno */
}

/*
 * Form di ricerca specifico per mobile (#event-search-filter-mobile-only).
 * Nascosto di default su desktop, mostrato solo in media query per mobile.
 */
#event-search-filter-mobile-only {
    display: none; /* Nascosto di default su desktop (sarà mostrato in media query mobile) */
    width: 100%; /* Larghezza completa */
    max-width: 400px; /* Larghezza massima del form */
    gap: 5px; /* Spazio tra gli elementi del form */
    flex-direction: column; /* Elementi del form in colonna */
    align-items: stretch; /* Allunga gli elementi del form per riempire la larghezza */
}

/* Stili per input di testo, select e button all'interno del form mobile. */
#event-search-filter-mobile-only input[type="text"],
#event-search-filter-mobile-only select,
#event-search-filter-mobile-only button {
    padding: 10px 12px; /* Padding per input, select e button */
    border: 1px solid #ccc; /* Bordo sottile */
    border-radius: 0; /* Angoli squadrati */
    font-size: 0.9em; /* Dimensione font leggermente ridotta */
    width: 100%; /* Larghezza completa */
    box-sizing: border-box; /* Include padding e bordo */
}

/* Stile specifico per i bottoni all'interno del form mobile. */
#event-search-filter-mobile-only button {
    background-color: #0E3447; /* Sfondo del bottone */
    color: white; /* Colore testo */
    cursor: pointer; /* Cursore a puntatore */
}

/* ==========================================================================
   Sezione 2.3: Stili per il Footer
   ========================================================================== */

/* Stile generale per l'elemento <footer>. */
footer {
    text-align: center; /* Allineamento del testo al centro */
    padding: 20px; /* Padding interno */
    background: #0E3447; /* Sfondo scuro */
    color: #fff; /* Colore del testo */
    margin-top: 30px; /* Margine superiore per separarlo dal contenuto principale */
}

/* Contenitore per le colonne degli indirizzi nel footer. */
.footer-addresses {
    display: flex; /* Abilita Flexbox per la disposizione delle colonne */
    justify-content: center; /* Centra le colonne orizzontalmente */
    gap: 20px; /* Spazio tra le colonne */
    margin-bottom: 20px; /* Margine inferiore */
    flex-wrap: wrap; /* Permette alle colonne di andare a capo su schermi più piccoli */
}

/* Stile per il contenitore delle immagini dei badge nel footer. */
.footer-badges-container {
    display: flex; /* Abilita Flexbox */
    flex-wrap: wrap; /* Permette ai badge di andare a capo */
    justify-content: left; /* Allinea i badge a sinistra */
    gap: 10px; /* Spazio tra i badge */
    margin-top: 10px; /* Margine superiore */
}

/* Stile per le immagini dei badge nel footer. */
.footer-badge-img {
    height: auto; /* Mantiene le proporzioni */
    max-height: 60px; /* Altezza massima */
    width: auto; /* Larghezza automatica */
    max-width: 50px; /* Larghezza massima */
    object-fit: contain; /* Assicura che l'immagine si adatti senza essere tagliata */
    margin-bottom: 0; /* Rimuove margini inferiori */
}

/* Stile per ogni colonna di indirizzo nel footer. */
.address-column {
    text-align: left; /* Allineamento del testo a sinistra */
    flex: 0 0 26%; /* Cresce 0, si riduce 0, larghezza base 26% */
    max-width: 500px; /* Larghezza massima */
    min-width: 250px; /* Larghezza minima */
}

/* Stile per i link all'interno delle colonne di indirizzo. */
.address-column a {
    color: #83ff5f; /* Colore del link */
    text-decoration: none; /* Rimuove sottolineatura */
    transition: color 0.3s ease; /* Transizione fluida per il colore al passaggio del mouse */
}

/* Stile al passaggio del mouse per i link degli indirizzi. */
.address-column a:hover {
    color: aquamarine; /* Colore al passaggio del mouse */
    background: #001924; /* Sfondo al passaggio del mouse */
}

/* Stile per i titoli (h3) delle colonne di indirizzo. */
.address-column h3 {
    margin-top: 0; /* Rimuove margini */
    margin-bottom: 3px; /* Piccolo margine sotto il titolo */
    color: #7fc8ff; /* Colore del titolo */
    font-family: 'Montserrat', sans-serif; /* Font specifico */
    font-size: 1.1em; /* Dimensione del font */
}

/* Stile per i paragrafi (p) delle colonne di indirizzo. */
.address-column p {
    margin: 3px 0; /* Piccolo margine verticale */
    font-size: 0.9em; /* Dimensione del font ridotta */
    color: #fff; /* Colore del testo bianco */
    line-height: 1em; /* Altezza della riga compatta */
}

/* Stile per la sezione del copyright nel footer. */
.copyright {
    font-size: 0.8em; /* Dimensione del font ridotta */
    margin-top: 0; /* Rimuove margini */
    margin-bottom: 15px; /* Margine inferiore */
    color: #7fc8ff; /* Colore del testo */
}

/* Stile per i link dei social media nel footer. */
.social-links a {
    color: #83ff5f; /* Colore del link */
    margin: 0 10px; /* Margine orizzontale */
    text-decoration: none; /* Rimuove sottolineatura */
    transition: color 0.3s ease; /* Transizione fluida per il colore */
}

/* Stile al passaggio del mouse per i link dei social media. */
.social-links a:hover {
    color: aquamarine; /* Colore al passaggio del mouse */
}

/* ==========================================================================
   Sezione 2.4: Media Queries per Layout (Header, Nav, Footer)
   ========================================================================== */

/* Media Query per larghezze INFERIORI O UGUALI A 860px (Mobile completo) */
@media (max-width: 860px) {
    /* Nascondi i badge grandi nell'header su mobile */
    .header-right-badges {
        display: none;
    }

    /* Regole per il contenitore del logo su mobile (visibile e adattato) */
    .logo-container {
        display: flex; /* Mostra il logo su mobile */
        position: static; /* Rimuovi il posizionamento assoluto per farlo fluire normalmente */
        width: 60px; /* Dimensione adeguata per il logo su mobile */
        height: auto;
        border-right: none; /* Rimuovi il bordo che era per desktop */
        box-shadow: none; /* Rimuovi l'ombra */
        margin-right: 10px; /* Spazio tra logo e titolo */
        flex-shrink: 0; /* Impedisce al logo di restringersi */
        background: #fff;
    }

    .logo-container img {
        height: 100%; /* L'immagine riempie il contenitore */
        max-height: 50px; /* Limita l'altezza massima dell'immagine del logo */
    }

    /* Ridefinisci le variabili per le altezze fisse per il mobile */
    :root {
        --header-fixed-height-desktop: 80px; /* L'header mobile avrà questa altezza */
        --search-filter-fixed-height-desktop: 60px; /* La barra di ricerca mobile avrà questa altezza */
    }

    /* Allinea il body sotto l'header mobile */
    body {
        padding-top: var(--header-fixed-height-mobile);
    }

    /* Nascondi il form di ricerca eventi desktop */
    #event-controls {
        display: none;
    }

    /* Mostra il nuovo contenitore fisso per mobile (filtri e pulsante toggle) */
    #mobile-fixed-elements {
        display: flex; /* Mostra il contenitore fisso mobile */
        position: fixed;
        top: var(--header-fixed-height-mobile); /* Posizionato subito sotto l'header mobile */
        left: 0;
        width: 100%;
        background-color: #FFFFFF;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        flex-direction: column;
        box-sizing: border-box;
        height: var(--search-filter-fixed-height-mobile);
        justify-content: space-around;
        align-items: center;
        padding: 10px 10px;
        z-index: 1000; /* Assicurati che lo z-index sia qui per la visibilità */
    }

    /* Form di ricerca specifico per mobile (all'interno di #mobile-fixed-elements) */
    #event-search-filter-mobile-only {
        display: flex;
        width: 100%;
        max-width: 400px;
        gap: 8px;
        flex-direction: column;
        align-items: stretch;
    }

    #event-search-filter-mobile-only input[type="text"],
    #event-search-filter-mobile-only select,
    #event-search-filter-mobile-only button {
        padding: 12px 15px;
        font-size: 1.1em;
        border: 1px solid #ccc;
        border-radius: 0;
        width: 100%;
        box-sizing: border-box;
    }

    #event-search-filter-mobile-only button {
        background-color: #0E3447;
        color: white;
        cursor: pointer;
    }

    /* Layout Header per Mobile */
    header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0 15px;
        height: var(--header-fixed-height-mobile);
    }

    .header-main-content {
        flex-wrap: nowrap;
        width: 100%;
        max-width: none;
    }

    .header-left {
        flex-grow: 1;
        align-items: center;
        justify-content: flex-start;
    }

    .header-left h1 {
        font-size: 1.1rem;
        margin-left: 0;
        flex-grow: 1;
        white-space: normal;
        line-height: 1.2;
    }

    .header-right {
        order: 2;
        position: static;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
    }

    /* Mostra il pulsante hamburger su mobile */
    .hamburger-menu {
        display: block;
        margin-left: 10px;
        position: static;
        z-index: 1003;
    }

    /* Nascondi il menu di navigazione di default su mobile e preparalo per lo slide */
     #main-nav {
        flex-direction: column;
        position: fixed;
        top: var(--header-fixed-height-mobile);
        left: 0;
        width: 100%;
        max-width: none;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
        transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;
        background-color: #0E3447;
        text-align: left;
        box-shadow: 0 5px 10px rgba(0,0,0,0.2);
        margin-top: 0;
        padding: 0;
        z-index: 1001;
    }
    #main-nav.active {
        max-height: 500px;
        opacity: 1;
        pointer-events: auto;
        padding-bottom: 20px;
    }

    #main-nav ul {
        flex-direction: column;
        text-align: left;
        gap: 0;
        height: auto;
        align-items: flex-start;
        width: 100%;
    }

    #main-nav li {
        margin: 0;
        height: auto;
        width: 100%;
        font-size: 1em;
    }

    /* Regole specifiche per i link del menu mobile (hamburger) */
    #main-nav li a {
        padding: 12px 15px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        height: auto;
        width: 100%;
        box-sizing: border-box;
        text-align: left;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }

    #main-nav li a.active {
        border-bottom: none !important;
    }

    /* Regola per l'icona nel menu mobile */
    #main-nav li a i {
        margin-right: 8px;
        margin-bottom: 0;
        font-size: 0.8em;
    }

    /* Regola per nascondere la filigrana su mobile */
    body::before {
        display: none; /* Rende la filigrana completamente invisibile su schermi mobili */
    }
} /* CHIUSURA MEDIA QUERY max-width: 860px per layout */


/* Media Query per larghezze SUPERIORI A 860px (Desktop larghi) */
@media (min-width: 861px) {
    /* Mostra logo e badge su desktop */
    .logo-container {
        display: flex;
    }
    .header-left h1 {
        margin-left: 135px;
    }
    .header-right-badges {
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: auto auto;
        gap: 10px;
        align-items: center;
        justify-items: start;
        margin-right: 10px;
    }
    /* Posizionamento specifico per i badge all'interno della griglia. */
    .header-right-badges img:nth-child(1) { grid-row: 1; grid-column: 1; }
    .header-right-badges img:nth-child(2) { grid-row: 1; grid-column: 2; }
    .header-right-badges img:nth-child(3) { grid-row: 2; grid-column: 1; }
    .header-right-badges img:nth-child(4) { grid-row: 2; grid-column: 2; }
}