/* ══════════════════════════════════════════════════════════════════════════
   CASA MARIUCCIA — RIFINITURA TIPOGRAFICA
   ──────────────────────────────────────────────────────────────────────────
   NESSUN CARATTERE NUOVO. Restano Playfair Display (titoli) e Raleway (testo).

   Il grosso del lavoro e' GIA' nel repository (commit 907b36e): le
   descrizioni sono gia' a 16 px in #2e2e2e e le cinque schede sono gia'
   convertite in <dl class="alloggio-fatti"> con dt/dd. Questo blocco chiude
   solo quello che resta. Non stila classi che non esistono.

   COME E' COLLEGATO: questo file e' richiamato con <link rel="stylesheet">
   subito DOPO il blocco <style> di alloggi.html, index.html, contatti.html e
   prenota.html. Sta dopo, quindi vince per ordine sorgente senza bisogno di
   !important e senza modificare una riga delle regole esistenti.
   Un file solo invece di 10 KB ripetuti in ogni pagina: si corregge in un
   punto e il browser lo riusa passando da una pagina all'altra.

   NB: checkin.html e i pannelli admin-*.html NON lo caricano. checkin.html usa
   Inter con uno stack proprio, e i pannelli sono strumenti interni.
   Le pagine di approfondimento (alloggi-vicino-ieo-milano e le altre) hanno il
   proprio stile generato da scripts/genera_pagine.py, che include gia' la
   correzione delle cifre: se modifichi il punto 1 qui, allineala anche li'.

   Tutti i rapporti di contrasto qui sotto sono calcolati, non stimati, e
   tutte le misure sui glifi vengono dai woff2 che il sito scarica davvero.
   ══════════════════════════════════════════════════════════════════════════ */


/* ── 1. CIFRE IN RIGA ── la correzione del "disordine". Costo: 0 byte ──────
   E' questa la risposta alla domanda. Verificato aprendo i due file che il
   sito scarica oggi (subset latin, UPM 1000, cap-height 710):

     Raleway   3 -147 | 4 -127 | 5 -149 | 7 -127 | 9 -154   scendono SOTTO
     Playfair  3 -151 | 4 -141 | 5 -148 | 7 -148 | 9 -148   la linea di base

   Le cifre di default sono "oldstyle": 0 1 2 alte come le minuscole, 6 e 8
   con l'ascendente, 3 4 5 7 9 che scendono come farebbe una "p". Le sommita'
   vanno da 571 a 715: 144 unita' di skyline frastagliato, il 14% dell'em,
   circa 2 px di sobbalzo a corpo 16. Su una pagina di "2,5 km", "13 minuti",
   "400 metri", "BIL019" i numeri ballano davvero: non e' un'impressione.

   Entrambi i font contengono gia' la feature 'lnum' (verificata nel GSUB:
   zero->zero.lf, one->one.lf, ...). Accenderla non scarica un byte in piu'.
   Dopo: tutte le cifre partono dalla linea di base, sommita' 710-720, cioe'
   9 unita' di dislivello invece di 144.
   Sul body cosi' si correggono ANCHE i titoli Playfair, non solo il testo. */
body {
    font-variant-numeric: lining-nums;
    -webkit-font-feature-settings: "lnum" 1;   /* Safari datato */
            font-feature-settings: "lnum" 1;
}
/* NON aggiungere tabular-nums: la feature 'tnum' NON esiste in Raleway (nel
   GSUB ci sono solo ccmp, dnom, frac, kern, liga, lnum, locl, mark, mkmk,
   numr) e le cifre lining hanno larghezze diverse fra loro (da 357 a 668
   unita'). Sarebbe una riga di CSS che non fa assolutamente nulla.
   L'incolonnamento del mini-calendario lo da' gia' la griglia CSS.         */


/* ── 2. I CODICI IN CARATTERE MECCANICO ── qui, e soltanto qui ────────────
   La richiesta del proprietario, accolta dove paga davvero. IT015159C2HTEEPADX
   non e' prosa: e' una stringa da leggere carattere per carattere e da
   ricopiare. Il monospaziato separa I/l/1 e O/0 e tiene la griglia.
   Costo di rete ZERO: e' il monospaziato gia' installato nel sistema di chi
   guarda. L'etichetta ("CIN:", "ID:") resta in Raleway: e' una parola.
   Funziona in CSS puro, senza toccare l'HTML.                              */
