/* Gedeelde FAQ-beweging. Zonder JavaScript blijft details native werken. */
.faq-list details[data-faq-enhanced] > summary {
  transition: color 180ms ease-out;
}

.faq-list details[data-faq-enhanced] > summary::after {
  content: none;
}

.faq-list details[data-faq-enhanced] > summary:focus-visible {
  outline: 2px solid var(--color-accent-text, #00853c);
  outline-offset: 4px;
}

.faq-list .faq-motion-icon {
  position: relative;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  color: var(--color-accent-text, #00853c);
  transition: transform 360ms cubic-bezier(.22, 1, .36, 1);
}

.faq-list .faq-motion-icon::before,
.faq-list .faq-motion-icon::after {
  content: '';
  position: absolute;
  inset: 11px 4px;
  border-radius: 2px;
  background: currentColor;
}

.faq-list .faq-motion-icon::after {
  transform: rotate(90deg);
  transition: transform 320ms cubic-bezier(.22, 1, .36, 1), opacity 220ms ease-out;
}

.faq-list details[data-faq-expanded='true'] .faq-motion-icon {
  transform: rotate(180deg);
}

.faq-list details[data-faq-expanded='true'] .faq-motion-icon::after {
  transform: rotate(0);
  opacity: 0;
}

.faq-list .faq-motion-content {
  display: flow-root;
}

@media (prefers-reduced-motion: reduce) {
  .faq-list details[data-faq-enhanced] > summary,
  .faq-list .faq-motion-icon,
  .faq-list .faq-motion-icon::after {
    transition: none;
  }
}