/*
 * Green St Kitchen - Store Locator page.
 * No literal colour values. Everything comes from tokens.css.
 *
 * Only the page's own centred intro and its closing footnote. The panel, the
 * list and the map are the Store locator block and carry their own stylesheet.
 *
 * Measured from 04_GSK_Web_June-2026_Store-Locator.pdf. See MAINTAINER.md,
 * "Where the numbers came from".
 *
 * WHY THIS INTRO IS NOT SHARED WITH FAQ'S OR CONTACT'S. Same reasoning as the
 * note at the top of faq.css, and it holds a third time: all three centre an
 * eyebrow, a headline and a standfirst, and all three draw them at different
 * sizes with different gaps. This page's headline is 74px, like Contact's and
 * unlike FAQ's 62px, but its standfirst measure and its three vertical gaps are
 * its own. A shared component would be one whose every value is overridden per
 * page, which is worse than three short blocks of rules.
 */

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

/* =========================================================================
 * CENTRED INTRO
 * ========================================================================= */
/* Padding rather than a margin, for the same reason as the FAQ intro: this is
 * the last child of a plain div, so a bottom margin collapses straight out of it
 * and the gap to the band below disappears. */
.gs-locator-intro {
  text-align: center;
  padding-block-end: var(--gs-locator-body-gap);
}

/* The same darker rust the FAQ eyebrow uses, and its own fill in the artwork
 * rather than the Pickled Things accent with something over it. It measures
 * 4.13:1 on Warm Beige where 4.5 is wanted at 12.5px. Reproduced as drawn and
 * reported rather than corrected; this is the second page to carry it and it is
 * already a granted exception. See BUILD-REPORT.md. */
.gs-locator-intro__eyebrow {
  color: var(--gs-rust-deep);
  line-height: var(--gs-leading-tight);
  margin: 0 0 var(--gs-locator-eyebrow-gap);
}

/* 74px, set solid. The same step Contact's h1 takes, which is what the artboard
 * draws: both are 55.5pt. */
.gs-locator-intro__title {
  font-size: var(--gs-step-hero-xl);
  line-height: var(--gs-leading-tight);
  margin: 0 0 var(--gs-locator-title-gap);
}

/* Set to the drawn longest line, 669px, so it wraps to the same two lines
 * without a hard break. PROJECT-BRIEF 7A: fixed breaks fall apart at phone
 * widths, so the measure is set and the wrap happens naturally. */
.gs-locator-intro__standfirst {
  font-size: var(--gs-step-intro);
  line-height: 1.185; /* 21.3px on 18px, the drawn pitch */
  color: var(--gs-ink-soft);
  max-width: var(--gs-measure-locator);
  margin: 0 auto;
}

/* =========================================================================
 * CLOSING FOOTNOTE
 * A single centred line under the band, with the wholesale link inside it.
 * ========================================================================= */
.gs-locator-note {
  margin: var(--gs-locator-note-gap) 0 0;
  text-align: center;
  font-size: var(--gs-step-pill-sm);
  line-height: 1.5;
  /* Drawn #8a7f76, which is dE76 2.0 from --gs-stone-grey. A near-duplicate by
   * the same test used everywhere else in this theme, so it reuses the token.
   *
   * Either value fails AA on Warm Beige at this size: 3.23:1 as drawn, 3.12:1 as
   * the token. Reproduced as drawn and reported rather than darkened, which is
   * how every other contrast finding on this project has been handled. See
   * BUILD-REPORT.md. */
  color: var(--gs-stone-grey);
}

/* The link inside it is the Pickled Things accent, underlined as drawn. It
 * measures 4.00:1 on Warm Beige, also short of 4.5, and is reported with the
 * line it sits in. The underline is what carries the link's meaning either way,
 * so it is not colour alone. */
.gs-locator-note a {
  color: var(--gs-pickled-things);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.gs-locator-note a:hover {
  text-decoration-thickness: 2px;
}