/* components.css — componenti car_service: intestazione, testata col campo circolare, barra dei recapiti,
   striscia di ancore, sezioni di servizio, avviso legale, pannello di chiusura, piè di pagina.
   I colori arrivano dai token: qui non si dichiarano valori cromatici. */

/* ============================ intestazione ============================ */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header__row { display: flex; align-items: center; gap: var(--space-5); min-height: var(--header-h); }
/* nav e CTA portano un margine di blocco da WordPress che li spinge sotto il centro della riga */
.site-header__row > * { align-self: center; margin-block: 0; }

.wordmark { display: flex; align-items: center; gap: var(--space-3); flex: 0 0 auto; }
.wordmark__mark { width: 46px; height: 46px; color: var(--brand); flex: 0 0 auto; }
.wordmark__mark svg, .wordmark__mark img { width: 100%; height: 100%; }
.wordmark__txt { display: flex; flex-direction: column; line-height: 1.05; }
.wordmark__name { font-family: var(--font-display); font-weight: 700; font-size: 1.18rem; letter-spacing: -.01em; }
.wordmark__sub { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }

.site-nav { margin-left: auto; }
.site-nav .wp-block-navigation__container { gap: clamp(1rem, .4rem + 1.2vw, 1.6rem); }
.site-nav .wp-block-navigation-item__content {
  font-family: var(--font-display); font-weight: 600; font-size: .98rem; color: var(--ink-soft);
  padding-block: var(--space-2); position: relative;
}
.site-nav .wp-block-navigation-item__content::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--brand); transition: right .25s;
}
.site-nav .wp-block-navigation-item__content:hover::after { right: 0; }

.site-header__tel { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; white-space: nowrap; display: inline-flex; align-items: center; gap: var(--space-2); }
.site-header__tel svg { width: 16px; height: 16px; color: var(--accent-text); flex: 0 0 auto; }
/* variante compatta: sotto i 600px resta solo il bersaglio da 44px */
.site-header__tel--compact { display: none; width: 44px; height: 44px; border-radius: 50%; background: var(--accent-fill); color: var(--ink);
  align-items: center; justify-content: center; flex: 0 0 auto; }
.site-header__tel--compact svg { width: 21px; height: 21px; }

/* ============================ bottoni ============================ */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  padding: .78rem 1.5rem; border-radius: var(--radius-pill);
  border: 2px solid transparent; transition: transform .2s, background .2s, color .2s;
}
/* un <svg> senza dimensioni dichiarate occupa 300×150: ogni icona va misurata */
.btn svg { width: 20px; height: 20px; flex: 0 0 auto; }
/* sul verde acido il testo è l'inchiostro (10.2:1). Il bianco farebbe 1.69: vietato. */
.btn--primary { background: var(--accent-fill); color: var(--ink); }
.btn--primary:hover { background: var(--brand); transform: translateY(-2px); }
.btn--ghost { border-color: var(--ink); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--on-dark); }
/* Chiamare è l'azione principale: bottone BIANCO pieno, che su fondo chiaro si stacca per profondità
   invece che per tinta, e lascia il colore al canale WhatsApp. */
.btn--light { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-card); }
.btn--light:hover { background: var(--ink); color: var(--on-dark); transform: translateY(-2px); }
/* WhatsApp porta il verde del marchio: è una SUPERFICIE, quindi il testo sopra resta l'inchiostro
   (7.51:1). Il bianco su questo verde farebbe 2.29 e sarebbe illeggibile. */
.btn--wa { background: var(--brand); color: var(--ink); }
.btn--wa:hover { background: var(--brand-deep); color: var(--on-dark); transform: translateY(-2px); }
/* Il richiamo pulsa con un alone che si espande DIETRO il bottone: nessuna variazione di opacità sul
   testo, che attraverserebbe le soglie di contrasto mentre è in transito. */
