/* ==========================================================================
   ods-mobile.css — correzioni mobile-first per home e form.
   Caricato PER ULTIMO, dopo styles.css e form3.css, cosi' non tocca nulla
   di esistente e si rimuove togliendo un solo <link>.

   Riferimenti ai problemi che risolve:
   - assets/scss/style.scss:249  h1 dell'hero bloccato a 1.3rem !important
   - assets/scss/style.scss:453  .helper fisso che si sovrappone al contenuto
   - assets/scss/style.scss:577  .helper right:-220px in mobile
   - public/form3.css:1652       .ods-progress-sticky senza sfondo, illeggibile
   - public/form3.css:1700       .ods-progress-sticky con top e bottom insieme
   ========================================================================== */

:root {
  --ods-touch: 48px;      /* altezza minima di un bersaglio tattile: campi e select */
  --ods-cta: 54px;        /* bottoni: piu' alti dei campi, sono l'azione */
}

/* SOGLIA MOBILE — a 768px CSS netti (l'iPad in verticale) il sito usa DUE
   sistemi di breakpoint che non combaciano, ed e' un difetto suo, non nostro:

     - la griglia Bootstrap passa a colonne affiancate da `min-width: 768px`;
     - assets/scss/style.scss:237,283,566,682,830 tiene la tipografia mobile
       fino a `max-width: 768px`.

   A 768px netti valgono quindi insieme "colonne da desktop" e "testo da
   telefono". La prima stesura di questo foglio usava `767.98px` ovunque e
   lasciava scoperta proprio quella larghezza: misurato a 768x1024, h1 20,8px,
   niente velo, CTA 161px — cioe' PEGGIO della produzione (208px).

   Regola adottata, e va rispettata aggiungendo nuove regole:
     - `max-width: 768px`    per cio' che deve battere style.scss (tipografia,
                             allineamento, velo, densita');
     - `max-width: 767.98px` per cio' che presuppone le colonne IMPILATE
                             (nascondere l'iframe: sopra quella soglia la
                             colonna resterebbe vuota accanto al testo).
   Dove serve, il layout del blocco viene forzato a impilarsi anche a 768px,
   invece di lasciare che meta' regole credano una cosa e meta' un'altra. */

/* --------------------------------------------------------------------------
   1. HOME — hero
   -------------------------------------------------------------------------- */

.hero-benefits,
.hero-benefits-wrap ul,
.hero-benefits-wrap ol {
  list-style: none;
  padding-left: 0;
  margin: 0 0 1.5rem;
}

.hero-benefits li,
.hero-benefits-wrap li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.7rem;
  font-size: 1.0625rem;
  line-height: 1.45;
  font-weight: 500;
}

/* spunta disegnata in CSS: nessuna richiesta di rete in piu' */
.hero-benefits li::before,
.hero-benefits-wrap li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background-color: #2fbf71;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.8rem;
}

/* Riga di conformita' AGCOM / art. 21 DSA.
   Il selettore deve essere lungo quanto public/styles.css:12049
   (`.graphic-header .text-section p { font-size: 1rem }`), altrimenti quello
   vince per specificita' e la riga esce a 16px invece che secondaria.
   Misurato: contrasto peggiore 5,83:1 su bianco a opacita' .82, 0% dei pixel
   sotto 4,5:1 (tests/rebuild/measure-2026-08-10/contrast-hero.txt). */
/* L'operatore la vuole "piccola e in fondo": e' gia' l'ultimo elemento della
   colonna, e da 0.85 scende a 0.76rem. Il colore e l'opacita' NON cambiano,
   quindi il rapporto di contrasto misurato resta quello (5,83:1): rimpicciolire
   il corpo non lo altera, e 5,83 e' sopra il 4,5 richiesto. Scendere ancora
   vorrebbe dire testo sotto i 12px, che su un obbligo di legge non si fa. */
.graphic-header .text-section p.hero-trust,
.hero-trust {
  margin-top: 1.4rem;
  margin-bottom: 0;
  font-size: 0.76rem;
  line-height: 1.45;
  opacity: 0.82;
}

