/* base.css — reset minimale, font self-hosted (OFL, spediti nel tema in assets/fonts/), tipografia e
   accessibilità di base per freight_carrier (vettore di autotrasporto conto terzi, sito a pagina unica).
   I token vivono in tokens.css: qui si consumano, non si ridichiarano. */

/* --- 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:"Familjen Grotesk"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../assets/fonts/familjen-grotesk-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family:"Familjen Grotesk"; font-style:normal; font-weight:700; font-display:swap;
  src:url("../assets/fonts/familjen-grotesk-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family:"Instrument Sans"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../assets/fonts/instrument-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"Instrument Sans"; font-style:normal; font-weight:500; font-display:swap;
  src:url("../assets/fonts/instrument-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family:"Instrument Sans"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../assets/fonts/instrument-sans-latin-600-normal.woff2") format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ⚠ Sito a PAGINA UNICA con nav ad ANCORE: senza questo, la testata fissa copre il titolo della
   sezione a cui si è appena saltati, e il salto sembra non aver funzionato. */
:target { scroll-margin-top: 96px; }
[id] { scroll-margin-top: 96px; }

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

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

/* ⚠⚠ `position: sticky` DICHIARATA NON È `position: sticky` APPLICATA — trappola dei temi a blocchi.
   La regola sulla testata c'era (`sticky; top:0; z-index:50`), il computato la confermava, NESSUN
   antenato aveva `overflow` — e la testata scorreva via lo stesso: misurata a `top: -1324` dopo 1500px.
   CAUSA: WordPress avvolge ogni template part in un `div.wp-block-template-part`, e quel div è alto
   ESATTAMENTE quanto la testata (122px misurati). Uno sticky si muove dentro il PROPRIO contenitore, e
   lì dentro non c'è spazio in cui muoversi.
   RIMEDIO: il wrapper esce dal layout con `display: contents`, così il contenitore dello sticky diventa
   `.wp-site-blocks`, che è alto quanto la pagina. Si nomina col `:has()` per colpire SOLO il wrapper
   della testata: gli altri template part devono restare come sono. */
.wp-block-template-part:has(> .site-header) { display: contents; }

/* Il piè non deve «salire» sulle pagine più corte della finestra (qui: la Privacy). */
body { min-height: 100vh; display: flex; flex-direction: column; }
.wp-site-blocks { flex: 1 0 auto; display: flex; flex-direction: column; }
.wp-block-post-content { flex: 1 0 auto; }

/* ⚠ Il flow-layout di WordPress mette un block-gap di 24px fra i figli: su un sito a bande piene non
   è aria, è una riga del fondo del body che TAGLIA la pagina, e si vede di più fra due bande scure.
   Il gap dei figli DIRETTI di una banda collassa attraverso la banda e la trascina giù: va azzerato
   anche lì, non solo sul contenitore. (Regola 11.) */
.wp-block-post-content > *,
.wp-site-blocks > *,
.hero > *, .section > *, .banda > *, .cta-bar > *,
.mosaico > *, .pilastri > *, .schede > *, .dati > * { margin-block: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-heading);
  color: var(--ink);
  letter-spacing: -.018em;
  /* ⚠⚠ NON `balance`. Bilanciare divide un titolo di due righe in due METÀ uguali: su un contenitore
     largo 1248px «Da anni una realtà imprenditoriale per l'autotrasporto» occupava 817px e lasciava
     un terzo di riga vuoto a destra, con la seconda riga sospesa a mezz'aria. È il difetto che l'owner
     segnala da tre giri — «il testo deve prendere tutta l'area e andare a capo da solo».
     `pretty` riempie la riga e interviene solo sulle ultime, dove serve a non lasciare una parola sola. */
  text-wrap: pretty;
}
/* ⚠ Il display NON è maiuscolo: il riferimento di design sta su nero 700 in tondo, e i titoli del
   cliente sono frasi intere («Azienda leader nel settore degli autotrasporti a Catania»). In
   maiuscolo una frase così lunga raddoppia le righe e perde la gerarchia. Le MAIUSCOLE restano agli
   occhielli e alle etichette, dove sono tracciate. */
p { text-wrap: pretty; }
p + p { margin-top: var(--space-3); }

/* ⚠ Il grassetto EREDITA il colore del contesto. Fissarlo a `--ink` sembra innocuo su fondo chiaro,
   ma rende nero su nero ogni <strong> delle bande scure — e il difetto non si vede nel sorgente. */
strong, b { font-weight: 600; color: inherit; }

/* Il focus si VEDE. */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
/* ⚠ Sulle bande scure l'inchiostro del focus sparirebbe: `--focus` (#c22e42) fa 2,51 su `--brand`.
   Lì l'accento chiaro È il segnale leggibile (4,90). Stessa ragione dello sdoppiamento dell'accento. */
.banda :focus-visible, .site-header :focus-visible, .site-footer :focus-visible {
  outline-color: var(--accent-on-dark);
}

/* Salto al contenuto: primo elemento focalizzabile della pagina. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brand); color: var(--on-dark); padding: var(--space-2) var(--space-3);
}
.skip-link:focus { left: 0; }

.container { width: min(var(--container), 100% - var(--gutter) * 2); margin-inline: auto; }
.section { padding-block: var(--section-y); }
.section--chiara { background: var(--sage-light); }
.section--tight { padding-block: calc(var(--section-y) * .62); }

/* Screen-reader only: le etichette che servono a chi non vede, non a chi guarda. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ⚠ La rivelazione MUOVE, non sfuma: un'opacità intermedia porta il testo sotto AA durante la
   transizione, e un elemento a opacity:0 non fa nemmeno scaricare le immagini che contiene.
   Fail-visible: la classe `.js` la mette reveal.js — senza JavaScript nulla resta nascosto. */
.js .reveal { transform: translateY(22px); transition: transform .7s var(--ease); transition-delay: calc(var(--reveal-i, 0) * 70ms); }
.js .reveal.is-visible { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal.is-visible { transform: none; transition: none; }
}