.btn--wa, .cta-bar__wa { position: relative; isolation: isolate; }
.btn--wa::after, .cta-bar__wa::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--brand); animation: fp-pulse 2.4s cubic-bezier(.4, 0, .6, 1) infinite;
}
@keyframes fp-pulse {
  0% { transform: scale(1); opacity: .55; }
  70% { transform: scale(1.14); opacity: 0; }
  100% { transform: scale(1.14); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .btn--wa::after, .cta-bar__wa::after { animation: none; } }
.section--dark .btn--ghost, .cta-band .btn--ghost { border-color: color-mix(in srgb, var(--on-dark) 50%, transparent); color: var(--on-dark); }
.section--dark .btn--ghost:hover, .cta-band .btn--ghost:hover { background: var(--on-dark); color: var(--ink); }

/* ============================ occhiello ============================ */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  padding: .42rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-pill);
  color: var(--accent-text); background: var(--paper);
}
.eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--brand); }
.section--dark .eyebrow, .cta-band .eyebrow { background: transparent; border-color: color-mix(in srgb, var(--on-dark) 22%, transparent); color: var(--accent-lt); }
.section--dark .eyebrow::before, .cta-band .eyebrow::before { background: var(--accent-fill); }

.lead { font-size: var(--text-md); color: var(--ink-soft); max-width: 60ch; }
.section--dark .lead, .cta-band .lead { color: color-mix(in srgb, var(--on-dark) 82%, transparent); }
.section--dark { background: var(--ink); color: var(--on-dark); }
.section--dark h2, .section--dark h3 { color: var(--on-dark); }
/* la parola accentata del titolo: su chiaro il verde-testo, su scuro il verde chiaro */
.accent { color: var(--accent-text); }
.section--dark .accent, .cta-band .accent { color: var(--accent-lt); }

/* ============================ testata ============================ */
.hero { position: relative; padding-block: clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem) 0; overflow-x: clip; }
.hero__grid { display: grid; grid-template-columns: 1fr .92fr; gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: center; }
.hero h1 { margin: var(--space-4) 0 var(--space-5); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.hero__media { position: relative; justify-self: center; width: min(100%, 560px); aspect-ratio: 1; isolation: isolate; }
.hero__disc { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; box-shadow: var(--shadow-disc); }
.hero__disc img { width: 100%; height: 100%; object-fit: cover; }
.hero__ring { position: absolute; inset: -8%; border-radius: 50%; border: 2px dashed var(--brand); opacity: .45; z-index: -1; }
/* il campo di colore invade la testata da destra: è il segno della categoria, portato in chiaro */
.hero__blob { position: absolute; width: 112%; aspect-ratio: 1; border-radius: 50%; background: var(--accent-fill);
  right: -34%; bottom: -26%; z-index: -3; opacity: .9; }
.hero__blob--soft { position: absolute; width: 64%; aspect-ratio: 1; border-radius: 50%; background: var(--brand);
  left: -26%; top: -14%; z-index: -3; opacity: .14; }
.hero__badge {
  position: absolute; left: -6%; bottom: 12%; background: var(--ink); color: var(--on-dark);
  border-radius: var(--radius-lg); padding: var(--space-4) 1.15rem;
  display: flex; align-items: center; gap: var(--space-3); box-shadow: 0 14px 32px rgba(23, 27, 37, .28);
}
.hero__badge svg { width: 26px; height: 26px; color: var(--accent-fill); flex: 0 0 auto; }
.hero__badge b { font-family: var(--font-display); font-size: 1.02rem; display: block; line-height: 1.15; }
.hero__badge span { font-size: .78rem; color: var(--on-dark-muted); }
/* variante senza fotografia idonea: il campo di colore resta, il disco diventa una campitura di marca */
.hero--design .hero__disc { background: linear-gradient(140deg, var(--brand-deep), var(--brand)); }

/* ============================ barra dei recapiti ============================ */
.deck { position: relative; z-index: 5; margin-top: clamp(2.5rem, 1.6rem + 3vw, 4rem); }
.deck__inner {
  background: var(--ink); color: var(--on-dark); border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 1rem + 1.4vw, 2rem);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); box-shadow: var(--shadow-panel);
}
.deck__item { display: flex; gap: var(--space-3); align-items: flex-start; }
.deck__item svg { width: 26px; height: 26px; color: var(--accent-fill); flex: 0 0 auto; margin-top: .15rem; }
.deck__wa svg { color: var(--brand); }
.deck__k { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-muted); display: block; }
.deck__v { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; color: var(--on-dark); }

