/* ==========================================================================
   Base — tipografia, link, bottoni, tabelle

   ATTENZIONE: nessun colore grezzo in questo file. Solo variabili --cbt-*.
   Vedi tokens.css per il comando di verifica.
   ========================================================================== */

/* --- Tipografia -----------------------------------------------------------
   Coppia serif/sans: la serif nei titoli dà a un'associazione con quarant'anni
   di storia l'autorevolezza che una sans non trasmette; la sans nel corpo si
   legge in fretta e da telefono, che è la condizione in cui qualcuno apre una
   pagina sui rischi mentre sta succedendo qualcosa.

   I font sono ospitati in proprio, vedi fonts.css. La riga di fallback non è
   decorativa: finché i woff2 non sono scaricati la pagina resta leggibile con
   i caratteri di sistema, e con font-display:swap il testo si vede subito. */
body {
  color: var(--cbt-testo);
  background: var(--cbt-sfondo);
  font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--cbt-testo);
  letter-spacing: -.01em;
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-weight: 700;
}

/* Il prefisso body NON e decorativo: OceanWP stampa h1{font-size:23px} in
   uno <style> inline che il browser incontra dopo questo foglio. A parita di
   specificita vincerebbe lui, e le misure qui sotto non avrebbero mai
   effetto. Con body la specificita sale e la scala tipografica si applica. */
body h1 { font-size: clamp(32px, 22px + 2.4vw, 48px);  line-height: 1.15; }
body h2 { font-size: clamp(26px, 19px + 1.6vw, 36px);  line-height: 1.2; }
body h3 { font-size: clamp(20px, 17px + .8vw, 24px);   line-height: 1.3; }

a {
  color: var(--cbt-link);
  text-underline-offset: .18em;
}
a:hover,
a:focus {
  color: var(--cbt-link-hover);
}

/* Focus visibile: obbligatorio per l'accessibilità da tastiera, e su un sito
   di pubblica utilità non è un dettaglio. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--cbt-azzurro);
  outline-offset: 2px;
}

/* --- Bottoni: SEMPRE blu. Mai verde, giallo, arancione o rosso. ----------- */
.button,
button,
input[type="submit"],
.elementor-button,
.wp-block-button__link {
  background-color: var(--cbt-primario);
  border-color: var(--cbt-primario);
  color: #FFF;
  border-radius: var(--cbt-raggio);
  font-weight: 600;
}
.button:hover,
button:hover,
input[type="submit"]:hover,
.elementor-button:hover,
.wp-block-button__link:hover {
  background-color: var(--cbt-primario-hover);
  border-color: var(--cbt-primario-hover);
  color: #FFF;
}

/* Bottone secondario: contorno blu, mai un colore di allerta */
.cbt-button-secondario,
.elementor-button.cbt-button-secondario {
  background-color: transparent;
  border: 2px solid var(--cbt-primario);
  color: var(--cbt-primario);
}
.cbt-button-secondario:hover,
.elementor-button.cbt-button-secondario:hover {
  background-color: var(--cbt-primario);
  color: #FFF;
}

/* Variante su fondo scuro: usata nell'hero e nella fascia "Richiedi un servizio" */
.cbt-button-chiaro,
.elementor-button.cbt-button-chiaro {
  background-color: transparent;
  border: 2px solid #FFF;
  color: #FFF;
}
.cbt-button-chiaro:hover,
.elementor-button.cbt-button-chiaro:hover {
  background-color: #FFF;
  color: var(--cbt-primario);
}

/* --- Titolo di sezione con filetto arancione -----------------------------
   È uno dei due soli usi ammessi dell'arancione del marchio nell'interfaccia:
   elemento decorativo, non cliccabile, non informativo. */
.cbt-titolo-sezione {
  position: relative;
  padding-bottom: .6rem;
  margin-bottom: 1.6rem;
}
.cbt-titolo-sezione::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 4px;
  border-radius: var(--cbt-raggio-sm);
  background: var(--cbt-arancio-brand);
}
.cbt-titolo-sezione.cbt-centrato {
  text-align: center;
}
.cbt-titolo-sezione.cbt-centrato::after {
  left: 50%;
  transform: translateX(-50%);
}

