/*
 * Le pagine lunghe da leggere: informativa privacy, termini di servizio,
 * accordo sul trattamento dei dati e la guida dell'API.
 *
 * Si carica dopo sito.css e ne usa variabili e caratteri: qui c'è solo
 * l'impaginazione comune a queste quattro pagine. Quello che vale per una sola
 * (il codice della guida, le linguette dei linguaggi) sta nel suo <style>.
 *
 * La forma: in cima la testata del documento (titolo, data, il riquadro
 * «Testo in revisione»), chiusa da un filetto. Sotto, l'indice e il testo.
 * Da 1100 px l'indice sta a sinistra e resta fermo mentre il testo scorre;
 * prima sta sopra il testo, chiuso, e si apre toccando «Indice». Senza
 * JavaScript resta aperto: si legge e si usa lo stesso.
 *
 * Il testo sta in una colonna di circa 70 caratteri (misurati in Chromium con
 * Instrument Sans a 17 px): le righe più lunghe stancano, e un testo legale
 * si legge riga per riga. Le tabelle sul telefono diventano schede, una per
 * riga, con il nome della colonna sopra ogni cella: una tabella che scorre di
 * lato nasconderebbe proprio l'ultima colonna, cioè i tempi.
 */

/* ---------------------------------------------------------------------------
 * L'impaginazione
 * ------------------------------------------------------------------------- */
.documento {
  /* La riga del testo: 34rem, cioè 70-72 caratteri (misurati in Chromium). */
  --riga-documento: 34rem;
  width: min(100% - 2 * var(--margine), var(--larghezza));
  margin-inline: auto;
  padding-block: var(--sopra-pagina) var(--s9);
}

/* Niente filetto sotto la testata: lo hanno già l'indice e il primo titolo,
   e tre righe una sopra l'altra fanno una griglia, non una pagina. */
.documento-testa { margin-bottom: var(--s7); }
.documento-testa h1 {
  font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.25rem);
  font-stretch: var(--stretto);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.01em;
  max-width: 15em;   /* a 1280 px «Accordo sul trattamento / dei dati personali» */
  margin: 0 0 var(--s4);
}
.documento-testa .occhiello { margin: 0 0 var(--s3); }
.documento-testa .introduzione { max-width: 40rem; margin: 0; }
.documento-testa > :last-child { margin-bottom: 0; }

/* «Ultimo aggiornamento: …» */
.aggiornata {
  margin: 0;
  font-size: var(--piccolo);
  color: var(--testo-2);
}

/* Due colonne da 1100 px: l'indice (15rem) e il testo. Sotto, una colonna. */
.documento-corpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s6);
}
@media (min-width: 1100px) {
  .documento-corpo {
    grid-template-columns: 15rem minmax(0, 1fr);
    column-gap: var(--s8);
    align-items: start;
  }
}

/* La colonna del testo: 34rem sono 70-72 caratteri di Instrument Sans a
   17 px (sotto i 600 px lo schermo è comunque più stretto). I filetti dei
   titoli e le tabelle invece prendono tutta la larghezza: una tabella di
   quattro colonne stretta in 34rem diventa una torre. */
.testo {
  min-width: 0;
  line-height: 1.6;
}
.testo > :is(p, ul, ol, h3, .riquadro),
.testo > section > :is(p, ul, ol, h3, .riquadro) {
  max-width: var(--riga-documento);
}

/* ---------------------------------------------------------------------------
 * Il riquadro «Testo in revisione»
 *
 * Resta finché la revisione non è finita, e deve vedersi prima di tutto il
 * resto: bordo grafite pieno, fondo bianco, l'avvertenza su una campitura
 * gialla (testo grafite, 12:1).
 * ------------------------------------------------------------------------- */
.daverificare {
  max-width: calc(var(--riga-documento) + 2 * var(--s5) + 6px);
  margin: var(--s5) 0 0;
  padding: var(--s4) var(--s5);
  background: var(--bianco);
  border: var(--filetto) solid var(--grafite);
  line-height: 1.55;
}
.daverificare > strong:first-child {
  display: inline-block;
  margin-right: 0.3em;
  padding: 0 0.4em;
  background: var(--giallo);
  color: var(--grafite);
  border-radius: 4px;
}

