/*
 * base.css
 *
 * Contiene stili CSS fondamentali e globali per l'intero sito web.
 * Include il reset del box-sizing, la definizione delle variabili CSS (Custom Properties),
 * gli stili di base per il corpo del documento (body) e la configurazione della filigrana di sfondo.
 *
 * Ultimo aggiornamento: 18 Agosto 2025
 */

/* ==========================================================================
   Sezione 1.1: Stili Base e Reset
   ========================================================================== */

/*
 * Regola universale per il box-sizing:
 * Imposta 'box-sizing: border-box' per tutti gli elementi e i loro pseudo-elementi.
 * Questo fa sì che il padding e il bordo vengano inclusi nella larghezza e altezza specificate
 * per un elemento, semplificando il calcolo delle dimensioni e il layout. Questa è una pratica
 * moderna che aiuta a prevenire problemi di layout.
 */
html {
    box-sizing: border-box; /* Include padding e bordo nel calcolo della dimensione dell'elemento */
    -webkit-text-size-adjust: 100%; /* Previene lo zoom automatico del testo su dispositivi iOS/Safari in modalità landscape */
}

/*
 * Eredita il box-sizing per tutti gli elementi e i loro pseudo-elementi.
 * Assicura che il modello di box-sizing sia coerente in tutto il documento,
 * ereditando il comportamento definito per l'elemento html.
 */
*, *::before, *::after {
    box-sizing: inherit; /* Eredita il modello di box-sizing dall'elemento html */
}

/*
 * Dichiarazione delle variabili CSS (Custom Properties) nel selettore :root.
 * Queste variabili definiscono altezze fisse e altri valori globali che possono essere
 * riutilizzati in tutto il foglio di stile, facilitando la gestione e le modifiche future.
 */
:root {
    --header-fixed-height-desktop: 120px; /* Altezza fissa dell'header su desktop */
    --search-filter-fixed-height-desktop: 65px; /* Altezza fissa del form di ricerca eventi su desktop */
    --header-fixed-height-mobile: 80px; /* Altezza fissa dell'header su mobile */
    --search-filter-fixed-height-mobile: 60px; /* Altezza fissa del form di ricerca eventi su mobile */
}

/* ==========================================================================
   Sezione 1.2: Stili Globali del Body e Filigrana
   ========================================================================== */

/*
 * Stili generali per il corpo del documento (body).
 * Definisce il font predefinito, i margini, l'altezza della riga, e i colori di testo e sfondo.
 * Il padding-top del body è calcolato dinamicamente per compensare l'altezza dell'header fisso.
 */
body {
    font-family: 'Open Sans', sans-serif; /* Font principale per il corpo del testo, con fallback generico */
    margin: 0; /* Rimuove i margini predefiniti del body per un controllo completo del layout */
    line-height: 1.6; /* Altezza della riga per una migliore leggibilità del testo */
    color: #333; /* Colore del testo principale per la maggior parte del sito */
    background-color: #FFFFFF; /* Sfondo bianco puro per tutte le pagine */
    padding-top: var(--header-fixed-height-desktop); /* Padding superiore per lasciare spazio all'header fisso su desktop */
    overflow-x: hidden; /* Nasconde lo scroll orizzontale non desiderato, prevenendo barre di scorrimento orizzontali */
    overflow-y: scroll; /* Abilita lo scroll verticale per i contenuti che superano l'altezza della viewport */
    position: relative; /* Necessario per posizionare correttamente il pseudo-elemento della filigrana con z-index */
    z-index: 1; /* Assicura che il contenuto del body sia visualizzato sopra la filigrana di sfondo */
}

/*
 * Stile per la filigrana di sfondo tramite pseudo-elemento '::before' del body.
 * Questo crea un effetto visivo di filigrana discreto che rimane fisso sullo sfondo
 * della pagina, senza interferire con il contenuto. È posizionato dietro gli altri elementi.
 * Viene nascosto su mobile tramite media query in layout.css per ottimizzare le prestazioni e l'usabilità.
 */
body::before {
    content: ''; /* Obbligatorio per la visualizzazione dei pseudo-elementi */
    position: fixed; /* Fissa la filigrana nella viewport, non scorre con la pagina */
    top: 0; /* Posiziona la filigrana all'estremità superiore della viewport */
    left: 0; /* Posiziona la filigrana all'estremità sinistra della viewport */
    width: 100%; /* Larghezza completa della viewport */
    height: 100%; /* Altezza completa della viewport */
    background-image: url('../images/watermark-logo.png'); /* Specifica l'immagine per la filigrana */
    background-repeat: repeat; /* L'immagine si ripete per coprire l'intera area della viewport */
    background-position: center center; /* Centra l'immagine di sfondo ripetuta all'interno del suo contenitore */
    background-size: 30%; /* Regola la dimensione delle singole ripetizioni della filigrana (30% della dimensione del contenitore) */
    opacity: 0.05; /* Regola l'opacità per un effetto filigrana sottile (5% visibilità) */
    z-index: -1; /* Mette la filigrana dietro tutto il contenuto del body, rendendola uno sfondo */
}

/*
 * Regola generale per tutte le immagini.
 * Assicura che le immagini non superino la larghezza del loro contenitore e mantengano le proporzioni.
 * 'display: block' aiuta a rimuovere lo spazio extra sotto le immagini (specialmente per elementi inline).
 */
img {
    max-width: 100%; /* Limita la larghezza massima dell'immagine al 100% del suo elemento genitore */
    height: auto; /* Mantiene le proporzioni originali dell'immagine durante il ridimensionamento */
    display: block; /* Rende l'immagine un elemento a livello di blocco, utile per il controllo del layout */
}

/*
 * Classe per nascondere visivamente elementi mantenendoli accessibili per screen reader.
 * Utilizzata per label di form o altri testi che devono essere informativi per l'accessibilità
 * ma non visibili sul layout.
 */
.sr-only {
    position: absolute; /* Posizionamento assoluto per rimuoverlo dal flusso normale */
    width: 1px; /* Larghezza minima */
    height: 1px; /* Altezza minima */
    padding: 0; /* Nessun padding */
    margin: -1px; /* Margine negativo per ridurre l'ingombro */
    overflow: hidden; /* Nasconde il contenuto che eccede la dimensione minima */
    clip: rect(0, 0, 0, 0); /* Taglia completamente l'area di visualizzazione */
    border: 0; /* Nessun bordo */
}