/* FAQ Accordion — extracted from art-therapy.php so editor-inserted FAQs on
   any page (home/about/services) get the same expand-on-click behavior and
   "+ → ×" icon rotation animation. Loaded on every public page. */

.faq-item {
  border-bottom: 1px solid #C1CAC1;
}

.faq-question {
  cursor: pointer;
  transition: color 0.3s ease;
}

.faq-question:hover {
  color: #6F755B;
}

.faq-heading {
  margin: 0;
  font: inherit;
}

.faq-heading .faq-question {
  width: 100%;
}

/* Answers are visible by default. The runtime opts each valid item into the
   animated accordion only after its ARIA and inert contract is ready. */
.faq-answer {
  max-height: none;
  overflow: visible;
  transition: max-height 0.4s ease;
}

.faq-item.faq-enhanced .faq-answer {
  max-height: 0;
  overflow: hidden;
}

.faq-icon {
  transition: transform 0.3s ease;
}

.faq-item.active .faq-icon {
  transform: rotate(45deg);
}

/* Editor-inserted FAQ answer paragraphs (B-12). The FaqAnswer node accepts
   `block+` content, so user-typed paragraphs are stock <p> with no Tailwind
   classes. The hand-coded FAQ in art-therapy.php uses
   `<p class="text-text/70 font-light pt-4 pb-2 leading-relaxed">`. We mirror
   those values here so editor output matches the existing site visually.
   text-text resolves to #45547E; text-text/70 = 70% alpha. */
.faq-answer p {
  color: #45547E;
  font-weight: 300;
  padding-top: 1rem;
  padding-bottom: 0.5rem;
  line-height: 1.625;
}

@media (prefers-reduced-motion: reduce) {
  .faq-answer,
  .faq-icon {
    transition: none !important;
  }
}