/* ==========================================================================
   Modulo FMI «Richiesta Tessera Member» — ricalca il PDF ufficiale
   (Modulo-Tessera-Member-3, 2 pagine A4).
   Il foglio è bianco anche a schermo: quello che vedi è quello che stampi.
   Logo FMI in alto a sinistra, logo del Moto Club in alto a destra.
   ========================================================================== */

:root {
  --blu-fmi: #0070c0;
  --nero-doc: #000;
}

/* ------------------------------------------------------------- intorno --- */
.modulo-wrap { max-width: 1000px; margin-inline: auto; }

.modulo-barra {
  position: sticky; top: 118px; z-index: 20;
  display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: center;
  padding: 1rem; margin-bottom: 2rem;
  background: var(--nero-2); border: 1px solid var(--bordo); border-radius: var(--radius);
}
.modulo-barra .nota { font-size: .84rem; color: var(--testo-soft); width: 100%; text-align: center; }

/* la colonna e' minmax(0,1fr) e non "auto": senza, sono i 210mm del foglio a
   dettare la larghezza della griglia e su telefono il modulo sborda a destra,
   dove viene tagliato da overflow-x:hidden e diventa irraggiungibile */
.foglio { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; justify-items: center; }

/* ------------------------------------------------------ il foglio A4 ----- */
.pagina {
  width: 210mm; max-width: 100%;
  min-height: 297mm;
  padding: 11mm 11mm 8mm;
  background: #fff; color: var(--nero-doc);
  font-family: Calibri, Carlito, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 9.4pt; line-height: 1.18;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .5);
  display: flex; flex-direction: column;
}
.pagina * { box-sizing: border-box; }

/* --------------------------------------------------------- intestazione -- */
.intestazione { display: flex; align-items: center; justify-content: space-between; gap: 6mm; margin-bottom: 2.6mm; }
.intestazione__fmi { display: flex; align-items: center; gap: 3mm; }
.intestazione__fmi img { height: 17mm; width: auto; }
.intestazione__nome { font-weight: 700; font-size: 10.5pt; line-height: 1.16; }
.intestazione__club img { height: 17mm; width: auto; }
.intestazione__nome--club { text-align: right; }

