/**
 * Theme Name:     Design Scuole Italia Child 2.16.1
 * Author:         Dipartimento per la trasformazione digitale - Presidenza del Consiglio dei Ministri
 * Template:       design-scuole-wordpress-theme-main
 * Text Domain:	   design-scuole-italia-child-2-16-1
 * Description:    Design Scuole Italia è il tema di WordPress per i siti delle Scuole Italiane. Rispetta le linee guida di design dell’Agenzia per l’Italia digitale rilasciare dal Team per la Trasformazione Digitale. Utilizza Bootstrap Italia. Basato sul precedente lavoro di Marco Buttarini.
 * Version:        2.16.1
 */

/* Applica lo sticky solo su schermi più grandi (es. breakpoint 'lg' di Bootstrap Italia) */
@media (min-width: 992px) { /* Verifica il breakpoint 'lg' del tuo tema, solitamente 992px o 1200px */

    .it-left-sidebar-wrapper { /* O l'ID #left-sidebar-menu se hai usato quello */
        position: -webkit-sticky; /* Per compatibilità con Safari */
        position: sticky;
        /*
         * VALORE CRUCIALE DA PERSONALIZZARE!
         * Imposta questo valore all'altezza del tuo header fisso (se presente)
         * più un eventuale piccolo margine desiderato (es. 20px).
         * Esempio: se l'header è alto 60px, potresti mettere top: 80px;
         */
        top: 100px; /* <-- PERSONALIZZA QUESTO VALORE! */

        /*
         * 'align-self: flex-start;' è utile se il contenitore padre (.row) è un flex container
         * per evitare che l'elemento sticky si allunghi verticalmente se gli altri elementi
         * nella riga sono più alti.
         */
        align-self: flex-start;

        /*
         * Gestione dell'altezza e dello scroll interno al menu
         * se il contenuto del menu stesso è più alto della finestra visibile.
         */
        /*
         * 'max-height' calcola l'altezza massima disponibile nel viewport
         * sottraendo l'offset 'top' (altezza header) e un eventuale margine inferiore.
         * Esempio: 100vh (altezza totale viewport) - 80px (top offset) - 20px (margine inferiore)
         */
        max-height: calc(100vh - 80px - 20px); /* <-- PERSONALIZZA L'OFFSET 'top' (80px) E IL MARGINE (20px)! */
        overflow-y: auto; /* Abilita lo scroll verticale INTERNO al menu se il suo contenuto supera max-height */
    }

    /*
     * Potrebbe essere necessario assicurarsi che il contenitore del contenuto principale
     * non abbia problemi di z-index o che il layout generale supporti
     * un elemento sticky.
     * Ad esempio, assicurati che nessun contenitore genitore di '.row'
     * abbia 'overflow: hidden;' o simili che potrebbero "tagliare" l'effetto sticky.
     */
}

/*
 * Su schermi più piccoli (<992px nell'esempio), il menu non sarà sticky.
 * Il layout a due colonne potrebbe trasformarsi in una singola colonna (come
 * spesso accade con Bootstrap: le colonne .col-lg-* diventano larghe 100%).
 * In quel caso, il menu apparirebbe sopra il contenuto principale.
 * Se il tuo CSS personalizzato o il tema gestisce diversamente il layout mobile,
 * potresti dover adattare o rimuovere la media query.
 */

*/
/*
==============================================
Stili per Menu Laterale Sinistro
==============================================
Adatta il selettore principale (es. '.sidebar-navigation-menu')
alla classe effettiva del contenitore del tuo menu.
Se usi il tema scuole.italia.gov.it, verifica se ci sono classi
specifiche del framework (Bootstrap Italia) da usare o sovrascrivere.
==============================================
*/

/* Stile di base per i link nel menu laterale */
menu-item ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

menu-item li a {
    display: block; /* Rende l'intera area cliccabile e gestisce meglio padding/bordo */
    padding: 10px 15px; /* Padding di base, puoi regolarlo */
    text-decoration: none;
    color: #333; /* Colore di base del link - PERSONALIZZA */
    border: 2px solid transparent; /* Bordo trasparente per evitare "salti" di layout al cambio stato */
    border-radius: 8px; /* Arrotondamento di base, PERSONALIZZA se vuoi che sia sempre arrotondato o solo sul selected */
    transition: all 0.2s ease-in-out; /* Transizione per effetti hover/selected più fluidi */
    box-sizing: border-box; /* Assicura che padding e bordo siano inclusi nella larghezza/altezza totale */
    margin-bottom: 4px; /* Opzionale: piccolo spazio tra i link */
}

/* 1. EVIDENZIA IL LINK IN HOVER (grassetto) */
menu-item li a:hover {
    font-weight: bold;
    color: #0056b3; /* Colore del testo per hover - PERSONALIZZA */
    /* background-color: #f0f0f0; */ /* Background opzionale per hover - PERSONALIZZA */
}

/* 2. EVIDENZIA IL LINK SELECTED/CURRENT (bordino con angoli arrotondati) */
/*
   La classe '.current-link' sull'elemento <a> è un esempio.
   WordPress spesso aggiunge classi come '.current-menu-item' o '.current_page_item'
   all'elemento <li> genitore.
*/
menu-item li a.current-link,
menu-item li.current-menu-item > a,
menu-item li.current_page_item > a,
menu-item li a.active { /* Un'altra classe comune per link attivi */
    font-weight: bold; /* Spesso il link corrente è anche in grassetto */
    color: #0066cc; /* Colore del testo per il link selezionato - PERSONALIZZA */
    border-color: #0066cc; /* Colore del bordo per il link selezionato - PERSONALIZZA */
    /* background-color: #e7f1ff; */ /* Background opzionale per il link selezionato - PERSONALIZZA */
}

/*
   NOTA SUL BORDO:
   Avendo impostato 'border: 2px solid transparent;' sullo stato base del link,
   non ci sarà un "salto" di layout quando il bordo colorato appare.
   Se preferisci che il bordo appaia SOLO sul link selezionato (potrebbe causare un leggero spostamento),
   rimuovi 'border: 2px solid transparent;' da '.sidebar-navigation-menu li a'
   e aggiungi esplicitamente 'border: 2px solid #ColoreDesiderato;' e 'border-radius: 8px;'
   solo alle regole per '.current-link' / '.current-menu-item > a'.
*/