@media (max-width: 768px) {

  /* Allineamento a sinistra: un elenco di benefici centrato non si scansiona. */
  .graphic-header {
    text-align: left;
    /* 1.25/1.75 e non 1.75/2: ogni riga guadagnata avvicina la CTA al primo
       scroll (review PR13 14/08, P1 "CTA sotto il primo scroll"). */
    padding: 1.25rem 0 1.75rem;
    min-height: 0;
  }

  /* Le stelle della bandiera UE (livello european-flag4.png, style.scss:230)
     cadono esattamente dietro al titolo e ai benefici e li rendono illeggibili.
     Velo scuro fra decorazione e testo: la decorazione resta, il contrasto torna.
     Ridisegno hero 12/08 (screenshot operatore 14:52): l'illustrazione ora sta
     in ALTO, quindi il velo si capovolge — leggero nella zona alta (le stelle
     restano un accenno dietro l'illustrazione), quasi pieno da li' in giu',
     dove le stelle sparse erano solo rumore dietro titolo e benefici.
     Fermate in px e non in %: l'altezza dell'header cambia con la lingua,
     la zona dell'illustrazione no (~440px dal bordo, misurata a 390). */
  .graphic-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(5, 11, 36, 0.42) 0px,
      rgba(5, 11, 36, 0.42) 150px,
      rgba(5, 11, 36, 0.88) 280px,
      rgba(5, 11, 36, 0.88) 100%
    );
    pointer-events: none;
    z-index: 0;
  }

  .graphic-header > .container {
    position: relative;
    z-index: 1;
  }

  /* Titolo leggibile. Sovrascrive style.scss:249 (1.3rem !important).
     ------------------------------------------------------------------------
     REGRESSIONE CORRETTA IL 2026-08-10 (intervento 5).
     Prima qui c'era solo `font-size: 1.8rem !important` senza nessuna regola
     di andata a capo. Su una parola piu' lunga della colonna il titolo usciva
     dallo schermo: sulla home olandese "geschillenbeslechtingsdienst" misurava
     403 px dentro una colonna di 366 px, e il documento diventava largo 415 px
     su un viewport di 390 (misurato con CDP, scrollWidth vs clientWidth).
     Si vede in sandbox/shots/int5-obbligatori/prima-10-nl-home-390.png.

     Le tre regole insieme, in quest'ordine:
     - `overflow-wrap: break-word` spezza la parola SOLO se non c'e' altro modo
       (a differenza di `word-break: break-all`, che spezzerebbe sempre e
       renderebbe illeggibili anche i titoli corti);
     - `hyphens: auto` mette il trattino dove la lingua lo consente — funziona
       perche' <html lang> e' valorizzato per ognuna delle 16 lingue;
     - `text-wrap: balance` distribuisce le righe, ed e' ignorato dai browser
       che non lo conoscono.
     `clamp()` sul corpo del carattere toglie il resto del problema: a 390 px
     7.4vw vale 28,9 px e viene tagliato a 1.8rem = 28,8 px, cioe' il titolo
     resta esattamente quello di prima; sotto i 390 px (iPhone SE a 375,
     Galaxy Fold chiuso a 344, minimo di supporto 320) scende in proporzione
     fino a 1.45rem invece di sbordare. Misurato, non stimato. */
  .graphic-header .text-section h1,
  .graphic-header .text-section h1.hero-title {
    font-size: clamp(1.45rem, 7.4vw, 1.8rem) !important;
    line-height: 1.18;
    letter-spacing: -0.01em;
    /* Era 1.4rem (ridisegno 12/08): sceso a 1 per riportare la CTA nel primo
       scroll (review PR13 14/08) senza togliere la separazione. */
    margin-bottom: 1rem !important;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
    text-wrap: balance;
  }

  .hero-benefits li,
  .hero-benefits-wrap li {
    font-size: 0.97rem;
    /* Era 0.95rem d'aria fra le spunte: 0.55 tiene la lista scandibile e
       restituisce ~25px alla CTA (review PR13 14/08, P1). */
    margin-bottom: 0.55rem;
  }

  .hero-benefits,
  .hero-benefits-wrap ul,
  .hero-benefits-wrap ol {
    margin-bottom: 1.2rem;
  }

  /* Stesso difetto del titolo dell'hero, altra pagina: il titolone delle
     pagine interne (`.header-interno`, templates/_tpl_header_site.php:366)
     sta a 3rem con `overflow: hidden` e nessuna regola di andata a capo
     (public/styles.css:12006 e :12076).  Una parola piu' lunga della colonna
     non sborda: viene TAGLIATA, e su testo centrato la si perde da entrambi i
     lati.
     MISURATO su /nl/trusted-flagger-segnalazioni-massive-dsa.html a 390 px:
     scrollWidth 613 contro clientWidth 390 — cioe' 223 px di titolo invisibili.
     Si vede in sandbox/shots/int5-obbligatori/prima-11-nl-interna-390.png.
     Trovato dalla review ostile Codex del 2026-08-10 (difetto 7): il brief
     chiedeva la regressione dell'hero, ma e' lo stesso difetto e la stessa
     cura, e lasciarlo li' sapendolo sarebbe stato peggio. */
  .header-interno {
    font-size: clamp(1.9rem, 8vw, 3rem);
    line-height: 1.08;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
    padding-left: 12px;
    padding-right: 12px;
  }

  /* La riga select+bottone e' `d-flex flex-column flex-md-row`: da 768px netti
     Bootstrap la mette gia' in orizzontale, mentre noi diamo al bottone
     `width: 100%`. Le due cose insieme schiacciavano la select a ~60px e
     facevano sbordare il bottone fuori dallo schermo (visto a 768x1024).
     Finche' siamo "mobile" la riga si impila, punto. */
  .graphic-header .hero-form .d-flex {
    flex-direction: column !important;
    /* gap-2 di Bootstrap (0.5rem, !important): fra selettore e CTA serve
       piu' respiro (ridisegno hero 12/08). */
    gap: 0.9rem !important;
  }

  /* MENO DETTAGLI (ridisegno hero 12/08): il segnaposto del selettore
     ("Seleziona una piattaforma") dice gia' tutto, l'etichetta sopra e' un
     doppione. Nascosta all'occhio, NON al lettore di schermo: pattern
     visually-hidden, non display:none, cosi' il campo conserva il suo nome
     accessibile. Da 768px in su resta visibile (regola base piu' sotto). */
  .hero-form .hero-select-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* Una sola azione primaria, a tutta larghezza e con altezza da pollice. */
  .graphic-header .hero-cta,
  .graphic-header .text-section .btn.hero-cta {
    width: 100%;
    min-height: var(--ods-cta);
    font-size: 1.05rem;
    padding: 0.85rem 1.25rem;
    border-radius: 12px;
  }

  .graphic-header .form-floating > .form-select {
    min-height: var(--ods-cta);
    border-radius: 12px;
    font-size: 1rem;
  }

  .hero-form .spiega-piattaforme {
    margin-top: 0.6rem;
    line-height: 1.35;
    opacity: 0.8;
  }

  /* RIDISEGNO HERO 12/08 (screenshot operatore 14:52: "l'immagine dovrebbe
     essere sopra, non sotto, e dovrebbe prendere piu' spazio, con piu'
     respiro"). L'illustrazione sale SOPRA il titolo via `order` — solo CSS,
     il markup non si tocca e il desktop resta identico — e cresce a ~88vw.
     Ordine finale a 390: navbar > immagine > titolo > spunte > selettore >
     CTA > riga AGCOM (tutto il testo vive in .text-section, che segue). */
  .graphic-header .row > .image-section {
    order: -1;
    margin: 0.25rem 0 1rem;
    text-align: center;
  }

  /* COMPROMESSO 14/08 fra le due richieste vere: l'immagine RESTA sopra
     (operatore 12/08, screenshot 14:52) ma smette di spingere selettore e
     CTA sotto il primo scroll (review PR13 14/08, P1). Da 88vw pieni
     (274px d'altezza a 390) si scende a un tetto di 180px: il visual c'e',
     l'azione primaria pure. max-height+max-width con width:auto conservano
     le proporzioni (1000x800). */
  .graphic-header .image-section img {
    width: auto;
    max-width: 86vw;
    max-height: 180px;
    object-fit: contain;
  }

  /* La riga AGCOM chiude l'hero: piu' staccata, stessa misura (0.76rem e'
     gia' il pavimento: obbligo di legge, non scende sotto i 12px). */
  .graphic-header .text-section p.hero-trust {
    margin-top: 1.2rem;
  }
}

/* --------------------------------------------------------------------------
   2. HOME — densita' delle sezioni lunghe
   Le sezioni esplicative arrivano a 5.454px su un telefono (sezione "3 semplici
   step"). Il contenuto resta nel DOM per SEO: viene solo compresso e, dove
   marcato da ods-mobile.js, richiudibile.
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .ods-collapsible {
    position: relative;
    overflow: hidden;
  }

  .ods-collapsible[data-collapsed="true"] {
    max-height: 620px;   /* titolo + una scheda intera, non una scheda tagliata a meta' */
  }

  /* sfumatura che segnala "c'e' dell'altro" */
  .ods-collapsible[data-collapsed="true"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 120px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--ods-fade, #fff) 85%);
    pointer-events: none;
  }

  .ods-more {
    display: block;
    width: 100%;
    min-height: var(--ods-touch);
    margin: 0.75rem auto 2rem;
    padding: 0.75rem 1.25rem;
    border: 1.5px solid currentColor;
    border-radius: 999px;
    background: transparent;
    font-weight: 700;
    font-size: 0.95rem;
    color: #12306b;
  }
}