.barra-titolo {
  background: var(--blu-fmi); color: #fff;
  font-weight: 700; font-size: 15pt; letter-spacing: .01em;
  text-align: center; padding: 1.2mm 2mm; margin-bottom: 2.4mm;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

/* --------------------------------------------------------- riga tipo ----- */
.riga-tipo { display: flex; align-items: flex-end; justify-content: space-between; gap: 4mm; margin-bottom: 1.8mm; }
.riga-tipo__scelte { display: flex; align-items: center; gap: 7mm; }
.riga-tipo__anno { text-align: right; font-size: 9.4pt; }
.riga-tipo__nota { display: block; font-size: 7.6pt; margin-bottom: .8mm; }

/* --------------------------------------------------------------- box ----- */
.box { border: .9pt solid var(--nero-doc); padding: 1.8mm 2.6mm 2mm; margin-bottom: 2.2mm; }
.box__titolo { font-weight: 700; text-decoration: underline; font-size: 10pt; margin: 0 0 1.6mm; }

/* ------------------------------------------------------------- righe ----- */
.rigo { display: flex; align-items: baseline; gap: 1.4mm; margin: 0 0 1.9mm; }
.rigo:last-child { margin-bottom: 0; }
.et { white-space: nowrap; }
.et--piccolo { font-size: 8pt; font-style: italic; }

.lin {
  flex: 1 1 auto; min-width: 8mm;
  border: 0; border-bottom: .75pt solid var(--nero-doc); border-radius: 0;
  background: transparent; color: var(--nero-doc);
  font: inherit; padding: 0 .8mm .3mm;
}
.lin:focus { outline: none; background: #fff3cd; }
.lin::placeholder { color: #9aa0a6; }
/* codice e denominazione del Moto Club: fissi, non modificabili */
.lin[readonly] { cursor: default; user-select: none; }
.lin[readonly]:focus { background: transparent; outline: none; }
.lin--vuota { flex: 1 1 auto; border-bottom: .75pt solid var(--nero-doc); height: 1em; }

/* ------------------------------------------------------- caselle -------- */
.quad {
  -webkit-appearance: none; appearance: none;
  width: 4.2mm; height: 4.2mm; flex: 0 0 auto;
  border: .9pt solid var(--nero-doc); border-radius: 0; background: #fff;
  margin: 0; vertical-align: -.9mm; cursor: pointer;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.quad:checked { background: var(--nero-doc); }
.scelta { display: inline-flex; align-items: center; gap: 1.6mm; cursor: pointer; }

/* casella con la lettera dentro (Sesso M / F) */
.lettera {
  display: inline-flex; align-items: center; justify-content: center;
  width: 5.6mm; height: 5mm; border: .9pt solid var(--nero-doc);
  position: relative; cursor: pointer; font-size: 9.5pt; line-height: 1;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.lettera input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.lettera.sel { background: var(--nero-doc); color: #fff; }

/* ------------------------------------------------------ dichiarazioni ---- */
.testo { text-align: justify; margin: 0 0 1.2mm; }
.elenco { margin: 0 0 1.2mm; padding-left: 7mm; }
.elenco li { text-align: justify; margin-bottom: .3mm; }

.riga-firme { display: flex; align-items: baseline; gap: 6mm; margin: 2.6mm 0 1mm; }
.riga-firme > * { flex: 1; }
.firma-centro { display: flex; justify-content: center; margin: 3mm 0 1.5mm; }
.firma-centro .lin--vuota { flex: 0 0 95mm; }

.riga-mc { display: flex; gap: 8mm; margin-top: 3mm; }
.riga-mc > div { flex: 1; }
.riga-mc .rigo { margin-bottom: 5.5mm; }

/* ------------------------------------------------------------ piede ------ */
.piede-foglio {
  margin-top: auto; padding-top: 3mm; text-align: center;
  font-size: 7.6pt; line-height: 1.25;
}
.piede-foglio a { color: #0563c1; text-decoration: underline; }

/* --------------------------------------------------------- pagina 2 ------ */
.titolo-sez { font-weight: 700; font-size: 10.4pt; margin: 0 0 1.4mm; }
.sottotitolo-sez { font-weight: 700; text-decoration: underline; margin: 3mm 0 .8mm; }
.sottotitolo-sez--largo { text-decoration: none; }
.sottotitolo-sez--largo u { text-decoration: underline; }

.consenso__testo { text-align: justify; margin: 0 0 .7mm; }
.consenso__riga {
  display: grid; grid-template-columns: 20mm auto 1fr auto 40mm;
  align-items: center; gap: 2mm; margin: 0 0 1.1mm;
}
.consenso__riga .scelta:first-of-type { grid-column: 2; }
.consenso__esito { text-align: left; }

.riga-dati { display: flex; align-items: baseline; gap: 3mm; margin: 2.4mm 0 1mm; }
.riga-dati .lin { max-width: none; }

.note-finali { margin-top: 3.5mm; font-size: 8.6pt; }
.note-finali p { text-align: justify; margin: 0 0 1.2mm; }

/* ==========================================================================
   STAMPA
   ========================================================================== */
@page { size: A4; margin: 0; }

@media print {
  .topbar, .site-header, .site-footer, .top, .modulo-barra, .skip-link,
  .modulo-intro, .lightbox, .hero, .hero--interno { display: none !important; }

  html, body { background: #fff !important; }
  .sezione { padding: 0 !important; }
  .container, .modulo-wrap { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
  .foglio { display: block; gap: 0; }

  .pagina {
    width: 210mm; min-height: 297mm; max-width: none;
    box-shadow: none; margin: 0;
    break-after: page;
  }
  .pagina:last-child { break-after: auto; }

  .lin:focus { background: transparent; }
  .lin::placeholder { color: transparent !important; }
  a { color: #000 !important; }
  .piede-foglio a { color: #000 !important; }
}

/* --------------------------------------------------- schermi stretti ----- */
@media screen and (max-width: 780px) {
  /* su telefono la barra e' alta ~200px: se resta appiccicata copre un terzo
     dello schermo mentre si compila. Scorre via con la pagina */
  .modulo-barra { position: static; }
  .pagina { padding: 8mm 6mm; font-size: 11pt; min-height: 0; }
  .barra-titolo { font-size: 14pt; }
  .riga-tipo { flex-wrap: wrap; }
  .riga-firme, .riga-mc { flex-direction: column; gap: 2mm; }
  .consenso__riga { grid-template-columns: 1fr; gap: 1mm; }
  .consenso__riga .scelta:first-of-type { grid-column: 1; }
  /* su telefono le righe vanno a capo invece di schiacciare i campi a 8mm:
     serve una larghezza minima utile, altrimenti flex li comprime all'osso */
  .rigo, .riga-dati { flex-wrap: wrap; row-gap: 1.6mm; }
  .lin, .lin--vuota { min-width: 34mm; }
  /* solo a schermo: le etichette lunghe vanno a capo invece di sfondare il
     foglio. In stampa restano nowrap, come nel PDF ufficiale FMI */
  .et { white-space: normal; }
}