/**
 * wood.css — lo sfondo ad assi di legno sotto tutto il sito.
 *
 * Sta in un file suo, e non sparso dentro shell.css e home-ruedaloca.css,
 * perché è una pelle: si toglie togliendo un enqueue in functions.php e il
 * sito torna esattamente com'era. Se invece avessi cambiato i colori dove
 * erano scritti, tornare indietro avrebbe voluto dire ricordarsi quali.
 *
 * Va caricato PER ULTIMO: quasi tutte le regole qui sotto sostituiscono uno
 * sfondo pieno dichiarato altrove, e vincono per ordine, non per specificità.
 *
 * ----------------------------------------------------------------------------
 * Come funziona
 *
 * Il legno NON è ripetuto a piastrelle. La foto ha una vignettatura marcata —
 * chiara al centro, scura ai bordi — e affiancandone due copie si vedrebbero
 * le giunture come bande. È invece UNA sola immagine fissa alla finestra,
 * grande quanto lo schermo, che resta ferma mentre la pagina scorre sopra:
 * un piano di legno su cui il sito è appoggiato.
 *
 * Sopra ci stanno dei veli scuri semitrasparenti. È così che si regola quanto
 * legno si vede: NON con l'opacità dei riquadri (opacity smorza anche il
 * testo), ma con colori in rgba(), che smorzano solo ciò che sta sotto.
 *
 * I veli si SOMMANO, e questo detta la struttura:
 *
 *     velo di base (sul legno)  = il minimo, il punto di massima venatura
 *     + velo di sezione         = la tonalità normale delle sezioni e del piede
 *     + velo profondo           = la testata, quasi piena
 *
 * Non esiste un velo che schiarisce: una sezione che deve mostrare PIÙ legno
 * delle altre non aggiunge niente, resta trasparente e lascia vedere il velo
 * di base. È il caso di .rl-story, la fascia "calda" in cui il legno si legge
 * davvero, e dei margini ai lati della pagina sugli schermi oltre i 1440px.
 *
 * Restano piene apposta:
 *   - le fasce rosse (.rl-strip, .rl-book, .rl-form) — sono l'accento, e il
 *     rosso su legno diventa un marrone sporco;
 *   - le schede (.rl-card) e i campi dei moduli — devono leggersi come oggetti
 *     appoggiati sopra, e si scrive male su una venatura;
 *   - le foto, che coprono già il loro riquadro.
 */

.rl {
    /* Questi quattro numeri non sono a occhio. Sono tarati sul PUNTO CHIARO
       della texture (il 5% più luminoso, #D08143), non sulla media: è lì che
       una scritta sparisce, e una media rassicurante non dice niente su dove
       va a finire il titolo.
       Col velo di base a .70 il fondo peggiore diventa #482D17 — il testo
       principale resta a 11:1, i link oro a 6,7:1. Nel caso tipico (mediana
       della texture) il fondo è #2A1505, cioè il legno scuro che si vede
       scorrendo la pagina.
       Sono più forti dei numeri di prima perché la texture è stata elaborata
       e ha i chiari più aperti; la venatura visibile a schermo, nonostante il
       velo maggiore, è comunque +63%. Vedi wood/genera.php. */
    --rl-veil-base: rgba(14, 9, 4, .70);   /* sul legno: il minimo             */
    --rl-veil:      rgba(14, 9, 4, .20);   /* sezioni: si somma al base        */
    --rl-veil-deep: rgba(10, 6, 3, .78);   /* solo la testata sticky su mobile */
    --rl-veil-band: rgba(0, 0, 0, .16);    /* fascia di chiusura delle pagine  */

    /* Un solo colore della palette non regge il legno: --rl-muted-3, il tono
       più spento, quello delle etichette in maiuscoletto da 13px (DOVE,
       QUANDO, INFO). Era già sotto lo standard sul fondo pieno — 4,2:1 contro
       i 4,5 richiesti — e sul velo scende a 3,3:1, che a quel corpo non si
       legge più. Sul legno non c'è spazio per un quarto gradino di grigio: il
       più spento diventa il terzo, e torna a 4,9:1. */
    --rl-muted-3: var(--rl-muted-2);
}