/* ============================ striscia di ancore ============================ */
.rail-wrap { padding-block: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem) 0; }
/* Pannello dei servizi: stessa larghezza e stesso raggio del riquadro dei recapiti che gli sta sopra,
   con un padding proprio — a filo dei bordi le tessere sembravano incollate al fondo. */
.rail { padding: clamp(1.4rem, 1rem + 1.4vw, 2.2rem); border-radius: var(--radius-lg); }
.rail__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-4); }
.rail__item {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center;
  padding: 1.2rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper);
  box-shadow: 0 2px 10px rgba(23, 27, 37, .05);
  transition: transform .22s, border-color .22s, box-shadow .22s;
}
.rail__item:hover { transform: translateY(-4px); border-color: var(--brand); box-shadow: var(--shadow-card); }
.rail__ico { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); color: var(--accent-text); transition: background .22s, color .22s; }
.rail__item:hover .rail__ico { background: var(--accent-fill); color: var(--ink); }
/* Le icone sono MASCHERE, non <img>: ereditano currentColor e cambiano sul fondo acido dell'hover.
   L'url() di una maschera dichiarata QUI si risolve rispetto al FOGLIO di stile, quindi `../assets/`
   è corretto — nel post_content del database un percorso relativo al documento non risolverebbe. */
.rail__ico::before {
  content: ""; width: 24px; height: 24px; background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
}
.rail__ico[data-icon="diagnosi"]     { --icon: url("../assets/img/icons/diagnosi.svg"); }
.rail__ico[data-icon="chiavi"]       { --icon: url("../assets/img/icons/chiavi.svg"); }
.rail__ico[data-icon="manutenzione"] { --icon: url("../assets/img/icons/manutenzione.svg"); }
.rail__ico[data-icon="cambi"]       { --icon: url("../assets/img/icons/cambi.svg"); }
.rail__ico[data-icon="clima"]        { --icon: url("../assets/img/icons/clima.svg"); }
.rail__ico[data-icon="centraline"]    { --icon: url("../assets/img/icons/centraline.svg"); }
.rail__t { font-family: var(--font-display); font-weight: 600; font-size: .95rem; line-height: 1.2; }

/* ============================ sezioni di servizio ============================ */
/* ⚠ `center` allineava il testo al centro della riga: dove il testo è corto (cambi, clima) il titolo
   scendeva e non era più a filo con la fotografia, che parte sempre in alto. Con `start` le due colonne
   cominciano insieme, ed è l'attacco che si vede. */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 1rem + 3.4vw, 4.5rem); align-items: start; }
.split--rev .split__media { order: -1; }
/* ⚠ La diagonale che chiude la banda scura è un `::after` POSIZIONATO, e a parità di z-index si dipinge
   dopo: senza questo livello passa sopra la fotografia e ne taglia il fondo, che riappare solo oltre il
   triangolo. La fotografia deve stare sopra il taglio, non sotto. */
.split__media { position: relative; z-index: 1; }
.split__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-panel); }
/* La fotografia SCAVALCA il confine della banda: il dispositivo del campo circolare, ripetuto lungo la
   pagina. ⚠ Centrata non esce MAI — il padding della sezione assorbe la sporgenza e la banda cresce con
   lei. Va ancorata a un bordo (align-self) e tirata oltre di un margine maggiore del padding; così il suo
   contributo all'altezza si riduce e la riga la decide il TESTO, mentre l'immagine esce davvero.
   Le sezioni si alternano: una sporge in alto, la successiva in basso. */
.section:has(.split__media) { display: flow-root; }
/* ⚠ L'eccedenza non è un valore libero: se supera il padding della banda successiva la fotografia ne
   invade il contenuto — a 1100px l'eccedenza valeva 103px contro un padding di 87 e copriva l'occhiello.
   Va legata al ritmo verticale, così resta sempre dentro l'aria della sezione che segue. */
.split__media { --overhang: min(clamp(48px, 3rem + 5vw, 132px), calc(var(--section-y) * 0.5)); }
/* ⚠ in un margin-top la percentuale si riferisce alla LARGHEZZA del contenitore, non all'altezza:
   una regola che la usava spingeva la fotografia dentro invece di tirarla fuori. */
