/* ==========================================================================
   FONDOPRO — FAQ.CSS
   Pagina "FAQ": tab di categoria (ARIA tablist/tab/tabpanel) + accordion
   per ciascuna categoria, più una modalità di ricerca che affianca
   temporaneamente tutte le categorie (vedi js/faq.js). Palette e
   componenti dell'impianto esistente (Blu Istituzionale, focus-visible
   oro, box di ricerca condiviso) — nessun colore nuovo.
   ========================================================================== */

.fp-faq {
  /* Sfondo (bianco + banda decorativa) gestito da .fp-content-texture,
     applicata direttamente a questa sezione nel markup. */
}

.fp-faq__toolbar {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-6);
}

/* --------------------------------------------------------------------------
   TABLIST — categorie FAQ
   -------------------------------------------------------------------------- */
.fp-faq__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-1);
  border-bottom: 1px solid var(--color-gray-light);
  margin-bottom: var(--space-6);
}

.fp-faq__tab {
  appearance: none;
  border: none;
  background: transparent;
  padding: var(--space-3) var(--space-4);
  margin-bottom: -1px; /* sovrappone il proprio bordo a quello del tablist */
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
  border-bottom: 3px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.fp-faq__tab:hover {
  color: var(--color-text-primary);
}
.fp-faq__tab:focus-visible {
  outline: 3px solid var(--focus-ring-outer);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}
/* Tab attiva: colore + bordo inferiore + peso — mai il solo colore a
   veicolare lo stato (un secondo segnale, il bordo, per chi non
   distingue bene le tinte). */
.fp-faq__tab[aria-selected="true"] {
  color: var(--color-blue-primary);
  border-bottom-color: var(--color-blue-primary);
  font-weight: var(--fw-bold);
}

/* Nascosta durante una ricerca attiva: le categorie vengono tutte
   affiancate (vedi .fp-faq__panel-heading sotto), il tablist perde
   di significato finché la ricerca è in corso. */
.fp-faq.is-searching .fp-faq__tabs {
  display: none;
}

.fp-faq__search-status {
  margin: 0 0 var(--space-5);
  color: var(--color-text-secondary);
  font-size: var(--fs-small);
}

/* --------------------------------------------------------------------------
   PANNELLI — uno per categoria; durante la ricerca sono visibili insieme,
   ciascuno preceduto dal proprio titolo (nascosto in modalità normale,
   dove la tab già identifica la categoria).
   -------------------------------------------------------------------------- */
.fp-faq__panel-heading {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-h4);
  color: var(--color-blue-primary);
}
.fp-faq__panel + .fp-faq__panel {
  margin-top: var(--space-3);
}
.fp-faq.is-searching .fp-faq__panel {
  margin-top: var(--space-7);
}
.fp-faq.is-searching .fp-faq__panel:first-of-type {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   ACCORDION
   -------------------------------------------------------------------------- */
.fp-accordion__item {
  border-bottom: 1px solid var(--color-gray-light);
}
.fp-accordion__item:first-child {
  border-top: 1px solid var(--color-gray-light);
}

.fp-accordion__heading {
  margin: 0;
}

.fp-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: var(--space-4) var(--space-2);
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  cursor: pointer;
  /* Hover discreto (tinta di sfondo leggera): qui è una lista strutturata
     di domande, non una griglia di elementi paritari come i grafici — un
     hover con ombra/sollevamento sarebbe fuori registro, quindi trattato
     diversamente e più sobrio. */
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.fp-accordion__trigger:hover {
  background-color: var(--color-gray-lighter);
}
.fp-accordion__trigger:focus-visible {
  /* Anello interno al riquadro (offset negativo): blu verso il bordo,
     bianco verso il contenuto, per lo stesso doppio contrasto globale. */
  outline: 3px solid var(--focus-ring-outer);
  outline-offset: -3px;
  box-shadow: inset 0 0 0 5px var(--focus-ring-inner);
}
.fp-accordion__trigger[aria-expanded="true"] {
  color: var(--color-blue-primary);
}

.fp-accordion__icon {
  flex-shrink: 0;
  color: var(--color-text-secondary);
  transition: transform var(--transition-base);
}
.fp-accordion__trigger[aria-expanded="true"] .fp-accordion__icon {
  transform: rotate(180deg);
  color: var(--color-blue-primary);
}
@media (prefers-reduced-motion: reduce) {
  .fp-accordion__icon {
    transition: none;
  }
}

/* Il pannello si anima in altezza via JS (max-height calcolato sul
   contenuto reale, vedi faq.js) — qui solo il necessario per il
   contenimento e la dissolvenza del contenuto. */
.fp-accordion__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--transition-base);
}
.fp-accordion__panel.is-open {
  /* max-height reale impostato via JS in px al momento dell'apertura */
}
@media (prefers-reduced-motion: reduce) {
  .fp-accordion__panel {
    transition: none;
  }
}

.fp-accordion__body {
  padding: 0 var(--space-2) var(--space-4);
  color: var(--color-text-secondary);
}
.fp-accordion__body p {
  margin: 0 0 var(--space-3);
}
.fp-accordion__body p:last-child {
  margin-bottom: 0;
}
.fp-accordion__body strong {
  color: var(--color-text-primary);
  font-weight: var(--fw-bold);
}

.fp-faq__no-results {
  text-align: center;
  color: var(--color-text-secondary);
  padding-block: var(--space-6);
}

/* Frase di chiusura in fondo a una categoria (es. "Da FondoSanità a
   FondoPro"): fuori dall'accordion perché non è una domanda, sempre
   visibile sotto l'elenco; stesso testo scuro del corpo. */
.fp-faq__panel-closing {
  margin: var(--space-5) 0 0;
  color: var(--color-text-primary);
}

/* Etichette di tab lunghe (es. "Da FondoSanità a FondoPro", circa 350px
   con il padding): con white-space:nowrap a 320px uscirebbero dallo
   schermo (WCAG 1.4.10). Su smartphone l'etichetta può andare a capo e
   il padding orizzontale si riduce. */
@media (max-width: 575.98px) {
  .fp-faq__tab {
    white-space: normal;
    padding-inline: var(--space-3);
    text-align: left;
  }
}