/*
Theme Name: Magra Asfalti
Theme URI: https://magraasfalti.it/
Author: Computermania S.a.s. di Mazzanti Francesco & C.
Description: Tema su misura per Magra Asfalti s.r.l., scritto sulla specifica del cliente del 07/09/2026. Template PHP classici; il contenuto delle pagine e' fatto di blocchi resi dal server (inc/blocchi.php), testi e fotografie modificabili dall'editor a blocchi.
Version: 1.5.0
Requires at least: 5.9
Requires PHP: 7.4
Text Domain: magra
*/

/* ============================================================================
   TAVOLOZZA
   I quattro grigi vengono dalla specifica del cliente (par. 4.2).
   Il cremisi e il verde NON c'erano nella specifica: sono stati MISURATI sul
   logo aziendale (il tricolore nel marchio), perche' un sito di soli grigi non
   ha nessun colore per distinguere un'azione da un testo.

   🔄 22/09/2026 - RIMISURATI sul logo VETTORIALE arrivato dal cliente il 21/09.
   Fino a oggi venivano dal vecchio JPEG su fondo bianco e davano #C80020 e
   #00A058; il file nuovo da' un rosso piu' caldo e piu' acceso e un verde
   appena piu' scuro. Moda sui pixel pieni di "LOGO SVG.jpeg", che e'
   l'esportazione RGB del vettoriale fatta da loro: rosso #E32B23,
   verde #009845. (Il PDF vettoriale reso da pdf.js dice #FF3618: e' la
   conversione dalla quadricromia, che satura. I codici ufficiali il cliente
   NON li ha - lo ha scritto Giulia il 21/09.)

   🔴 E il rosso del marchio NON si puo' usare per il testo: #E32B23 da' 4,01:1
   su --bg, sotto il minimo WCAG AA di 4,5:1, e --rosso e' il colore dei
   COLLEGAMENTI. Quindi la tinta e' quella del marchio ma portata alla
   luminosita' che passa: #BA231D, 5,56:1 su --bg. Il marchio tale e quale
   resta in --rosso-marchio, che sta solo dove e' GRAFICA (il filetto
   tricolore), non testo.
   🔑 Effetto collaterale voluto: sul fondo secondario #dfdbdb il vecchio
   #C80020 dava 4,40:1 e NON passava - nessuno se n'era accorto perche' i
   contrasti erano stati calcolati solo su --bg. #BA231D da' 4,57:1.
   --ink-2 e' l'unico scostamento deliberato: il #747775 chiesto dal cliente da'
   4,02:1 su #f1f1f1 e NON passa il minimo WCAG AA di 4,5:1 per il testo
   corrente. #6B6D6B e' lo stesso grigio appena piu' scuro e da' 4,70:1.
   Il #747775 resta, ma solo dove il testo e' grande (>= 24px), dove il minimo
   e' 3:1 e quindi e' rispettato.
   ============================================================================ */
:root {
    --bg:          #f1f1f1;   /* fondo principale (specifica)                */
    --surface:     #ffffff;   /* schede                                      */
    --surface-2:   #dfdbdb;   /* fondo secondario (specifica)                */
    --ink:         #3B3B3B;   /* titoli (specifica) - 10,07:1 su --bg        */
    --ink-2:       #6B6D6B;   /* testo corrente - 4,70:1 su --bg             */
    --ink-3:       #747775;   /* testo grande (specifica) - 4,02:1           */
    --rosso-marchio: #E32B23; /* il rosso del marchio, tale e quale: SOLO grafica */
    --rosso:       #BA231D;   /* stessa tinta, leggibile - 5,56:1 su --bg    */
    --rosso-cupo:  #8D1B16;   /* passaggio del mouse - 8,08:1 su --bg        */
    --verde:       #009845;   /* misurato sul logo - 3,33:1: mai testo piccolo */
    --bordo:       #d7d2d2;
    --bordo-forte: #bdb7b7;

    --l:  1180px;
    --r:  4px;
    --om: 0 1px 2px rgba(59,59,59,.06), 0 8px 24px rgba(59,59,59,.06);
    --om-alta: 0 2px 4px rgba(59,59,59,.08), 0 14px 40px rgba(59,59,59,.10);
}