.split .split__media, .split--rev .split__media {
  align-self: stretch;
  margin-top: var(--attacco, -14px);
  margin-bottom: calc(var(--overhang) * -1);
}
.split .split__media img, .split--rev .split__media img {
  height: calc(100% + var(--overhang)); aspect-ratio: auto; min-height: 420px;
}
/* ⚠ La PRIMA sezione non scavalca verso l'alto: sopra di lei c'è l'indice dei servizi, e una fotografia
   che vi entra ne copre le tessere — che sono cliccabili. Scavalca verso il basso come le alternate. */
/* ⚠ Ancorare la fotografia a un bordo lega la sua PARTENZA alla sporgenza: spostandola per correggere
   l'attacco si perde l'effetto, e viceversa. Su queste tre l'attacco va allineato alla colonna di testo,
   quindi si ancorano in ALTO (il top segue il testo) e si fa uscire solo il FONDO — le due cose tornano
   indipendenti. */
/* l'ultima sezione ha sotto di sé il titolo della chiusura: le serve un'eccedenza più contenuta */
#centraline .split__media { --overhang: 22px; }

.split__media::after {
  content: ""; position: absolute; width: 46%; aspect-ratio: 1; border-radius: 50%;
  background: var(--brand); opacity: .16; right: -7%; top: -7%; z-index: -1;
}
.split h2 { margin: var(--space-4) 0 var(--space-4); }

/* Le voci sono TESSERE, non un elenco puntato: un'officina elenca prestazioni brevi e indipendenti, e a
   tessera si leggono a colpo d'occhio invece che come una colonna di righe. Il segno di spunta resta,
   piccolo, dentro la tessera. */
.checks { margin: var(--space-5) 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.checks li {
  position: relative; display: inline-flex; align-items: center; gap: .55rem;
  padding: .46rem .85rem .46rem .7rem; font-size: .93rem; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--paper);
  box-shadow: 0 1px 2px rgba(23, 27, 37, .05);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.checks li:hover { border-color: var(--brand); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(23, 27, 37, .07); }
.checks li::before {
  content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--brand);
}
.section--dark .checks li { color: color-mix(in srgb, var(--on-dark) 90%, transparent); background: color-mix(in srgb, var(--on-dark) 6%, transparent); border-color: color-mix(in srgb, var(--on-dark) 16%, transparent); }
.section--dark .checks li:hover { border-color: var(--accent-fill); }
.section--dark .checks li::before { background: var(--accent-fill); }
/* le voci lunghe non si spezzano a metà parola dentro la tessera */
@media (max-width: 599.98px) { .checks li { font-size: .88rem; padding: .4rem .7rem .4rem .6rem; } }

.note {
  margin-top: var(--space-5); padding: 1.1rem 1.3rem; border-left: 4px solid var(--brand);
  background: var(--surface); border-radius: 0 var(--radius) var(--radius) 0; font-size: .96rem; color: var(--ink-soft);
}
.section--dark .note { background: color-mix(in srgb, var(--on-dark) 7%, transparent); color: color-mix(in srgb, var(--on-dark) 84%, transparent); border-left-color: var(--accent-fill); }

/* ============================ avviso legale ============================ */
/* Il riquadro è squadrato e bordato: deve leggersi come un avvertimento, non come una scheda di servizio. */
.warn { border: 2px solid var(--ink); border-radius: var(--radius-lg); padding: clamp(1.3rem, 1rem + 1.2vw, 2rem); margin-top: var(--space-6); background: var(--paper); box-shadow: var(--shadow-card); }
.warn__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.warn__head svg { width: 26px; height: 26px; flex: 0 0 auto; }
.warn__head b { font-family: var(--font-display); font-size: 1.12rem; }
.warn p { margin-bottom: .7rem; font-size: .95rem; color: var(--ink-soft); }
.warn p:last-child { margin-bottom: 0; }

/* ============================ chiusura e pannello finale ============================ */
.closing { text-align: center; }
.section.alt.closing { background: var(--accent-tint); }
.closing .lead { margin-inline: auto; }
.closing h2 { margin-bottom: var(--space-4); }
.cta-band { background: var(--ink); color: var(--on-dark); padding-block: var(--section-y); overflow-x: clip; }
.cta-band__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: center; }
.cta-band h2 { color: var(--on-dark); margin-bottom: var(--space-4); }
.cta-band__phone {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.2rem);
  color: var(--accent-lt); display: block; line-height: 1.1; letter-spacing: -.02em;
}
/* ⚠ Questa regola è dichiarata DOPO `.btn--wa` e a parità di specificità vincerebbe: da sola rendeva il
   testo bianco sul verde (2.29). Il colore lo porta il bottone, qui restano solo posizione e misura. */
