/* Pagina /domande-frequenti/ — rifatta il 21 lug 2026.
   Prima: hero alto (H1 fino a 3rem + intro larga + 8 chip a capo su 3-4 righe) e 8 risposte
   gia' aperte sparse -> la prima domanda finiva sotto la piega e l'elenco non si leggeva.
   Ora: fascia d'apertura compatta, due colonne con indice sticky, accordion tutti chiusi.
   L'accordion resta il pattern "+"/"–" del resto del sito: nessuna sesta variante. */

.df-page{background:#fff}
.df-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Il tema imposta `display` su .df-search e .df-clear: senza questa regola l'attributo `hidden`
   del markup non nasconde nulla (una dichiarazione d'autore batte il display:none dello UA). */
.df-page [hidden]{display:none!important}

/* ── Fascia d'apertura ────────────────────────────────────────────────────────
   Deve restare BASSA: e' una pagina di consultazione, l'utente arriva con una domanda
   in testa e deve vedere subito l'elenco. Niente eyebrow: il titolo si spiega da solo. */
.df-top{background:var(--cream);border-bottom:1px solid var(--line);padding:16px 0 26px}
.df-bc{color:var(--muted-d);font-size:.86rem;margin-bottom:14px}
.df-bc a{color:var(--muted-d);text-decoration:none}
.df-bc a:hover{color:var(--orange-d)}
.df-top h1{font-size:clamp(1.7rem,3.6vw,2.4rem);text-transform:none;letter-spacing:-.02em;margin:0}
.df-intro{max-width:620px;margin:10px 0 0;color:var(--grey);font-size:1rem;line-height:1.5}
.df-meta{margin-top:12px;color:var(--muted-d);font-size:.85rem}

/* Ricerca (mostrata da domande-frequenti.js: senza JS non filtrerebbe nulla) */
.df-search{position:relative;display:flex;align-items:center;max-width:520px;margin-top:18px;
  background:#fff;border:1px solid var(--line);border-radius:10px;transition:border-color .18s,box-shadow .18s}
.df-search:focus-within{border-color:var(--orange);box-shadow:0 0 0 3px rgba(245,132,60,.18)}
.df-search-ic{display:flex;padding:0 0 0 14px;color:var(--muted-d)}
.df-search-ic svg{width:19px;height:19px}
.df-search input{flex:1;min-width:0;border:0;outline:none;background:transparent;font:inherit;
  font-size:.98rem;color:var(--ink);padding:14px 12px}
.df-search input::placeholder{color:var(--muted-d)}
.df-search input::-webkit-search-cancel-button{display:none}
.df-clear{display:flex;align-items:center;gap:6px;margin-right:8px;padding:8px 12px;border:0;border-radius:8px;
  background:var(--cream);color:var(--muted-d);font:inherit;font-size:.82rem;font-weight:700;cursor:pointer}
.df-clear span{font-size:1.05rem;line-height:1}
.df-clear:hover{color:var(--ink)}
.df-esito{margin-top:12px;color:var(--ink);font-size:.9rem;font-weight:600}

/* ── Corpo: indice sticky + domande ───────────────────────────────────────── */
.df-body{padding:40px 0 10px}
.df-layout{display:grid;grid-template-columns:236px 1fr;gap:56px;align-items:start}
/* min-width:0 obbligatorio: senza, il `min-width:auto` dei figli di una grid fa crescere la
   colonna fino al contenuto — la riga di chip su mobile diventava larga 1993px invece di scorrere
   (invisibile a occhio solo perche' body ha overflow-x:hidden). */
.df-layout>*{min-width:0}

.df-side{position:sticky;top:96px}
.df-nav-t{font-family:'Archivo',sans-serif;font-weight:800;font-size:.76rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted-d);margin-bottom:12px}
.df-nav ul{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
.df-nav a{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:9px 0 9px 16px;
  margin-left:-2px;border-left:2px solid transparent;color:var(--grey);text-decoration:none;
  font-size:.93rem;line-height:1.3;transition:color .18s,border-color .18s}
.df-nav a:hover{color:var(--ink)}
.df-nav a em{font-style:normal;font-size:.78rem;font-weight:700;color:var(--muted-d);flex:0 0 auto}
/* Argomento in lettura: e' l'unico segnale di posizione della pagina, quindi va marcato bene. */
.df-nav a.on{color:var(--ink);font-weight:700;border-left-color:var(--orange)}
.df-nav a.on em{color:var(--orange-text)}

/* padding:0 annulla il `section{padding:clamp(56px,8vw,94px) 0}` globale del tema: qui i gruppi
   sono voci di un elenco, non fasce di pagina (senza, ognuno partiva 94px piu' in basso). */
.df-group{margin:0 0 40px;padding:0;scroll-margin-top:96px}
.df-group:last-of-type{margin-bottom:24px}
.df-group>h2{font-size:1.35rem;text-transform:none;letter-spacing:-.01em;color:var(--ink);margin:0 0 14px}

.df-faq details{border-bottom:1px solid var(--line)}
.df-faq details:first-child{border-top:1px solid var(--line)}
.df-faq summary{padding:17px 40px 17px 0;position:relative;font-weight:700;color:var(--ink);
  cursor:pointer;list-style:none;line-height:1.4;transition:color .18s}
.df-faq summary::-webkit-details-marker{display:none}
.df-faq summary:hover{color:var(--orange-d)}
.df-faq summary:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:4px}
.df-faq summary::after{content:"+";position:absolute;right:6px;top:13px;color:var(--orange-d);
  font-size:1.4rem;font-weight:700;line-height:1.2}
.df-faq details[open] summary{color:var(--orange-d)}
.df-faq details[open] summary::after{content:"\2013"}
.df-faq .in{padding:0 40px 20px 0;color:var(--grey);line-height:1.6}
.df-faq .in p{margin:0 0 10px}
.df-faq .in p:last-child{margin-bottom:0}
.df-faq .in a{color:var(--orange-text);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.df-faq .in a:hover{color:var(--orange-d)}
/* Arrivo da un link diretto alla singola domanda (#d-…): la evidenzia per un attimo. */
.df-faq details:target summary{color:var(--orange-d)}

/* Stato vuoto della ricerca */
.df-vuoto{padding:6px 0 10px}
.df-vuoto h2{font-size:1.3rem;text-transform:none;margin-bottom:10px}
.df-vuoto p{margin-bottom:16px;color:var(--grey)}

/* ── Sotto i 900px: l'indice diventa una riga di chip scorrevole, non sticky ──
   (una barra fissa in cima ruberebbe altezza utile su schermi piccoli, oltre all'header) */
@media(max-width:900px){
  .df-layout{grid-template-columns:1fr;gap:0}
  .df-side{position:static;margin-bottom:24px}
  /* Su schermo piccolo ogni riga sopra la prima domanda si paga: le chip si spiegano da sole
     e il conteggio totale e' gia' implicito nell'elenco. */
  .df-nav-t,.df-meta{display:none}
  .df-nav ul{display:flex;gap:8px;overflow-x:auto;border-left:0;padding-bottom:6px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .df-nav ul::-webkit-scrollbar{display:none}
  .df-nav li{flex:0 0 auto}
  /* min-height 44px: sono il comando principale della pagina su mobile, si toccano col pollice. */
  .df-nav a{margin-left:0;border:1px solid var(--line);border-radius:999px;background:var(--card);
    padding:8px 16px;min-height:44px;align-items:center;font-size:.88rem;font-weight:700;white-space:nowrap}
  .df-nav a.on{border-color:var(--orange);background:var(--orange);color:#141010}
  /* .8 e non meno: sotto quella soglia il contatore sull'arancione scende sotto il 4.5:1 (AA). */
  .df-nav a.on em{color:rgba(20,16,13,.8)}
}

@media(max-width:520px){
  .df-top{padding:14px 0 22px}
  .df-body{padding:30px 0 6px}
  .df-intro{font-size:.97rem}
  .df-search input{padding:13px 10px;font-size:.95rem}
  .df-group{margin-bottom:34px}
  .df-faq summary{padding:16px 34px 16px 0}
  .df-faq .in{padding:0 6px 18px 0}
}