/* =========================================================================
   FAQ — "Q&A gazette" layout signature
   Page flourishes only. Base tokens & components live in styles.css.
   ========================================================================= */

.faq-intro { border-bottom: 1px solid var(--rule); }
.faq-intro h1 { max-width: 16ch; }
.faq-intro .answer { max-width: 46rem; }

/* Two-column broadsheet: index rail + Q&A column */
.faq-shell {
  display: grid;
  grid-template-columns: 16rem 1fr;
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: start;
}
@media (max-width: 52rem) {
  .faq-shell { grid-template-columns: 1fr; }
}

/* Sticky index rail (the paper's "in this issue") */
.faq-index { position: sticky; top: 7rem; }
@media (max-width: 52rem) {
  .faq-index { position: static; }
}
/* count badge sits opposite the category name inside .indexbox li */
.faq-index .indexbox li span {
  font-family: var(--mono);
  font-size: .74rem;
  color: var(--accent);
  font-weight: 700;
}

/* Category group heading — broadsheet section bar */
.faq-group { scroll-margin-top: 7rem; }
.faq-group + .faq-group { margin-top: 0; }
.faq-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.faq-group__head h2 { font-size: var(--fs-h3); }
.faq-group__count {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.faq-group > p.muted { margin: .3rem 0 .8rem; }

/* Lists inside answers stay legible */
.faq details > div ul { display: grid; gap: .4rem; margin-top: .6rem; }
.faq details > div p + p { margin-top: .7rem; }

/* TODO callout nested inside an answer gets a touch of separation */
.faq details > div .callout.todo { margin-top: 1rem; }

/* Community group: a tasteful Augsburg-green accent (red stays primary elsewhere) */
.faq-group--green .faq-group__head h2 { color: var(--green-dark); }
.faq-group--green .faq-group__count { color: var(--green); }
.faq-group--green .faq details[open] > summary { color: var(--green-dark); }