.cta-band__wa { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); font-family: var(--font-display); font-weight: 600; }
.cta-band__wa:not(.btn) { color: var(--on-dark); }
.cta-band__wa:not(.btn) svg { color: var(--accent-fill); }

/* ============================ piè di pagina ============================ */
.site-footer { background: var(--surface); padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem) var(--space-5); font-size: .95rem; }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-6); }
.site-footer h3 { font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--space-3); }
.site-footer ul { display: grid; gap: .45rem; }
.site-footer a { color: var(--ink-soft); }
.site-footer a:hover { color: var(--accent-text); }
.site-footer__addr { margin-top: var(--space-4); color: var(--ink-muted); }
.site-footer__hours li { color: var(--ink-muted); }
/* tre celle, non space-between: con tre elementi di larghezza diversa quello mediano non risulterebbe centrato */
.legal { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-4); font-size: .85rem; color: var(--ink-muted); }
.legal__end { text-align: right; }
.dgitaly { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--ink-muted); }
.dgitaly img { width: 20px; height: 20px; }

/* ============================ barra CTA mobile ============================ */
.cta-bar { display: none; }
/* il colore del canale non dipende dal viewport: dichiarato fuori dalla media query che ne governa la resa */
a.cta-bar__wa { background: var(--brand); color: var(--ink); }

@media (max-width: 980px) {
  .hero__grid, .split, .cta-band__grid { grid-template-columns: 1fr; }
  .split--rev .split__media { order: 0; }
  .deck__inner { grid-template-columns: 1fr; }
  .rail__grid { grid-template-columns: repeat(3, 1fr); }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .hero__media { width: min(100%, 380px); }
  /* due classi: una media query non aggiunge specificità e .btn è dichiarata dopo */
  .site-header .site-header__cta { display: none; }
}

@media (max-width: 599.98px) {
  .rail__grid { grid-template-columns: repeat(2, 1fr); }
  .checks { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .legal { grid-template-columns: 1fr; text-align: center; }
  .legal__end { text-align: center; }
  .hero__badge { left: 0; bottom: 4%; }
  .site-header__row { gap: var(--space-3); }
  .wordmark__sub { display: none; }
  .wordmark__name { font-size: 1.05rem; }
  .wordmark__mark { width: 40px; height: 40px; }
  .site-header .site-header__tel { display: none; }
  .site-header .site-header__tel--compact { display: flex; }
  /* barra fissa in basso: su mobile la chiamata è l'azione, non un bottone in testata */
  .cta-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: var(--ink); border-top: 1px solid color-mix(in srgb, var(--on-dark) 14%, transparent);
  }
  .cta-bar a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    padding: var(--space-4) var(--space-3); font-family: var(--font-display); font-weight: 700; font-size: 1rem; }
  .cta-bar svg { width: 20px; height: 20px; flex: 0 0 auto; }
  /* a parità di specificità vincerebbe la regola dichiarata dopo: il selettore porta l'elemento */
  a.cta-bar__call { background: var(--paper); color: var(--ink); }
  body { padding-bottom: 64px; }
}

/* --- menu mobile: l'overlay di WordPress nasce bianco con un selettore a quattro classi iniettato DOPO
   il tema; per vincerlo bisogna ricopiarne lo schema, non aggiungere una classe. --- */