/* ============================================================================
   FONT: Inter, ospitato in casa. Non da fonts.googleapis.com, per due motivi
   che valgono entrambi: una richiesta di rete in meno, e nessun indirizzo IP
   dei visitatori spedito a un terzo (il sito dichiara di non raccogliere dati).
   E' il file VARIABILE: un solo scaricamento copre tutti i pesi da 100 a 900.
   ============================================================================ */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('assets/fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('assets/fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================================
   BASE
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink-2);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    font-feature-settings: 'cv05' 1, 'ss03' 1;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
    color: var(--ink);
    font-weight: 650;
    line-height: 1.15;
    letter-spacing: -.018em;
    margin: 0 0 .6em;
    text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem); }
h2 { font-size: clamp(1.65rem, 1.2rem + 1.6vw, 2.3rem); }
h3 { font-size: 1.22rem; font-weight: 620; }
h4 { font-size: 1.02rem; font-weight: 620; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--rosso); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--rosso-cupo); }

:focus-visible {
    outline: 3px solid var(--rosso);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Il collegamento per saltare al contenuto si nasconde SOPRA la pagina, non a sinistra:
   con left:-9999px il documento risultava largo 449px su una finestra di 390 e il telefono
   scorreva in orizzontale. Trovato solo guardando la pagina con un browser vero. */
.salta {
    position: absolute; left: .5rem; top: -4rem;
    background: var(--ink); color: #fff; padding: .7rem 1.1rem; z-index: 200;
}
.salta:focus { top: .5rem; }

.contenitore { width: 100%; max-width: var(--l); margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2.25rem); }

.solo-lettori {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* etichetta piccola sopra i titoli: e' la sola cosa che porta il rosso
   in tipografia, e a 13px con 5,56:1 rispetta il minimo AA - anche sul
   fondo secondario #dfdbdb, dove il rosso di prima si fermava a 4,40:1 */
.sopratitolo {
    display: block;
    font-size: .8125rem;
    font-weight: 640;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--rosso);
    margin-bottom: .85rem;
}
.sopratitolo::after {
    content: '';
    display: inline-block;
    width: 26px; height: 2px;
    background: var(--verde);
    vertical-align: .28em;
    margin-left: .7rem;
}

/* ============================================================================
   TESTATA: logo a sinistra, menu a destra (specifica 2.1)
   ============================================================================ */
