/* authorized_service_center — base: reset minimo, tipografia, cromo, animazioni. */

*, *::before, *::after { box-sizing: border-box; }

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

/* ⚠⚠ Il flow-layout di WordPress mette 24px di block-gap fra i figli del contenuto: fra due bande
   full-bleed di colore diverso quel gap diventa una STRISCIA BIANCA che nessuno ha disegnato.
   Le sezioni devono essere contigue. */
.wp-block-post-content > * { margin-block: 0; }
/* ⚠⚠ Lo stesso block-gap vive anche FUORI dal contenuto: fra `main` e il pie' lasciava 24px di bianco
   fra due bande entrambe near-black — una striscia che nessuno ha disegnato e che si vede benissimo.
   Misurata: main finiva a 6056, il pie' iniziava a 6080. */
.wp-site-blocks > *, .wp-site-blocks > main, .wp-block-template-part { margin-block: 0; }
.wp-site-blocks { display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: -0.01em;
  margin: 0;
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: clamp(1.5rem, 2.7vw, 2.15rem); text-transform: uppercase; }
h3 { font-size: var(--text-lg); }

/* La MISURA DI LETTURA sta sui paragrafi, non sui contenitori: metterla su un elemento di layout
   incolonna il testo a sinistra e lascia mezza pagina bianca. */
p { margin: 0 0 var(--space-4); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: var(--accent-ink); }
img { max-width: 100%; height: auto; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ⚠ Con la testata fissa, un'ancora senza scroll-margin atterra SOTTO l'header: l'URL cambia, la
   pagina scorre e il titolo della sezione non si vede. Il crawl resta 200 e non se ne accorge. */
[id] { scroll-margin-top: calc(var(--header-h) + var(--space-4)); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-5); }

.eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 var(--space-2);
}
/* ⚠⚠ SU OGNI SUPERFICIE SCURA serve il rosso schiarito, non solo dentro `.banda`. Il token
   `--accent-ink` e' tarato sui fondi CHIARI: sopra la testata fotografica misura 2,28 e non passa AA.
   E' la trappola descritta in tokens.css — un token verificato su UNA superficie e usato su un'ALTRA —
   e l'elenco delle superfici scure va tenuto COMPLETO, non aggiornato quando ci si accorge. */
.banda .eyebrow,
.hero .eyebrow,
.page-head .eyebrow,
.site-footer .eyebrow { color: var(--accent-on-dark); }

/* --- pulsanti: spigolo vivo, e il rosso porta SEMPRE il bianco --- */
.btn {
  display: inline-block;
  /* ⚠ `<button>` e i campi NON ereditano `font-family` dal documento: senza questa riga il pulsante
     del modulo usciva in Arial di sistema — l'unico font estraneo di tutto il sito. Le altre `.btn`
     non lo mostravano perche' sono `<a>`, che invece eredita. */
  font-family: var(--font-sans);
  background: var(--brand);
  color: var(--on-accent);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--text-base);
  padding: var(--space-3) var(--space-5);
  border: 0;
  border-radius: var(--radius);
  transition: background var(--dur) var(--ease);
}
.btn:hover { background: var(--accent-dark); color: var(--on-accent); }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn--ghost-on-dark { background: transparent; color: var(--on-dark); border: 1px solid rgba(255,255,255,.55); }
.btn--ghost-on-dark:hover { background: rgba(255,255,255,.1); color: var(--on-dark); }

/* ⚠⚠ SKIP LINK. L'emitter lo inietta dentro l'header di ogni verticale; senza una regola resta un
   collegamento VISIBILE in cima a sinistra, che nessuno capisce. Va nascosto alla vista ma NON agli
   assistivi, e deve ricomparire quando prende il fuoco: e' la sua unica ragione d'essere. */
