/* ==========================================================================
   faq.css — /faq/ accordion (section CSS, loaded on /faq/ only).
   Native <details>/<summary> — zero JS, keyboard-accessible. Reuses the shared
   .page-section / .crumb / .page-intro helpers from base.css. NO global redefs.
   ========================================================================== */

.faq-list {
  max-width: 64ch;
}

.faq-item {
  border-bottom: 1px solid var(--hairline);
}

.faq-item__q {
  position: relative;
  list-style: none;                /* hide the default disclosure marker */
  cursor: pointer;
  padding: 1.15rem 2.2rem 1.15rem 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-1);
  line-height: 1.25;
  color: var(--bone);
  transition: color 200ms ease;
}
.faq-item__q::-webkit-details-marker {
  display: none;
}
.faq-item__q:hover {
  color: var(--grace);
}
/* gold + indicator that rotates to × when open */
.faq-item__q::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 0;
  width: 1.4rem;
  height: 1.4rem;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  color: var(--grace);
  font-family: var(--font-body);
  font-size: 1.5rem;
  line-height: 1;
}
.faq-item[open] .faq-item__q::after {
  transform: translateY(-50%) rotate(45deg);
}

.faq-item__a {
  padding: 0 2.2rem 1.4rem 0;
  max-width: 60ch;
  color: var(--bone-dim);
  font-size: var(--step-0);
  line-height: 1.6;
}
.faq-item__a p {
  margin: 0;
}
.faq-item__cta {
  margin-top: 0.9rem !important;
}
.faq-item__cta a {
  color: var(--grace);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.faq-item__cta a:hover {
  color: var(--grace-hi);
}

/* closing CTA uses the shared .page-close helper (base.css) */

/* ---- smooth disclosure (open animation), reduced-motion safe ---------- */
@media (prefers-reduced-motion: no-preference) {
  .faq-item__q::after {
    transition: transform 0.3s var(--ease-rise), color 200ms ease;
  }
  .faq-item[open] .faq-item__a {
    animation: faq-reveal 0.35s var(--ease-rise);
  }
  @keyframes faq-reveal {
    from {
      opacity: 0;
      transform: translateY(-0.4rem);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}