.barra {
    position: sticky; top: 0; z-index: 100;
    background: rgba(241,241,241,.94);
    backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--bordo);
}
/* filetto tricolore: cita il marchio senza ridisegnarlo */
.barra::after {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(to right, var(--verde) 0 33.33%, #fff 33.33% 66.66%, var(--rosso-marchio) 66.66% 100%);
}
.barra-dentro {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.5rem; min-height: 78px;
}
.marchio { display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 0; }
.marchio img { height: 55px; width: auto; max-width: 100%; }

/* Il marchio è un logotipo largo (877x97, quasi 9:1): a 36px di altezza occupa 325px, e con il
   bottone del menù e gli spazi non ci sta in un telefono da 390px. Sotto i 560px si abbassa il
   logo e il bottone perde la parola "Menù", restando la sola icona. */
@media (max-width: 560px) {
    .marchio img { height: 36px; }
    .barra-dentro { gap: .75rem; min-height: 66px; }
    .interruttore { padding: .45rem .6rem; }
    .interruttore .parola { display: none; }
}

.navigazione ul {
    list-style: none; display: flex; align-items: center;
    gap: clamp(.35rem, 1.4vw, 1.1rem); margin: 0; padding: 0;
}
.navigazione a {
    display: block; padding: .5rem .2rem;
    color: var(--ink); font-size: .95rem; font-weight: 560;
    text-decoration: none; border-bottom: 2px solid transparent;
}
.navigazione a:hover { color: var(--rosso); border-bottom-color: var(--rosso); }
.navigazione .attiva > a { color: var(--rosso); border-bottom-color: var(--rosso); }

/* ------------------------------------------------------------------ tendina "Impianti"
   Chiesta dal cliente il 09/09/2026: "cliccandoci si apre un menu a tendina con le due voci".
   Si apre col CLIC, non col passaggio del mouse: e' quello che ha chiesto, ed e' anche l'unico
   modo che funziona su un telefono, dove il mouse non passa da nessuna parte.
   Il bottone e' un <button>: la voce non porta a una pagina, quindi non e' un collegamento. */
.navigazione .ha-tendina { position: relative; }
.navigazione .tendina-guscio { position: static; }
.navigazione .voce-tendina {
    display: inline-flex; align-items: center; gap: .4rem;
    border-bottom: 2px solid transparent;
    padding: .5rem .2rem; margin: 0;
    color: var(--ink); font-size: .95rem; font-weight: 560;
    cursor: pointer; list-style: none;
}
.navigazione .voce-tendina::-webkit-details-marker { display: none; }
.navigazione .voce-tendina:hover,
.navigazione .ha-tendina.attiva .voce-tendina { color: var(--rosso); border-bottom-color: var(--rosso); }
.navigazione .freccina {
    width: 0; height: 0; margin-top: 2px;
    border-left: 4px solid transparent; border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform .16s ease;
}
.navigazione .tendina-guscio[open] .freccina { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .navigazione .freccina { transition: none; } }

.navigazione .tendina {
    position: absolute; top: 100%; left: 0; z-index: 120;
    display: block; min-width: 19rem;
    margin: .35rem 0 0; padding: .35rem 0;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--bordo);
    border-radius: var(--r);
    box-shadow: var(--om-alta);
}
.navigazione .tendina li { display: block; }
.navigazione .tendina a {
    display: block; padding: .6rem 1rem; border-bottom: 0;
    font-weight: 520; line-height: 1.35; white-space: normal;
}
.navigazione .tendina a:hover { background: var(--bg); border-bottom: 0; }
.navigazione .tendina .attiva > a { color: var(--rosso); }

.interruttore {
    display: none; background: none; border: 1px solid var(--bordo-forte);
    border-radius: var(--r); padding: .5rem .7rem; cursor: pointer; color: var(--ink);
    font: inherit; font-size: .9rem; align-items: center; gap: .5rem;
}
@media (max-width: 900px) {
    .interruttore { display: inline-flex; }
    .navigazione {
        position: absolute; left: 0; right: 0; top: 100%;
        background: var(--bg); border-bottom: 1px solid var(--bordo);
        box-shadow: var(--om); padding: .5rem 0 1rem;
    }
    .navigazione[hidden] { display: none; }
    .navigazione ul { flex-direction: column; align-items: stretch; gap: 0; padding: 0 clamp(1rem, 3vw, 2.25rem); }
    .navigazione a { padding: .8rem 0; border-bottom: 1px solid var(--bordo); }
    .navigazione a:hover { border-bottom-color: var(--bordo); }

    /* Nel menu stretto la tendina non e' un riquadro sospeso: e' un rientro sotto la voce. */
    .navigazione .voce-tendina {
        width: 100%; justify-content: space-between;
        padding: .8rem 0; border-bottom: 1px solid var(--bordo);
    }
    .navigazione .tendina {
        position: static; min-width: 0; margin: 0;
        border: 0; border-radius: 0; box-shadow: none;
        background: transparent; padding: 0 0 .2rem;
    }
    .navigazione .tendina a { padding: .7rem 0 .7rem 1.1rem; font-size: .92rem; }
}

/* ============================================================================
   PRE-CORPO (specifica 2.1: immagine + frase)
   ============================================================================ */
