/**
 * FAQ Animations - CSP Compliant
 * Replaces inline styles with CSS classes
 */

/* FAQ Answer Animations */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 var(--space-6);
  transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}

.faq-answer.is-expanded {
  max-height: 500px; /* Fallback value */
  padding: 0 var(--space-6) var(--space-5);
}

/* Use data attribute for dynamic max-height */
.faq-answer.is-expanded[data-max-height] {
  max-height: attr(data-max-height);
}

/* FAQ Item Active State */
.faq-item.active .faq-question {
  color: var(--primary);
}

.faq-item.active .faq-question svg {
  transform: rotate(180deg);
}

/* Smooth transition for icon rotation */
.faq-question svg {
  transition: transform 0.3s ease-out;
}

/* Focus styles for accessibility */
.faq-question:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Hover state */
.faq-question:hover {
  background-color: var(--gray-50);
}

/* Ensure content is visible when expanded */
.faq-answer.is-expanded > * {
  opacity: 1;
  transition: opacity 0.3s ease-out 0.1s;
}

.faq-answer:not(.is-expanded) > * {
  opacity: 0;
  transition: opacity 0.1s ease-out;
}