.skip-link {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip-link:focus-visible, .skip-link:focus {
  position: fixed; top: var(--space-3); left: var(--space-3); z-index: 200;
  width: auto; height: auto; clip-path: none;
  background: var(--brand); color: var(--on-accent);
  padding: var(--space-3) var(--space-5); text-decoration: none;
}

/* ⚠ GRASSETTO REALE, NON SINTETIZZATO. Il neretto della copy chiedeva Inter 700, che il tema non
   serve (400 e 600): Chromium lo fabbricava ingrassando i contorni del 400, e si vedeva. Il 600 e'
   il neretto che esiste davvero. I `b` che portano `--font-display` chiedono 700 esplicito qui sotto,
   perche' del display il 700 c'e' e il 600 no. */
strong, b { font-weight: 600; }

/* --- testata --- */
/* ⚠⚠ FISSA, non `sticky`. Il padre e' `div.wp-block-template-part`, alto quanto l'header: `sticky`
   incolla solo DENTRO il box del genitore, quindi dopo un centinaio di pixel se ne andava con lui.
   Misurato: dopo uno scroll di 2000px la testata stava a top -1974. Con `fixed` esce dal flusso, e lo
   spazio che lasciava lo restituisce il padding sul contenitore del sito. */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.wp-site-blocks { padding-top: var(--header-h); }
/* Header centrato verticalmente: spazio sopra = spazio sotto. */
.site-header__row { display: flex; align-items: center; gap: var(--space-4); min-height: var(--header-row-h); flex-wrap: nowrap; }
.site-header__row > * { align-self: center; margin-block: 0; }

.wordmark { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--ink); }
.wordmark img { height: 42px; width: auto; display: block; }
.wordmark__txt { display: block; }
.wordmark__name { font-family: var(--font-display); font-size: var(--text-md); letter-spacing: -0.01em; display: block; font-weight: 700; }
/* ⚠ La qualifica e' UNA riga: e' una targa, non un paragrafo. Alla taglia di prima ci stava per un
   soffio, e alzando la micro-etichetta e' andata a capo spezzando «FAAC E / BFT». Il ritorno a capo
   si vieta qui, cosi' non dipende dalla taglia. */
.wordmark__tag { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); display: block; white-space: nowrap; }

/* ⚠ Le voci NON vanno a capo: a 1440 la riga misurava 1152px di parti dentro 1152px utili, cioe'
   zero margine, e il menu si spezzava su due righe. Si toglie il ritorno a capo e si stringono gli
   spazi; sotto i 1200 la qualifica del marchio esce, perche' e' la parte piu' sacrificabile. */
.site-nav { margin-left: auto; min-width: 0; }
.site-nav .wp-block-navigation__container { flex-wrap: nowrap; }
.site-nav .wp-block-navigation-item__content { white-space: nowrap; }
/* ⚠⚠ IL MENU E' DISPLAY, NON TESTO CORRENTE. L'overlay a schermo pieno era gia' in `--font-display`;
   la barra no, ed ereditava il font del corpo: stesso sito, due menu con voce diversa, e quello di
   barra — Inter 400, 16px, senza spaziatura — era indistinguibile da un paragrafo, cioe' leggeva
   come un font di serie. Il peso 500 e' quello che il tema SERVE gia' (il 700 e' dei titoli).
   ⚠ La famiglia si dichiara sul BLOCCO e sui discendenti per lo stesso motivo del colore: WordPress
   vince a PARI specificita' perche' il suo foglio arriva dopo. */
.site-nav,
.site-nav a,
.site-nav .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item__content {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.005em;
}
/* ⚠⚠ Il colore delle voci si dichiara sul BLOCCO e sui suoi discendenti: `.site-nav a` da solo perde
   contro le regole di WordPress a PARI specificita', e il menu esce grafite su grafite. */
.site-nav, .site-nav a, .wp-block-navigation .wp-block-navigation-item__content { color: var(--ink); text-decoration: none; }
.site-nav a:hover, .wp-block-navigation .wp-block-navigation-item__content:hover { color: var(--accent-ink); }
.site-nav .wp-block-navigation__container { gap: var(--space-4); }

.header-tel { font-family: var(--font-mono); font-size: var(--text-base); color: var(--ink); text-decoration: none; white-space: nowrap; }
.header-cta { display: inline-block; background: var(--brand); color: var(--on-accent); text-decoration: none; font-weight: 600; padding: var(--space-3) var(--space-5); white-space: nowrap; }
.header-cta:hover { background: var(--accent-dark); color: var(--on-accent); }

/* ⚠⚠ MENU MOBILE. L'overlay di wp:navigation eredita il fondo dell'header se non glielo si dichiara,
   e con un header chiaro il risultato e' bianco su bianco: il menu «non funziona» perche' non si
   vede. Il fondo e il testo si impongono qui, sul contenitore E sulle voci. */
/* ⚠⚠ Il `padding` vuole `!important` esattamente come il fondo: WordPress dichiara la stessa
   proprieta' sullo stesso selettore, quindi si vince a PARI specificita' solo per ordine di
   caricamento — e il suo foglio arriva dopo il nostro. Senza, le voci restano incollate al bordo.
   È lo stesso motivo per cui il fondo lo porta `!important`: due proprieta', una sola regola di WP. */