/*
 * 🔴 09/09/2026 - L'IMMAGINE DI APERTURA NON SI TAGLIA PIU'.
 * Il cliente: "va bene l'immagine attuale all'apertura, ma nella versione web viene tagliata".
 * Era vero e si vedeva: la fascia era alta al massimo 620px con object-fit:cover, e su 1440px
 * l'immagine (1920x1364, quindi 1023px alta) perdeva il cielo, le colline e la parte bassa del
 * piazzale - circa il 40%. Adesso l'immagine sta tutta: altezza naturale, nessun ritaglio.
 * La velatura scura si e' alleggerita di conseguenza: era li' per staccare il testo, ma con
 * .52 in cima spegneva proprio il cielo che ora si vede.
 */
.eroe { position: relative; background: var(--ink); overflow: hidden; }
.eroe img {
    display: block;
    width: 100%; height: auto;
    filter: saturate(.98) contrast(1.02);
}
.eroe::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg,
        rgba(20,20,20,.06) 0%,
        rgba(20,20,20,0)   34%,
        rgba(20,20,20,.36) 64%,
        rgba(20,20,20,.80) 100%);
}
.eroe-testo {
    position: absolute; inset: auto 0 0 0; z-index: 2;
    padding-bottom: clamp(1.8rem, 5vh, 3.6rem);
}
.eroe-testo p {
    max-width: 22ch;
    margin: 0;
    color: #fff;
    font-size: clamp(1.9rem, 1.1rem + 3.1vw, 3.5rem);
    font-weight: 660;
    line-height: 1.1;
    letter-spacing: -.022em;
    text-shadow: 0 2px 24px rgba(0,0,0,.42);
    text-wrap: balance;
}
.eroe-testo span { color: #fff; }
.eroe-riga { display: block; width: 74px; height: 4px; background: var(--rosso); margin-bottom: 1.4rem; }

/* ============================================================================
   🆕 09/09/2026 (D5) - QUELLO CHE GIULIA SCRIVE FUORI DA UNA FASCIA

   Trovato MISURANDO una bozza con un browser vero, e non e' il difetto che
   stavo cercando: cercavo core/image e ho trovato questo.

   Il contenuto della pagina finisce dritto in <main id="contenuto"> (page.php),
   e il contenitore che da' i margini laterali sta DENTRO ogni fascia. Quindi
   qualunque blocco al primo livello - un titolo, un elenco, e anche un
   PARAGRAFO, cioe' proprio la cosa che a Giulia abbiamo detto che puo'
   modificare - esce attaccato al bordo sinistro della finestra, largo quanto lo
   schermo. Misurato: 1440 px di larghezza a x=0, contro i 1180 del contenitore.

   🔑 Si riproduce senza fare niente di strano: basta scendere in fondo a una
   pagina nell'editor, battere Invio e scrivere.

   Perche' questa regola non cambia le pagine di adesso, e non e' una speranza:
   misurato prima di scriverla (strumenti/annidamento.js), al primo livello
   delle 7 pagine ci sono ZERO blocchi del core - solo 28 magra/fascia e 1
   magra/eroe, che sono <section> e questa regola non li tocca.
   ============================================================================ */
main#contenuto > :is(p, h1, h2, h3, h4, ul, ol, figure) {
    width: 100%;
    max-width: var(--l);
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(1rem, 3vw, 2.25rem);
    padding-right: clamp(1rem, 3vw, 2.25rem);
    box-sizing: border-box;
}

/* Se un pezzo nudo e' il primo o l'ultimo della pagina, non deve toccare la
   testata o il piede.

   🪤 La prima stesura di queste due righe era scritta
       main#contenuto > :first-child { margin-top: ... }
   cioe' SENZA l'elenco degli elementi nudi. Il primo figlio di <main>, su tutte
   e sette le pagine, e' una FASCIA: quelle due righe hanno allungato ogni pagina
   di 72 px su schermo grande e di 67 sul telefono (4vh sopra + 4vh sotto), e il
   confronto al pixel le ha date tutte e 14 diverse.
   🔑 Non l'ha trovato una rilettura: l'ha trovato la MISURA, e in un modo che
   indicava il colpevole invece di dire soltanto "diverso" - l'aumento era
   identico su tutte le pagine e 4vh dei due schermi da' esattamente 72 e 67. */
