/* ==========================================================================
   faq.css — Page-specific styles for /faq
   Accordion (native <details>/<summary>) + pricing subheading.
   Design tokens only; base.css + home.css carry the shared system.
   Mobile-first; cards use borders, never shadows.
   ========================================================================== */

/* --------------------------------------------------------------------------
   BREADCRUMB (matches security page pattern)
   -------------------------------------------------------------------------- */
.breadcrumb {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-muted);
  margin-bottom: 1.25rem;
}
.breadcrumb a {
  color: var(--color-muted);
}
.breadcrumb span[aria-current="page"] {
  color: var(--color-ink);
}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.faq-hero h1 {
  margin: 0 0 12px;
}
.faq-hero .lead {
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   ACCORDION LIST — hairline dividers between items
   -------------------------------------------------------------------------- */
.faq-list {
  border-top: var(--hairline) solid var(--color-border);
}

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

/* --------------------------------------------------------------------------
   SUMMARY — the clickable question row. Remove default marker; add our own
   rotating "+" indicator on the right. Min 44px tap target.
   -------------------------------------------------------------------------- */
.faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
  padding: 1rem 0;
  cursor: pointer;
  list-style: none;                 /* remove default disclosure triangle */
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: var(--tracking-display);
  color: var(--color-primary);
}

/* Remove the default marker across engines. */
.faq-item > summary::-webkit-details-marker {
  display: none;
}
.faq-item > summary::marker {
  content: "";
}

.faq-item > summary:hover {
  color: var(--color-accent);
}

/* The "+" / "−" indicator. Rotates 45deg when the item is [open]. */
.faq-item > summary::after {
  content: "+";
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--color-accent);
  transition: transform 0.2s ease;
}

.faq-item[open] > summary::after {
  transform: rotate(45deg);         /* + becomes × / − visual */
}

/* --------------------------------------------------------------------------
   ANSWER — comfortable reading measure and padding
   -------------------------------------------------------------------------- */
.faq-answer {
  padding: 0 0 1.25rem;
  max-width: 70ch;
}
.faq-answer p {
  margin: 0;
  color: var(--color-ink);
}
.faq-answer p + p {
  margin-top: 0.75rem;
}

/* --------------------------------------------------------------------------
   PRICING & PLANS SUBHEADING — spacing between the two accordion groups
   -------------------------------------------------------------------------- */
.faq-subhead {
  margin-top: 3rem;
  margin-bottom: 1.25rem;
}
.faq-subhead h2 {
  margin: 0;
}

@media (min-width: 768px) {
  .faq-subhead {
    margin-top: 4rem;
  }
  .faq-item > summary {
    font-size: 1.15rem;
    padding: 1.15rem 0;
  }
}