/*
 * Green St Kitchen - FAQ page.
 * No literal colour values. Everything comes from tokens.css.
 *
 * Only the page's own centred intro. The accordion, its jump links and its cards
 * are the FAQ block and carry their own stylesheet; the closing colour band is
 * shared with Our Story and lives in components.css.
 *
 * Measured from 06_GSK_Web_June-2026_FAQ.pdf. See MAINTAINER.md,
 * "Where the numbers came from".
 *
 * WHY THIS IS NOT SHARED WITH CONTACT'S INTRO. Both pages centre an eyebrow, a
 * headline and a standfirst, so the temptation is to make one component of them.
 * They are drawn differently at every size though - 74px against 62px, one line
 * against two, a nowrap headline against a wrapping one - and the only thing they
 * would actually share is `text-align: center`. Merging them would mean a
 * component whose every value is overridden per page, which is worse than two
 * short blocks of rules. The closing band was worth sharing because its structure
 * really is identical; this is not.
 */

.gs-faq-page {
  padding-block: var(--gs-faq-pad-top) var(--gs-faq-pad-bottom);
}

/* =========================================================================
 * CENTRED INTRO
 * ========================================================================= */
/* Padding rather than a margin. The intro is the last child of its shell and
 * both are plain divs, so a bottom margin here collapses straight out of the
 * shell and the gap to the chips below vanishes. Padding cannot collapse. */
.gs-faq-intro {
  text-align: center;
  padding-block-end: var(--gs-faq-chips-gap);
}

/* The eyebrow's default 1.5 line-height leaves the 62px headline nowhere to sit,
 * so it is set solid here and the gap comes from the margin instead. Its colour
 * is a darker rust than the Pickled Things accent, which is its own fill in the
 * artwork. It measures 4.13:1 on Warm Beige where 4.5 is wanted at this size;
 * reproduced as drawn and reported rather than corrected. See BUILD-REPORT.md. */
.gs-faq-intro__eyebrow {
  color: var(--gs-rust-deep);
  line-height: var(--gs-leading-tight);
  margin: 0 0 var(--gs-faq-eyebrow-gap);
}

/* 62px over two authored lines, set solid, exactly as the hero headline is. */
.gs-faq-intro__title {
  font-size: var(--gs-step-hero);
  line-height: var(--gs-leading-tight);
  margin: 0 0 var(--gs-faq-title-gap);
}

/* The same 512px measure Contact's standfirst uses, because it is the same
 * sentence: this page repeats Contact's standfirst word for word. That looks
 * like a copy paste rather than a decision and is flagged in BUILD-REPORT.md,
 * but it is the designer's copy and is reproduced as supplied. The measure is
 * set rather than the line broken by hand, per PROJECT-BRIEF 7A. */
.gs-faq-intro__standfirst {
  font-size: var(--gs-step-intro);
  line-height: 1.2; /* 21.6px on 18px, the drawn pitch */
  color: var(--gs-ink-soft);
  max-width: var(--gs-measure-standfirst);
  margin: 0 auto;
}