/* --- Numeri delle statistiche: secondo e ultimo uso dell'arancione -------- */
.cbt-numero {
  display: block;
  font-size: clamp(36px, 26px + 2.4vw, 52px);
  font-weight: 800;
  line-height: 1;
  color: var(--cbt-arancio-brand);
}
.cbt-numero-etichetta {
  display: block;
  margin-top: .4rem;
  color: var(--cbt-testo-tenue);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* --- Fasce ---------------------------------------------------------------- */
.cbt-sezione-alt {
  background: var(--cbt-sfondo-alt);
}
.cbt-sezione-blu {
  background: var(--cbt-primario);
  color: #FFF;
}
.cbt-sezione-blu h1,
.cbt-sezione-blu h2,
.cbt-sezione-blu h3,
.cbt-sezione-blu p {
  color: #FFF;
}
.cbt-sezione-blu .cbt-titolo-sezione::after {
  background: #FFF;
}

/* --- Codice fiscale in evidenza (pagina e fascia 5x1000) ------------------ */
.cbt-codice-fiscale {
  display: inline-block;
  padding: .6rem 1.1rem;
  border: 2px dashed var(--cbt-bordo);
  border-radius: var(--cbt-raggio);
  background: var(--cbt-sfondo);
  color: var(--cbt-testo);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(20px, 16px + 1.2vw, 28px);
  font-weight: 700;
  letter-spacing: .08em;
  user-select: all; /* un clic seleziona tutto il codice: si copia in un gesto */
}

/* --- Tabelle: usate nelle pagine Trasparenza ------------------------------ */
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid var(--cbt-bordo);
  padding: .7rem .9rem;
  text-align: left;
}
th {
  background: var(--cbt-sfondo-alt);
  font-weight: 700;
}

/* Su mobile le tabelle scorrono invece di sfondare il viewport */
.entry-content table,
.entry table {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .entry-content table,
  .entry table {
    display: table;
    white-space: normal;
  }
}

/* --- Contenuto principale ------------------------------------------------- */
.entry-content img,
.entry img {
  height: auto;
  max-width: 100%;
}

/* --- Accordion: <details> nativo --------------------------------------------
   Sostituisce gli [su_spoiler] del sito legacy (Task 6). Si usa l'elemento
   nativo invece di un widget: funziona senza JavaScript, è annunciato
   correttamente dagli screen reader e apre alla ricerca da tastiera del
   browser, cosa che un accordion costruito a mano non fa. */
.cbt-spoiler {
  border: 1px solid var(--cbt-bordo);
  border-radius: var(--cbt-raggio);
  margin: 0 0 .75rem;
  background: var(--cbt-sfondo);
}
.cbt-spoiler > summary {
  cursor: pointer;
  padding: .85rem 1rem;
  font-weight: 700;
  color: var(--cbt-primario);
  list-style: none;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.cbt-spoiler > summary::-webkit-details-marker {
  display: none;
}
/* Indicatore di stato disegnato in CSS: ruota all'apertura. Non è un'icona
   di un font esterno, così non dipende da FontAwesome. */
.cbt-spoiler > summary::before {
  content: "";
  flex: 0 0 auto;
  width: .5rem;
  height: .5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .15s ease;
}
.cbt-spoiler[open] > summary::before {
  transform: rotate(45deg);
}
.cbt-spoiler > summary:hover {
  background: var(--cbt-azzurro-tenue);
}
.cbt-spoiler > *:not(summary) {
  padding: 0 1rem;
}
.cbt-spoiler > *:last-child {
  padding-bottom: 1rem;
}
/* Gli iframe ereditati dal legacy hanno larghezze fisse che sfondano il
   layout su mobile. Qui si riportano dentro il contenitore. */
.cbt-spoiler iframe {
  max-width: 100%;
  border: 0;
}

/* --- Pulsanti convertiti dagli [su_button] legacy ------------------------- */
.cbt-button-wrap {
  margin: 1.2rem 0;
}
.cbt-button-desc {
  display: block;
  font-weight: 400;
  font-size: .85em;
  opacity: .85;
}

/* --- Segnaposto redazionale ----------------------------------------------
   Marca ciò che manca ancora. Volutamente NEUTRO: giallo e arancione
   direbbero "attenzione, allerta", e quei colori qui non c'entrano nulla. */
.cbt-da-completare {
  border-left: 4px solid var(--cbt-bordo);
  background: var(--cbt-sfondo-alt);
  padding: .7rem .9rem;
  color: var(--cbt-testo-tenue);
  font-size: .95em;
}

/* --- Elenco delle schede "Cosa fare in caso di" ---------------------------
   Undici voci in colonna singola diventano una lista lunga da scorrere. In
   griglia si abbracciano con lo sguardo, che è quello che serve a chi cerca
   il proprio rischio in fretta. Nessun colore: qui verde, giallo, arancione e
   rosso significherebbero "livello di allerta", e non è questo il caso. */
.cbt-elenco-schede {
  list-style: none;
  margin: 1.2rem 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: .6rem;
}
.cbt-elenco-schede li {
  margin: 0;
}
.cbt-elenco-schede a {
  display: block;
  padding: .8rem 1rem;
  border: 1px solid var(--cbt-bordo);
  border-radius: var(--cbt-raggio);
  background: var(--cbt-sfondo);
  font-weight: 600;
  text-decoration: none;
}
.cbt-elenco-schede a:hover,
.cbt-elenco-schede a:focus {
  background: var(--cbt-azzurro-tenue);
  border-color: var(--cbt-accento);
}

/* --- Larghezza della colonna negli articoli --------------------------------
   Gli articoli del blog sono a larghezza piena (impostazione del tema, non
   nostra): senza un limite il testo correrebbe per tutta la pagina, ben oltre
   i 50-75 caratteri per riga in cui l'occhio ritrova comodamente l'inizio
   della riga successiva.

   Le pagine invece hanno la barra laterale destra, che la colonna la limita
   già da sé.

   NOTA: qui 1rem = 10px, quindi 78rem sono 780px. */
.single-post .entry > p,
.single-post .entry > ul,
.single-post .entry > ol,
.single-post .entry > h2,
.single-post .entry > h3,
.single-post .entry > blockquote,
.single-post .entry > details,
.single-post .entry > .fluentform {
  max-width: 78rem;
  margin-left: auto;
  margin-right: auto;
}

/* L'immagine in evidenza sta fuori da .entry, quindi il limite della colonna
   non la toccava: veniva stampata a 1060 px, più larga del testo che
   accompagna. Il selettore ripete .content-max-width perché OceanWP limita
   quella stessa immagine a 1100 px con tre classi: senza pareggiarle, la
   nostra regola perdeva. */
.single-post.content-max-width .thumbnail,
.single-post .thumbnail {
  max-width: 78rem;
  margin-left: auto;
  margin-right: auto;
}
/* --- Riquadro nella barra laterale ---------------------------------------- */

.cbt-riquadro-laterale {
  margin: 0 0 3rem;
}
/* Il selettore ripete .sidebar-container.widget-area perche' OceanWP
   sottolinea ogni link della barra con due classi: e' giusto per i link di
   un elenco, non per un riquadro dove a essere cliccabile e' tutto. */
.sidebar-container.widget-area .cbt-riquadro-laterale__link {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--cbt-bordo);
  border-radius: var(--cbt-raggio);
  overflow: hidden;
  transition: box-shadow .18s ease;
}
.sidebar-container.widget-area .cbt-riquadro-laterale__link:hover,
.sidebar-container.widget-area .cbt-riquadro-laterale__link:focus-visible {
  box-shadow: var(--cbt-ombra-alta);
}
.cbt-riquadro-laterale img {
  display: block;
  width: 100%;
  height: auto;
}
.cbt-riquadro-laterale__testo {
  display: block;
  padding: 1.2rem 1.4rem 1.4rem;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cbt-testo);
}
/* Avvisa che si esce dal sito. Non è nascosto agli occhi: chi clicca ha
   diritto di sapere dove va prima di andarci, non dopo. */
