/* Purpose: Accordion FAQ built on native details/summary. */

.faq {
  max-width: 860px;
  margin: 0 auto;
}

.faq__item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-14);
  overflow: hidden;
  transition: transform var(--duration-base) var(--ease-smooth), box-shadow var(--duration-base) ease, border-color var(--duration-base) ease;
}

.faq__item:hover {
  border-color: var(--color-text-faint);
}

.faq__question {
  list-style: none;
  cursor: pointer;
  padding: var(--space-22) var(--space-60) var(--space-22) var(--space-26);
  position: relative;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--fs-summary);
  color: var(--color-navy);
  line-height: var(--leading-snug);
  transition: background var(--duration-base) ease;
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question:hover {
  background: var(--color-bg-alt);
}

.faq__question::after {
  content: "+";
  position: absolute;
  right: var(--space-22);
  top: 50%;
  transform: translateY(-50%);
  width: var(--space-30);
  height: var(--space-30);
  border-radius: 50%;
  background: var(--color-surface-alt);
  color: var(--color-text);
  display: grid;
  place-items: center;
  font-weight: var(--weight-black);
  font-size: var(--fs-19);
  line-height: var(--leading-none);
  transition: transform var(--duration-fast) ease;
}

.faq__item[open] .faq__question::after {
  content: "\2013";
  background: var(--color-primary);
  color: var(--color-text);
  transform: translateY(-50%) rotate(180deg);
}

.faq__question:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.faq__answer {
  padding: 0 var(--space-26) var(--space-24);
  color: var(--color-text-muted);
  font-size: var(--fs-16);
  line-height: var(--leading-body);
}

/* The height itself is animated in assets/js/components/faq.js. This only softens the
   content arriving inside the panel that JS is already opening. */
.faq__item[open] .faq__answer {
  animation: fs-faq-reveal var(--duration-base) var(--ease-smooth) both;
}

@keyframes fs-faq-reveal {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}