/* Rete di sicurezza sopra la soglia mobile. `ods-mobile.js` ora smonta il
   collasso quando si esce dal telefono, ma se lo script fosse bloccato o
   fallisse a meta' resterebbero a video un contenitore ritagliato e un bottone
   "Leggi di piu'" senza scopo. Fuori dal mobile il CSS li neutralizza comunque:
   il contenuto e' sempre visibile per intero, il bottone sparisce. */
@media (min-width: 768.02px) {
  .ods-collapsible,
  .ods-collapsible[data-collapsed="true"] {
    max-height: none !important;
    overflow: visible;
  }

  .ods-collapsible[data-collapsed="true"]::after {
    content: none;
  }

  .ods-more {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   2-bis. Video YouTube in attesa di consenso
   pagine/ODS_home.php:59 emette <iframe data-src> senza src; il src viene
   messo solo dopo il consenso "media" (analytics_manager.php:174). Fino ad
   allora resta un buco di 400px subito sotto l'hero. Appena arriva il src il
   selettore smette di corrispondere e il video ricompare da solo.

   SOLO MOBILE, e non e' un dettaglio: la prima stesura applicava la regola a
   tutte le viewport. Sul telefono le colonne si impilano e nascondere l'iframe
   chiude il buco; sul desktop il video sta in una `col-md-6` accanto al testo,
   quindi nasconderlo lasciava **mezza pagina bianca** — circa 530px di colonna
   sinistra vuota accanto a "Perche' potresti aver bisogno dell'ADR Center".
   Verificato a schermo a 1440x900 prima della correzione:
   sandbox/shots/review-2026-08-10/sbx-desktop-video-area.png.
   Sul desktop il buco resta come in produzione: e' un difetto pre-esistente
   fuori dal perimetro di questo lavoro, non una cosa che peggioriamo noi.

   Soglia `767.98px` e non `768px`, a differenza del resto del foglio: la
   colonna del video e' `col-md-6`, quindi a 768px netti e' gia' affiancata al
   testo. Nascondere l'iframe la' dentro rifarebbe l'esatto buco bianco che
   questa regola serve a togliere.
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
  iframe[data-src]:not([src]) {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   2-ter. Una sola azione primaria per schermata
   Le CTA ripetute erano larghe 187px; accanto c'era un bottone verde pieno
   di pari peso visivo. Il verde diventa secondario a contorno.
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .btn.btn-link2 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--ods-touch);
    border-radius: 12px;
    text-align: center;
  }

  .btn.btn-success.btn-link2,
  .btn.btn-success.btn-link2.text-light {
    background-color: transparent !important;
    background-image: none !important;
    border: 1.5px solid #198754 !important;
    color: #198754 !important;
  }
}

/* --------------------------------------------------------------------------
   3. FORM — barra di avanzamento
   Era sticky con lo sfondo commentato (form3.css:1652): il testo della pagina
   le passava sotto e restava illeggibile.
   -------------------------------------------------------------------------- */

.ods-progress-sticky {
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid #e5e7eb;
  box-shadow: 0 -4px 16px rgba(16, 24, 40, 0.10);
}

@media (max-width: 576px) {
  .ods-progress-sticky {
    top: auto;              /* form3.css:1700 metteva top e bottom insieme */
    bottom: 0;
    margin-bottom: 0;
    border-radius: 14px 14px 0 0;
  }
}

/* --------------------------------------------------------------------------
   4. FORM — ticket id, intestazione, bersagli tattili
   -------------------------------------------------------------------------- */

.ticketId {
  font-size: 11px !important;
  opacity: 0.55;
  margin-bottom: 0.25rem;
  font-weight: 500;
}

.ticketId b {
  font-weight: 600;
}

@media (max-width: 768px) {

  .question-box h1,
  .question-box .h1 {
    font-size: 1.5rem !important;
    line-height: 1.2;
    margin-bottom: 0.75rem;
  }

  /* campi e select: altezza da pollice, angoli coerenti */
  .question-box .form-control,
  .question-box .form-select,
  .question-box .form-floating > .form-control,
  .question-box .form-floating > .form-select {
    min-height: var(--ods-touch);
    border-radius: 12px;
  }

  /* le opzioni radio diventano schede interamente toccabili */
  .question-box .form-check,
  .question-box .radio-card,
  .question-box label.card {
    min-height: var(--ods-touch);
  }

  .question-box .btn {
    min-height: var(--ods-cta);
    border-radius: 12px;
    font-size: 1.02rem;
  }

}

/* --------------------------------------------------------------------------
   4-bis. FORM — passo 0 (email)
   Era una schermata fredda: un campo solo, nessun contesto, nessuna idea di
   quanto manchi, nessuna dicitura di conformita'.
   -------------------------------------------------------------------------- */

.ods-step0-next {
  margin-top: 1.5rem;
  padding: 1rem 1.1rem 0.85rem;
  background: #f4f7fc;
  border-radius: 14px;
}

.ods-step0-next-title {
  margin: 0 0 0.6rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: #12306b;
}

.ods-step0-next-list {
  margin: 0;
  padding-left: 1.15rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #41506b;
}

.ods-step0-next-list li + li {
  margin-top: 0.3rem;
}

@media (max-width: 768px) {
  /* Sul layout mobile la card esterna non c'e': il fondo leggermente piu'
     scuro mantiene questo riepilogo distinguibile dalla pagina. */
  .ods-step0-next {
    background: #edf1f7;
  }
}