.cbt-riquadro-laterale__fuori {
  display: block;
  margin-top: .6rem;
  font-size: 12.5px;
  color: var(--cbt-testo-tenue);
}
.cbt-riquadro-laterale__link:hover .cbt-riquadro-laterale__fuori,
.cbt-riquadro-laterale__link:focus-visible .cbt-riquadro-laterale__fuori {
  color: var(--cbt-primario);
}

/* Il titolo del riquadro. Non usa il filetto arancione delle sezioni: quello
   segna dove comincia una parte della pagina, qui siamo in una colonna di
   contorno e ripeterlo lo svaluterebbe. */
.cbt-riquadro-laterale__titolo {
  font-size: 19px;
  line-height: 1.25;
  margin: 0 0 1rem;
  color: var(--cbt-primario);
}

/* Lo stemma è tondo e su fondo bianco: senza una fascia sua galleggerebbe
   dentro il riquadro invece di riempirlo come fa il logo giallo dell'altro. */
.cbt-riquadro-laterale__stemma {
  display: block;
  padding: 2rem;
  background: var(--cbt-azzurro-tenue);
  text-align: center;
}
.cbt-riquadro-laterale__stemma img {
  width: 130px;
  max-width: 60%;
  margin: 0 auto;
}

/* La riga che dice dove si va: è il richiamo all'azione del riquadro. */
.cbt-riquadro-laterale__azione {
  display: block;
  margin-top: .8rem;
  font-weight: 600;
  color: var(--cbt-primario);
}
.sidebar-container.widget-area .cbt-riquadro-laterale__link:hover .cbt-riquadro-laterale__azione,
.sidebar-container.widget-area .cbt-riquadro-laterale__link:focus-visible .cbt-riquadro-laterale__azione {
  text-decoration: underline;
}

/* --- Video incorporati -----------------------------------------------------
   Erano larghi quanto la colonna: 787x431, cioè più alti di mezzo schermo. In
   una scheda che spiega cosa fare in un'emergenza il video è un esempio, non
   il contenuto: rimpicciolirlo lo rimette al suo posto e fa vedere prima il
   testo che viene dopo.

   Restano allineati a sinistra come il testo, non centrati: centrarli
   spezzerebbe il filo della lettura senza motivo.

   NOTA: qui 1rem = 10px, quindi 48rem sono 480px. Il rapporto 16/9 lo tiene
   aspect-ratio, così l'altezza segue la larghezza a qualunque misura. */