@media (max-width: 599.98px) {
  .wp-block-navigation__responsive-container.is-menu-open { height: 100vh; max-height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) { background: var(--paper); }

  /* ⚠ WordPress allinea a `flex-end` i CONTENITORI dell'overlay: il <ul> collassa a una manciata di
     pixel spinto contro il bordo destro, e le voci risultano attaccate e tagliate. Non basta agire
     sull'<a>, che è shrink e obbedisce al padre: va risalita la catena e allineato ogni antenato. */
  .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
  .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    align-items: stretch; width: 100%; padding-inline: var(--gutter);
  }
  .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-bottom: 96px; padding-top: var(--space-6); }
  .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; align-items: stretch; }
  .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    width: 100%; text-align: left; padding-block: var(--space-4);
    border-bottom: 1px solid var(--line); font-size: 1.2rem;
  }

  /* Il bersaglio di chiusura era 24×24 incollato all'angolo: va portato alla misura di un dito, staccato
     dai bordi e con un tratto che si veda. */
  .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    top: var(--space-4); right: var(--space-4); width: 48px; height: 48px; padding: 12px;
    border-radius: 50%; background: var(--surface); color: var(--ink);
  }
  .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
    width: 24px; height: 24px; stroke: currentColor; stroke-width: 1.4px;
  }
}

/* ============================ dettaglio e movimento ============================ */
/* Numerale in filigrana su ogni servizio: un contatore CSS, quindi zero markup e nessuna copia da
   tradurre. Dà alla pagina un indice visibile — su un sito a scorrimento unico è anche orientamento. */
.section:has(.split) { counter-increment: fp-servizio; }
.split__text { position: relative; }
.split__text::before {
  content: "0" counter(fp-servizio);
  position: absolute; right: calc(100% + var(--space-4)); top: -.12em;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 1.8rem + 3vw, 4.6rem);
  line-height: 1; color: var(--brand); opacity: .22; pointer-events: none; user-select: none;
  -webkit-text-stroke: 1px currentColor; -webkit-text-fill-color: transparent;
}
/* ⚠ Nelle sezioni a colonne invertite il numerale cadrebbe nel gap fra testo e fotografia, che gli
   passa sopra: lì va portato SOPRA l'occhiello, dentro la propria colonna. */
.split--rev .split__text::before,
.split--rev .split__text::before { right: auto; left: 0; top: auto; bottom: calc(100% - .1em); margin: 0; }
@media (max-width: 1180px) {
  .split__text::before { right: auto; left: 0; top: auto; bottom: 100%; margin: 0 0 -.18em 0; font-size: clamp(2.4rem, 2rem + 3vw, 4rem); }
}

/* Il filetto sotto il titolo si DISEGNA quando la sezione entra in scena: il movimento è una
   larghezza che cresce, mai un'opacità — nulla attraversa una soglia di contrasto. */
.split__text h2::after, .closing h2::after, .cta-band h2::after {
  content: ""; display: block; height: 3px; width: 0; margin-top: var(--space-4);
  background: var(--brand); transition: width .8s cubic-bezier(.22, .61, .36, 1) .15s;
}
.cta-band h2::after { background: var(--accent-fill); }
.is-visible .split__text h2::after, .split__text.is-visible h2::after,
.is-visible.closing h2::after, .cta-band .is-visible h2::after { width: clamp(56px, 8vw, 112px); }
.js .split__text h2::after { width: 0; }
.js .split__text.is-visible h2::after { width: clamp(56px, 8vw, 112px); }
/* senza JS il filetto è già disegnato: fail-visible */
html:not(.js) .split__text h2::after, html:not(.js) .closing h2::after { width: clamp(56px, 8vw, 112px); }

/* Il campo di colore della testata respira: lentissimo, percepibile solo di sfuggita. */
.hero__blob { animation: fp-respiro 9s ease-in-out infinite; }
.hero__ring { animation: fp-ruota 44s linear infinite; }
.hero__ring--in { position: absolute; inset: 6%; border-radius: 50%; border: 1px dashed var(--brand);
  opacity: .3; z-index: -1; animation: fp-ruota 66s linear infinite reverse; }
@keyframes fp-respiro { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes fp-ruota { to { transform: rotate(360deg); } }

/* Indicatore di scorrimento: dice che sotto la piega c'è dell'altro, ed è la prima cosa che manca a un
   sito «minimale» percepito come spoglio. */
.hero__scroll {
  display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2);
  margin: var(--space-6) auto 0; width: fit-content;
  font-family: var(--font-display); font-weight: 600; font-size: .72rem; letter-spacing: .18em;
  /* ⚠ a schermo stretto l'indicatore finisce sopra il campo acido, dove il grigio del testo secondario
     scende a 3.81: serve un inchiostro che regga sia sul bianco sia sul verde (13.2 e 7.7). */
  text-transform: uppercase; color: var(--ink-soft);
}
.hero__scroll span { display: block; width: 1px; height: 34px; background: linear-gradient(var(--brand), transparent); animation: fp-giu 2.2s ease-in-out infinite; transform-origin: top; }
@keyframes fp-giu { 0%, 100% { transform: scaleY(.45); opacity: .5; } 50% { transform: scaleY(1); opacity: 1; } }

