/**
 * Blue Ridge Core Theme — FAQ (native accordion, zero JavaScript)
 *
 * Built entirely on the core/details block, which renders a native
 * <details>/<summary> element — the browser provides expand/collapse,
 * keyboard operability, and screen-reader semantics for free. This is why
 * no custom JS accordion was written: the platform already solves it.
 * See docs/design-system/15-animation.md (no unnecessary JS) and
 * docs/architecture.md's JavaScript strategy note.
 *
 * Single-column by design — used identically on the homepage (wrapped in
 * .home-faq-wrap for its 850px max-width, see sections.css) and on the
 * service/mobile-home pages. Scoped to .faq so this never affects an
 * unrelated future use of core/details elsewhere on the site.
 */

.faq {
  max-width: 48rem;
  margin-inline: auto;
}

.faq .wp-block-details {
  border-bottom: 1px solid var(--wp--preset--color--gray-200);
  padding-block: var(--wp--preset--spacing--lg);
}

.faq .wp-block-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--md);
  cursor: pointer;
  list-style: none;
  font-size: var(--wp--preset--font-size--lg);
  font-weight: var(--wp--custom--typography--font-weight-semibold);
  color: var(--wp--preset--color--navy);
  transition: color var(--wp--custom--motion--duration-base) var(--wp--custom--motion--ease-out);
}

.faq .wp-block-details summary::-webkit-details-marker {
  display: none;
}

.faq .wp-block-details summary::after {
  content: "";
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  margin-top: -2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--wp--custom--motion--duration-base) var(--wp--custom--motion--ease-out);
}

.faq .wp-block-details[open] summary::after {
  transform: rotate(-135deg);
}

.faq .wp-block-details summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(41, 116, 212, 0.45);
  border-radius: var(--wp--custom--radius--sm);
}

.faq .wp-block-details > :not(summary) {
  margin-top: var(--wp--preset--spacing--sm);
  color: var(--wp--preset--color--gray-500);
  line-height: var(--wp--custom--typography--line-height-relaxed);
}

@media (prefers-reduced-motion: reduce) {
  .faq .wp-block-details summary::after {
    transition: none;
  }
}