/* Vero o falso (sito/verifiche.py, templates/_vof*.j2, vero_o_falso.html.j2): domande interattive delle verifiche
   ISSalute. Usa i token e i componenti di sae.css (colori, .sae-verdict, marchio ISSalute .sae-iss-brand, .sae-btn,
   .sae-more): qui solo ciò che è proprio delle domande. Senza JavaScript (niente classe .js su <html>) le risposte
   restano aperte e pulsanti, ricerca e filtri non compaiono. */

/* ---------------------------------------------------------------- domanda (una riga: domanda, verdetto, pulsante) */
.vof-rows{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.vof-rows>li{min-width:0}
.vof-card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:24px;min-width:0;padding:14px 18px;background:#fff;border:1px solid var(--sae-line-blue);border-left:3px solid var(--sae-navy);border-radius:2px}
.vof-card.is-open{border-left-color:var(--sae-blue)}
.vof-q{font-size:20px;line-height:1.3;color:var(--sae-navy);text-wrap:pretty}
.vof-card--compatta .vof-q{font-size:18px}
.js .vof-q--apribile{cursor:pointer}
.vof-actions{display:flex;flex-wrap:nowrap;justify-content:flex-end;align-items:center;gap:8px 12px}
.vof-actions:empty{display:none}
.vof-verdict{display:flex}
.vof-verdict .sae-verdict{margin:0;white-space:nowrap}
.vof-toggle{display:none}
.js .vof-toggle{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 12px 6px 14px;border:1px solid var(--sae-blue);border-radius:2px;color:var(--sae-blue);font-size:15px;font-weight:700;line-height:1.2;white-space:nowrap;transition:background-color .15s,color .15s}
.js .vof-toggle:hover{background:var(--sae-blue);color:#fff}
.vof-toggle[aria-expanded="true"]{background:var(--sae-pale)}
.js .vof-toggle[aria-expanded="true"]:hover{background:var(--sae-blue)}
.vof-chevron{width:16px;height:16px;transition:transform .2s}
.vof-toggle[aria-expanded="true"] .vof-chevron{transform:rotate(180deg)}
.vof-answer{grid-column:1/-1;margin-top:12px;padding-top:12px;border-top:1px solid var(--sae-line-blue)}
.js .vof-answer{display:none}
.js .vof-answer.is-open{display:block}
.vof-answer-k{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--sae-navy);margin-bottom:6px}
.vof-answer-text{max-width:680px;font-size:17px;line-height:1.6;color:var(--sae-ink)}
.vof-answer-text p+p{margin-top:8px}
.vof-card--compatta .vof-answer-text{font-size:16px}
.vof-answer-links{display:flex;flex-wrap:wrap;gap:4px 24px;margin-top:10px;font-size:15px;font-weight:700}
.vof-answer-links a{display:inline-flex;align-items:center;gap:4px;min-height:32px}
.vof-meta{margin-top:6px;font-size:14px;line-height:1.45;color:var(--sae-muted)}

/* ---------------------------------------------------------------- richiami (Fake News, home, pagina della verifica)
   Il riquadro è quello ISSalute del sito (.sae-iss-box di sae.css): qui solo misure e spazi propri. */
.vof-box .sae-iss-box-title{font-size:22px}
.vof-box .vof-card{border-color:var(--sae-iss-line,var(--sae-line-blue));border-left-color:var(--sae-navy)}
.vof-box .vof-card.is-open{border-left-color:var(--sae-blue)}
.vof-src{font-size:14px;line-height:1.5;color:var(--sae-text-soft)}
/* nell'elenco delle notizie di Fake News (li della lista con i filetti) */
.sae-list>li.sae-list-vof{padding:20px 0;border-bottom:0}
.sae-list>li.sae-list-vof .vof-box{margin:0}
/* home: sotto le notizie della sezione Fake News, più piccolo, due domande affiancate */
.vof-box--home{margin:20px 0 4px}
.vof-box--home .sae-iss-box-title{font-size:20px}
.vof-box--home .vof-rows{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
.vof-box--home .vof-card{grid-template-columns:minmax(0,1fr);align-content:start;height:100%}
.vof-box--home .vof-actions{justify-content:flex-start;flex-wrap:wrap;margin-top:10px}
.vof-box--scheda{margin:36px 0 8px}

/* ---------------------------------------------------------------- pagina /fake-news/vero-o-falso */
.vof-intro{margin-bottom:20px}
.vof-intro .vof-src{margin-bottom:8px}
.vof-lead{font-size:20px;line-height:1.5;color:var(--sae-deck);max-width:680px}
.vof-facts{margin-top:10px;font-size:15px;color:var(--sae-muted)}
.vof-facts strong{color:var(--sae-navy)}
.vof-tools{display:none}
.js .vof-tools{display:block;margin-bottom:20px;padding:16px 18px;background:var(--sae-pale);border-top:3px solid var(--sae-navy)}
.vof-label{display:block;margin-bottom:6px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--sae-navy)}
.vof-search-row{position:relative}
.vof-search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);display:flex;color:var(--sae-muted);pointer-events:none}
.vof-search-icon .sae-icon{width:18px;height:18px}
.vof-search input{width:100%;min-height:46px;padding:10px 12px 10px 40px;border:1px solid var(--sae-input-border);border-radius:2px;background:#fff;font-size:17px}
.vof-search input::placeholder{color:var(--sae-muted)}
.vof-search input:focus-visible{outline:2px solid var(--sae-blue);outline-offset:0;border-color:var(--sae-blue)}
.vof-cats{margin-top:14px}
.vof-cats-track{display:flex;flex-wrap:wrap;gap:8px}
.vof-chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:4px 12px;border:1px solid var(--sae-outline,#b7ccdf);border-radius:2px;background:#fff;color:var(--sae-navy);font-size:15px;line-height:1.2;white-space:nowrap}
.vof-chip:hover{border-color:var(--sae-blue)}
.vof-chip[aria-pressed="true"]{background:var(--sae-navy);border-color:var(--sae-navy);color:#fff}
.vof-chip.is-vuoto{color:var(--sae-muted)}
.vof-chip-n{font-size:13px;font-variant-numeric:tabular-nums;color:var(--sae-muted)}
.vof-chip[aria-pressed="true"] .vof-chip-n{color:#fff}
.vof-status{margin-top:12px;font-size:15px;color:var(--sae-text-soft)}
.vof-status:empty{display:none}
.vof-list>li[hidden]{display:none}
.js .vof-list>li.vof-later{display:none}
.vof-list>.vof-adv .sae-adv{margin:6px auto}
.vof-empty[hidden],.vof-more-wrap[hidden]{display:none}
.vof-empty{padding:24px;background:var(--sae-pale);border-top:3px solid var(--sae-navy);font-size:17px;color:var(--sae-text-soft)}
.vof-empty p+p{margin-top:6px}
.vof-more-wrap{display:none}
.js .vof-more-wrap{display:flex;justify-content:center;margin-top:24px}
.vof-more{min-height:44px;padding:10px 20px;font-size:16px}
.vof-note{margin-top:32px;padding-top:12px;border-top:1px solid var(--sae-line);font-size:14px;line-height:1.5;color:var(--sae-muted)}
.vof-legend dl{margin:0 0 10px}
.vof-legend dl>div{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:10px;padding:6px 0;border-bottom:1px solid #eef2f5}
.vof-legend dt .sae-verdict{margin:0;font-size:12px;white-space:nowrap}
.vof-legend dd{margin:0;font-size:15px;line-height:1.4;color:var(--sae-text-soft)}
.vof-legend>p{font-size:14px;line-height:1.5;color:var(--sae-text-soft)}

/* ---------------------------------------------------------------- responsive */
@media (max-width:880px){
  .vof-box--home .vof-rows{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .vof-box .sae-iss-box-title{font-size:20px}
  .vof-card{display:block;padding:14px 14px 14px 16px}
  .vof-actions{justify-content:flex-start;flex-wrap:wrap;margin-top:12px}
  .vof-q{font-size:19px}
  .vof-card--compatta .vof-q{font-size:18px}
  .vof-lead{font-size:18px}
  /* temi: una riga a scorrimento orizzontale, da bordo a bordo */
  .js .vof-tools{margin-inline:calc(-1 * var(--sae-page-gutter));padding-inline:var(--sae-page-gutter)}
  .vof-cats-track{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding-inline:var(--sae-page-gutter);margin:0 calc(-1 * var(--sae-page-gutter));padding:0 var(--sae-page-gutter) 4px}
  .vof-cats-track::-webkit-scrollbar{display:none}
  .vof-chip{scroll-snap-align:start}
}
@media (pointer:coarse){
  .js .vof-toggle,.vof-chip{min-height:44px}
  .vof-answer-links a{min-height:44px}
}
@media (prefers-reduced-motion:reduce){
  .vof-chevron,.js .vof-toggle{transition:none}
}
@media print{
  .vof-answer{display:block!important}
  .vof-toggle,.vof-tools,.vof-more-wrap{display:none!important}
}