/* Le tessere della striscia entrano una dopo l'altra e reagiscono al puntatore con l'icona che scatta. */
.rail__item:hover .rail__ico::before { transform: scale(1.12); }
.rail__ico::before { transition: transform .24s cubic-bezier(.34, 1.56, .64, 1); }

@media (prefers-reduced-motion: reduce) {
  .hero__blob, .hero__ring, .hero__ring--in { animation: none; }
  .split__text h2::after, .closing h2::after, .cta-band h2::after { transition: none; width: clamp(56px, 8vw, 112px); }
}

/* ============================ materia ============================ */
/* Un reticolo tecnico appena percettibile sulle bande scure: è il fondo dell'officina — metallo, misure —
   e toglie alla banda l'aspetto di rettangolo pieno. Costo zero: due gradienti, nessuna immagine. */
.section--dark, .cta-band {
  background-image:
    linear-gradient(color-mix(in srgb, var(--on-dark) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--on-dark) 4%, transparent) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px;
}
/* La diagonale è il segno della categoria: qui apre la banda scura invece di tagliarla, così la
   fotografia che scavalca vi entra dentro senza sembrare fuori posto. */
.section--dark::before, .cta-band::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 64px;
  background: linear-gradient(174deg, var(--paper) 50%, transparent 50.4%);
  pointer-events: none;
}
.cta-band { position: relative; overflow: hidden; }
.section--dark::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64px;
  background: linear-gradient(354deg, var(--paper) 50%, transparent 50.4%);
  pointer-events: none;
}
/* La striscia di ancore siede sul tint di marca: dà colore alla prima schermata senza chiedere nulla
   alla fotografia, ed è il punto in cui l'occhio cerca l'indice dei servizi. */
.rail { background: var(--accent-tint); }
/* Le bande alternate prendono il tint di marca invece del grigio neutro: il verde è già il colore
   dell'officina vera (la parete del capannone), e il contrasto dell'inchiostro non cambia (15,1:1). */
.section.alt { background: var(--accent-tint); }
.rail__item { border-color: transparent; }


/* Ogni sezione porta l'icona del proprio servizio accanto all'occhiello: chi arriva da una tessera della
   striscia ritrova lo stesso segno, e capisce di essere dove voleva. */
.split__text .eyebrow::after {
  content: ""; width: 18px; height: 18px; margin-left: .1rem; background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
}
#diagnosi .eyebrow     { --icon: url("../assets/img/icons/diagnosi.svg"); }
#chiavi .eyebrow       { --icon: url("../assets/img/icons/chiavi.svg"); }
#manutenzione .eyebrow { --icon: url("../assets/img/icons/manutenzione.svg"); }
#cambi .eyebrow        { --icon: url("../assets/img/icons/cambi.svg"); }
#clima .eyebrow        { --icon: url("../assets/img/icons/clima.svg"); }
#centraline .eyebrow   { --icon: url("../assets/img/icons/centraline.svg"); }


/* Nel piè di pagina i recapiti portano la propria icona: un elenco di link nudi è la parte che più
   somiglia a un documento, ed è l'ultima cosa che resta sullo schermo. */
