/* Soccorso Stradale Spinelli — stile proprio, preso dal marchio e non da Lotario:
   testo in Barlow (nato dai cartelli stradali), titoli in Barlow Condensed corsivo come la scritta SPINELLI,
   spigoli vivi, pulsanti obliqui, righe oblique a 60° come la fascia del logo, riquadri a cartello stradale blu. */

/* Caratteri serviti dal sito (nessuna richiesta a Google): 4 file, alfabeto latino */
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/barlow-400-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: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/assets/fonts/barlow-600-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: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/barlow-condensed-700-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: 'Barlow Condensed'; font-style: italic; font-weight: 800; font-display: swap;
  src: url('/assets/fonts/barlow-condensed-800i-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; }

:root {
  --brand-red: #B90304;
  --brand-red-700: #960203;
  --brand-blue: #0A358F;
  --brand-black: #020613;
  --segnale: #FFD24A;                 /* chilometri sui cartelli */
  --f-titoli: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  /* righe oblique della fascia "SOCCORSO STRADALE" del logo */
  --righe: repeating-linear-gradient(-60deg, var(--brand-red) 0 4px, transparent 4px 8px);
}

html { scroll-behavior: smooth; }
body { font-size: 1.0625rem; }
strong, b { font-weight: 600; }

/* Titoli: corsivo condensato maiuscolo, come la scritta del logo. Nei testi lunghi (prose) restano diritti */
:is(h1, h2):not(.prose *) {
  font-family: var(--f-titoli); font-style: italic; font-weight: 800;
  text-transform: uppercase; letter-spacing: .005em; line-height: .98 !important;
}
.prose h1 { font-family: var(--f-titoli); font-style: italic; font-weight: 800; text-transform: uppercase; letter-spacing: .005em; line-height: .98; }
.prose :is(h2, h3) { font-family: var(--f-titoli); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.prose h2::after { content: ""; display: block; width: 46px; height: 7px; margin-top: .4em; background: var(--righe); }

/* Occhiello sopra i titoli: fascia a righe + etichetta (su fondo scuro: .chiaro) */
.occhiello {
  display: inline-flex; align-items: center; gap: .65rem;
  font-family: var(--f-titoli); font-weight: 700; font-size: .95rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand-blue);
}
.occhiello::before { content: ""; flex: none; width: 32px; height: 11px; background: var(--righe); }
.occhiello.chiaro { color: #FF8A8C; }
.occhiello.chiaro::before { --brand-red: #FF5B5E; }

/* Menu dell'intestazione scura: barra rossa sotto la voce (piena sulla pagina in cui si è) */
.voce-menu { position: relative; display: flex; align-items: center; padding: 0 .95rem; color: rgba(255, 255, 255, .82); transition: color .2s ease; }
.voce-menu:hover, .voce-menu[aria-current="page"] { color: #fff; }
.voce-menu::after { content: ""; position: absolute; left: .95rem; right: .95rem; bottom: 0; height: 4px; background: var(--brand-red);
  transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.voce-menu:hover::after, .voce-menu[aria-current="page"]::after { transform: scaleX(1); }
.voce-menu:focus-visible { outline: 2px solid #fff; outline-offset: -8px; }

/* Fascia a righe in cima a una sezione scura o al piè di pagina */
.righe-sopra { position: relative; }
.righe-sopra::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--righe); }

/* Angolo smussato (foto e pannelli): in alto a destra; .smusso-bs in basso a sinistra */
.smusso { clip-path: polygon(0 0, calc(100% - var(--sm, 22px)) 0, 100% var(--sm, 22px), 100% 100%, 0 100%); }
.smusso-bs { clip-path: polygon(0 0, 100% 0, 100% 100%, var(--sm, 22px) 100%, 0 calc(100% - var(--sm, 22px))); }

/* Cartello stradale: fondo blu, bordo bianco interno, chilometri in giallo */
.cartello { position: relative; background: var(--brand-blue); color: #fff; border-radius: 6px; }
.cartello::after { content: ""; position: absolute; inset: 5px; border: 2px solid rgba(255, 255, 255, .92); border-radius: 3px; pointer-events: none; }
.km { font-family: var(--f-titoli); font-weight: 700; color: var(--segnale); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Cartello di direzione (comuni vicini, altre province): blu a punta di freccia, chilometri in giallo */
.cartello-dir { background: var(--brand-blue); color: #fff; padding-right: 30px !important;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%); transition: background-color .2s ease; }
.cartello-dir:hover { background: #072A73; }
.cartello-dir:focus-visible { outline: none; box-shadow: inset 0 0 0 3px #fff; }

/* Alpine.js: nascondi elementi prima dell'inizializzazione per evitare FOUC */
[x-cloak] { display: none !important; }

/* Barra fissa del telefono: lo spazio per non coprire il fondo sta dentro il piè di pagina (footer.php, pb-20),
   così non resta una striscia bianca tra l'ultima sezione e il piè di pagina */
@media (max-width: 1023px) {
  .sticky-cta { padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px)); transition: transform .3s cubic-bezier(.2, .7, .3, 1), visibility 0s linear 0s; }
  /* Fuori scena mentre il «Chiama» dell'apertura è a vista (script in footer.php) */
  .sticky-cta.barra-via { transform: translateY(calc(100% + 16px)); visibility: hidden; transition: transform .22s ease-in, visibility 0s linear .22s; }
  .sticky-cta.senza-moto { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sticky-cta, .sticky-cta.barra-via { transition: none; }
}

/* Galleria mezzi */
.gallery-thumb { transition: transform 0.2s ease, border-color 0.2s ease; }
.gallery-thumb:hover { transform: scale(1.03); }

/* Scorrimento orizzontale senza barra (carosello, righe di foto su telefono) */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Carosello: il puntino attivo si riempie mentre la foto resta ferma */
@keyframes carosello-avanza { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.carosello-progress { transform-origin: left center; animation: carosello-avanza 5s linear forwards; }

/* Comparsa allo scorrimento (attributi messi da site.js solo sui blocchi fuori schermo).
   Le transizioni di colore restano attive, così un hover durante la comparsa non scatta. */
.reveal-pronto [data-reveal] {
  opacity: 0; transform: translateY(12px);
  transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .2, 1),
              background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.reveal-pronto [data-reveal].is-visible { opacity: 1; transform: none; }

/* .scheda = riquadro cliccabile (servizi, comuni): spigoli vivi, barra blu a sinistra che al passaggio
   del mouse diventa a righe rosse, la scheda si alza di 2 px. L'icona sta in un quadrato blu, come un cartello */
.scheda { position: relative; border-radius: 0 !important; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.scheda::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 5px; background: var(--brand-blue); transition: opacity .2s ease; }
.scheda::after { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 5px; background: var(--righe); opacity: 0; transition: opacity .2s ease; }
.scheda:hover::after, .scheda:focus-visible::after { opacity: 1; }
.scheda:hover, .scheda:focus-visible { transform: translateY(-2px); box-shadow: 0 14px 28px -18px rgba(2, 6, 19, .45); border-color: #C9D3E6; }
.scheda:focus-visible { outline: 3px solid var(--brand-blue); outline-offset: 2px; }
.scheda .scheda-icona { border-radius: 0 !important; background: var(--brand-blue) !important; color: #fff !important; --ico-acc: #FF8A8C; }

/* Pulsanti: maiuscolo condensato a spigoli vivi. .obl = pulsante d'azione obliquo come la scritta del logo
   (il taglio obliquo nasconderebbe il bordo del focus: al suo posto due anelli interni) */
.btn { border-radius: 2px !important; font-family: var(--f-titoli); font-weight: 700; text-transform: uppercase; letter-spacing: .045em;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease; }
.btn:hover { box-shadow: 0 8px 18px -10px rgba(2, 6, 19, .45); }
.btn:active { transform: translateY(1px); }
/* .obl e tutti i pulsanti pieni (rosso Chiama, verde posizione, blu) sono obliqui */
:is(.obl, .btn.bg-brand-red, .btn.bg-green-700, .btn.bg-brand-blue) {
  border-radius: 0 !important; clip-path: polygon(11px 0, 100% 0, calc(100% - 11px) 100%, 0 100%);
  padding-left: max(1.6rem, 26px); padding-right: max(1.6rem, 26px);
}
:is(.obl, .btn.bg-brand-red, .btn.bg-green-700, .btn.bg-brand-blue):hover { box-shadow: none; }
:is(.obl, .btn.bg-brand-red, .btn.bg-green-700, .btn.bg-brand-blue):focus-visible { outline: none; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px var(--brand-black); }

/* Apertura delle pagine interne (apertura.php): foto tagliata in obliquo in basso, filo rosso lungo il taglio */
.taglio-basso { clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%); }
.taglio-basso-bordo { transform: translateY(9px); }

/* Percorso (briciole) nel pannello scuro: maiuscoletto condensato, frecce rosse tra le voci */
.briciole { font-family: var(--f-titoli); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .85rem; color: rgba(255, 255, 255, .62); }
.briciole a:hover { color: #fff; }
.briciole .sep { display: inline-block; margin: 0 .45rem; color: #FF5B5E; }

/* Pulsanti obliqui in spazi stretti (barra fissa e menu del telefono): taglio e margini più piccoli */
.obl-stretto :is(.obl, .btn.bg-brand-red, .btn.bg-green-700, .btn.bg-brand-blue) {
  padding-left: 14px; padding-right: 14px; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}

/* Apertura della home: foto con taglio obliquo (sul telefono in basso, sul computer a sinistra) e un filo rosso
   lungo il taglio (.taglio-bordo è lo stesso taglio spostato di qualche pixel, di colore rosso) */
.taglio-hero { clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); }
.taglio-bordo { transform: translateY(8px); }
@media (min-width: 1024px) {
  .taglio-hero { clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%); }
  .taglio-bordo { transform: translateX(-10px); }
  .hero-testo { padding-left: max(1.5rem, calc((100vw - 80rem) / 2 + 1.5rem)); }
}

/* Pulsante "Chiama": ogni 7 secondi un riflesso attraversa il pulsante e la cornetta squilla, insieme */
@keyframes luccica { 0% { transform: translateX(-130%) skewX(-18deg); } 14%, 100% { transform: translateX(430%) skewX(-18deg); } }
.cta-chiama { position: relative; overflow: hidden; isolation: isolate; }
.cta-chiama::before {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 34%; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .42), transparent);
  transform: translateX(-130%) skewX(-18deg); animation: luccica 7s ease-in-out 1.5s infinite;
}
.cta-chiama:hover::before, .cta-chiama:focus-visible::before { animation: none; opacity: 0; }
@keyframes squillo {
  0%, 9%, 100% { transform: rotate(0); }
  1.2% { transform: rotate(-14deg); }
  2.4% { transform: rotate(14deg); }
  3.6% { transform: rotate(-10deg); }
  4.8% { transform: rotate(10deg); }
  6%   { transform: rotate(-5deg); }
  7.2% { transform: rotate(5deg); }
}
.icona-squillo { transform-origin: 50% 50%; animation: squillo 7s ease-in-out 1.5s infinite; }
/* Su telefono e tablet richiama l'attenzione solo il pulsante della barra fissa in basso */
@media (max-width: 1023px) {
  .cta-chiama:not(.cta-fissa)::before, .cta-chiama:not(.cta-fissa) .icona-squillo { animation: none; }
}

/* Sezione numeri (src/templates/numeri.php): site.js mette .pronta (stato iniziale), poi .in-vista;
   quando la sezione esce dallo schermo mette .ferma e le animazioni continue si fermano. */
@keyframes giro { to { transform: rotate(360deg); } }
@keyframes compare { 0% { opacity: 0; transform: scale(0); } 70% { opacity: 1; transform: scale(1.4); } 100% { opacity: 1; transform: scale(1); } }
@keyframes alone { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(2.2); } }
@keyframes appare { from { opacity: 0; } to { opacity: 1; } }
.numeri.ferma * { animation-play-state: paused !important; }

/* Orologio con il tempo che cambia (src/templates/orologio-meteo.php): un "giorno" ogni 24 s,
   sole → pioggia → notte → alba ventosa, con dissolvenze di 1,2 s; da fermo resta il sole */
.om-ore, .om-minuti { transform-origin: 110px 110px; transform-box: view-box; }
.numeri.in-vista .om-ore { animation: giro 24s linear infinite; }
.numeri.in-vista .om-minuti { animation: giro 3s linear infinite; }
@keyframes om-cielo { 0%, 20% { fill: #CFE3FF; } 25%, 45% { fill: #9FB2C9; } 50%, 70% { fill: #13224A; } 75%, 95% { fill: #F6CDAE; } 100% { fill: #CFE3FF; } }
.numeri.in-vista .om-cielo { animation: om-cielo 24s ease-in-out infinite; }
.om-fase { opacity: 0; }
.om-fase.om-sole { opacity: 1; }
@keyframes om-fase-1 { 0%, 20% { opacity: 1; } 25%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes om-fase-2 { 0%, 20% { opacity: 0; } 25%, 45% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes om-fase-3 { 0%, 45% { opacity: 0; } 50%, 70% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes om-fase-4 { 0%, 70% { opacity: 0; } 75%, 95% { opacity: 1; } 100% { opacity: 0; } }
.numeri.in-vista .om-sole { animation: om-fase-1 24s ease-in-out infinite; }
.numeri.in-vista .om-pioggia { animation: om-fase-2 24s ease-in-out infinite; }
.numeri.in-vista .om-notte { animation: om-fase-3 24s ease-in-out infinite; }
.numeri.in-vista .om-vento { animation: om-fase-4 24s ease-in-out infinite; }
.om-raggi { transform-origin: 110px 62px; transform-box: view-box; }
.numeri.in-vista .om-raggi { animation: giro 14s linear infinite; }
@keyframes om-goccia { 0% { transform: translateY(-6px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(16px); opacity: 0; } }
.numeri.in-vista .om-goccia { animation: om-goccia .9s linear infinite; }
@keyframes om-stella { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.numeri.in-vista .om-stella { animation: om-stella 2.4s ease-in-out infinite; }
@keyframes om-terreno { 0%, 20% { fill: #A9BDD8; } 25%, 45% { fill: #7F92AC; } 50%, 70% { fill: #0B1736; } 75%, 95% { fill: #D29E7C; } 100% { fill: #A9BDD8; } }
.numeri.in-vista .om-terreno { animation: om-terreno 24s ease-in-out infinite; }
@keyframes om-raffiche { 0%, 100% { transform: translateX(-6px); } 50% { transform: translateX(6px); } }
.numeri.in-vista .om-raffiche { animation: om-raffiche 1.8s ease-in-out infinite; }
.numeri .punto { transform-box: fill-box; transform-origin: center; transition: fill .2s ease; }
.numeri.pronta .punto { opacity: 0; }
.numeri.in-vista .punto { animation: compare .45s ease-out both; }
.numeri .punto-link:hover .punto, .numeri .punto-link:focus-visible .punto { fill: #2E62D6; }
.numeri .alone { transform-box: fill-box; transform-origin: center; animation: alone 3s ease-out infinite; }
.numeri .secondaria { stroke-dasharray: 6 5; transition: fill .2s ease; }
.numeri.pronta .secondaria { opacity: 0; }
.numeri.in-vista .secondaria { animation: appare .6s ease-out both; }
.numeri .provincia-link:hover .secondaria, .numeri .provincia-link:focus-visible .secondaria { fill: #C9D5F0; }
.numeri .tessera { background: var(--brand-blue); color: #fff; transition: background-color .2s ease, transform .2s ease; }
.numeri .tessera:hover, .numeri .tessera:focus-visible { background: #072A73; transform: translateY(-2px); }
@media (max-width: 767px) {
  /* su telefono i punti sono troppo piccoli per il dito: si apre la pagina Zone dal pulsante */
  .numeri .punto-link, .numeri .provincia-link { pointer-events: none; }
}

/* Lightbox: scorrimento col dito */
#lightbox-img { touch-action: pan-y pinch-zoom; transition: transform .25s ease, opacity .25s ease; }
#lightbox-img.trascina { transition: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* animazioni ridotte a un istante e fatte una volta sola (le infinite altrimenti lampeggerebbero) */
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .scheda:hover, .scheda:focus-visible, .numeri .tessera:hover, .btn:active { transform: none; }
  .cta-chiama::before { display: none; }
}

/* Print */
@media print {
  header, footer, .no-print, [class*="fixed"] { display: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* Domande frequenti: niente triangolino di sistema (Safari) */
summary::-webkit-details-marker { display: none; }

/* Mosaico di foto (pagina Zone): la prima occupa due colonne, da 1024 px anche due righe; sotto i 1024 px bastano 5 foto */
.mosaico > :first-child { grid-column: span 2; }
@media (min-width: 1024px) {
  .mosaico > :first-child { grid-row: span 2; aspect-ratio: auto; position: relative; }
  .mosaico > :first-child img { position: absolute; inset: 0; }
}
@media (max-width: 1023px) { .mosaico > :nth-child(n+6) { display: none; } }

/* Cartello delle distanze (pagina Zone): comune, puntini, chilometri in giallo */
.distanza:hover > span:first-child { text-decoration: underline; text-underline-offset: 4px; }
.distanza:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* Schede dei servizi con la foto: taglio obliquo con il filo rosso, come le aperture */
.scheda-foto { position: relative; transition: transform .2s ease; }
.scheda-foto h2 { transition: color .2s ease; }
.scheda-foto:hover { transform: translateY(-2px); }
.scheda-foto:hover h2, .scheda-foto:focus-visible h2 { color: #0A358F; }
.scheda-foto:focus-visible { outline: none; }
.scheda-foto:focus-visible::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 4px var(--brand-blue); pointer-events: none; z-index: 3; }
.taglio-scheda { clip-path: polygon(0 0, 100% 0, 100% 84%, 0 100%); }
.taglio-scheda-bordo { transform: translateY(6px); }
@media (prefers-reduced-motion: reduce) { .scheda-foto:hover { transform: none; } }