/* Quello che manca si vede: un segnaposto confuso nel testo sembrerebbe un
   dato vero. Bordo tratteggiato, anche quando va a capo. */
.da-completare {
  padding: 0 0.3em;
  background: var(--bianco);
  border: 1.5px dashed var(--grafite);
  border-radius: 4px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---------------------------------------------------------------------------
 * L'indice
 *
 * Un <details> dentro un <nav>: sul telefono è chiuso e si apre toccando
 * «Indice» (lo chiude uno script di tre righe subito dopo, nella pagina);
 * da 1100 px è sempre aperto, senza la riga «Indice», e resta fermo a
 * sinistra. Le voci sono gli stessi titoli dei paragrafi, con il numero.
 * ------------------------------------------------------------------------- */
.indice { font-size: var(--piccolo); line-height: 1.35; }
.indice summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: 52px;
  padding: 0 2px;
  border-top: var(--filetto) solid var(--grafite);
  border-bottom: 1px solid var(--linea);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  list-style: none;
}
.indice summary::-webkit-details-marker { display: none; }
/* La freccia: giù da chiuso, su da aperto. */
.indice summary::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
}
.indice details[open] > summary::after { transform: translateY(3px) rotate(-135deg); }

.indice ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.indice li { margin: 0; border-bottom: 1px solid var(--linea); }
.indice a {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  min-height: 44px;
  padding: 0.6em 2px;
  text-decoration: none;
}
.indice a:hover .indice-voce,
.indice a:focus-visible .indice-voce {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
.indice-numero {
  flex: 0 0 1.6em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* I titoletti dei gruppi (nella guida dell'API: Guida, Rotte, Webhook). */
.indice .indice-gruppo {
  margin: var(--s5) 0 var(--s1);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.indice .indice-gruppo:first-of-type { margin-top: var(--s3); }

@media (min-width: 1100px) {
  .indice {
    position: sticky;
    top: var(--s5);
    max-height: calc(100vh - 2 * var(--s5));
    overflow-y: auto;
    /* Il contorno del fuoco (3 px, a 3 px dal bordo) non va tagliato dal
       riquadro che scorre: 6 px di spazio intorno alle voci, presi con il
       margine negativo. Il filetto però deve partire dove partono marchio e
       testo, non 6 px prima: è disegnato come sfondo, rientrato di 6 px, e
       resta fermo in cima anche quando l'elenco scorre. scroll-padding: la
       voce che prende il fuoco col Tab si ferma 8 px prima del bordo, con il
       suo contorno intero. */
    background: linear-gradient(var(--grafite), var(--grafite)) 6px 0 / calc(100% - 12px) var(--filetto) no-repeat;
    padding: calc(6px + var(--filetto)) 6px var(--s3) 6px;
    margin: 0 -6px;
    scroll-padding-block: 8px;
  }
  .indice summary { display: none; }
  .indice a { min-height: 40px; padding-block: 0.5em; }
}

/* ---------------------------------------------------------------------------
 * I titoli dei paragrafi
 *
 * Archivo condensato, con il filetto sopra: ogni paragrafo comincia come una
 * riga dell'indice della home. Il numero sta in una colonna sua, così i titoli
 * partono tutti dallo stesso punto. Nel markup il numero e il titolo sono
 * separati da « · » nascosto alla vista: chi usa un lettore di schermo sente
 * il titolo come prima.
 * ------------------------------------------------------------------------- */
.testo h2 {
  display: flex;
  align-items: baseline;
  gap: 0.4em;
  margin: clamp(48px, 2rem + 3.5vw, 76px) 0 var(--s5);   /* 48 px sul telefono, 76 a 1280 */
  padding-top: var(--s4);
  border-top: var(--filetto) solid var(--grafite);
  font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem);
  font-stretch: var(--stretto-medio);
  font-weight: 850;
  line-height: 1.04;
  scroll-margin-top: var(--s5);
}
.testo > h2:first-child,
.testo > section:first-child > h2:first-child { margin-top: 0; }
.paragrafo-numero {
  flex: none;
  min-width: 0.95em;   /* «16» in Archivo al 72%: i titoli partono tutti allo stesso punto */
  font-variant-numeric: tabular-nums;
}
/* Arrivando da un collegamento (#prezzo), il numero si accende di giallo. */
.testo h2:target .paragrafo-numero,
.testo section:target > h2 .paragrafo-numero {
  background: var(--giallo);
  padding-inline: 0.15em;
  margin-left: -0.15em;
}

.testo h3 {
  margin: var(--s6) 0 var(--s2);
  font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.4375rem);
  font-stretch: var(--stretto-lieve);
  font-weight: 800;
  line-height: 1.15;
  scroll-margin-top: var(--s5);
}
.testo h2 + h3 { margin-top: var(--s4); }

.testo p { margin: 0 0 1em; }
.testo ul, .testo ol { margin: 0 0 1em; padding-left: 1.3em; }
.testo li { margin: 0.45em 0; }
.testo li::marker { color: var(--grafite); }
.testo ul { list-style-type: square; }

/* ---------------------------------------------------------------------------
 * I riquadri
 *
 * Il riquadro giallo dice la cosa che più conta per chi legge (il prezzo
 * bloccato, a chi chiedere i propri dati): campitura gialla, testo grafite.
 * ------------------------------------------------------------------------- */
.riquadro {
  margin: var(--s5) 0 var(--s6);
  padding: var(--s4) var(--s5);
  background: var(--giallo);
  color: var(--grafite);
  border-radius: 4px;
}
.riquadro a { color: var(--grafite); }

/* Le parti in appendice (gli allegati dell'accordo): più aria sopra e un
   filetto doppio, perché si capisca che il testo è finito. */
.allegato { margin-top: var(--s9); }
.allegato > h2 {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s2);
  border-top-width: 6px;
}
/* «Allegato A» sopra il titolo, come un occhiello. */
.paragrafo-allegato {
  font-family: var(--famiglia-testo);
  font-size: 0.875rem;
  font-stretch: 100%;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}
.allegato:target .paragrafo-allegato { background: var(--giallo); padding-inline: 0.3em; margin-left: -0.3em; }

/* ---------------------------------------------------------------------------
 * Le tabelle
 *
 * Su schermo largo: righe separate da una linea sottile, intestazione sopra
 * un filetto. Sotto i 720 px ogni riga diventa una scheda, e ogni cella porta
 * il nome della sua colonna (data-label nel markup).
 * ------------------------------------------------------------------------- */
.tabella { margin: var(--s5) 0 var(--s6); }
.tabella table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--piccolo);
  line-height: 1.5;
}
.tabella th {
  padding: 0 var(--s4) var(--s2) 0;
  border-bottom: var(--filetto) solid var(--grafite);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  vertical-align: bottom;
}
.tabella td {
  padding: var(--s3) var(--s4) var(--s3) 0;
  border-bottom: 1px solid var(--linea);
  text-align: left;
  vertical-align: top;
}
.tabella th:last-child, .tabella td:last-child { padding-right: 0; }
.tabella td strong { font-weight: 700; }
.tabella td ul { margin: 0; padding-left: 1.1em; }

@media (max-width: 719.98px) {
  .tabella thead { display: none; }
  .tabella table, .tabella tbody, .tabella tr, .tabella td { display: block; width: 100%; }
  /* Le schede si separano con una riga sottile: il filetto pieno resta ai
     titoli dei paragrafi, così si capisce dove comincia il paragrafo. */
  .tabella tr {
    padding: var(--s3) 0 var(--s4);
    border-top: 1px solid var(--grafite);
  }
  .tabella tr + tr { margin-top: var(--s3); }
  .tabella td {
    padding: var(--s2) 0;
    border: 0;
    overflow-wrap: anywhere;
  }
  .tabella td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--testo-2);
  }
  .tabella td:first-child { font-size: 1rem; }
}

/* ---------------------------------------------------------------------------
 * La stampa: il testo intero, senza indice.
 * ------------------------------------------------------------------------- */
@media print {
  .indice { display: none !important; }
  .documento-corpo { display: block; }
  .documento { width: auto; padding: 0; }
  .testo { max-width: none; }
  .testo h2, .testo h3 { break-after: avoid; }
  .daverificare, .riquadro, .tabella tr { break-inside: avoid; }
  .riquadro { border: 2px solid #000; }
}