main#contenuto > :is(p, h1, h2, h3, h4, ul, ol, figure):first-child { margin-top: clamp(2rem, 4vh, 3rem); }
main#contenuto > :is(p, h1, h2, h3, h4, ul, ol, figure):last-child  { margin-bottom: clamp(2rem, 4vh, 3rem); }

/* ----------------------------------------------------------------------------
   L'ELENCO PUNTATO (core/list), vestito con D5.

   Non era usato in nessuna delle 7 pagine, e infatti era uno dei blocchi che
   uscivano nudi: <ul> larga come la finestra, senza margini. Si veste e si
   ammette (inc/blocchi.php, magra_blocchi_ammessi) invece di nasconderlo,
   perche' un elenco puntato e' la cosa che una persona cerca davvero mentre
   scrive della prosa: negarglielo sarebbe una lacuna nuova al posto di una
   corretta.
   ---------------------------------------------------------------------------- */
/* 🪤 Il selettore e' .wp-block-list, cioe' la classe che scrive core/list, e NON
   qualcosa come ".contenitore ul". La prima stesura di questa regola diceva
   proprio ".contenitore ul, .contenitore li": dentro un .contenitore ci stanno
   anche il MENU DI NAVIGAZIONE (.navigazione ul, riga 181) e le liste del piede,
   e quella regola avrebbe cambiato la testata di tutte e sette le pagine per
   vestire un blocco che nessuna di loro usa. Trovato rileggendo, non a schermo:
   il collaudo al pixel l'avrebbe visto, ma dopo aver messo in linea l'errore. */
ul.wp-block-list, ol.wp-block-list {
    margin: 0 0 1.1em;
    padding-left: 1.35em;
}
main#contenuto > ul.wp-block-list, main#contenuto > ol.wp-block-list {
    padding-left: calc(clamp(1rem, 3vw, 2.25rem) + 1.35em);
}
.wp-block-list li { margin-bottom: .35em; }
.wp-block-list li:last-child { margin-bottom: 0; }
.wp-block-list > li::marker { color: var(--rosso); }

/* ============================================================================
   FASCE E GRIGLIE
   ============================================================================ */
.fascia { padding: clamp(3rem, 7vh, 5.5rem) 0; }
.fascia--chiara { background: var(--surface); }
.fascia--neutra { background: var(--surface-2); }
.fascia--strizzata { padding: clamp(2rem, 4vh, 3rem) 0; }
.testo-largo { max-width: 68ch; }
.testo-largo p { font-size: 1.06rem; }

.griglia { display: grid; gap: clamp(1rem, 2.2vw, 1.6rem); }
.griglia--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 265px), 1fr)); }
.griglia--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.griglia--foto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

/* scorciatoie della home (specifica 2.1: collegamenti impianti/prodotti/certificazioni) */
.scorciatoia {
    display: flex; flex-direction: column; justify-content: space-between;
    min-height: 172px;
    background: var(--surface);
    border: 1px solid var(--bordo);
    border-left: 3px solid var(--rosso);
    border-radius: var(--r);
    padding: 1.5rem 1.6rem;
    text-decoration: none;
    box-shadow: var(--om);
    transition: transform .18s ease, box-shadow .18s ease, border-left-color .18s ease;
}
.scorciatoia:hover { transform: translateY(-3px); box-shadow: var(--om-alta); border-left-color: var(--verde); }
.scorciatoia h3 { margin: 0 0 .35rem; }
.scorciatoia p { color: var(--ink-2); font-size: .96rem; margin: 0; }
.scorciatoia .freccia { color: var(--rosso); font-weight: 640; font-size: .92rem; margin-top: 1.1rem; }
@media (prefers-reduced-motion: reduce) { .scorciatoia { transition: none; } .scorciatoia:hover { transform: none; } }

.figura { margin: 0; }
.figura img { border-radius: var(--r); border: 1px solid var(--bordo); background: var(--surface-2); }
.figura figcaption { font-size: .875rem; color: var(--ink-3); padding-top: .55rem; }

.due-colonne { display: grid; gap: clamp(1.6rem, 4vw, 3.2rem); align-items: center; }
@media (min-width: 860px) { .due-colonne { grid-template-columns: 1fr 1fr; } .due-colonne--stretta { grid-template-columns: 5fr 7fr; } }