.responsive-video-wrap,
iframe[src*="youtube"] {
  max-width: 48rem;
  margin-left: 0;
  margin-right: 0;
}
/* Il secondo selettore serve agli iframe scritti a mano dentro un articolo,
   che WordPress non avvolge in .responsive-video-wrap. Uno di quelli era
   566x600, quasi quadrato: il video ci stava dentro con le bande nere sopra
   e sotto, perché nell'attributo c'era height="600". aspect-ratio rimette le
   proporzioni giuste a prescindere da come e' stato incollato. */
.responsive-video-wrap iframe,
iframe[src*="youtube"] {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--cbt-raggio);
}

/* --- Bollettini letti dal sito della Regione ------------------------------- */

.cbt-bollettini {
  list-style: none;
  margin: 1.8rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.cbt-bollettino {
  border: 1px solid var(--cbt-bordo);
  border-left: 4px solid var(--cbt-bordo);
  border-radius: var(--cbt-raggio);
  padding: 1.4rem 1.6rem;
  background: #FFF;
}
/* Il filetto colorato distingue un'allerta da un bollettino di routine a
   colpo d'occhio. Non è però l'unico segno: c'è anche l'etichetta scritta,
   perché chi non distingue i colori deve poterlo capire lo stesso. */
.cbt-bollettino--allerta {
  border-left-color: var(--cbt-arancio-brand);
  background: var(--cbt-azzurro-tenue);
}

.cbt-bollettino__etichetta {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cbt-testo-tenue);
  margin-bottom: .4rem;
}
.cbt-bollettino--allerta .cbt-bollettino__etichetta {
  color: var(--cbt-primario);
}

.cbt-bollettino__titolo {
  display: block;
  font-weight: 600;
  line-height: 1.35;
}
.cbt-bollettino__data {
  display: block;
  margin-top: .4rem;
  font-size: 13.5px;
  color: var(--cbt-testo-tenue);
}
.cbt-bollettino__sintesi {
  display: block;
  margin-top: .8rem;
  line-height: 1.55;
}
/* Dice che cosa si sta per aprire: un PDF, e fuori dal sito. */
.cbt-bollettino__pdf,
.cbt-bollettini__fuori {
  display: block;
  margin-top: .6rem;
  font-size: 12.5px;
  color: var(--cbt-testo-tenue);
}

.cbt-bollettini__fonte {
  margin-top: 1.6rem;
}

/* Quando la Regione non risponde. Non è un errore da nascondere: è
   un'informazione che chi legge deve avere. */
.cbt-bollettini--muto {
  border: 1px solid var(--cbt-bordo);
  border-left: 4px solid var(--cbt-arancio-brand);
  border-radius: var(--cbt-raggio);
  padding: 1.6rem 1.8rem;
  background: var(--cbt-azzurro-tenue);
}

/* I tre riquadri con i colori dell'allerta, uno accanto all'altro. Erano in un
   <p align="center"> e andavano a capo dove capitava. */
.cbt-colori-allerta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1.8rem 0;
}
.cbt-colori-allerta img {
  width: 100%;
  max-width: 23.7rem;
  height: auto;
  border-radius: var(--cbt-raggio);
  border: 1px solid var(--cbt-bordo);
}

/* Nota in coda a una sezione: attribuzione, licenza, fonte. */
.cbt-nota {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--cbt-testo-tenue);
}

/* La mappa radar. Le misure 650x460 stavano nell'attributo dell'iframe: su un
   telefono la mappa sarebbe uscita dallo schermo. Qui la larghezza si adatta e
   l'altezza la ricava dalle proporzioni originali. */
.cbt-mappa-radar {
  max-width: 70rem;
  margin: 1.8rem 0;
}
.cbt-mappa-radar iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 700 / 460;
  border: 1px solid var(--cbt-bordo);
  border-radius: var(--cbt-raggio);
}

/* --- Ultimi terremoti dall'INGV -------------------------------------------- */

.cbt-terremoti {
  list-style: none;
  margin: 1.8rem 0 1.4rem;
  padding: 0;
  display: grid;
  gap: .8rem;
}
.cbt-terremoto {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--cbt-bordo);
  border-radius: var(--cbt-raggio);
  background: #FFF;
}

/* La magnitudo è il dato che si cerca per primo: sta a sinistra, isolata, e si
   legge da lontano. La parola «magnitudo» sopra il numero serve a chi non
   riconosce la scala: un «2,4» da solo non dice niente. */
.cbt-terremoto__magnitudo {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 78px;
  padding: .5rem .6rem;
  border-radius: var(--cbt-raggio-sm);
  background: var(--cbt-azzurro-tenue);
  color: var(--cbt-primario);
}
.cbt-terremoto__etichetta {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .85;
}
.cbt-terremoto__valore {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
}

.cbt-terremoto__dati {
  display: block;
  min-width: 0;
}
.cbt-terremoto__luogo {
  display: block;
  font-weight: 600;
  line-height: 1.35;
}
.cbt-terremoto__quando {
  display: block;
  margin-top: .2rem;
  font-size: 13.5px;
  color: var(--cbt-testo-tenue);
}

