/* =============================================================================
   LO STANDARD DI IMPAGINAZIONE (27/09/2026)

   Una regola sola, in un file solo, per tutte le pagine del sito. La carica
   admin/dati_comuni.php subito dopo style.css, quindi ogni pagina che include
   dati_comuni.php — cioe' tutte — se la trova gia' addosso senza doverci
   scrivere niente dentro.

   PERCHE' ESISTE

   ".contenutoPagina" non stava nel foglio generale: ogni pagina se la
   ridefiniva, e col tempo le copie hanno preso misure diverse l'una
   dall'altra. Una pagina nuova che si dimenticava di dichiararla non aveva
   larghezza: dentro una <section> che centra i figli si stringeva sul
   contenuto, e quello che c'era dentro collassava.

   Lo stacco da sinistra era l'altro punto dolente: il menu laterale
   (menu/menu-sinistro.php) sopra i 1024 pixel e' "position: fixed" e largo
   249, mentre css/style.css dava alla <section> 240 pixel di riempimento. Nove
   pixel di contenuto finivano sotto al menu. Qui lo stacco e' 269: i 249 del
   menu piu' 20 di aria.

   COME SI CAMBIA — anche a pagina aperta

   Le misure sono variabili CSS su :root. In una scheda aperta si cambia il
   valore dagli strumenti per sviluppatori (Elementi -> :root, oppure in
   console:

       document.documentElement.style.setProperty('--pag-larghezza','1400px')

   ) e TUTTA la pagina si riadatta subito, senza ricaricare niente. Vale anche
   per la chat: non ci sono misure calcolate in JavaScript al caricamento, che
   e' esattamente il motivo per cui prima bisognava aggiornare la pagina.

   Una cosa che le variabili non possono fare: stare dentro la condizione di
   una @media. "@media (min-width: var(--x))" non e' previsto dal linguaggio.
   Per questo il 1024 e' scritto a mano, e compare in due punti qui sotto: se
   un giorno il menu comparisse a una larghezza diversa, vanno cambiati tutti
   e due (e la stessa soglia sta in menu/menu-sinistro.php).

   COME SI FA UN'ECCEZIONE

   Questo foglio arriva PRIMA degli stili scritti dentro le pagine, quindi una
   pagina che ha bisogno di misure sue le dichiara nel suo <style> e vince.
   Meglio ancora: ridichiara solo la variabile, e il resto si adatta da solo.

       .contenutoPagina { --pag-larghezza: 1500px; }   <- solo questa pagina
       .contenutoPagina { --pag-allineamento: center; } <- testo centrato

   ============================================================================= */

:root {
    /* Lo stacco da sinistra sopra i 1024 pixel: 249 di menu + 20 di aria. */
    --pag-menu:            269px;

    /* L'aria a destra, per non incollare il contenuto al bordo della finestra. */
    --pag-margine:         20px;

    /* Quanto puo' diventare larga una pagina su un monitor grande. Oltre, il
       contenuto resta centrato e cresce solo il vuoto ai lati: una riga di
       testo lunga due metri non si legge. */
    --pag-larghezza:       1200px;

    /* Il respiro interno, largo e stretto. */
    --pag-padding:         18px;
    --pag-padding-stretto: 8px;

    --pag-raggio:          15px;

    /* La <section> del sito centra il testo (serve alle pagine fatte di
       schede). Il testo lungo si legge dal bordo sinistro, quindi qui la
       partenza e' "left". Una pagina che vuole il centro mette
       ".contenutoPagina { --pag-allineamento: center; }" nel suo <style>. */
    --pag-allineamento:    left;
}

/* -----------------------------------------------------------------------------
   IL CONTENITORE DELLA PAGINA
   ----------------------------------------------------------------------------- */
.contenutoPagina {
    position: relative;
    margin: 0;
    padding: var(--pag-padding);
    border-radius: var(--pag-raggio);
    width: 100%;
    max-width: var(--pag-larghezza);
    display: flex;
    flex-direction: column;
    font-size: .9rem;
    text-align: var(--pag-allineamento);
}

/* -----------------------------------------------------------------------------
   SOPRA I 1024 PIXEL: C'E' IL MENU, E VA SCAVALCATO

   Il selettore e' "body section" e non "section" per stare sopra alla regola di
   css/style.css (che da' 240 pixel) senza dipendere dall'ordine con cui i due
   fogli vengono caricati. Si toccano solo destra e sinistra: sopra e sotto
   restano quelli del foglio generale.
   ----------------------------------------------------------------------------- */
@media (min-width: 1024px) {
    body section {
        padding-left:  var(--pag-menu);
        padding-right: var(--pag-margine);
    }
}

/* -----------------------------------------------------------------------------
   SOTTO I 1024 PIXEL: IL MENU NON C'E'

   menu-sinistro.php si nasconde da solo ("@media only screen and
   (max-width:1023px) { aside { display: none } }"), quindi non c'e' niente da
   scavalcare: la pagina prende tutta la larghezza meno un margine sottile. Su
   un telefono da 390 pixel sono otto pixel per lato, cioe' il 96%.
   ----------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .contenutoPagina {
        width: 100%;
        max-width: none;
        padding: var(--pag-padding-stretto);
        border-radius: 0;
    }
}

/* -----------------------------------------------------------------------------
   LE FINESTRE CHE SI CENTRANO DA SOLE

   Un riquadro "position: fixed; inset: 0" con dentro un flex centrato si mette
   al centro dello SCHERMO, mentre la pagina sotto e' spostata a destra dal
   menu: aperto e chiuso, sembra che salti di lato. Chi vuole che si centri
   nello spazio di lavoro aggiunge la classe "overlay-standard" al suo
   riquadro a schermo intero, e ci pensa questa regola.
   ----------------------------------------------------------------------------- */
@media (min-width: 1024px) {
    .overlay-standard { padding-left: var(--pag-menu); }
}