.dato {
    background: var(--surface); border: 1px solid var(--bordo); border-radius: var(--r);
    padding: 1.25rem 1.4rem;
}
.dato .numero { display: block; color: var(--ink); font-size: 1.9rem; font-weight: 680; line-height: 1.1; letter-spacing: -.02em; }
.dato .voce { font-size: .9rem; color: var(--ink-2); }

/* ============================================================================
   FISARMONICHE (specifica 2.4.1 e 2.5: "menu a tendina" su cui cliccare)
   <details>/<summary> nativi: funzionano senza JavaScript, sono accessibili da
   tastiera e restano apribili anche se uno script si rompe.
   ============================================================================ */
.fisarmonica { border: 1px solid var(--bordo); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.fisarmonica + .fisarmonica { margin-top: .6rem; }
.fisarmonica > summary {
    display: flex; align-items: center; gap: .9rem;
    padding: 1.05rem 1.3rem;
    cursor: pointer;
    color: var(--ink); font-weight: 620; font-size: 1.04rem;
    list-style: none;
}
.fisarmonica > summary::-webkit-details-marker { display: none; }
.fisarmonica > summary::after {
    content: '+';
    margin-left: auto;
    color: var(--rosso);
    font-size: 1.5rem; font-weight: 400; line-height: 1;
}
.fisarmonica[open] > summary::after { content: '\2013'; }
.fisarmonica[open] > summary { border-bottom: 1px solid var(--bordo); }
.fisarmonica > summary:hover { background: #fbfafa; }
.fisarmonica .corpo { padding: 1.15rem 1.3rem 1.35rem; }
.fisarmonica .corpo p:last-child { margin-bottom: 0; }
.pallino { width: 9px; height: 9px; border-radius: 50%; background: var(--verde); flex: 0 0 auto; }

/* ============================================================================
   BOTTONI
   ============================================================================ */
.bottone {
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .72rem 1.25rem;
    border: 1px solid var(--rosso);
    border-radius: var(--r);
    background: var(--rosso); color: #fff;
    font-size: .95rem; font-weight: 600;
    text-decoration: none; cursor: pointer;
    font-family: inherit;
}
.bottone:hover { background: var(--rosso-cupo); border-color: var(--rosso-cupo); color: #fff; }
.bottone--vuoto { background: transparent; color: var(--rosso); }
.bottone--vuoto:hover { background: var(--rosso); color: #fff; }
.bottone--neutro { background: transparent; color: var(--ink); border-color: var(--bordo-forte); }
.bottone--neutro:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.bottoni { display: flex; flex-wrap: wrap; gap: .7rem; }

/* documenti scaricabili */
.documento {
    display: flex; align-items: center; gap: .9rem;
    padding: .95rem 1.1rem;
    background: var(--surface); border: 1px solid var(--bordo); border-radius: var(--r);
    text-decoration: none; color: var(--ink); font-weight: 560; font-size: .98rem;
}
.documento:hover { border-color: var(--rosso); color: var(--rosso); }
.documento .tipo {
    flex: 0 0 auto; font-size: .7rem; font-weight: 700; letter-spacing: .06em;
    background: var(--rosso); color: #fff; padding: .28rem .45rem; border-radius: 3px;
}
.documento .peso { margin-left: auto; font-size: .84rem; color: var(--ink-3); font-weight: 400; }

/* ============================================================================
   CONTATTI
   ============================================================================ */
.recapiti { list-style: none; margin: 0; padding: 0; }
.recapiti li { display: flex; gap: .9rem; padding: .85rem 0; border-bottom: 1px solid var(--bordo); }
.recapiti li:last-child { border-bottom: 0; }
.recapiti .etichetta { flex: 0 0 9.5rem; color: var(--ink-3); font-size: .9rem; padding-top: .1rem; }
.recapiti .valore { min-width: 0; overflow-wrap: anywhere; }

/* Su un telefono da 390px l'etichetta fissa a 9,5rem piu' un indirizzo come
   amministrazione@magraasfalti.it non ci stanno sulla stessa riga: la pagina scorreva in
   orizzontale di 62px. Sotto i 620px l'etichetta va sopra il valore. */
@media (max-width: 620px) {
    .recapiti li { flex-direction: column; gap: .15rem; }
    .recapiti .etichetta { flex: 0 0 auto; }
}
.recapiti .valore { color: var(--ink); font-weight: 560; }
.recapiti a { font-weight: 560; }

/* mappa: il riquadro resta VUOTO fino al consenso (vedi consenso.js) */
.mappa { position: relative; background: var(--surface-2); border: 1px solid var(--bordo); border-radius: var(--r); overflow: hidden; min-height: 340px; }
.mappa iframe { display: block; width: 100%; height: 100%; min-height: 340px; border: 0; }
.mappa-segnaposto { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: .9rem; height: 100%; min-height: 340px; padding: clamp(1.2rem, 4vw, 2.2rem); }
.mappa-segnaposto p { color: var(--ink-2); max-width: 46ch; font-size: .96rem; }

/* ============================================================================
   NOVITA
   ============================================================================ */
.novita { display: grid; gap: clamp(1.2rem, 3vw, 2.4rem); align-items: center; background: var(--surface); border: 1px solid var(--bordo); border-radius: var(--r); overflow: hidden; }
@media (min-width: 800px) { .novita { grid-template-columns: 42% 1fr; } }
.novita img { height: 100%; min-height: 240px; object-fit: cover; }
.novita .corpo { padding: clamp(1.3rem, 3vw, 2.2rem); }
/* 09/09/2026: il cliente ha chiesto di togliere le immagini dalle novita'. Senza foto la
   griglia a due colonne lascerebbe una colonna vuota larga il 42%: qui torna a una sola. */
.novita--senza-foto { grid-template-columns: 1fr; }
@media (min-width: 800px) { .novita--senza-foto { grid-template-columns: 1fr; } }
/* Con le foto ogni scheda si distingueva da sola. Senza, due schede di fila si attaccavano e i
   due bordi facevano una riga doppia: sembrava un riquadro solo diviso a meta'. Visto guardando. */
.novita + .novita { margin-top: clamp(1rem, 2.5vw, 1.6rem); }

/*
 * La nota in coda a una scheda ("il collegamento porta a un sito esterno").
 *
 * 🔄 Nata il 09/09/2026 da uno stile scritto a mano dentro il testo
 * (<span style="font-size:.86rem;color:var(--ink-3)">).
 *
 * 🔄 LA RAGIONE CHE AVEVO SCRITTO QUI ERA SBAGLIATA, e la correggo invece di cancellarla.
 * Dicevo: «Giulia sara' EDITORE, e un editore non ha unfiltered_html, quindi a ogni salvataggio
 * kses le mangerebbe l'attributo style». **Falso su un sito singolo**: misurato con user_can()
 * sull'utente vero appena creato, l'editore unfiltered_html CE L'HA (la perde solo in multisito).
 * Quindi kses, sui salvataggi di Giulia, non gira nemmeno.
 *
 * 🔑 La classe resta, e con due ragioni che reggono davvero:
 *   - uno stile scritto a mano dentro il testo e' una SECONDA verita' sui colori del sito, fuori
 *     dal foglio di stile, che nessuno andra' a cercare il giorno che i grigi cambiano;
 *   - e se un domani quella capacita' venisse tolta all'editore (basta un filtro), il contenuto
 *     con la classe passa intatto mentre quello con lo style perderebbe il var(--token).
 * Cioe': non era urgente come avevo scritto, ma e' giusta.
 */
.nota { font-size: .86rem; color: var(--ink-3); }

/* ============================================================================
   PACCHETTO DEI LOGHI DELLA POLITICA DI COESIONE
   Obbligo di comunicazione a carico del beneficiario (vademecum Regione Liguria,
   "Sintesi delle responsabilita' di comunicazione": tutti i beneficiari devono dare
   rilievo al finanziamento SUL SITO WEB, con i loghi e la dichiarazione).
   L'immagine e' quella composta dal cliente e NON si ricompone qui: il brand book
   fissa proporzioni e distanze fra i marchi, e l'emblema UE non puo' essere piu'
   piccolo degli altri. Si scala e basta.
   ============================================================================ */
.loghi-ue { margin: 1.8rem 0 0; }
.loghi-ue img { width: 100%; max-width: 720px; height: auto; border: 0; background: none; }
.loghi-ue .didascalia { font-size: .84rem; color: var(--ink-3); margin: .7rem 0 0; max-width: 62ch; }

/* ============================================================================
   PIEDE (specifica 2.1: logo, sede, recapiti, orari, socio unico, policy)
   ============================================================================ */
/*
 * 🔄 09/09/2026 - IL PIEDE NON CAMBIA PIU' COLORE.
 * Il cliente: "non vorrei uno stacco netto con un cambio di colore rispetto alla parte centrale
 * della pagina. Preferirei mantenere un colore continuo e distinguere le due sezioni
 * semplicemente attraverso una sottile linea divisoria chiara".
 * Quindi: stesso fondo del corpo (--bg) e un filetto --bordo di 1px al posto della fascia scura.
 *
 * 🔑 E QUI SPARISCE ANCHE IL RIQUADRO BIANCO INTORNO AL LOGO, che il cliente ha chiesto di
 * togliere nella stessa mail. Non serve piu' aspettare il logo nuovo: quel riquadro esisteva
 * SOLO perche' il marchio (cremisi su trasparente) sul fondo scuro sarebbe stato illeggibile.
 * Su fondo chiaro il logo trasparente che gia' abbiamo si posa e basta.
 */
.piede {
    background: var(--bg); color: var(--ink-2);
    border-top: 1px solid var(--bordo);
    padding: clamp(2.6rem, 6vh, 4rem) 0 0; margin-top: 0;
}
.piede a { color: var(--rosso); }
.piede a:hover { color: var(--rosso-cupo); }
.piede h4 { color: var(--ink); font-size: .82rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 640; margin-bottom: 1rem; }
.piede-griglia { display: grid; gap: clamp(1.6rem, 4vw, 2.6rem); }
@media (min-width: 780px) { .piede-griglia { grid-template-columns: 1.4fr 1fr 1fr; } }
.piede .marchio-piede { display: inline-block; margin-bottom: 1.2rem; }
.piede .marchio-piede img { height: 48px; width: auto; }
.piede ul { list-style: none; margin: 0; padding: 0; }
.piede li { padding: .22rem 0; font-size: .95rem; }
.piede .nota { font-size: .86rem; line-height: 1.6; color: var(--ink-3); max-width: 46ch; }
.piede-basso {
    margin-top: clamp(2rem, 5vh, 3rem);
    border-top: 1px solid var(--bordo);
    padding: 1.2rem 0 1.6rem;
    display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; align-items: center; justify-content: space-between;
    font-size: .86rem; color: var(--ink-3);
}
.piede-basso nav { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; }
.piede-basso a { color: var(--ink-2); }
.piede-basso a:hover { color: var(--rosso); }

/* ============================================================================
   AVVISO DI CONSENSO AI COOKIE
   Rifiuto e accettazione hanno lo STESSO peso visivo: e' un requisito, non
   un'opinione (linee guida del Garante di giugno 2021).
   ============================================================================ */
.consenso {
    position: fixed; z-index: 300; inset: auto 1rem 1rem 1rem;
    max-width: 640px; margin-left: auto;
    background: var(--surface);
    border: 1px solid var(--bordo-forte);
    border-top: 3px solid var(--rosso);
    border-radius: var(--r);
    box-shadow: var(--om-alta);
    padding: 1.3rem 1.4rem;
}
.consenso[hidden] { display: none; }
.consenso h2 { font-size: 1.06rem; margin-bottom: .5rem; }
.consenso p { font-size: .92rem; margin-bottom: 1rem; }
.consenso .bottoni .bottone { flex: 1 1 auto; justify-content: center; }