/* Phonetastico — supporto.css
   Pagina Supporto: FAQ.
   Richiede common.css. */

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line-strong); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px 0; font-size: clamp(18px, 2vw, 21px); font-weight: 600; letter-spacing: -0.02em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq__icon { position: relative; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--bg-soft); transition: transform .5s var(--spring), background-color .2s; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.75px; border-radius: 2px; background: currentColor; transform: translate(-50%, -50%); }
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .5s var(--spring); }
.faq details[open] .faq__icon { transform: rotate(180deg); background: var(--ink); color: #fff; }
.faq details[open] .faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__body { overflow: hidden; }
.faq__inner { padding: 0 48px 28px 0; color: var(--ink-2); font-size: 17px; }
.faq__inner p + p { margin-top: 12px; }
.faq__shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; max-width: 560px; }
.faq__shots img { border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); background: var(--bg-soft); }

@media (hover: hover) and (pointer: fine) {
  .faq summary:hover { color: var(--accent-ink); }
}