/*
 * HolDent — FAQ accordion (versione "prose" inline, generata dal markdown
 * parser per pagine TRATTAMENTI/PATOLOGIE). Stile coerente con il block ACF
 * faq-accordion ma autonomo (no dipendenze ACF).
 *
 * Markup atteso:
 *   <div class="holdent-faq-prose">
 *     <details class="holdent-faq-item">
 *       <summary>Domanda?</summary>
 *       <div class="holdent-faq-item__body"><p>Risposta.</p></div>
 *     </details>
 *     ...
 *   </div>
 *
 * NB: il wrapper si chiamava `holdent-faq-accordion` — stessa classe della
 * <section> del blocco ACF: questo file (caricato globalmente) le applicava
 * max-width/flex/margin, inscatolando la sezione e facendone variare la
 * larghezza all'expand (bug pagina Metodo 10giu2026). Il selettore
 * `div.holdent-faq-accordion` resta come compat per contenuti seedati prima
 * del rename (qualificato su div: non può colpire la section del blocco).
 */

.holdent-faq-prose,
div.holdent-faq-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 800px;
  margin-inline: auto;
  margin-block: var(--space-xl);
}

.holdent-faq-item {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.holdent-faq-item[open] {
  border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
  box-shadow: var(--shadow-sm);
}

.holdent-faq-item > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-md) var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--fs-body-l);
  line-height: 1.35;
  color: var(--color-ink);
  min-height: 56px;
}

.holdent-faq-item > summary::-webkit-details-marker {
  display: none;
}

.holdent-faq-item > summary::after {
  content: '+';
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  color: var(--color-primary);
  transition: transform 200ms ease;
}

.holdent-faq-item[open] > summary::after {
  transform: rotate(45deg);
}

.holdent-faq-item > summary:hover,
.holdent-faq-item > summary:focus-visible {
  color: var(--color-primary);
}

.holdent-faq-item__body {
  padding: 0 var(--space-lg) var(--space-md);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
}

.holdent-faq-item__body > p {
  margin-block: 0 var(--space-sm);
}

.holdent-faq-item__body > p:last-child {
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .holdent-faq-item,
  .holdent-faq-item > summary::after {
    transition: none;
  }
}