/* Only enhanced FAQs receive animation styles; native details work without JS. */
.faq-motion-ready { box-sizing: border-box; }
.faq-motion-ready.faq-motion-animating { overflow: hidden; overflow: clip; }

/* The measured height replaces the old 200px cap and competing transitions. */
.review-page .faq-item.faq-motion-ready .faq-answer {
  max-height: none;
  margin-top: 12px;
  opacity: 1;
  visibility: visible;
  transition: none;
  display: flow-root;
}
.review-page .faq-item.faq-motion-ready .faq-answer[hidden] { display: none; }
.seo-faq .faq-motion-ready summary::after { transition: transform .2s ease; }
.seo-faq .faq-motion-ready summary[aria-expanded="false"]::after { top: 50%; transform: translateY(-70%) rotate(45deg); }
.seo-faq .faq-motion-ready summary[aria-expanded="true"]::after { top: 50%; transform: translateY(-30%) rotate(225deg); }

/* Respond to the clickable question, not the answer text. */
.seo-faq details, .review-page .faq-item { transition: background-color .18s ease, border-color .18s ease; }
.seo-faq details:has(> summary:is(:hover, :focus-visible)),
.review-page .faq-item:has(.faq-question:is(:hover, :focus-visible)) {
  background-color: var(--hover-surface, var(--soft-accent));
  border-color: var(--hover-border, var(--accent));
}
:root[data-theme="dark"] .seo-faq details:has(> summary:is(:hover, :focus-visible)),
:root[data-theme="dark"] .review-page .faq-item:has(.faq-question:is(:hover, :focus-visible)) {
  background-color: var(--soft-accent);
  border-color: var(--accent);
}
.seo-faq summary:is(:hover, :focus-visible),
.review-page .faq-question:is(:hover, :focus-visible) { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .seo-faq .faq-motion-ready summary::after, .seo-faq details, .review-page .faq-item { transition: none; }
}

/* Put the card spacing inside the actual control so its edges are clickable. */
.seo-faq details { padding: 0; }
.seo-faq summary { padding: 20px 56px 20px 24px; border-radius: 11px; }
.seo-faq summary::after { right: 26px; top: 50%; transform: translateY(-70%) rotate(45deg); }
.seo-faq details[open] summary::after { top: 50%; transform: translateY(-30%) rotate(225deg); }
.seo-faq details > .theme-prose { margin: 0; padding: 0 24px 20px; }
.review-page .faq-item { padding: 0; }
.review-page .faq-question { padding: 22px 16px; }
.review-page .faq-item.faq-motion-ready .faq-answer { margin: 0; padding: 0 16px 22px; }
@media (max-width: 700px) {
  .seo-faq summary { padding: 18px 52px 18px 20px; }
  .seo-faq summary::after { right: 22px; }
  .seo-faq details > .theme-prose { padding: 0 20px 18px; }
}