.alloggio-cin,
.alloggio-code {
    font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.9375rem;          /* 15 px — erano 12,8 px e 14,4 px */
    letter-spacing: 0.02em;        /* la spaziatura la da' gia' il monospaziato */
    overflow-wrap: anywhere;       /* il CIN non sfonda mai la scheda */
}
.alloggio-cin strong,
.alloggio-code strong {
    font-family: var(--font-body);
    letter-spacing: 0;
}
.alloggio-cin { color: #4a4a4a; }  /* 8,86:1 — era #555 a 7,46:1 */


/* ── 3. CONTRASTO ── l'unico vero fuori norma della pagina ────────────────
   Sorpresa: NON e' il #555 che si sospettava. #555 su bianco fa 7,46:1 e
   passa perfino WCAG AAA. Il colpevole e' #888 = 3,54:1, SOTTO la soglia AA
   di 4,5:1 — e colpisce proprio i dati che l'ospite cerca: indirizzo,
   prezzo weekend, "/ notte". #4a4a4a porta a 8,86:1.                       */
.alloggio-address,
.alloggio-price span,
.price-weekend  { color: #4a4a4a; }
.info-box-text  { color: #4a4a4a; }   /* era #666 = 5,74:1, solo AA */

/* ⚠ DA NON FARE: applicare #4a4a4a anche a .footer-bottom.
   Il footer ha sfondo #1a1a1a: li' #4a4a4a crolla a 1,96:1, cioe' PEGGIO di
   com'e' adesso (bianco al 50% = 5,24:1). Il footer va lasciato com'e'.
   Stesso discorso per l'oro #d4a853: su bianco fa 2,20:1, non e' mai un
   colore da testo su fondo chiaro. Come SFONDO va benissimo, perche'
   #1a1a1a sull'oro da' 7,89:1 (badge e bottoni sono corretti cosi').       */


/* ── 4. NESSUNA FRASE SOTTO I 15 px ───────────────────────────────────────
   Il testo delle schede e' gia' a 16 px (fatto). Restano fuori i metadati,
   che pero' sono esattamente i dati per cui l'ospite e' arrivato: il CIN e'
   un obbligo di legge, i servizi sono un criterio di scelta, il prezzo
   weekend e' un prezzo. Con x-height/em = 0,519 misurata su Raleway, a
   12,8 px le minuscole sono alte 6,6 px.                                   */
.alloggio-address     { font-size: 0.9375rem; }   /* era 13,6 px */
.price-weekend        { font-size: 0.9375rem; }   /* era 12,8 px */
.feature-text         { font-size: 0.9375rem; }   /* era 12,8 px */
.feature-item         { color: #4a4a4a; }         /* era #555 */
.vicinanze-box strong { font-size: 0.9375rem; }   /* era 13,6 px */
.vicinanze-box span   { font-size: 0.9375rem; color: #4a4a4a; }  /* era 12,8 px */
.gallery-count        { font-size: 0.9375rem; }   /* era 13,6 px */
.alloggio-servizi     { font-size: 1rem; color: #3a3a3a; }   /* era 15,2 px / #4a4a4a */
.footer-text          { font-size: 1rem; line-height: 1.7; } /* era 14,4 px con 1.8 */

/* Il maiuscolo si legge piu' lentamente: resta solo su etichette brevissime */
.alloggio-badge { font-size: 0.8125rem; letter-spacing: 0.06em; }  /* era 11,2 px */


/* ── 5. NAVIGAZIONE ── il punto piu' faticoso dopo il testo ───────────────
   Oggi: 14,4 px, TUTTO MAIUSCOLO, spaziato di 1 px. A corpo piccolo il
   maiuscolo appiattisce il profilo della parola e tutte le voci si
   somigliano. Non c'e' rischio di sfondamento: il maiuscolo Raleway occupa
   in media ~0,72 em contro ~0,52 em del minuscolo, quindi oggi sono ~11,4 px
   per carattere (14,4 x 0,72 + 1 px di spaziatura) contro ~8,3 px del
   minuscolo a 16 px. Il menu diventa PIU' STRETTO pur essendo piu' grande.  */
.nav a {
    font-size: 1rem;
    font-weight: 600;      /* compensa il peso ottico perso col minuscolo */
    text-transform: none;
    letter-spacing: 0;
}


/* ── 6. SPAZIATURE IN em, NON IN px ───────────────────────────────────────
   In px la stessa spaziatura vale il 7% del corpo su un testo da 14 px e il
   3% su uno da 32: i titoli restano stretti e le micro-etichette esplodono,
   e la sproporzione peggiora quando l'utente ingrandisce dal browser.      */
.logo-subtitle { letter-spacing: 0.14em; }   /* era 2px su 11,2 px */
.footer-title  { letter-spacing: 0.12em; }   /* era 2px su 16 px */
.btn-prenota   { letter-spacing: 0.06em; }   /* era 1px su 13,6 px */


/* ── 7. TITOLI ── Playfair resta, gli si da' solo un po' di respiro ───────
   L'interlinea 1.6 ereditata dal body e' troppo per un serif da titolo su
   due o tre righe: le righe si allontanano e il titolo non si legge piu'
   come un blocco unico. text-wrap: balance e' un miglioramento progressivo:
   dove il browser non lo supporta, semplicemente non fa nulla.             */
.alloggio-name,
.page-title,
.info-box-title { line-height: 1.25; text-wrap: balance; }


/* ── 8. TELEFONO ── qui legge la quasi totalita' del pubblico ─────────────*/
@media (max-width: 900px) {
    /* ATTENZIONE AL CASCADE: il blocco 5 qui sopra, stando in fondo al
       foglio, sovrascriverebbe l'override del menu a tendina (che oggi e'
       .nav a { font-size: 0.85rem } dentro la @media esistente). Va quindi
       ridichiarato qui, altrimenti il menu mobile resterebbe a 13,6 px.    */
    .nav a {
        font-size: 1rem;
        padding: 0.75rem 1.2rem;   /* 24 + 25,6 = ~50 px di area di tocco */
    }
    .nav .nav-cta { padding: 0.85rem 1rem !important; }
    .btn-prenota  { min-height: 44px; }
    /* WCAG 2.2 SC 2.5.8 chiede 24x24 px in AA, SC 2.5.5 raccomanda 44x44 in
       AAA. Con mani non ferme e telefono in mano: 44.                      */

    /* <html lang="it"> c'e' gia' su tutte le pagine: la sillabazione
       italiana e' corretta e chiude i buchi bianchi quando la colonna si
       stringe. Togliere queste tre righe se si preferisce il bordo destro
       frastagliato.                                                        */
    .alloggio-description,
    .alloggio-servizi,
    .alloggio-fatti dd { -webkit-hyphens: auto; hyphens: auto; }
}


/* ── 9b. SELETTORE DI LINGUA ──────────────────────────────────────────────
   Testo, non bandiere: una bandiera indica un PAESE, non una lingua, e il
   pubblico anglofono di questo sito e' in buona parte statunitense — la
   bandiera britannica sarebbe proprio quella sbagliata da mostrargli.
   Entrambe le lingue restano visibili con l'attiva evidenziata: mostrare solo
   l'altra e' ambiguo, perche' non si capisce se "EN" significhi "sei qui"
   oppure "vai qui".
   Il collegamento porta alla pagina CORRISPONDENTE, non alla home inglese.
   Le stesse regole sono replicate nello <style> generato da
   scripts/genera_pagine.py per le pagine di approfondimento.            */
.lingua {
    --lingua-link: #555;
    --lingua-attiva: var(--color-primary);
    --lingua-separatore: #999;
    --lingua-bordo: rgba(0,0,0,0.15);
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.82rem; letter-spacing: 0.06em;
    padding-left: 1rem; border-left: 1px solid var(--lingua-bordo);
    white-space: nowrap;
}
.lingua a { color: var(--lingua-link); text-decoration: none; }
.lingua a:hover { color: var(--color-secondary); }
.lingua .attiva { color: var(--lingua-attiva); font-weight: 600; }
.lingua .sep { color: var(--lingua-separatore); }
/* Nell'intestazione scura della home il bordo e i grigi vanno schiariti,
   altrimenti spariscono sul fondo. La classe e' esplicita: le intestazioni
   bianche di Alloggi, Contatti e Prenota non devono ereditare testo bianco. */
.header.header--hero .lingua {
    --lingua-link: rgba(255,255,255,0.88);
    --lingua-attiva: var(--color-secondary);
    --lingua-separatore: rgba(255,255,255,0.55);
    --lingua-bordo: rgba(255,255,255,0.35);
}

/* Nel menu aperto del telefono lo sfondo e' sempre bianco, anche nella home.
   Il collegamento EN ha un bersaglio di almeno 44 px, comodo da toccare. */
.nav.active .lingua {
    --lingua-link: #555;
    --lingua-attiva: var(--color-primary);
    --lingua-separatore: #777;
    --lingua-bordo: rgba(0,0,0,0.15);
    align-self: center;
    justify-content: center;
    width: calc(100% - 2rem);
    margin-left: 0 !important;
    padding: 0.35rem 0 0;
    border-left: 0;
    border-top: 1px solid var(--lingua-bordo);
}
.nav.active .lingua a,
.nav.active .lingua .attiva {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}


/* ── 9. CHI HA GIA' DETTO AL SISTEMA CHE CI VEDE POCO ─────────────────────
   Invisibile a chiunque non ne abbia bisogno, gratis da mantenere, ed e'
   mirato esattamente a questo pubblico.                                    */
@media (prefers-contrast: more) {
    .alloggio-description,
    .alloggio-servizi,
    .alloggio-fatti     { color: #000; }
    .alloggio-address,
    .alloggio-cin,
    .price-weekend,
    .alloggio-price span,
    .feature-item,
    .vicinanze-box span,
    .info-box-text      { color: #1a1a1a; }
}