@media (max-width: 520px) {
  .cbt-terremoto {
    gap: 1.2rem;
    padding: 1rem 1.1rem;
  }
  .cbt-terremoto__magnitudo {
    min-width: 66px;
  }
}

/* La definizione in apertura del Piano Comunale. Era spezzata in tre titoli
   centrati: adesso è un blocco solo, staccato dal testo corrente perché è una
   definizione e non un paragrafo qualsiasi. */
.cbt-definizione {
  margin: 2rem 0;
  padding: 1.6rem 1.8rem;
  border-left: 4px solid var(--cbt-accento);
  background: var(--cbt-azzurro-tenue);
  font-size: 18px;
  line-height: 1.55;
}

/* Lo stemma che stava dentro un titolo. */
.cbt-stemma-pagina {
  text-align: center;
  margin: 1.6rem 0 2.2rem;
}
.cbt-stemma-pagina img {
  display: inline-block;
  max-width: 100%;
  height: auto;
}

/* Avviso dentro un bottone che porta fuori dal sito. Sta dentro il bottone e
   non accanto: chi legge deve sapere dove va prima di premere, non dopo. */
.cbt-button-fuori {
  display: block;
  margin-top: .3rem;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.35;
  opacity: .85;
}

/* Stacco sopra i titoli di sezione quando stanno dentro il testo di una
   pagina. Il selettore usa il figlio diretto apposta: nella home i titoli
   stanno dentro <section><div>, dove lo spazio lo dà già il riempimento della
   sezione, e aggiungerne altro li scollerebbe. */
.entry > .cbt-titolo-sezione,
.entry-content > .cbt-titolo-sezione {
  margin-top: 3.4rem;
}
.entry > .cbt-divisore + .cbt-titolo-sezione,
.entry-content > .cbt-divisore + .cbt-titolo-sezione {
  margin-top: 0;
}

/* --- Tabella dei veicoli in dotazione -------------------------------------- */

.cbt-veicoli {
  width: 100%;
  border-collapse: collapse;
  margin: 1.6rem 0 0;
}
.cbt-veicoli th,
.cbt-veicoli td {
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--cbt-bordo);
  text-align: left;
  vertical-align: middle;
}
.cbt-veicoli thead th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--cbt-testo-tenue);
  border-bottom-width: 2px;
}
/* La colonna della foto è strettissima: così la tabella sta su un telefono
   senza scorrimento laterale, che è il difetto tipico delle tabelle con
   immagini dentro. */
.cbt-veicoli__foto {
  width: 92px;
  padding-right: 0;
}
.cbt-veicoli__anno {
  color: var(--cbt-testo-tenue);
  font-size: 14px;
  white-space: nowrap;
}

/* Il posto della foto, finché la foto non c'è. Il tratteggio dice «qui ci va
   qualcosa» invece di sembrare una cella vuota per errore. */
.cbt-segnaposto {
  display: block;
  width: 92px;
  aspect-ratio: 4 / 3;
  border: 1px dashed var(--cbt-bordo);
  border-radius: var(--cbt-raggio-sm);
  background: var(--cbt-azzurro-tenue);
}

@media (max-width: 520px) {
  .cbt-veicoli th,
  .cbt-veicoli td {
    padding: .8rem .9rem;
  }
  .cbt-veicoli__foto,
  .cbt-segnaposto {
    width: 68px;
  }
}

/* La foto di gruppo. Prima era una miniatura da 300 px che galleggiava dentro
   il testo: a quella misura le persone non si distinguono, e sono il motivo
   per cui una foto di gruppo si mette. */
.cbt-foto-gruppo {
  margin: 2.4rem 0;
}
.cbt-foto-gruppo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--cbt-raggio);
}
.cbt-foto-gruppo figcaption {
  margin-top: .8rem;
  font-size: 14px;
  color: var(--cbt-testo-tenue);
}

/* L'avviso dentro un collegamento con icona: dice che si apre un PDF, quanto
   pesa e che si apre in una scheda nuova. Sta dentro il collegamento e non
   accanto, perché fa parte di quello che si sta per fare. */
.cbt-link-fuori {
  display: block;
  margin-top: .15rem;
  font-size: 12px;
  font-weight: 400;
  color: var(--cbt-testo-tenue);
}

/* --- Modulo di adesione: i campi corti a coppie ----------------------------
   «Nato nel» sono quattro cifre e occupava una riga intera: il modulo sembrava
   più lungo di quello che è, e un modulo che sembra lungo si abbandona.

   Si impagina con il CSS invece che con i contenitori a colonne di Fluent
   Forms: se un domani il plugin cambia quella struttura, qui si perde
   l'affiancamento e non il modulo. Sotto i 600 px tornano tutti a riga intera
   da soli. */
/* Il contenitore da rendere flessibile e' il <fieldset> dentro il form, non
   il form: e' li' che Fluent Forms mette i gruppi dei campi. */
