/* =====================================================================
   FF Theme · pagina Domande frequenti (/f-a-q/), dopo pagina.css
   Dal concept pagine/federicofloris-faq-concept.html (blocco «PAGINA F.A.Q.»).
   In più: stati senza JavaScript (risposte tutte aperte, niente ricerca né «Copia link»).
   ===================================================================== */
.ff-jump a{grid-template-columns:2.8rem minmax(0,1fr) auto}
.ff-fq-jump a{padding-block:clamp(6px,1vh,10px)}
.ff-fq-jump i{font:400 .7rem/1 var(--ff-mono)!important}

/* ===== 02 · Domande ===== */
.ff-fq-grid{display:grid;grid-template-columns:minmax(13rem,.3fr) minmax(0,1fr);gap:clamp(32px,5vw,96px);margin-top:clamp(40px,7vh,72px);align-items:start}
.ff-fq-nav{position:sticky;top:calc(var(--ff-head) + 24px);min-width:0}
.ff-fq-nav ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ff-fq-nav a{position:relative;display:grid;grid-template-columns:2.6rem minmax(0,1fr) auto;align-items:baseline;gap:8px;padding:12px 0;border-bottom:1px solid var(--line);text-decoration:none;font-weight:500;color:color-mix(in srgb,var(--fg) 62%,transparent);transition:padding var(--ff-t-mid) var(--ff-ease-out),color var(--ff-t-fast),opacity var(--ff-t-fast)}
.ff-fq-nav small{font-size:.7rem;color:var(--accent)}
.ff-fq-nav i{font-size:.68rem;font-style:normal;color:var(--muted)}
.ff-fq-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform 500ms var(--ff-ease-out)}
.ff-fq-nav a:hover{color:var(--fg)}
.ff-fq-nav a.is-on{color:var(--fg);padding-left:8px}
.ff-fq-nav a.is-on::after{transform:scaleX(1)}
/* argomento senza risultati per la ricerca in corso */
.ff-fq-nav a.is-off{opacity:.35;pointer-events:none}
.ff-fq-main{min-width:0}
/* barra della ricerca: ferma sotto l'header mentre scorrono le domande */
.ff-fq-bar{position:sticky;top:var(--ff-head);z-index:3;display:flex;align-items:center;gap:20px;padding:14px 0 12px;background:var(--bg)}
.ff-fq-bar .ff-fsearch{flex:1;min-width:0}
.ff-fq-bar .ff-fsearch input{font-size:1.15rem}
.ff-fq-count{margin:0;font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.ff-fq-g{display:grid;gap:4px;padding-top:clamp(28px,5vh,48px);scroll-margin-top:calc(var(--ff-head) + 64px)}
.ff-page .ff-scene .ff-fq-g h3{display:flex;align-items:baseline;gap:12px;margin:0 0 8px;font-size:clamp(1.5rem,2.2vw,2rem);letter-spacing:-.03em}
.ff-fq-g h3 small{font-size:.7rem;font-weight:400;letter-spacing:0;color:var(--accent)}
.ff-fq-g h3 i{margin-left:auto;font-size:.7rem;font-weight:400;font-style:normal;letter-spacing:0;color:var(--muted)}
.ff-fq-ol li{scroll-margin-top:calc(var(--ff-head) + 80px)}
.ff-fq-ol button{font-size:1.06rem;padding:16px 0}
.ff-fq-ol .ff-fa p{font-size:1rem;max-width:64ch}
/* «Copia link» sta dentro l'elenco delle FAQ: non prende lo stile dei pulsanti-domanda (griglia a tre colonne) */
.ff-faq .ff-fq-copy{display:inline-block;width:auto;grid-template-columns:none;white-space:nowrap;margin:-6px 0 16px calc(2.1rem + 10px);padding:0;background:none;border:0;cursor:pointer;color:var(--muted);font-size:.66rem;line-height:1.4;letter-spacing:.05em;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px}
.ff-faq .ff-fq-copy:hover{color:var(--accent)}
.ff-fq-more{justify-self:start;margin-top:14px}
.ff-fq-empty{margin:32px 0 0;color:var(--muted)}
.ff-fq-empty .ff-link{color:var(--fg)}

/* ===== Senza JavaScript: risposte tutte aperte, niente ricerca né «Copia link» ===== */
html:not(.ff-js) .ff-fq-ol .ff-fa{grid-template-rows:1fr}
html:not(.ff-js) .ff-fq-ol button{cursor:default;pointer-events:none}
html:not(.ff-js) .ff-fq-ol .ff-plus,html:not(.ff-js) .ff-fq-copy,html:not(.ff-js) .ff-fq-bar .ff-fsearch{display:none}

@media (min-width:900px) and (max-width:1180px){
  .ff-fq-grid{grid-template-columns:minmax(12rem,.32fr) minmax(0,1fr);gap:32px}
  .ff-fq-nav i{display:none}
  /* desktop stretto: voci un po' più piccole per restare su una riga; un titolo più lungo va comunque a capo */
  .ff-fq-nav a{grid-template-columns:2.2rem minmax(0,1fr);font-size:.9rem}
}
@media (max-width:899px){
  .ff-fq-grid{display:block;margin-top:24px}
  /* gli argomenti diventano una riga di pillole ferma sotto l'header; la ricerca scorre con la pagina */
  .ff-fq-nav{top:var(--ff-head);z-index:4;margin:0 calc(var(--ff-pad-r) * -1) 0 calc(var(--ff-pad-l) * -1);padding:10px 0;background:var(--bg);border-bottom:1px solid var(--line)}
  .ff-fq-nav ol{display:flex;gap:6px;border-top:0;overflow-x:auto;scrollbar-width:none;padding:0 var(--ff-pad-r) 0 var(--ff-pad-l)}
  .ff-fq-nav ol::-webkit-scrollbar{display:none}
  .ff-fq-nav ol.ff-ovf{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl,0px),#000 calc(100% - var(--fr,36px)),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl,0px),#000 calc(100% - var(--fr,36px)),transparent 100%)}
  .ff-fq-nav li{flex:none}
  .ff-fq-nav a{display:inline-flex;gap:8px;padding:9px 14px;border:1px solid var(--line);color:var(--fg);font-size:.92rem;white-space:nowrap}
  .ff-fq-nav a::after{display:none}
  .ff-fq-nav a.is-on{padding-left:14px;background:var(--fg);border-color:var(--fg);color:var(--bg)}
  .ff-fq-nav a.is-on small,.ff-fq-nav a.is-on i{color:var(--bg)}
  .ff-fq-nav a.is-on .ff-sub{color:color-mix(in srgb,var(--bg) 60%,transparent)}
  .ff-fq-bar{position:static;padding-top:20px}
  .ff-fq-g{scroll-margin-top:calc(var(--ff-head) + 70px)}
  .ff-fq-ol li{scroll-margin-top:calc(var(--ff-head) + 90px)}
}
@media (max-width:520px){
  .ff-fq-bar{flex-direction:column;align-items:stretch;gap:8px}
  .ff-fq-ol button{font-size:1rem}
}
/* telefono: gli argomenti stanno già nella riga di pillole della sezione 02; l'apertura resta in uno schermo */
@media (max-width:599px){
  .ff-fq-jump{display:none}
  .ff-page .ff-scene.ff-hero .ff-actions{flex-wrap:wrap;overflow:visible;-webkit-mask-image:none;mask-image:none;margin-inline:0;padding-inline:0}
}