.ods-step0-trust {
  margin: 1.1rem 0 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: #6b7690;
  /* La dicitura e' l'unica riga OBBLIGATORIA della pagina (regola 6 di
     CLAUDE.md) e in olandese contiene una parola sola di 46 caratteri —
     "buitengerechtelijkegeschillenbeslechtingsorgaan", che e' la forma con cui
     compare in Gazzetta ufficiale. A 390px, senza questa riga, sfonda il
     riquadro e l'ultima sillaba viene tagliata: fotografato in
     sandbox/shots/int-review4/after/trust-nl.png prima della correzione.
     `anywhere` e non `break-word`: break-word non spezza una parola che sta
     da sola sulla riga finche' non ha gia' provato a mandarla a capo intera.
     Stessa famiglia di difetto dell'H1 olandese in questo stesso file. */
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* La bolla d'aiuto e' fissa in basso a destra: senza questo margine l'ultima
   riga di testo le finisce sotto.

   NON c'e' anche un `padding-bottom` grande, ed e' una scelta misurata, non una
   dimenticanza. La barra "quanto manca" e' `position: sticky; bottom: 0`: al
   primo paint copre 24px dell'ultima riga di questa dicitura (misurato:
   `trustBottom` 808 contro `stickyTop` 784). Ho provato la correzione che la
   nota stessa proponeva — un margine inferiore pari all'altezza della barra — e
   **non funziona**: il padding aggiunge spazio SOTTO il testo, non sposta il
   testo in su, quindi al primo paint l'ultima riga resta esattamente dov'era
   (rimisurato: 796 contro 784) e in cambio si aggiungono 68px di vuoto.
   Quello che la rende leggibile e' lo scorrimento, che c'e': la pagina ha 3.160px
   di corsa e bastano ~12px perche' la riga esca da sotto la barra. Il rimedio
   vero sarebbe non mostrare affatto la barra di avanzamento al passo 0 — dove il
   progresso e' 9% e l'utente non ha ancora iniziato — ma e' una decisione di
   prodotto, non una correzione CSS. Resta aperta. */
@media (max-width: 768px) {
  .ods-step0-trust {
    padding-right: 68px;
    padding-bottom: 8px;
  }
}

@media (max-width: 768px) {
  /* Azione unica del passo 0: a tutta larghezza, non un bottoncino a sinistra. */
  /* Testo e freccia seguono ora lo stesso linguaggio dei "Procedi" successivi;
     qui si conserva soltanto la misura mobile a tutta larghezza. */
  .ods-step0-cta {
    width: 100%;
    min-height: var(--ods-cta);
    margin-top: 0.25rem;
    border-radius: 12px;
  }
}

/* --------------------------------------------------------------------------
   5. Bolla "bisogno d'aiuto?"
   In mobile style.scss:577 la spinge a right:-220px: resta a galleggiare solo
   l'illustrazione, che finisce sopra il testo. Diventa un pulsante rotondo.
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .helper,
  .helper.helperInterno {
    right: 12px !important;
    left: auto;
    /* 16px e non 84: a meta' pagina copriva i link del footer e il testo
       delle FAQ (sweep 12/08, mobile--home-de--s10: "Português" sotto la
       bolla). Incollata in basso copre solo la fascia 16-64px, che a fine
       corsa e' il padding vuoto del .subFooter (vedi sotto). */
    bottom: 16px;
    min-width: 0;
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;              /* l'etichetta resta nel DOM per gli screen reader */
    line-height: 0;
    box-shadow: 0 6px 20px rgba(16, 24, 40, 0.28);
    overflow: hidden;
  }

  .helper img,
  .helper.helperInterno img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: auto;
  }

  /* L'ultima riga della pagina (Privacy, allineata proprio a destra) non deve
     MAI restare sotto la bolla a fine corsa: la bolla arriva a 64px dal
     fondo, questo padding tiene l'ultimo link a 76px. */
  .subFooter {
    padding-bottom: 76px;
  }
}


/* ==========================================================================
   BERSAGLI TOCCABILI — dallo sweep del 2026-08-12.

   La regola e' 44px minimi (vincolo del brief, e la soglia di Apple), misurata
   sul rettangolo REALE del bersaglio. I colpevoli qui sotto vengono dal
   report dello sweep (tests/ux/ux-sweep.mjs), con larghezza x altezza:
     - .footer-menu a           121x16   (Domande Frequenti, Termini, ...)
     - .lang-list-footer a       77x28   (le sedici lingue in fondo)
     - .subFooter a             144x16   (Privacy in fondo a tutto)
     - .box-ecosystem p a       306x26   (i sei domini dell'ecosistema)
     - .navbar-toggler           57x41   (l'hamburger!)
     - .logInToggler             68x33   (LOG IN nelle pagine del modulo)
     - #contactEmailSubmit      123x41   (il CONTINUA del passo 0)
   Si allarga il padding, MAI il font: il testo resta identico, cambia solo
   quanto dito serve per colpirlo.
   ========================================================================== */

.footer-menu a,
.subFooter a,
.subFooter-privacy a {
  display: inline-block;
  padding: 12px 8px;
  margin: -4px 0;
}

.lang-list-footer a {
  display: inline-block;
  padding: 10px 12px;
}

.box-ecosystem p a {
  display: inline-block;
  padding: 10px 0;
}

.navbar-toggler {
  min-width: 44px;
  min-height: 44px;
}

.logInToggler {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

#contactEmailSubmit {
  min-height: 44px;
}

/* Il pie' di pagina delle pagine del modulo (app_templates/app_footer.php,
   .question-footer): stessi collegamenti da 16px del pie' di pagina del sito,
   stessa cura — padding, non font. Dallo sweep del 2026-08-12. */
.question-footer ul li a {
  display: inline-block;
  padding: 12px 8px;
  margin: -4px 0;
}


/* ==========================================================================
   NAVBAR FLOTTANTE — richiesta operatore 12/08 (riferimento: barra a pillola
   staccata dai bordi, bianca, con ombra morbida).

   `sticky` e non `fixed`: la barra occupa il suo spazio nel flusso, quindi
   nessun contenuto le finisce sotto e non servono compensi di padding. La
   striscia-annuncio sopra scorre via, la pillola resta appesa a 10px dal
   bordo. Il raggio e' pieno (999px) solo da desktop: su telefono il menu
   aperto allunga la barra in verticale e una pillola diventerebbe una
   capsula deforme — 20px tiene la forma in entrambi gli stati.
   ========================================================================== */

.custom-navbar {
  /* FISSA: galleggia SOPRA la prima sezione (il viola le passa dietro,
     niente banda bianca) E resta in cima quando scorri — seconda richiesta
     dell'operatore nello stesso giorno, questa volta esplicita: "quando
     scorro la navbar deve rimanere sopra". Fixed da' entrambe le cose;
     absolute dava solo la prima. */
  position: fixed;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 1030;
  margin: 0;
  background: #fff !important;
  border-radius: 20px;
  box-shadow: 0 8px 30px rgba(16, 24, 40, 0.12);
  padding: 0.3rem 0.9rem;
}

@media (min-width: 1200px) {
  .custom-navbar {
    border-radius: 999px;
    top: 14px;
    left: 18px;
    right: 18px;
    padding: 0.3rem 1.2rem;
  }

  /* Una riga sola, sempre: niente voci che vanno a capo con la pillola
     lingua rimasta in alto. Le voci non si spezzano, i tre comandi a destra
     (caso, stato, lingua) chiudono la riga. */
  .custom-navbar .navbar-nav {
    flex-wrap: nowrap;
  }

  .custom-navbar .nav-link {
    white-space: nowrap;
  }
}

/* La navbar mobile e' opaca: lo scrim sfocato usato in precedenza prendeva i
   colori dell'hero e generava un alone variabile attorno alla pillola. */