/* Il piano di legno.
 *
 * position: fixed invece di background-attachment: fixed, che su iOS non si
 * comporta come dovrebbe (l'immagine sobbalza a ogni comparsa della barra
 * degli indirizzi). Uno pseudo-elemento fisso è la stessa cosa disegnata da
 * un livello vero, e il browser lo compone una volta sola.
 *
 * z-index: -1 lo mette sotto al contenuto ma sopra allo sfondo pieno di .rl,
 * che resta come rete di sicurezza: se l'immagine non arriva, la pagina è
 * quella scura di prima invece di essere illeggibile.
 */
.rl::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background-color: var(--rl-bg-deep);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    /* La texture NON è il file caricato in libreria media: è una sua versione
       elaborata, prodotta da wood/genera.php. Il velo qui sopra comprime il
       contrasto della foto al 30%, e il sorgente così com'è dava una macchia
       calda senza disegno; la versione elaborata ha la venatura riaperta a
       monte, in modo da sopravvivere al velo. Il sorgente resta in libreria
       media, intatto, per poterla rifare.

       Il file da 1500 è per il telefono: là l'immagine è ritagliata in
       verticale, quindi conta l'altezza, e 844 punti bastano. Lo smistamento
       è per larghezza e non con image-set(), che ragiona sulla densità dello
       schermo e non sa quanto è largo: un telefono retina si scaricherebbe il
       file da 418 KB per mostrarlo su 390 punti. */
    background-image: linear-gradient(var(--rl-veil-base), var(--rl-veil-base)),
                      url(wood/wood-1500.webp);
}

@media (min-width: 901px) {
    .rl::before {
        background-image: linear-gradient(var(--rl-veil-base), var(--rl-veil-base)),
                          url(wood/wood-2048.webp);
    }
}

/* --- le sezioni ------------------------------------------------------------ */

/* Erano --rl-bg pieno. Ora sono il velo di base più questo: stessa tonalità di
   prima, ma con la venatura che traspare. */
.rl-intro,
.rl-section { background: var(--rl-veil); }

/* La fascia del racconto è quella in cui il legno si vede di più: niente velo
   aggiunto, solo quello di base. È la pausa calda fra le sezioni scure, ed è la
   scelta giusta proprio qui perché è la sezione con meno testo e più foto. */
.rl-story { background: none; }

/* --- testata e piede ------------------------------------------------------- */

/* Testata e piede alla stessa tonalità delle sezioni: erano le ultime due
   fasce piene, e restare gli unici pezzi opachi le faceva sembrare incollate
   sopra invece che parte della pagina. Lo stacco lo fanno già i filetti.

   La tendina del menu NON diventa trasparente (resta il suo fondo pieno in
   shell.css): si apre sopra al testo della pagina, e deve coprirlo — una voce
   di menu sopra una riga di testo che traspare non si legge. */
.rl-header,
.rl-footer { background: var(--rl-veil); }

/* --- pagine convertite ----------------------------------------------------- */

/* Il corpo del testo non ha uno sfondo suo: è largo 900px dentro un <main>
   largo quanto la pagina, quindi dipingerlo lascerebbe uno scalino verticale
   a metà schermo. Il velo va sul <main>, che è a tutta larghezza.

   :has() distingue il template di pagina da quello della home senza toccare i
   file PHP: solo il primo contiene .rl-page. Dove :has() mancasse, il testo
   resterebbe sul solo velo di base — più chiaro del previsto, ma leggibile. */
#rl-main:has(> .rl-page) { background: var(--rl-veil); }

/* La chiamata all'azione in fondo alle pagine: un filo più scura del testo che
   la precede, per chiudere la pagina invece di continuarla. */
.rl-page-cta { background: var(--rl-veil-band); }

@media (max-width: 900px) {
    /* Su mobile le foto escono dalla griglia di .rl-story e si portano dietro
       il suo sfondo: qui va tolto allo stesso modo. */
    .rl-shots { background: none; }

    /* L'unica eccezione alla trasparenza, e non è una scelta estetica: qui la
       testata è sticky, resta in cima mentre la pagina scorre. Semitrasparente
       si vedrebbe il testo della pagina passarci sotto e le voci di menu
       diventerebbero illeggibili a intermittenza, a seconda di cosa scorre.
       Ferma in cima alla pagina il problema non c'è — ma è appunto ferma solo
       finché non si scorre. */
    .rl-header { background: var(--rl-veil-deep); }
}