.fluentform_wrapper_5 .frm-fluent-form > fieldset {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.8rem;
  border: 0;
  padding: 0;
  margin: 0;
}
.fluentform_wrapper_5 .frm-fluent-form > fieldset > * {
  flex: 1 1 100%;
  min-width: 0;
}
@media (min-width: 600px) {
  .fluentform_wrapper_5 .frm-fluent-form > fieldset > .cbt-meta {
    flex: 1 1 calc(50% - .9rem);
  }
}

/* Il messaggio di conferma dopo l'invio di un modulo. Verde, perché è la
   risposta a «è andata?» e quella domanda si risponde con un colore prima che
   con una frase.

   Fondo tenue e testo scuro: sul verde pieno il bianco sta a 3.43:1, sotto la
   soglia. Così invece si è a 14.47:1, e il verde pieno resta il filetto che dà
   il segnale. */
.ff-message-success {
  background: var(--cbt-verde-tenue);
  color: var(--cbt-testo);
  border: 1px solid var(--cbt-allerta-verde);
  border-left-width: 4px;
  border-radius: var(--cbt-raggio);
  padding: 1.6rem 1.8rem;
  font-size: 17px;
  line-height: 1.55;
}

/* Un titolo di sezione che è anche un collegamento non va sottolineato: la
   sottolineatura serve a distinguere un link dentro un testo corrente, e un
   titolo grande e colorato si distingue già da solo. All'hover invece torna,
   perché lì sta indicando dove si va.

   L'id serve: OceanWP sottolinea ogni link di pagina con un selettore che pesa
   sei classi. */
#content .entry .cbt-titolo-sezione a,
#content .entry-content .cbt-titolo-sezione a {
  text-decoration: none;
  color: inherit;
}
#content .entry .cbt-titolo-sezione a:hover,
#content .entry .cbt-titolo-sezione a:focus-visible,
#content .entry-content .cbt-titolo-sezione a:hover,
#content .entry-content .cbt-titolo-sezione a:focus-visible {
  color: var(--cbt-primario);
  text-decoration: underline;
}

/* Foto d'archivio affiancata al testo, con la sua didascalia. Il float e la
   larghezza fissa vengono dall'HTML (è come le scrive l'editor di WordPress);
   qui si sistemano solo il margine e la didascalia. Sotto i 600px il float
   sparisce: una foto larga 456px accanto al testo, su un telefono, lascia al
   testo una colonna di poche parole. */
.cbt-figura {
  max-width: 100%;
  margin: 0 0 1.6rem 2.4rem;
}
.cbt-figura img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--cbt-raggio);
}
.cbt-figura figcaption {
  margin-top: .8rem;
  font-size: 14px;
  line-height: 1.45;
  color: var(--cbt-testo-tenue);
}
@media (max-width: 600px) {
  .cbt-figura {
    float: none;
    width: auto !important;
    margin: 0 0 1.6rem;
  }
}

/* Simulatore del 5x1000. Un riquadro stretto: il campo da riempire è uno solo
   e allargarlo quanto il testo lo farebbe sembrare un modulo lungo. */
.cbt-simulatore {
  max-width: 42rem;
  margin: 2.4rem 0;
  padding: 2rem 2.4rem;
  border: 1px solid var(--cbt-bordo);
  border-radius: var(--cbt-raggio);
  background: var(--cbt-sfondo-alt);
}
.cbt-simulatore__intro {
  margin: 0 0 1.6rem;
}
.cbt-simulatore__campo {
  margin: 0 0 1.2rem;
}
.cbt-simulatore__campo label {
  display: block;
  margin-bottom: .4rem;
  font-weight: 600;
}
.cbt-simulatore__campo input {
  width: 100%;
  max-width: 22rem;
  padding: .9rem 1.2rem;
  font-size: 16px; /* sotto i 16px iOS ingrandisce la pagina al primo tocco */
  border: 1px solid var(--cbt-bordo);
  border-radius: var(--cbt-raggio-sm);
  background: #fff;
}
.cbt-simulatore__azione {
  margin: 0 0 1.6rem;
}
.cbt-simulatore__bottone {
  padding: .9rem 2rem;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--cbt-blu);
  border: 0;
  border-radius: var(--cbt-raggio-sm);
  cursor: pointer;
}
.cbt-simulatore__bottone:hover,
.cbt-simulatore__bottone:focus-visible {
  background: var(--cbt-blu-scuro);
}
.cbt-simulatore__esito {
  margin: 0 0 1.2rem;
  font-size: 18px;
}
.cbt-simulatore__cifra {
  font-size: 24px;
  color: var(--cbt-blu);
}
.cbt-simulatore__nota {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--cbt-testo-tenue);
}

/* Il riquadro del codice diventa premibile: il puntatore lo dice, il bordo si
   scurisce al passaggio, e il contorno del fuoco resta visibile per chi
   naviga con la tastiera. La classe la mette il JavaScript, quindi senza
   JavaScript il riquadro non finge di essere un pulsante. */
