/*
 * Green St Kitchen - Contact page LAYOUT ONLY.
 * No literal colour values. Everything comes from tokens.css.
 *
 * Measured from 05_GSK_Web_June-2026_Contact.pdf, a 960 x 1009.83pt artboard,
 * which resolves to a 1280px canvas at the same 4/3 scale as Home (55.5pt gives
 * 74px, 19.5pt gives 26px, 9.75pt gives 13px). Unlike the rest of the site the
 * content sits in a 952px column, not 1152px: the drawn margins are 164px each
 * side of the 1280px canvas.
 *
 * ---------------------------------------------------------------------------
 * WHAT IS *NOT* IN HERE, AND WHY
 *
 * This file only styles things that belong to the Contact page itself. Three
 * things that used to live here have moved, because they can appear on other
 * pages and were breaking when they did:
 *
 *   - the Contact details card  -> assets/css/contact-details.css
 *   - all Gravity Forms styling -> assets/css/gravity-forms.css
 *   - the coloured card         -> assets/css/components.css (.gs-card--colour)
 *
 * The form styling in particular was scoped to .gs-contact__form, a wrapper that
 * only exists on this page, so a form dropped anywhere else rendered completely
 * unstyled. See MAINTAINER.md, "Where the stylesheets live".
 *
 * What remains below is safe to be page-scoped: it is the page's own measure,
 * rhythm and two column split.
 *
 * Phone first, like every other stylesheet here. The desktop numbers below are
 * the measured ones and live in min-width queries.
 */

/* =========================================================================
 * PAGE SHELL
 * A narrower measure than .gs-shell, for a page that is mostly one form.
 * ========================================================================= */
.gs-shell--narrow {
  max-width: calc(var(--gs-content-narrow) + (var(--gs-gutter) * 2));
}

/* Measured: 56px from the header to the eyebrow's line box, and 140px from the
 * purple card to the footer. The bottom is much larger than the top in the
 * drawing; it is reproduced rather than averaged. */
.gs-contact {
  padding-block: var(--gs-contact-pad-top) var(--gs-contact-pad-bottom);
}

/* =========================================================================
 * CENTRED INTRO
 * Eyebrow, h1 and standfirst, all centred on the canvas.
 * ========================================================================= */
.gs-contact__intro {
  text-align: center;
}

/* The eyebrow's default 1.5 line-height leaves the h1 nowhere to sit at 74px,
 * so it is set solid here. Tracking stays the shared eyebrow value. */
.gs-contact__eyebrow {
  color: var(--gs-pickled-things);
  line-height: var(--gs-leading-tight);
  margin-block-end: 0;
}

/* 74px at desktop. Line-height is tighter than the shared heading leading
 * because this is a single display line, not a wrapping heading. */
.gs-contact__title {
  font-size: var(--gs-step-hero-xl);
  line-height: 1.1;
  margin-block-end: var(--gs-space-sm);
  text-wrap: nowrap;
}

/* The mockup breaks this paragraph after "just want to". Per the decision
 * recorded in PROJECT-BRIEF 7A, hard breaks are not reproduced: the measure is
 * set to the drawn longest line, 506px, and the wrap then happens naturally,
 * giving the same two lines at desktop without breaking at phone widths. */
.gs-contact__standfirst {
  max-width: var(--gs-measure-standfirst);
  margin-inline: auto;
  color: var(--gs-ink-soft);
  font-size: var(--gs-step-intro);
  line-height: var(--gs-leading-body-tight);
}

/* =========================================================================
 * TWO COLUMN BODY
 * Drawn as a 492px form column, a 50px gap and a 410px card column, inside the
 * 952px measure. 1.2fr / 1fr reproduces that split exactly: (952 - 50) split
 * 1.2 to 1 gives 492 and 410.
 * ========================================================================= */
.gs-contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gs-space-xl);
  margin-block-start: var(--gs-space-3xl);
}

@media (min-width: 1024px) {
  .gs-contact__grid {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--gs-column-gap-wide);
    margin-block-start: var(--gs-contact-body-gap);
  }
}

/* The card column. 20px between the two cards, measured. */
.gs-contact__aside {
  display: flex;
  flex-direction: column;
  gap: var(--gs-space-md);
}

@media (min-width: 1024px) {
  .gs-contact__aside {
    gap: 20px;
  }
}

/* =========================================================================
 * THIS PAGE'S FORM CHOICES
 *
 * Everything that makes a Gravity Form look like a Green St form is in
 * gravity-forms.css. These are decisions specific to the Contact page, and they
 * stay page-scoped on purpose so a form elsewhere is unaffected.
 *
 * Each selector carries one class more than the rule it overrides in
 * gravity-forms.css, so it wins on specificity and does not depend on which
 * stylesheet happens to load first.
 * ========================================================================= */

/* The mockup draws no validation summary and no "* indicates required fields"
 * key, so both are hidden on this page. The per-field message under each failing
 * control is still shown, and Gravity Forms still sets aria-invalid and
 * aria-describedby, so an error is still carried in text rather than by colour.
 *
 * Worth knowing before changing this back or copying it elsewhere: Gravity Forms
 * moves focus to that summary on a failed submit. Hidden, there is nothing for
 * focus to land on, so a screen reader user gets no announcement that the submit
 * failed - they have to go looking. Noted in BUILD-REPORT.md. */
.gs-contact__form .gform_wrapper .gform_validation_errors,
.gs-contact__form .gform_wrapper .gform_heading {
  display: none;
}

/* A failing control keeps the ordinary border on this page rather than taking a
 * heavier accent one. The message underneath is what marks it. */
.gs-contact__form .gform_wrapper .gfield_error input,
.gs-contact__form .gform_wrapper .gfield_error select,
.gs-contact__form .gform_wrapper .gfield_error textarea,
.gs-contact__form .gform_wrapper input[aria-invalid="true"],
.gs-contact__form .gform_wrapper select[aria-invalid="true"],
.gs-contact__form .gform_wrapper textarea[aria-invalid="true"] {
  border-width: 1px;
  border-color: var(--gs-field-border);
}

/* =========================================================================
 * PHONE AND TABLET
 * Both cards go full width and the form stacks above them, which is the
 * PROJECT-BRIEF 7A rule for this site: two-up becomes one column below 1024px.
 * ========================================================================= */
@media (max-width: 1023px) {
  .gs-contact {
    padding-block: var(--gs-space-3xl) var(--gs-space-3xl);
  }

  .gs-contact__title {
    /* nowrap is safe at 74px on a 952px measure but not at phone widths. */
    text-wrap: balance;
  }
}