/*
 * Tapparelle24h — base
 * Azzeramento, font, tipografia, impaginato.
 * Ogni valore viene da variabili.css. Qui non si scrivono numeri né colori.
 */

/* --- Font ospitati sul sito -------------------------------------------
 * Due file variabili per famiglia (latin e latin-ext): tutti i pesi in
 * 59 KB per il latino, senza chiamate a domini di terze parti.
 * Il sottoinsieme latin-ext si scarica solo se la pagina ne ha bisogno.
 * -------------------------------------------------------------------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
  src: url('../fonts/archivo-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: 'Archivo';
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/manrope-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: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Azzeramento ------------------------------------------------------ */

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

html {
  -webkit-text-size-adjust: 100%;
  /* Scorrimento morbido verso le ancore (es. «Richiedi preventivo» → modulo),
     su tutto il sito dal 05/10/2026. Spento per chi chiede meno movimento. */
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--c-fondo);
  color: var(--c-testo);
  font-family: var(--font-testo);
  font-size: var(--t-base);
  line-height: var(--i-testo);
  -webkit-font-smoothing: antialiased;
  /* La barra di chiamata è fissa in basso: il contenuto non ci finisce sotto. */
  padding-bottom: calc(var(--h-barra-fissa) + env(safe-area-inset-bottom));
}

img, video { max-width: 100%; height: auto; display: block; }

/*
 * I video incorporati del contenuto storico non avevano nessuna regola:
 * uno arrivava con width="100%", l'altro senza niente e usciva a 300×150.
 * Qui stanno nella colonna e tengono le proporzioni del video.
 */
iframe {
  display: block;
  max-width: 100%;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  margin: var(--s-6) 0;
  background: var(--c-struttura);
}

h1, h2, h3, h4 {
  font-family: var(--font-titolo);
  color: var(--c-testo);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--t-h1-mobile); font-weight: var(--peso-forte); line-height: var(--i-stretta); letter-spacing: var(--sp-titolo); }
h2 { font-size: var(--t-h2-mobile); font-weight: var(--peso-forte); line-height: var(--i-titolo); letter-spacing: var(--sp-titolo); }
h3 { font-size: var(--t-h3-mobile); font-weight: var(--peso-forte); line-height: var(--i-titolo); letter-spacing: var(--sp-titolo-lieve); }
h4 { font-size: var(--t-medio);     font-weight: var(--peso-forte); line-height: var(--i-media);  letter-spacing: var(--sp-titolo-lieve); }

p { margin: 0 0 var(--s-4) 0; max-width: var(--larghezza-testo); }
p:last-child { margin-bottom: 0; }

a { color: var(--c-azione); text-decoration: underline; text-underline-offset: 0.18em; }
a:hover { color: var(--c-azione-hover); }

strong, b { font-weight: var(--peso-forte); color: var(--c-testo); }

ul, ol { margin: 0 0 var(--s-4) 0; padding-left: var(--s-5); max-width: var(--larghezza-testo); }
li { margin-bottom: var(--s-2); }

/* Il fuoco deve essere sempre visibile: qui si arriva anche da tastiera. */
:focus-visible {
  outline: 3px solid var(--c-azione);
  outline-offset: 2px;
  border-radius: var(--r-piccolo);
}

/* --- Impaginato ------------------------------------------------------- */

.t24-contenitore {
  width: 100%;
  max-width: var(--contenuto-max);
  margin-inline: auto;
  padding-inline: var(--contenuto-pad-mobile);
}

.t24-sezione { padding-block: var(--sezione-y-mobile); }

/* La fascia grigia separa cose di natura diversa: schede, domande
   frequenti, foto dei lavori, richiamo all'azione. NON serve a spezzare un
   testo: la prosa di una pagina e' un discorso solo, e a strisce diventa un
   codice a barre da leggere. Vedi .t24-sezione--prosa. */
.t24-sezione--alt {
  background: var(--c-fondo-alt);
  border-top: var(--bordo);
}

