/*
 * FAQ page.
 *
 * The only page-scoped stylesheet in the theme with no static-build counterpart:
 * about-faq.html was a lorem stub that styled five <details> inline. The real
 * content is 45 questions, so this replaces those inline styles with classes.
 *
 * Native <details>/<summary> rather than a JS accordion — it is keyboard
 * accessible, works with find-in-page (which matters when the page is this
 * long), and needs no script. The Entertainment accordion is JS because it
 * animates panel height; nothing here needs that.
 */

.faq-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding: 1.25rem 0;
}

/* Question size raised 1.0625rem -> 1.375rem on 2026-09-08 (Kay: "each
   question should be bigger, keep the answer the same as now"). The ANSWER
   (.faq-a) is deliberately untouched — the point of the change is the
   size RELATIONSHIP between the two, which was almost 1:1 and made a long
   list read as undifferentiated text. line-height eases with the size. */
.faq-q {
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.35;
  color: var(--white);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  transition: color 0.2s ease;
}

.faq-q:hover,
.faq-item[open] > .faq-q {
  color: var(--chartreuse);
}

/* Replace the default disclosure triangle with a marker that rotates. Safari
   still needs the -webkit- pseudo-element to drop the native one. */
.faq-q::-webkit-details-marker {
  display: none;
}

.faq-q::before {
  content: "+";
  flex: 0 0 auto;
  /* Tracks the question size (was 1.25rem against a 1.0625rem question).
     Left alone it would have become a small mark beside big type. */
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--chartreuse);
  transition: transform 0.2s ease;
}

.faq-item[open] > .faq-q::before {
  content: "\2212"; /* minus — matches the accordion icon on Entertainment */
}

@media (prefers-reduced-motion: reduce) {
  .faq-q,
  .faq-q::before {
    transition: none;
  }
}

.faq-a {
  padding: 0.85rem 0 0.25rem 1.95rem; /* indent past the marker */
}

.faq-a p {
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.7;
  margin: 0 0 0.85rem;
}

.faq-a p:last-child {
  margin-bottom: 0;
}

/* Show titles carry italics from the source doc. */
.faq-a em {
  color: rgba(255, 255, 255, 0.78);
  font-style: italic;
}

@media (max-width: 640px) {
  .faq-a {
    padding-left: 0;
  }
}

/* ── Close the black band between the hero and the first question ────────
   Kay, 2026-09-08: "reduce space at top, close black gap."

   It was two paddings stacked with nothing between them — the shared hero's
   2.5rem bottom plus .section--tight's 3rem top, so 5.5rem of empty black
   above a list whose whole job is to be scannable. Both are cut here rather
   than in the shared rules, because every other page using them has content
   in that band and does not want it closed.

   Scoped with their own classes rather than relying on faq.css only being
   enqueued on this page — a bare `.page-hero` override in a page sheet is
   the kind of thing that bites the day the sheet is loaded somewhere else. */
.faq-hero {
  padding-bottom: 0.75rem;
}

.faq-section.section--tight {
  padding-top: 1.25rem;
}