.site-footer__grid ul li a[href^="tel:"]::before,
.site-footer__grid ul li a[href*="wa.me"]::before,
.site-footer__grid ul li a[href^="mailto:"]::before {
  content: ""; display: inline-block; width: 15px; height: 15px; margin-right: .5rem;
  vertical-align: -2px; background: var(--accent-text);
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.site-footer__grid ul li a[href^="tel:"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5h3l1.6 4-2.1 1.5a12.5 12.5 0 0 0 5.5 5.5l1.5-2.1 4 1.6v3a2 2 0 0 1-2.2 2A16.6 16.6 0 0 1 4.5 5.7a2 2 0 0 1 2-2.2z'/%3E%3C/svg%3E"); }
.site-footer__grid ul li a[href*="wa.me"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 20.5l1.3-4a8.2 8.2 0 1 1 3.1 3.1z'/%3E%3C/svg%3E"); }
.site-footer__grid ul li a[href^="mailto:"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }
/* e le voci dei servizi hanno un trattino che si allunga al passaggio: un elenco che risponde */
.site-footer__grid ul li a[href^="/#"]::before {
  content: ""; display: inline-block; width: 10px; height: 1px; margin-right: .55rem; vertical-align: 4px;
  background: var(--brand); transition: width .24s;
}
.site-footer__grid ul li a[href^="/#"]:hover::before { width: 20px; }

/* L'intestazione si contrae dopo i primi pixel di scorrimento: resta sempre presente, come chiesto, ma
   smette di rubare spazio alla lettura. ⚠ L'altezza è FISSATA in border-box, così il cambio non dipende
   dalle metriche del carattere e non sposta di un pixel ciò che le sta sotto. */
.site-header { transition: min-height .28s ease, box-shadow .28s ease, background-color .28s ease; }
.site-header.is-scrolled { min-height: 60px; box-shadow: 0 6px 24px rgba(23, 27, 37, .08); }
.site-header.is-scrolled .site-header__row { min-height: 60px; }
.site-header.is-scrolled .wordmark__mark { width: 36px; height: 36px; }
/* ⚠ Il sottotitolo si toglie di scatto, senza dissolvenza. Una transizione di opacità su un TESTO lo fa
   attraversare le soglie di contrasto mentre è in transito — misurato a 1.84 in un fotogramma intermedio,
   ed è la stessa ragione per cui le rivelazioni di questo tema muovono invece di sfumare. */
.site-header.is-scrolled .wordmark__sub { display: none; }
.site-header .wordmark__mark { transition: width .28s ease, height .28s ease; }
@media (prefers-reduced-motion: reduce) { .site-header, .site-header .wordmark__mark, .site-header .wordmark__sub { transition: none; } }

/* Il bottone principale porta una freccia che avanza al passaggio: dice che il gesto ha una direzione. */
.btn--light::after, .btn--primary::after {
  content: ""; width: 14px; height: 1.5px; background: currentColor; margin-left: .1rem;
  transition: width .24s cubic-bezier(.34, 1.56, .64, 1); opacity: .75;
}
.btn--light:hover::after, .btn--primary:hover::after { width: 24px; }

/* Il numerale della sezione entra scorrendo con la propria banda: il segno che più dice «indice». */
.split__text::before { animation: fp-numero 1.1s cubic-bezier(.22, .61, .36, 1) both; animation-timeline: auto; }
@keyframes fp-numero { from { transform: translateY(14px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .split__text::before { animation: none; } }

/* La striscia dei servizi è una banda piena come le altre; le tessere respirano dentro il container. */



/* ⚠ Dichiarato in coda di proposito: su schermo stretto nessuna fotografia scavalca, e queste regole
   devono vincere su quelle per sezione — a parità di specificità decide l'ordine, non la media query. */
@media (max-width: 980px) {
  .split .split__media, .split--rev .split__media,
  #diagnosi .split__media, #centraline .split__media, #manutenzione .split__media {
    align-self: auto; margin-block: 0;
  }
  #diagnosi .split__media img, #centraline .split__media img, #manutenzione .split__media img {
    height: auto; aspect-ratio: 4 / 5; min-height: 0;
  }
}

/* Il menu porta due sole voci di navigazione — i sei servizi si raggiungono dalle tessere, che sono
   l'indice completo — quindi nella fascia intermedia basta che ceda la CTA: l'azione resta nel telefono. */
@media (min-width: 600px) and (max-width: 1080px) {
  .site-header .site-header__cta { display: none; }
  .site-header__row { gap: 1rem; }
}
/* ⚠ Proprio a 600px — l'ultimo pixel prima dell'hamburger — il numero per esteso faceva sdoppiare la
   riga: poco prima cede il posto al bersaglio compatto, che porta la stessa azione. */
@media (max-width: 700px) {
  .site-header .site-header__tel { display: none; }
  .site-header .site-header__tel--compact { display: flex; }
}