/* Due fasce grigie attaccate sono una fascia grigia sola, piu' alta: il
   filetto in mezzo non si vede e l'alternanza smette di dire qualcosa.
   Quando capita, la seconda perde il bordo e le due si saldano di
   proposito invece che per sbaglio. */
.t24-sezione--alt + .t24-sezione--alt { border-top: 0; padding-top: 0; }

/* I pezzi in cui si spezza il testo della pagina. Restano sezioni — hanno
   il loro respiro e il loro titolo — ma su fondo bianco e con meta' aria
   fra l'uno e l'altro: due sezioni piene attaccate aprirebbero una voragine
   in mezzo a un discorso continuo. */
.t24-sezione--prosa + .t24-sezione--prosa { padding-top: 0; }
.t24-sezione__titolo + * { margin-top: var(--s-6); }

/* Un'introduzione corta sotto il titolo di sezione, quando serve — non un
   sottotitolo a schermo intero, una riga o due. */
.t24-sezione__intro {
  font-size: var(--t-grande);
  line-height: var(--i-media);
  color: var(--c-testo-medio);
  max-width: var(--larghezza-testo);
}

/* --- Etichetta maiuscola ---------------------------------------------
 * Nel design v3 è a 10px. Qui sta a 13px: nessun testo scende sotto.
 * -------------------------------------------------------------------- */
.t24-etichetta {
  font-family: var(--font-titolo);
  font-size: var(--t-etichetta);
  font-weight: var(--peso-forte);
  letter-spacing: var(--sp-etichetta);
  text-transform: uppercase;
  color: var(--c-testo-etichetta);
  line-height: var(--i-media);
}

.t24-solo-lettori {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Il salto al contenuto compare solo quando riceve il fuoco. */
.t24-salta {
  position: absolute;
  left: var(--s-3);
  top: calc(-1 * var(--s-10));
  z-index: 100;
  padding: var(--s-3) var(--s-4);
  background: var(--c-fondo);
  color: var(--c-azione);
  border-radius: var(--r-base);
  font-weight: var(--peso-forte);
  transition: top 120ms ease-out;
}
.t24-salta:focus { top: var(--s-3); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* --- Da tablet in su -------------------------------------------------- */

@media (min-width: 768px) {
  body { padding-bottom: 0; }  /* la barra fissa è solo mobile */

  .t24-contenitore { padding-inline: var(--contenuto-pad); }
  .t24-sezione { padding-block: var(--sezione-y); }

  h1 { font-size: var(--t-h1); letter-spacing: var(--sp-titolo-grande); }
  h2 { font-size: var(--t-h2); }
  h3 { font-size: var(--t-h3); }
  h4 { font-size: var(--t-h4); }

  p, li { font-size: var(--t-medio); }
}

/* --- Il percorso in cima alla pagina ----------------------------------
 * Piccolo e tenue: dice dove sei, non compete con il titolo. Sul telefono
 * resta su una riga e l'ultima voce, spesso un titolo lungo, si accorcia
 * con i puntini invece di andare a capo.
 * -------------------------------------------------------------------- */
.t24-briciole { padding-top: var(--s-5); }
.t24-briciole__elenco {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-piccolo);
  color: var(--c-testo-tenue);
  min-width: 0;
}
.t24-briciole__voce { flex: 0 0 auto; white-space: nowrap; }
.t24-briciole__voce + .t24-briciole__voce::before {
  content: '\203A'; /* › — scritto come escape: il server manda i CSS senza codifica */
  margin-inline: var(--s-2);
  color: var(--c-testo-tenue);
}
.t24-briciole__voce:last-child { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.t24-briciole a { color: var(--c-testo-medio); text-decoration: none; }
.t24-briciole a:hover { color: var(--c-testo); text-decoration: underline; text-underline-offset: 3px; }
.t24-briciole a:focus-visible { outline: 2px solid var(--c-struttura); outline-offset: 2px; border-radius: 3px; }
/* La prima sezione si avvicina al percorso: senza, fra i due c'è un vuoto. */
.t24-briciole + .t24-sezione,
.t24-briciole + * > .t24-sezione:first-child { padding-top: var(--s-5); }