/* L'hero deve arrivare FIN SOPRA, dietro la pillola: la barra non occupa piu'
   spazio nel flusso, quindi la prima sezione risale a y=0 e le si fa posto
   con il padding, non con una banda bianca. */
.graphic-header {
  padding-top: 96px;
}

@media (max-width: 1199.98px) {
  .graphic-header {
    padding-top: 84px;
  }
}

/* Il comando lingua stava appeso in alto: dentro una riga flessibile un
   elemento senza align-self eredita lo stretch del contenitore. I margini
   auto centrano DENTRO la linea flessibile qualunque cosa decida l'algoritmo
   delle linee — align-self da solo non bastava (misurato: pillola a top 46
   con la riga centrata a 76). E i due bottoni della barra portano un `mb-1`
   da telefono che li spinge 2px sotto il centro: da desktop si azzera, cosi'
   pillola, bottoni e voci stanno su UNA linea di mezzo. */
.custom-navbar .ods-lang-picker {
  align-self: center;
  display: flex;
  align-items: center;
}

@media (min-width: 1200px) {
  .custom-navbar .navbar-nav {
    align-items: center;
  }

  .custom-navbar .navbar-nav .btn {
    margin-bottom: 0 !important;
  }
}

/* Menu APERTO su telefono (<992px) — screenshot operatore 12/08 13:35: le
   voci finivano addossate al bordo destro (colpa dell'`ms-auto` del template,
   che su una colonna stretta spinge tutto a destra lasciando una banda bianca
   a sinistra), e i due bottoni restavano `btn-sm` inline, impilati a destra
   con larghezze diverse. Da aperta la pillola diventa una card: riga
   superiore invariata (logo | hamburger | bandiera), sotto le voci impilate
   allineate a SINISTRA con bersaglio >=44px, poi i due bottoni a tutta
   larghezza con lo stesso raggio della card. */
@media (max-width: 1199.98px) {
  .custom-navbar {
    border-radius: 24px;
  }

  /* Card APERTA senza fondale: tagliava la hero a meta', sporco (sweep 12/08,
     mobile--menu-open.png). Un velo scuro dietro la card, senza elementi in
     piu': il secondo box-shadow a 100vmax riempie tutto il viewport attorno
     alla card. E' solo pittura — non intercetta i tocchi, come prima. */
  .custom-navbar:has(.navbar-collapse.show),
  .custom-navbar:has(.navbar-collapse.collapsing) {
    box-shadow:
      0 8px 30px rgba(16, 24, 40, 0.12),
      0 0 0 100vmax rgba(13, 22, 56, 0.45);
  }

  /* ods-select.css mette `nowrap` sul contenitore per tenere logo, hamburger
     e bandiera su una riga. Ma con nowrap il collapse APERTO viene schiacciato
     sulla stessa riga (misurato: colonna da 121px a destra, logo strizzato a
     39x9). Qui si riapre il wrap: il collapse ha flex-basis 100% da Bootstrap
     e va a capo da solo su una riga tutta sua. La riga superiore continua a
     stare in una riga perche' il logo e' calmierato qui sotto.
     Classe doppiata per specificita': ods-select.css viene caricato DOPO
     questo foglio e a parita' di selettore vincerebbe il suo nowrap. */
  .custom-navbar.custom-navbar > .container {
    flex-wrap: wrap;
  }

  /* Il logo non deve rimpicciolirsi ne' spostarsi quando il menu si apre:
     larghezza fissa che lascia spazio a hamburger e bandiera anche a 390px.
     Misurato sul contenuto utile del container (313px): logo(mr 4) +
     hamburger 57 + bandiera 96(ml 8) = il logo deve stare sotto i 148px.
     Classe doppiata: ods-select.css, caricato dopo, rimette max-width:100%
     sullo stesso selettore. */
  .custom-navbar .navbar-brand {
    /* styles.css impone `flex: auto !important` sul marchio: l'ancora si
       gonfiava a 252px (misurato) e spingeva la bandiera a capo. Serve un
       !important pari grado per riportarla alla larghezza del logo. */
    flex: 0 0 auto !important;
  }

  .custom-navbar.custom-navbar .navbar-brand img {
    max-width: 140px;
  }

  /* Col logo a larghezza fissa lo space-between del container parcheggiava
     l'hamburger a meta' riga: margine auto e torna a destra, incollato alla
     bandiera (logo | ......... | hamburger bandiera). */
  .custom-navbar .navbar-toggler {
    display: block;
    margin-left: auto;
  }

  .custom-navbar .navbar-collapse {
    flex-basis: 100%;
    width: 100%;
  }

  .custom-navbar .navbar-collapse:not(.show):not(.collapsing) {
    display: none !important;
  }

  .custom-navbar .navbar-collapse.show {
    display: block !important;
  }

  /* ms-auto e' il colpevole dell'addossamento a destra: qui la colonna
     occupa TUTTA la card e parte da sinistra. */
  .custom-navbar .navbar-nav {
    flex-direction: column;
    margin-left: 0 !important;
    width: 100%;
    align-items: stretch;
    padding: 0.4rem 0 0.6rem;
  }

  .custom-navbar .navbar-nav .nav-item {
    width: 100%;
  }

  .custom-navbar .navbar-nav .nav-link {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0.5rem 0.25rem;
    text-align: left;
  }

  /* I due bottoni (APRI IL TUO CASO, STATO PROCEDURA): tutta larghezza,
     centrati, stesso raggio della card. `!important` per battere le utility
     mx-1/mb-1 e il padding di btn-sm del template. */
  .custom-navbar .navbar-nav .nav-link.btn {
    justify-content: center;
    width: 100%;
    margin: 0.4rem 0 0 !important;
    padding: 0.6rem 1rem;
    border-radius: 24px;
    text-align: center;
  }
}

/* ==========================================================================
   HERO: il bottone e il selettore sono UNA riga e devono sembrarlo —
   stessa altezza (62px come .ods-select__control da 768px in su), stesso
   raggio (12px, il token dei campi), centrati fra loro.
   Prima: bottone Bootstrap nudo, ~40px, raggio 6px, appeso piu' in alto del
   selettore. Visto nello screenshot desktop dell'operatore.
   ========================================================================== */

/* L'etichetta del selettore, ora FUORI dalla riga (vive nel template, sopra
   il form): la riga contiene solo campo e bottone, alti uguali. */
.hero-form .hero-select-label {
  display: block;
  margin-bottom: 0.45rem;
  color: #fff;              /* sta sul viola dell'hero: fuori dal wrapper ha
                               perso il light-custom e diventava illeggibile */
  opacity: 0.92;
  font-size: 0.95rem;
  font-weight: 700;
}

