/* === Accordion FAQ === */

/* Il container dell'accordion pensato per vivere dentro una pagina articolo:
   la larghezza eredita dal contenitore .article-content. Niente colori di
   fondo propri — il background della sezione resta quello della pagina. */
.faq-accordion{
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 32px 0;
  border-top: 1px solid var(--line);
}

/* Ogni FAQ è un <details>: lo stile rimuove la freccia nativa del browser
   (che varia tra Chrome/Firefox/Safari e non è stilizzabile in modo
   cross-browser senza questa rimozione) e la sostituisce con un + / −
   disegnato con CSS puro sulla destra. */
.faq-item{
  border-bottom: 1px solid var(--line);
}

.faq-item > summary{
  list-style: none;       /* Firefox: rimuove il triangolo nativo */
  cursor: pointer;
  padding: 22px 48px 22px 4px;
  position: relative;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-size: 17px;
  color: var(--ink);
  line-height: 1.4;
  transition: color 180ms ease;
}

/* Chrome/Safari: rimuove il disclosure triangle nativo (::-webkit-details-marker).
   Deve stare separato dalla regola sopra perché browser non-webkit lo
   ignorerebbero facendo saltare l'intera regola. */
.faq-item > summary::-webkit-details-marker{
  display: none;
}

/* Hover solo su dispositivi con puntatore reale (desktop): su touch il :hover
   non si "spegne" al tap su un altro elemento, lasciando il titolo oro anche
   dopo la chiusura della FAQ. La regola @media (hover: hover) isola il
   comportamento al desktop; su mobile l'hover semplicemente non si applica,
   e il colore del titolo dipende solo dallo stato [open]. */
@media (hover: hover){
  .faq-item > summary:hover{
    color: var(--gold);
  }
}

/* Icona + / − posizionata in absolute sulla destra del summary. Usiamo
   pseudo-elementi ::before e ::after per formare la croce: ::before è la
   barra orizzontale (sempre visibile), ::after è quella verticale (che
   sparisce quando il <details> è aperto, trasformando il + in −). */
.faq-q-icon{
  position: absolute;
  right: 4px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  pointer-events: none;
}
.faq-q-icon::before,
.faq-q-icon::after{
  content: '';
  position: absolute;
  background: var(--ink-soft);
  transition: transform 200ms ease, opacity 200ms ease;
}
.faq-q-icon::before{
  /* Barra orizzontale: sempre presente */
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
}
.faq-q-icon::after{
  /* Barra verticale: nasconde quando aperto */
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
}
.faq-item[open] > summary .faq-q-icon::after{
  opacity: 0;
}
.faq-item[open] > summary{
  color: var(--gold);
}

/* Il corpo della risposta: padding inferiore quando aperto, font leggermente
   più piccolo della domanda per gerarchia visiva. Usiamo lo stesso stack
   tipografico delle pagine articolo così paragrafi/link/liste ereditano il
   look del resto del sito senza altre regole. */
.faq-a{
  padding: 0 48px 24px 4px;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.7;
  font-family: 'Inter', system-ui, sans-serif;
}
.faq-a p{
  margin: 0 0 12px 0;
}
.faq-a p:last-child{
  margin-bottom: 0;
}
.faq-a a{
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.faq-a a:hover{
  color: var(--accent);
}
.faq-a ul,
.faq-a ol{
  margin: 12px 0;
  padding-left: 22px;
}
.faq-a li{
  margin-bottom: 6px;
}
.faq-a strong{
  color: var(--ink);
}

/* Mobile: restringe i padding laterali. L'icona + / − resta comunque
   visibile a destra perché il padding-right del summary la garantisce. */
@media (max-width: 600px){
  .faq-item > summary{
    font-size: 16px;
    padding: 18px 42px 18px 4px;
  }
  .faq-a{
    font-size: 15px;
    padding: 0 42px 20px 4px;
  }
}

/* Piccola animazione di apertura: è il comportamento nativo dei <details>
   ma senza transizione. Aggiungiamo un fade-in leggero sul corpo così
   l'apertura non è "secca". Il <details> stesso non può essere animato
   nativamente (height:auto), quindi ci limitiamo al contenuto. */
@keyframes faq-fade-in{
  from{ opacity: 0; transform: translateY(-4px); }
  to  { opacity: 1; transform: translateY(0);    }
}
.faq-item[open] > .faq-a{
  animation: faq-fade-in 220ms ease;
}