/* base.css — reset minimale, font self-hosted (OFL, spediti nel tema in assets/fonts/), tipografia
   e accessibilità di base. car_service.
   I token vivono in tokens.css: qui si consumano, non si ridichiarano colori. */

/* --- Font self-hosted (no Google Fonts, zero-live). theme.json dichiara le stesse famiglie/pesi:
   le due dichiarazioni puntano agli stessi file. --- */
@font-face { font-family:"Saira Semi Condensed"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../assets/fonts/saira-semi-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family:"Saira Semi Condensed"; font-style:normal; font-weight:700; font-display:swap;
  src:url("../assets/fonts/saira-semi-condensed-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family:"Figtree"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../assets/fonts/figtree-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"Figtree"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../assets/fonts/figtree-latin-600-normal.woff2") format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, picture { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button { font: inherit; cursor: pointer; }

/* Display grottesco stretto: il peso 700 è quello che regge la scala dei titoli senza impastare
   (il set di Saira Semi Condensed è già compatto: stretto oltre chiude i contrografi). */
h1, h2 { font-family: var(--font-display); font-weight: 700; line-height: var(--lh-snug); letter-spacing: var(--tracking-display); text-wrap: balance; }
h1 { font-size: var(--text-3xl); line-height: var(--lh-tight); }
h2 { font-size: var(--text-2xl); }
h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); line-height: 1.22; }
p { text-wrap: pretty; }

/* --- Layout --- */
.container { width: min(100% - var(--gutter) * 2, var(--container)); margin-inline: auto; }
.container--narrow { max-width: var(--container-narrow); }
/* overflow-x: clip (mai hidden: hidden romperebbe lo sticky dell'intestazione) */
.section { padding-block: var(--section-y); overflow-x: clip; position: relative; }
.section.alt { background: var(--surface); }
.section--tight { padding-block: clamp(2.25rem, 1.6rem + 2.4vw, 3.75rem); }

/* Le bande a tutta larghezza sono figlie del flow-layout di WordPress, che inserisce un block-gap fra i
   figli: senza azzerarlo compare una striscia del fondo del body fra una banda e l'altra. Il gap va tolto
   anche ai figli DIRETTI delle bande, perché il margine del primo figlio collassa attraverso la banda e
   la trascina giù (si vede come una striscia chiara sopra l'intestazione). */
.wp-block-post-content > * { margin-block: 0; }
.hero > *, .section > *, .cta-band > * { margin-block: 0; }

/* WordPress avvolge ogni parte di template in un <div>: quel wrapper diventa il contenitore dello
   sticky, ed essendo alto quanto l'intestazione la fa scorrere via al primo movimento di pagina.
   `display: contents` lo toglie di mezzo senza toccarne i figli — l'intestazione resta davvero in cima. */
.wp-block-template-part { display: contents; }

/* --- Accessibilità --- */
:where(a, button, input, textarea, summary):focus-visible {
  outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 3px;
}
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: var(--gutter); top: var(--space-3); z-index: 999; background: var(--ink); color: var(--on-dark);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --- Rivelazione allo scorrimento (reveal.js, IntersectionObserver) ---
   Il movimento è SOLO transform: un elemento che sfuma attraversa soglie di contrasto mentre è in
   transito, e per giunta un contenitore trasparente non fa scaricare le immagini che contiene.
   Senza JS (o con reduced-motion) tutto è già a posto: fail-visible. */
.js .reveal { transform: translateY(24px); transition: transform .62s cubic-bezier(.22, .61, .36, 1); transition-delay: calc(var(--reveal-i, 0) * 90ms); }
.js .reveal.is-visible { transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { transform: none; transition: none; } }