@media (min-width: 768px) {
  /* La riga ha DUE scatole della stessa altezza: il centro e' il centro.
     (La versione precedente allineava sul fondo perche' l'etichetta viveva
     dentro il wrapper e falsava ogni centro: spostata l'etichetta, la
     geometria e' tornata banale — come deve essere.) */
  .graphic-header .hero-form .d-flex {
    align-items: center !important;
  }

  .hero-form .hero-cta,
  .graphic-header .text-section .btn.hero-cta {
    min-height: 62px;
    border-radius: var(--ods-radius-field, 12px);
    padding: 0.9rem 1.6rem;
    align-self: center;
    font-weight: 650;
  }
}


/* ==========================================================================
   FOOTER RIFATTO — operatore, 12/08 ("questa parte qui di footer, rifarla").

   Prima: insegna enorme sulle lingue in cima, logo gigante con mezzo footer
   vuoto accanto, link arancioni/blu/neri mescolati. Ora: tre colonne compatte
   (marchio+contatti, naviga, siti del gruppo) con UNA tipografia, e le lingue
   come striscia sottile in fondo — un indice, non un titolo di giornale.
   ========================================================================== */

footer.container {
  padding-top: 3rem;
  padding-bottom: 2rem;
}

.ods-footer-cols {
  row-gap: 1.6rem;
}

