/* =============================================================================
   WSL SICUREZZA — faq.css
   Pagina FAQ (faq.html). Stili specifici di pagina soltanto.
   Base globale (token, nav, footer, btn, .section__*): main.css
   Componenti condivisi: components.css → banner, guscio .section-faq e
   accordion .faq-list / .faq-list__item / .faq-list__answer.
   Qui vivono solo: intestazione di categoria e rifiniture delle risposte.
   ============================================================================= */

/* ─── INTESTAZIONE DI CATEGORIA ──────────────────────────────────────────────
   Ogni categoria di domande apre con eyebrow + titolo (versione più piccola
   della coppia .section__* globale). */
.section-faq__header {
  text-align: center;
  max-width: var(--content-max);
  margin: 0 auto 64px auto;
}

.section-faq__eyebrow {
  font-family: var(--font-mono);
  font-size: 18px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-label);
  display: block;
  margin-bottom: 24px;
}

.section-faq__title {
  font-family: var(--font-titoli);
  font-weight: 800;
  line-height: 1.1;
  color: var(--text-bright);
  margin-bottom: 24px;
}

/* ─── RISPOSTE ───────────────────────────────────────────────────────────────
   Spaziatura dei paragrafi dentro una risposta dell'accordion (components.css). */
.faq-list__answer p { margin-bottom: 12px; }
.faq-list__answer p:last-child { margin-bottom: 0; }

/* Nota evidenziata (bordo verde) in coda a una risposta */
.faq-list__note {
  display: block;
  margin-top: 14px;
  padding: 8px 14px;
  border-left: 2px solid color-mix(in srgb, var(--accent-primary) 50%, transparent);
  background: color-mix(in srgb, var(--accent-primary) 5%, transparent);
  font-family: var(--font-mono);
  font-size: 12px;
  color: color-mix(in srgb, var(--accent-primary) 80%, var(--text-base));
  font-style: italic;
  letter-spacing: 0.02em;
}

/* ─── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .section-faq { padding: 50px 48px; }
}

@media (max-width: 768px) {
  .section-faq         { padding: 40px 24px; }
  .section-faq__header { margin-bottom: 40px; }
  .section-faq__eyebrow  { font-size: 14px; }
}