/* reclami.css — la pagina "Reclamo al Garante" nel sistema Quadro (issue 040,
   058). Solo ciò che stile.css, guscio.css, passi.css e diritti.css non hanno: il
   percorso a passi, il foglio, i campi, il vassoio e i bottoni sono quelli delle
   lettere (passi.css, diritti.css), caricati prima. Nessun colore scritto a
   mano, tranne nella stampa (vedi sotto); nessun attributo style nell'HTML né
   nei template: la CSP del portale lo blocca. */

/* ---- Le sezioni dopo il foglio ---------------------------------------------- */

.sezione-reclamo { margin-top: 56px; }
.sezione-reclamo > h2 { margin-bottom: 16px; }
.sezione-reclamo > p { max-width: 64ch; }
.sezione-reclamo > h3 { margin: 28px 0 10px; }

/* I quattro avvisi sono il primo passo, prima di ogni campo: carte neutre, non
   in ocra. Sono una cosa da sapere, non un errore della persona (DESIGN.md,
   "Avviso e errore non sono intercambiabili"). */
.avvisi {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.carta-avviso {
  padding: 20px;
  color: var(--ink2);
  background: var(--surface);
  border-radius: var(--r-carta);
  box-shadow: var(--sh1);
}
.carta-avviso strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
}

.elenco {
  max-width: 64ch;
  margin: 0 0 16px;
  padding-left: 1.25em;
}
.elenco li + li { margin-top: 10px; }
.elenco:last-child { margin-bottom: 0; }

/* ---- Il passo "Hai già scritto all'azienda?" ----------------------------- */

#passo-prima > p { max-width: 64ch; }
/* "Il tuo caso è diverso?" sta sotto il bottone, nella stessa carta. */
.caso-diverso { margin-top: 32px; }
.caso-diverso > h3 { margin: 0 0 10px; }

/* ---- I campi ---------------------------------------------------------------- */

/* Una scelta già fatta è un gruppo di radio: la domanda è la legenda, con il
   peso di un'etichetta. */
.campo-radio {
  min-width: 0;
  padding: 0;
  border: 0;
}
.campo-radio legend {
  padding: 0;
  font-size: 16px;
  font-weight: 600;
}
.campo-radio .checkbox-riga { margin-top: 10px; }

/* I bottoni stanno sotto il foglio: una riga, a capo se non ci stanno. */
.azioni-reclamo { margin-top: 16px; align-items: center; }

@media (max-width: 999.98px) {
  .avvisi { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 759.98px) {
  .sezione-reclamo { margin-top: 40px; }
  .carta-avviso { padding: 16px; }
}

/* ---- Stampa: solo il foglio -------------------------------------------------
   Il reclamo si firma su carta: della pagina deve uscire il foglio e nient'altro.
   Qui, e solo qui, i colori sono parole chiave e non token: i token seguono il
   tema scuro (la carta del foglio diventa scura, il testo chiaro) e su un
   foglio bianco il testo sparirebbe. */
@media print {
  @page { margin: 2cm; }

  html, body { color: black; background: white; }
  .barra-portale, .fondo-portale { display: none; }
  .pagina { padding: 0; }
  .contenitore { max-width: none; padding: 0; }
  /* Del percorso resta il vassoio, qualunque sia il passo: la carta, la barra
     dell'avanzamento, la striscia e le sezioni finali spariscono. */
  .contenitore > :not(#percorso-reclamo) { display: none; }
  #percorso-reclamo > :not(.zona-passi) { display: none; }
  /* Con l'id e con il padding azzerato: passi.css lascia 150 px sotto la zona per la
     striscia del telefono, e in stampa sarebbero una pagina di vuoto. */
  #percorso-reclamo .zona-passi { display: block; padding: 0; }
  /* Con l'id: all'ultimo passo passi.css dà display: grid a .passo-ultimo .carta-passo. */
  #percorso-reclamo .carta-passo { display: none; }
  /* Il vassoio si stampa anche se il passo non lo mostra (hidden, o sotto la
     soglia di passi.css) e anche se è aperto a tutta pagina sul telefono (fixed,
     con scorrimento: stamperebbe una pagina sola). L'id batte i selettori di
     passi.css; display ha !important perché la regola globale [hidden] lo ha. */
  #percorso-reclamo .vassoio {
    display: block !important;
    position: static;
    overflow: visible;
    max-width: none;
    padding: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
  }
  /* Con l'id: sul telefono, a foglio aperto, passi.css mostra "Torna alle domande"
     con `.vassoio.aperto .chiudi-foglio`, che senza l'id batterebbe questa regola. */
  #percorso-reclamo .vassoio > :not(.foglio) { display: none; }
  /* In modifica a mano il foglio è nascosto: si stampa lo stesso (reclami.js
     ci mette il testo corretto prima di stampare). La regola globale
     [hidden] ha !important, quindi serve !important anche qui. */
  .vassoio .foglio[hidden] { display: block !important; }
  .foglio {
    padding: 0;
    font-size: 12pt;
    line-height: 1.5;
    color: black;
    background: none;
    border-radius: 0;
    box-shadow: none;
  }
  /* I valori e i segnaposto sono evidenziati a schermo (e l'anello del passo
     corrente); su carta restano solo le parole (i segnaposto hanno già le
     parentesi quadre). */
  .valore { text-decoration: none; }
  .segnaposto, .parte-del-passo {
    padding: 0;
    color: inherit;
    background: none;
    box-shadow: none !important;
  }
}