/* Virdemlux — pagina Domande frequenti.
   Regole estratte dal mockup /sofi/virdemlux-faq.html.

   Nota: la versione precedente di questo file disegnava la freccia
   dell'accordion con content:"\ea5f" e font-family:"tabler-icons".
   Quel webfont non lo carichiamo — al suo posto c'e lo sprite SVG —
   quindi al posto della freccia usciva un quadratino vuoto. Il mockup
   la fa con due bordi ruotati, senza font: e la versione buona. */

.faq{
  display:grid;grid-template-columns:230px minmax(0,1fr);gap:40px;align-items:start;
  padding:34px 0 0;
}

/* --- indice degli argomenti --- */
.faq-nav{position:sticky;top:180px}

.faq-nav h2{
  font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px;
}

.faq-nav a{
  display:block;padding:9px 0;font-size:14px;color:var(--text);
  text-decoration:none;border-bottom:1px solid var(--line);
  transition:padding-left .2s,color .2s;
}
.faq-nav a:hover{color:var(--ink);text-decoration:none;padding-left:4px}

/* --- gruppi --- */
.faq-g{margin-bottom:38px}
.faq-g:last-child{margin-bottom:0}

.faq-g > h2{
  font-size:19px;letter-spacing:-.025em;margin-bottom:14px;
  padding-bottom:10px;border-bottom:1px solid var(--line);
  /* Lo stacco serve perche i collegamenti dell'indice puntano qui e
     l'intestazione del sito e appiccicata in alto. */
  scroll-margin-top:200px;
}

/* --- domanda e risposta --- */
.qa{border-bottom:1px solid var(--line)}

.qa summary{
  list-style:none;cursor:pointer;
  padding:16px 40px 16px 0;
  font-size:15px;font-weight:500;color:var(--ink);
  position:relative;line-height:1.45;
}
.qa summary::-webkit-details-marker{display:none}

/* La freccia: due bordi ruotati, nessun font da caricare. */
.qa summary::after{
  content:"";position:absolute;right:10px;top:22px;
  width:9px;height:9px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);transform-origin:center;
  transition:transform .22s,border-color .2s;
}
.qa[open] summary::after{transform:rotate(-135deg);top:26px}
.qa summary:hover::after{border-color:var(--ink)}
.qa summary:hover{color:var(--verde-testo)}

.qa .a{padding:0 40px 18px 0}
.qa .a p{font-size:14.5px;color:var(--muted);font-weight:300;line-height:1.7;margin:0 0 12px}
.qa .a p:last-child{margin-bottom:0}
.qa .a strong{color:var(--text);font-weight:600}
.qa .a ul,
.qa .a ol{
  margin:0 0 12px;padding-left:18px;
  color:var(--muted);font-size:14.5px;font-weight:300;
}
.qa .a li{margin-bottom:6px}
.qa .a a{color:var(--verde-testo);text-decoration:underline;text-underline-offset:2px}
.qa .a img{max-width:100%;height:auto;border-radius:10px;margin:6px 0}

@media (max-width:900px){
  /* L'indice diventa una riga di pillole sopra alle domande. */
  .faq{grid-template-columns:1fr;gap:26px}
  .faq-nav{position:static;display:flex;gap:8px;flex-wrap:wrap}
  .faq-nav h2{flex-basis:100%;margin-bottom:4px}
  .faq-nav a{
    border:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
    border-radius:var(--pill);padding:8px 15px;font-size:13.5px;
  }
  .faq-nav a:hover{padding-left:15px}
}