.cbt-codice-fiscale--copiabile {
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.cbt-codice-fiscale--copiabile:hover {
  border-color: var(--cbt-blu);
  background: var(--cbt-sfondo-alt);
}
.cbt-codice-fiscale--copiabile:focus-visible {
  outline: 3px solid var(--cbt-blu);
  outline-offset: 3px;
}

/* «Copiato»: sta accanto al codice e compare solo dopo il clic. Non occupa
   spazio quando è nascosto, altrimenti la riga si sposterebbe a ogni copia. */
.cbt-copiato {
  display: inline-block;
  margin-left: .8rem;
  padding: .3rem .8rem;
  border-radius: var(--cbt-raggio-sm);
  background: var(--cbt-verde-tenue);
  color: #16222E;
  font-size: 14px;
  font-weight: 600;
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s;
}
.cbt-copiato--visibile {
  opacity: 1;
  visibility: visible;
}
.cbt-copiato--errore {
  background: #FDECEC;
  font-weight: 400;
}
@media (prefers-reduced-motion: reduce) {
  .cbt-codice-fiscale--copiabile,
  .cbt-copiato {
    transition: none;
  }
}

/* --- Barra laterale delle pagine «Chi siamo» ------------------------------ */

/* Il riquadro «Sostienici»: pieno, nel blu del sito, perché è l'unica cosa
   della barra che chiede qualcosa a chi legge e deve distinguersi dalle
   scorciatoie, che invece servono solo a spostarsi. */
.sidebar-container.widget-area .cbt-sostieni__link {
  display: block;
  padding: 1.8rem;
  border-radius: var(--cbt-raggio);
  background: var(--cbt-blu-scuro);
  color: #FFF;
  text-decoration: none;
  transition: background-color .18s ease;
}
.sidebar-container.widget-area .cbt-sostieni__link:hover,
.sidebar-container.widget-area .cbt-sostieni__link:focus-visible {
  background: var(--cbt-blu);
  color: #FFF;
}
.cbt-sostieni__titolo {
  display: block;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}
/* Il fregio arancione dei titoli di sezione, in piccolo. */
.cbt-sostieni__titolo::after {
  content: "";
  display: block;
  width: 42px;
  height: 4px;
  margin: .7rem 0 1rem;
  background: var(--cbt-arancio-brand);
  border-radius: 2px;
}
/* La prima riga è l'invito, la seconda la ragione: si distinguono per peso,
   non per colore, perché sul fondo blu un secondo colore diventerebbe un
   terzo elemento da leggere. */
.cbt-sostieni__invito {
  display: block;
  margin-bottom: .7rem;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.45;
}
.cbt-sostieni__testo {
  display: block;
  font-size: 14px;
  line-height: 1.55;
}
.cbt-sostieni__azione {
  display: block;
  margin-top: 1.1rem;
  font-weight: 600;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* Le scorciatoie: un elenco, non un riquadro pieno. Servono a spostarsi in
   fretta, non ad attirare l'attenzione. */
.cbt-scorciatoie__titolo {
  /* Senza grazie: è un'etichetta, non un titolo. Il font con le grazie del
     tema, in maiuscolo e a 13px, si impasta. */
  font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cbt-testo-tenue);
  margin: 0 0 .9rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--cbt-bordo);
}
.cbt-scorciatoie__elenco {
  margin: 0;
  padding: 0;
  list-style: none;
}
.cbt-scorciatoie__elenco li + li {
  margin-top: .1rem;
}
.sidebar-container.widget-area .cbt-scorciatoie__elenco a {
  display: block;
  padding: .55rem 0;
  font-size: 15px;
  text-decoration: none;
  color: var(--cbt-primario);
}
.sidebar-container.widget-area .cbt-scorciatoie__elenco a:hover,
.sidebar-container.widget-area .cbt-scorciatoie__elenco a:focus-visible {
  text-decoration: underline;
  color: var(--cbt-blu-scuro);
}


/* --- Pulsante di donazione ------------------------------------------------
   Un solo pulsante pieno sulla pagina: se ce ne fossero due dello stesso peso
   visivo, chi legge si fermerebbe a scegliere invece di donare. Il bonifico
   resta testo e QR, PayPal ha il pulsante, perché è l'unico dei due che si
   completa davvero con un clic. */
#main .entry a.cbt-dona-bottone,
.cbt-modo a.cbt-dona-bottone,
.entry .cbt-dona-bottone,
.cbt-dona-bottone {
  display: inline-block;
  margin: .4rem 0 1rem;
  padding: 1.1rem 2.2rem;
  background: var(--cbt-primario);
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  text-decoration: none;
  border-radius: 4px;
}
#main .entry a.cbt-dona-bottone:hover,
#main .entry a.cbt-dona-bottone:focus-visible,
.cbt-modo a.cbt-dona-bottone:hover,
.entry .cbt-dona-bottone:hover,
.entry .cbt-dona-bottone:focus-visible,
.cbt-dona-bottone:hover,
.cbt-dona-bottone:focus-visible {
  background: var(--cbt-blu-scuro);
  color: #fff;
  text-decoration: none;
}