.wp-block-navigation__responsive-container.is-menu-open {
  background: var(--night) !important;
  color: var(--on-dark) !important;
  padding: var(--space-9) var(--space-5) !important;
}
.wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { color: var(--on-dark) !important; }
/* ⚠ Il bottone di chiusura di WordPress nasce SENZA misura: sotto 44×44 non rispetta il bersaglio
   minimo di tocco, e senza padding e offset resta incollato all'angolo dello schermo. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  width: 48px; height: 48px; padding: var(--space-3);
  top: var(--space-4); right: var(--space-4);
  color: var(--on-dark);
}
.wp-block-navigation__responsive-container-open { width: 48px; height: 48px; padding: var(--space-3); color: currentColor; }
/* ⚠⚠ L'allineamento a DESTRA della barra (justifyContent:right sul blocco) viene ereditato
   dall'overlay: a schermo stretto le voci lunghe escono dal bordo e restano tagliate. Nel menu a
   schermo pieno l'allineamento e' a SINISTRA, e le voci hanno la loro aria. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  gap: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left;
  width: 100%;
}
/* La classe `items-justified-right` della barra resta sul contenitore anche nell'overlay: l'allineamento
   del TESTO va imposto sulla voce, non solo sul contenitore. */
/* ⚠⚠ La misura del menu a schermo pieno si dichiara sulla VOCE, non solo sul contenitore. Stava sul
   contenitore e arrivava per EREDITARIETA': la regola di barra, che nomina la voce, l'ha scavalcata
   nel momento in cui la barra ha smesso di ereditare il font del corpo, e il menu mobile e' sceso da
   28px a 15px senza che nulla lo toccasse. Un valore EREDITATO perde contro qualunque dichiarazione
   diretta, a specificita' qualsiasi.
   ⚠ Il commento sta FUORI dal blocco di proposito: il gate ispeziona una finestra di caratteri fra il
   selettore e `text-align`, e un commento dentro la regola la sfonda. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  width: 100%;
  text-align: left !important;
  justify-content: flex-start !important;
  font-size: var(--text-xl);
  letter-spacing: -0.01em;
}

/* --- piè --- */
.site-footer { background: var(--night); color: var(--on-dark-muted); padding: var(--space-9) 0 var(--space-6); font-size: var(--text-base); }
.site-footer__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.site-footer h3 { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.13em; text-transform: uppercase; color: var(--on-dark); margin: 0 0 var(--space-3); font-weight: 500; }
.site-footer ul { margin: 0; padding: 0; list-style: none; line-height: 2; }
.site-footer a { color: var(--on-dark-muted); text-decoration: none; }
.site-footer a:hover { color: var(--accent-on-dark); }
.footer__dl { margin: 0; font-family: var(--font-mono); font-size: var(--text-sm); }
.footer__dl dt { color: var(--on-dark); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; margin-top: var(--space-3); }
.footer__dl dd { margin: 0; }
/* ⚠ Tre colonne `1fr auto 1fr`: con `space-between` e tre elementi il mediano non e' centrato, finisce
   dove capita in funzione della larghezza dei laterali. Il marchio Dgitaly va al CENTRO davvero. */
.site-footer__coda {
  border-top: 1px solid rgba(255,255,255,.14); margin-top: var(--space-7); padding-top: var(--space-5);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-4);
  font-size: var(--text-sm);
}
.site-footer__coda > :last-child { justify-self: end; }
.site-footer__marchio { justify-self: center; }
.dgitaly { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.dgitaly { display: inline-flex; align-items: center; gap: 6px; }
.dgitaly img { height: 20px; width: 20px; }

/* --- micro-animazioni: le accende reveal.js via IntersectionObserver.
   ⚠ Fail-VISIBLE: senza JavaScript il contenuto deve restare visibile, non sparire dietro uno stato
   iniziale che nessuno rimuovera' mai. La classe la mette lo script, non il CSS. --- */
.js-reveal .reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.js-reveal .reveal.is-in { opacity: 1; transform: none; }
.js-reveal .fp-stagger .reveal { transition-delay: calc(var(--reveal-i, 0) * 70ms); }

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* Sotto i 1200 la qualifica sotto il marchio esce: e' la parte piu' sacrificabile della riga, e senza
   di lei il menu smette di stringersi. */
@media (max-width: 1200px) { .wordmark__tag { display: none; } }

@media (max-width: 900px) {
  :root { --header-row-h: 62px; --header-h: 63px; }
  .site-footer__row { grid-template-columns: 1fr 1fr; }
  /* ⚠ Su schermo stretto la testata porta SOLO marchio e hamburger, con il menu tutto a destra: il
     telefono in chiaro e il pulsante «Chiama» duplicavano l'azione che vive gia' nella barra fissa in
     basso, e insieme facevano sbordare la riga. */
  .header-tel, .header-cta { display: none; }
  .site-nav { margin-left: auto; }
  .wp-block-navigation__responsive-container-open { margin-left: auto; }
  .site-footer__coda { grid-template-columns: 1fr; text-align: center; gap: var(--space-3); }
  .site-footer__coda > :last-child { justify-self: center; }
}
@media (max-width: 640px) {
  .site-footer__row { grid-template-columns: 1fr; }
}