.ods-footer-cols h4 {
  margin-bottom: 0.9rem;
  color: #33415c;
  font-size: 0.8rem;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.ods-footer-brand .logo-footer {
  max-height: 44px;
  width: auto;
  margin-bottom: 1rem;
}

.ods-footer-addr {
  color: #4a5872;
  font-size: 0.92rem;
  line-height: 1.75;
}

.ods-footer-addr a {
  color: #33415c;
  font-weight: 650;
  text-decoration: none;
}

.ods-footer-addr a:hover {
  text-decoration: underline;
}

.ods-footer-cols .footer-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ods-footer-cols .footer-menu li {
  margin: 0;
}

.ods-footer-cols .footer-menu a {
  display: inline-block;
  padding: 6px 0;
  margin: 0;
  color: #33415c;
  font-size: 0.92rem;
  font-weight: 550;
  text-decoration: none;
}

.ods-footer-cols .footer-menu a:hover {
  color: #0f1c33;
  text-decoration: underline;
}

/* La striscia delle lingue: sottile, in fondo, separata da un filo. */
.lang-list-footer {
  margin-top: 2.2rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(51, 65, 92, 0.14);
}

.lang-list-footer h5 {
  margin-bottom: 0.7rem;
  color: #6b7a95;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lang-list-footer a {
  display: inline-block;
  padding: 8px 10px;          /* resta un bersaglio da dito */
  color: #33415c;
  font-size: 0.88rem;
  font-weight: 550;
  text-decoration: none;
  border-radius: 8px;
}

.lang-list-footer a:hover {
  color: #0f1c33;
  background: rgba(51, 65, 92, 0.07);
}

/* Su telefono l'eleganza non paga il dito: i link del footer tornano a
   bersaglio pieno. Il compatto vale solo dove c'e' un puntatore. */
@media (max-width: 991.98px) {
  .ods-footer-cols .footer-menu a {
    padding: 11px 0;
  }

  .lang-list-footer a {
    padding: 11px 12px;
  }
}


/* ==========================================================================
   LA BARRA DEL MODULO — operatore, 12/08: "una navbar sopra sul form in cui
   puoi tornare sulla home salvando; voglio vedere i differenti passi, uno su
   cinque, semplici; leva il footer e il 'bisogno d'aiuto', distraggono".
   ========================================================================== */

.ods-form-page .language-form-chooser {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 56px;
  padding: 0.4rem 1rem;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 14px rgba(16, 24, 40, 0.08);
}

.ods-form-page .content {
  padding-top: 64px;   /* la barra e' fissa: il contenuto le fa posto */
}

/* Dal breakpoint tablet in su lasciamo un piccolo respiro aggiuntivo fra la
   topbar fissa e la prima card. Il telefono conserva la distanza compatta. */
@media (min-width: 768px) {
  .ods-form-page .content {
    padding-top: 76px;
  }
}

.ods-topbar-home {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none !important;
}

.ods-topbar-home:hover,
.ods-topbar-home:focus,
.ods-topbar-home:active {
  text-decoration: none !important;
}

.ods-topbar-home::before,
.ods-topbar-home::after {
  display: none !important;
  content: none !important;
}

.ods-topbar-home .logo-app-mobile {
  max-height: 36px;
  width: auto;
}

/* Menu di servizio del percorso di reclamo. Il pannello laterale tiene fuori
   dal flusso principale lingua, accesso al caso e link istituzionali, senza
   togliere loro raggiungibilita' da tastiera o da schermi piccoli. */
.ods-form-menu {
  position: relative;
  z-index: 1060;
  flex: 0 0 auto;
  margin-left: auto;
}

.ods-form-menu__toggle,
.ods-form-menu__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--ods-color-primary, #182c78);
  background: #ffffff;
  border: 1px solid var(--ods-color-border, #d8dee8);
  border-radius: 10px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.ods-form-menu__toggle:hover,
.ods-form-menu__toggle:focus-visible,
.ods-form-menu__close:hover,
.ods-form-menu__close:focus-visible {
  color: #ffffff;
  background: var(--ods-color-primary, #182c78);
  border-color: var(--ods-color-primary, #182c78);
  outline: none;
  box-shadow: var(--ods-focus-ring, 0 0 0 4px rgba(8, 120, 209, 0.16));
}

.ods-form-menu__toggle svg,
.ods-form-menu__close svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.ods-form-menu__backdrop {
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: rgba(12, 20, 38, 0.38);
  opacity: 0;
  transition: opacity 180ms ease;
}

.ods-form-menu__backdrop.is-open {
  opacity: 1;
}

.ods-form-menu__panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1060;
  width: min(380px, 100vw);
  padding: 1.25rem;
  overflow-y: auto;
  color: var(--ods-color-text, #172033);
  background: #ffffff;
  box-shadow: -16px 0 40px rgba(16, 24, 40, 0.18);
  transform: translateX(100%);
  transition: transform 180ms ease;
}

.ods-form-menu__panel.is-open {
  transform: translateX(0);
}

.ods-form-menu__panel[hidden],
.ods-form-menu__backdrop[hidden] {
  display: none !important;
}

body.ods-form-menu-open {
  overflow: hidden;
}

.ods-form-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--ods-color-border, #d8dee8);
}

.ods-form-menu__head h2 {
  margin: 0;
  color: var(--ods-color-text, #172033);
  font-size: 1.35rem;
  font-weight: 750;
  line-height: 1.2;
}

.ods-form-menu__language {
  margin-top: 1.25rem;
}

.ods-form-menu__language > label {
  display: block;
  margin-bottom: 0.5rem;
  color: #48556a;
  font-size: 0.9rem;
  font-weight: 700;
}

.ods-form-menu__panel .ods-lang-picker {
  width: 100%;
  margin: 0;
}

.ods-form-menu__panel .ods-lang-picker .ods-select__control,
.ods-form-menu__panel .ods-lang-picker > .form-select {
  width: 100%;
  min-height: 48px;
  border-radius: 10px;
}

.ods-form-menu__panel .ods-lang-picker .ods-select__value {
  display: block;
}

.ods-form-menu__panel .ods-lang-picker .ods-select__panel {
  min-width: 100%;
  max-height: min(52vh, 420px);
}

.ods-form-menu__access {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 1rem;
  padding: 0.7rem 1rem;
  color: #ffffff;
  background: var(--ods-color-primary, #182c78);
  border: 1px solid var(--ods-color-primary, #182c78);
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 750;
  text-align: center;
  text-decoration: none;
}

.ods-form-menu__access:hover,
.ods-form-menu__access:focus-visible {
  color: #ffffff;
  background: #0f205f;
  outline: none;
  box-shadow: var(--ods-focus-ring, 0 0 0 4px rgba(8, 120, 209, 0.16));
  text-decoration: none;
}

.ods-form-menu__links {
  display: grid;
  margin-top: 1.25rem;
  border-top: 1px solid var(--ods-color-border, #d8dee8);
}

.ods-form-menu__links a,
.ods-form-menu__links button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 0;
  color: #33415c;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #e8ecf2;
  border-radius: 0;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 650;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.ods-form-menu__links a:hover,
.ods-form-menu__links a:focus-visible,
.ods-form-menu__links button:hover,
.ods-form-menu__links button:focus-visible {
  color: var(--ods-color-primary, #182c78);
  outline: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 575.98px) {
  .ods-form-menu__panel {
    width: 100vw;
    padding: 1rem;
  }

  .ods-form-menu__toggle {
    width: 40px;
    height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ods-form-menu__panel,
  .ods-form-menu__backdrop {
    transition: none;
  }
}

/* I passi: cinque tacche + il conto, al centro geometrico della barra. */
.ods-topbar-steps {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.ods-topbar-dots {
  display: inline-flex;
  gap: 5px;
}

/* Tacche e contatore GRANDI (operatore, 12/08): con la barra sticky in basso
   rimossa, questa e' l'unica bussola del modulo — deve vedersi al primo
   colpo d'occhio, non essere un ornamento. */
.ods-topbar-dots i {
  display: block;
  width: 32px;
  height: 8px;
  border-radius: 999px;
  background: #dfe4eb;
  transition: background-color .25s ease;
}

.ods-topbar-dots i.is-on {
  background: var(--ods-color-primary, #182c78);
}

.ods-topbar-count {
  color: #33415c;
  font-size: 1.05rem;
  font-weight: 800;
  white-space: nowrap;
}

/* Il gruppo centrato in assoluto non deve mai allungarsi fin sotto il logo
   o i controlli laterali. */
.ods-topbar-steps {
  max-width: min(46vw, 560px);
}

/* Le attivita' pendenti ("Mancano 2 attivita'"), accese dal JS solo oltre il
   75% di progresso. Solo da tablet in su: a 390px il centro della barra ha
   ~150px fra logo e selettore lingua, il testo non ci sta. */
.ods-topbar-tasks {
  color: #9a3412;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}

.ods-topbar-tasks[hidden] {
  display: none !important;
}

@media (max-width: 767.98px) {
  .ods-topbar-tasks { display: none !important; }
}

/* Su mobile logo e menu hanno larghezze diverse: un flexbox centrerebbe le
   tacche soltanto nello spazio rimasto. Le due colonne laterali uguali tengono
   invece il progresso nel centro geometrico dell'intero header. */
@media (max-width: 767.98px) {
  .ods-form-page .language-form-chooser {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .ods-topbar-home {
    min-width: 0;
    max-width: 100%;
    justify-self: start;
  }

  .ods-topbar-home .logo-app-mobile {
    max-width: 100%;
  }

  .ods-topbar-steps {
    grid-column: 2;
    position: static;
    transform: none;
    flex: 0 0 auto;
    justify-content: center;
    justify-self: center;
    min-width: 0;
    gap: 0.45rem;
    max-width: none;
  }

  .ods-form-menu {
    grid-column: 3;
    justify-self: end;
    margin-left: 0;
  }

  .ods-topbar-dots { gap: 4px; }
  .ods-topbar-dots i { width: 16px; height: 7px; }
  .ods-topbar-count { display: none; }
}

/* A 390px restano le cinque tacche, come su desktop, ma piu' corte. Il titolo
   vive dentro la card; nella topbar il numero 1/5 sarebbe una ripetizione. */
@media (max-width: 575.98px) {
  .ods-form-page .language-form-chooser { gap: 0.5rem; }
  .ods-topbar-home .logo-app-mobile { max-height: 30px; }
  .ods-topbar-dots { display: inline-flex; gap: 3px; }
  .ods-topbar-dots i { width: 14px; height: 7px; }
  .ods-form-page .langIndicator { display: none; }
  /* Senza il titolo nella barra, le tacche occupano il lato destro e il
     contenuto della card mantiene tutto lo spazio per il proprio heading. */
  .ods-topbar-steps { gap: 0.3rem; }
}

/* Niente distrazioni sul modulo: via il pie' di pagina dei link e la bolla
   d'aiuto fissa. La Privacy resta linkata dentro il passo 0, la dicitura
   AGCOM resta in ogni schermata. */
.ods-form-page .question-footer,
.ods-form-page .helper,
.ods-form-page .helperInterno {
  display: none !important;
}

/* Con la barra FISSA, le pagine interne (che partono con .header-interno,
   gia' scuro) le fanno posto: 100px di padding esistente + 60 di barra. */
.header-interno {
  padding-top: 160px;
}

/* Il logo nella barra del modulo si vede SEMPRE: form3.css lo nascondeva da
   desktop perche' il logo grande viveva nella sidebar — che non c'e' piu'. */
.ods-form-page .language-form-chooser .logo-app-mobile {
  display: block !important;
}

/* La lingua sta a DESTRA col LOG IN, non in mezzo alle tacche dei passi.
   (2026-08-17: non piu' l'icona col pannello di bandierine — e' lo stesso
   selettore custom della home, review PR13 P2 "header incoerente".) */
.ods-form-page .ods-topbar-lang {
  margin-left: auto;
  flex: 0 0 auto;
}

/* LOG IN da link di servizio, non da azione primaria (review PR13 P2: il
   bottone arancione dominava la barra su mobile e rubava peso al passo). */
.ods-topbar-login {
  flex: 0 0 auto;
  color: #33415c;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 0.35rem 0.55rem;
  border: 1px solid #d4d9e4;
  border-radius: 8px;
  white-space: nowrap;
}

.ods-topbar-login:hover,
.ods-topbar-login:focus-visible {
  color: #182c78;
  border-color: #182c78;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   RESPIRO NELLA HERO DESKTOP (operatore 13/08, screenshot zoomato): titolo,
   spunte, selettore e bottone stavano incollati. La hero si allunga un poco
   (padding verticale) e ogni pezzo prende aria. Solo >=992: sotto, la hero
   mobile ha gia' il suo ritmo (immagine sopra, blocco 12/08).
   ========================================================================== */
@media (min-width: 992px) {
  .graphic-header {
    padding-top: 128px;
    padding-bottom: 64px;
  }
  .graphic-header .hero-title {
    margin-bottom: 1.75rem !important;   /* vince sul mb-3 inline del markup */
  }
  .graphic-header .text-section li {
    margin-bottom: 0.65rem;
  }
  .graphic-header .hero-select-label {
    margin-top: 2.25rem;
    margin-bottom: 0.85rem;
  }
  .graphic-header .hero-trust {
    margin-top: 2rem;
  }
}

/* ==========================================================================
   TABLET VERTICALE (review PR13 14/08, P1 "iPad portrait"): fra 768 e 1024
   in portrait Bootstrap impila le colonne a tutta larghezza — l'illustrazione
   diventava enorme, il testo partiva troppo in alto e la stella decorativa
   chiara dello sfondo cadeva dietro il testo. Regole dedicate: piu' aria in
   testa, velo di contrasto uniforme, illustrazione centrata e contenuta.
   Il landscape (>=1025) resta il riferimento desktop e non si tocca.
   ========================================================================== */
@media (min-width: 768.02px) and (max-width: 1024.98px) and (orientation: portrait) {
  .graphic-header {
    /* La navbar e' fixed: 4.5rem portavano l'H1 a soli 3px dal suo bordo
       inferiore a 832px. Sette rem lasciano circa 43px di separazione. */
    padding-top: 7rem;
    padding-bottom: 3rem;
    min-height: 0;
    position: relative;
  }

  /* Velo uniforme fra decorazione e contenuto: stelle e bagliori restano un
     accenno, il testo torna leggibile (stessa cura del mobile, alpha unica
     perche' qui il testo puo' stare ovunque nella colonna). */
  .graphic-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(5, 11, 36, 0.5);
    pointer-events: none;
    z-index: 0;
  }

  .graphic-header > .container {
    position: relative;
    z-index: 1;
  }

  .graphic-header .row > .image-section {
    text-align: center;
  }

  .graphic-header .image-section img {
    width: auto;
    max-width: 70vw;
    max-height: 34vh;
    object-fit: contain;
  }
}

/* ==========================================================================
   VIEWPORT ULTRAWIDE (review PR13 14/08, P2): lo sfondo bianco dell'header
   di navigazione correva a tutta larghezza senza un contenitore interno —
   oltre i ~1800px la composizione si slegava. Lo sfondo resta full-width
   (e' giusto cosi'), il CONTENUTO si ferma a una larghezza leggibile.
   ========================================================================== */
@media (min-width: 1800px) {
  .navbar > .container,
  .navbar > .container-fluid {
    max-width: 1640px;
    margin-inline: auto;
  }

  .graphic-header > .container {
    max-width: 1640px;
  }
}

/* P3 (review PR13 14/08): l'icona dell'hamburger non era centrata nel suo
   bottone. Flex la centra a prescindere dalla dimensione dell'icona. */
.navbar-toggler {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.6rem;
}

/* A 390px il selettore lingua della barra del modulo mostra SOLO la bandiera:
   col testo ("Italiano") il titolo del passo accanto a "1/5" restava senza
   spazio e spariva nei puntini (review PR13 P2: "rendere esplicito il nome
   dello step"). Il nome della lingua resta per lo screen reader (aria-label
   del pulsante) e da 576px in su torna visibile. */
@media (max-width: 575.98px) {
  .ods-form-page .ods-topbar-lang .ods-select__value {
    display: none;
  }
  .ods-form-page .ods-topbar-lang .ods-select__control {
    min-height: 40px;
    padding: 0.3rem 0.45rem;
    gap: 0.3rem;
  }
}

/* Sul telefono la barra contiene logo, avanzamento e menu compatto. */
@media (max-width: 575.98px) {
  .ods-form-page .language-form-chooser { gap: 0.4rem; }
  .ods-topbar-steps { flex: 0 0 auto; min-width: 0; justify-content: center; }
  .ods-topbar-home .logo-app-mobile { max-height: 26px; }
  .ods-topbar-login { padding: 0.3rem 0.45rem; font-size: 0.78rem; }
}

/* Nella barra del modulo su desktop il gruppo passi e' centrato in assoluto,
   quindi il primo elemento nel flusso dopo il logo (LOG IN) gli si
   incollava. Ordine visivo: logo a sinistra · passi al centro · lingua e
   LOG IN a destra, insieme. */
@media (min-width: 768px) {
  .ods-form-page .ods-topbar-lang { margin-left: auto; }
  .ods-form-page .ods-topbar-login { order: 10; margin-left: 0.25rem; }
  .ods-form-page .ods-topbar-lang { order: 9; }
}


/* I benefici dell'hero sono LINK (operatore 18/08): stesso colore del testo,
   sottolineatura puntinata come affordance, piena al passaggio. La classe
   no-underline li tiene fuori dall'effetto-link globale di styles.css
   (che al passaggio scurisce al blu brand: sul fondo scuro sparirebbero). */
.hero-benefits li .hero-benefit-link,
.hero-benefits-wrap li .hero-benefit-link {
  color: inherit;
  text-decoration: underline dotted rgba(255, 255, 255, 0.5);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}

.hero-benefits li .hero-benefit-link:hover,
.hero-benefits li .hero-benefit-link:focus-visible,
.hero-benefits-wrap li .hero-benefit-link:hover,
.hero-benefits-wrap li .hero-benefit-link:focus-visible {
  color: inherit;
  text-decoration: underline solid rgba(255, 255, 255, 0.9);
}

/* I bersagli dei benefici cliccabili atterrano con un filo d'aria sopra:
   senza, l'assestamento dell'accordion (chiusura della voce generale) rubava
   ~22px e il titolo finiva appena sopra il bordo (misurato col CDP, 18/08). */
#headingFaqCosti,
#odsArt21Section,
#odsStepsSection {
  scroll-margin-top: 32px;
}