/* --- I due modi per donare, affiancati -----------------------------------
   In colonna i due modi si leggono come due passaggi di una procedura —
   prima il bonifico, poi PayPal — e chi arriva in fondo ha già smesso di
   leggere. Affiancati si vedono per quello che sono: due alternative allo
   stesso livello.
   Sotto i 767 px tornano in colonna: due riquadri affiancati su un telefono
   ridurrebbero il QR sotto la misura in cui una fotocamera lo aggancia. */
.cbt-modi {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.4rem;
  margin: 2rem 0 2.6rem;
}
@media (max-width: 767px) {
  .cbt-modi {
    grid-template-columns: 1fr;
  }
}
.cbt-modo {
  display: flex;
  flex-direction: column;
  padding: 2.4rem 2.2rem;
  background: var(--cbt-sfondo-alt);
  border: 1px solid var(--cbt-bordo);
  border-radius: 10px;
}
.entry .cbt-modo__titolo {
  margin: 0 0 .6rem;
  font-size: 22px;
}
.cbt-modo p {
  margin: 0 0 1.4rem;
}
/* I dati del conto restano attaccati all'IBAN a cui si riferiscono. */
.cbt-modo__dati {
  font-size: 15px;
  line-height: 1.5;
}
/* Il QR è appoggio, non protagonista: il primo posto ce l'hanno l'IBAN e il
   pulsante, che sono i modi con cui si dona davvero da computer. */
.cbt-qr-img {
  display: block;
  width: 150px;
  height: auto;
  margin: auto 0 0;
  padding: .8rem;
  background: #fff;
  border: 1px solid var(--cbt-bordo);
  border-radius: 8px;
}
.cbt-modo__nota {
  margin: 1rem 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--cbt-testo-tenue);
}
.cbt-modo .cbt-dona-bottone {
  align-self: flex-start;
  margin: 0;
}

/* Dentro il riquadro l'IBAN è più stretto che altrove: alla misura usata per
   il codice fiscale andava a capo in mezzo, e un IBAN spezzato è il modo più
   facile per far sbagliare chi lo ricopia a mano. */
.cbt-modo .cbt-codice-fiscale {
  display: block;
  font-size: clamp(15px, 11px + .9vw, 20px);
  letter-spacing: .05em;
  text-align: center;
  /* a capo semmai fra i gruppi di cifre, mai dentro a uno */
  overflow-wrap: break-word;
  word-break: normal;
}

/* --- Pagine a tutta larghezza ---------------------------------------------
   Togliere la colonna laterale vuota libera spazio, ma il testo semplice non
   deve prendersi tutto: a 1170 px una riga arriva a centotrenta caratteri e
   l'occhio perde il capo della riga successiva. Quindi le righe di testo
   restano larghe come altrove, mentre griglie, moduli e tabelle — che dallo
   spazio in più ci guadagnano davvero — se lo prendono tutto. */
.content-full-width .entry > p,
.content-full-width .entry > ul,
.content-full-width .entry > ol,
.content-full-width .entry > blockquote,
.content-full-width .entry > h2,
.content-full-width .entry > h3,
.content-full-width .entry > h4 {
  max-width: 78rem;
}

/* Tre tessere invece di due: sotto i 900 px passano a due, sotto i 767 a una.
   Tre colonne su un tablet lascerebbero righe di quattro parole. */
.cbt-modi--tre {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) {
  .cbt-modi--tre {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .cbt-modi--tre {
    grid-template-columns: 1fr;
  }
}
/* Il collegamento sta in fondo alla tessera, alla stessa altezza in tutte e
   tre: è l'ultima cosa che si legge e la sola su cui si clicca. */
.cbt-modo__azione {
  margin: auto 0 0;
  padding-top: 1rem;
  font-weight: 600;
}

/* --- Pagina centrata (Area Soci) ------------------------------------------
   Una pagina che dice una cosa sola e chiede un solo gesto: niente colonne,
   niente testo lungo, il pulsante al centro dove l'occhio arriva da solo. */
.cbt-centrato {
  max-width: 56rem;
  margin: 2rem auto 3rem;
  text-align: center;
}
.cbt-centrato__stemma {
  display: block;
  width: 180px;
  height: auto;
  margin: 0 auto 1.6rem;
}
.entry .cbt-centrato__titolo {
  margin: 0 0 1.2rem;
}
.cbt-centrato p {
  margin: 0 0 1.6rem;
}
.cbt-centrato__nota {
  margin: 1.6rem 0 0;
  font-size: 14px;
  color: var(--cbt-testo-tenue);
}

/* Un riquadro da solo, fuori dalla griglia: sulla pagina Emergenze richiama
   l'app del 112 sotto ai quattro riquadri di navigazione. */
.cbt-modo--largo {
  margin: 2.4rem 0;
}