/*
 * Green St Kitchen - Gravity Forms, styled by the theme.
 * No literal colour values. Everything comes from tokens.css.
 *
 * Gravity Forms' own stylesheets and its inline theme variables are switched off
 * in inc/forms.php, so everything here is the theme's own. That keeps the
 * plugin's blue palette and 3px radii out of the page, keeps every colour in
 * tokens.css, and stops roughly 100kb of framework CSS reaching visitors.
 *
 * ---------------------------------------------------------------------------
 * WHY THIS IS SCOPED TO .gform_wrapper AND NOT TO A PAGE
 *
 * It used to be scoped to .gs-contact__form, a wrapper written into the Contact
 * page. That meant a form dropped on any other page rendered completely
 * unstyled: raw browser inputs, square corners, 30px tall. .gform_wrapper is
 * Gravity Forms' own wrapper and is present wherever a form renders, so the
 * styling now travels with the form instead of with one page.
 *
 * Loaded from inc/forms.php on Gravity Forms' own gform_enqueue_scripts hook,
 * which fires during wp_enqueue_scripts whenever a form is on the page. Using
 * the plugin's own detection rather than the theme's means it is correct for
 * synced patterns, widgets, shortcodes and template parts too, all of which a
 * has_block() check misses.
 *
 * The confirmation is styled separately at the bottom, because Gravity Forms
 * renders it in .gform_confirmation_wrapper, which is NOT inside .gform_wrapper.
 *
 * Two things Gravity Forms' CSS normally handles have to be handled here,
 * because it is switched off: hiding the honeypot field, and the field grid.
 * ========================================================================= */

/* The honeypot must stay hidden or it becomes a visible "Email" field that
 * flags real submissions as spam. GF's own rule is display:none !important and
 * this replaces it exactly. Do not soften this to a visually-hidden pattern:
 * a screen reader user filling it in would have their enquiry discarded. */
.gform_wrapper .gform_validation_container,
.gform_wrapper .gfield--type-honeypot {
  display: none !important;
}

.gform_wrapper {
  /* The submit button is a colour pill. A page can override this to re-theme the
   * button without touching the plugin or this file. */
  --gs-accent: var(--gs-pickled-things);
}

/* GF's "* indicates required fields" line. Small and quiet so it reads as a note
 * rather than as content. */
.gform_wrapper .gform_required_legend {
  margin: 0 0 var(--gs-space-sm);
  color: var(--gs-ink-label);
  font-size: var(--gs-step-chip);
  line-height: var(--gs-leading-body);
}

.gform_wrapper .gform_heading {
  margin: 0;
}

/* A 12 column grid with a 16px column gap reproduces the Contact drawing on both
 * counts: two half width fields land at 238px each, and a full width field at
 * 492px. Row gap is the site's own grid gutter, which is what the 21px between
 * a field and the next label measures to. */
.gform_wrapper .gform_fields {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--gs-field-col-gap);
  row-gap: var(--gs-grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 480px) {
  .gform_wrapper .gform_fields {
    grid-template-columns: repeat(12, 1fr);
  }

  /* Full width is the default for any field, so a field type added later needs
   * no rule of its own. The width classes then narrow it. */
  .gform_wrapper .gfield {
    grid-column: span 12;
  }

  .gform_wrapper .gfield--width-half {
    grid-column: span 6;
  }

  .gform_wrapper .gfield--width-third {
    grid-column: span 4;
  }

  .gform_wrapper .gfield--width-quarter {
    grid-column: span 3;
  }
}

.gform_wrapper .gfield {
  min-width: 0;
}

/* 13px Figtree Medium, uppercased by the stylesheet so the stored label stays
 * sentence case, which is the same convention the eyebrows use. */
.gform_wrapper .gfield_label {
  display: block;
  margin: 0 0 var(--gs-field-label-gap);
  color: var(--gs-ink-label);
  font-family: var(--gs-font-body);
  font-weight: 500;
  font-size: var(--gs-step-label);
  letter-spacing: var(--gs-tracking-field);
  line-height: var(--gs-leading-tight);
  text-transform: uppercase;
}

.gform_wrapper .gfield_required {
  color: var(--gs-pickled-things);
  margin-inline-start: 2px;
}

/* ---- the controls ------------------------------------------------------ */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="password"],
.gform_wrapper select,
.gform_wrapper textarea {
  /* block, not the default inline-block: an inline control sits on a text
   * baseline, which leaves a few pixels of descender space under it and pushed
   * the submit button 7px below where the mockup draws it. */
  display: block;
  width: 100%;
  padding: 0 var(--gs-field-padding-x);
  border: 1px solid var(--gs-field-border);
  border-radius: var(--gs-field-radius);
  background-color: var(--gs-white);
  color: var(--gs-fg);
  font-family: var(--gs-font-body);
  font-weight: 400;
  font-size: var(--gs-step-pill);
  transition: border-color var(--gs-transition);
}

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="password"] {
  height: var(--gs-field-height);
}

/* The select is drawn 2px taller than the inputs beside it. Reproduced as
 * drawn; noted in BUILD-REPORT.md as a likely artwork inconsistency. */
.gform_wrapper select {
  height: var(--gs-field-height-select);
  /* Room for the chevron, which sits close to the right edge in the drawing. */
  padding-inline-end: 40px;
  appearance: none;
  -webkit-appearance: none;
}

.gform_wrapper textarea {
  height: var(--gs-field-height-textarea);
  padding-block: 14px;
  line-height: var(--gs-leading-body);
  resize: vertical;
}

.gform_wrapper input:hover,
.gform_wrapper select:hover,
.gform_wrapper textarea:hover {
  border-color: var(--gs-ink-label);
}

/* The chevron is drawn 10 x 6 with its right edge 4px inside the field, which is
 * Gravity Forms' own select icon geometry. Applied as a mask so the colour comes
 * from a token rather than being baked into the file. */
.gform_wrapper .ginput_container_select {
  position: relative;
}

.gform_wrapper .ginput_container_select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 4px;
  width: 10px;
  height: 6px;
  transform: translateY(-50%);
  background-color: var(--gs-fg);
  -webkit-mask: url("../svg/chevron-down.svg") center / contain no-repeat;
  mask: url("../svg/chevron-down.svg") center / contain no-repeat;
  pointer-events: none;
}

/* ---- submit ------------------------------------------------------------ */
.gform_wrapper .gform_footer {
  margin-block-start: var(--gs-space-md);
  padding: 0;
}

/* The colour pill, at the small height. Its fill is a brand value; see the
 * contrast note in BUILD-REPORT.md before changing the label colour. */
.gform_wrapper .gform_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--gs-pill-height-sm);
  padding: 0 var(--gs-pill-padding-x);
  border: 1px solid transparent;
  border-radius: var(--gs-pill-radius);
  background-color: var(--gs-accent);
  color: var(--gs-on-accent, var(--gs-paper));
  font-family: var(--gs-font-body);
  font-weight: 500;
  font-size: var(--gs-step-pill-sm);
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--gs-transition);
}

.gform_wrapper .gform_button:hover {
  background-color: color-mix(in srgb, var(--gs-accent), var(--gs-ink) var(--gs-hover-shift));
}

/* ---- validation --------------------------------------------------------
 * Not in the mockup, so it is Webstein's to decide per PROJECT-BRIEF 7A, and it
 * is logged there. Errors are never signalled by colour alone: the summary is a
 * real focusable region, each field gets a message in text under its control,
 * and Gravity Forms sets aria-invalid and aria-describedby on the input itself.
 */
.gform_wrapper .gform_validation_errors {
  margin: 0 0 var(--gs-space-md);
  padding: var(--gs-space-sm) var(--gs-space-md);
  border: 1px solid var(--gs-pickled-things);
  border-radius: var(--gs-card-radius);
  background-color: var(--gs-tint-pickled-things);
  color: var(--gs-fg);
  font-size: var(--gs-step-pill-sm);
}

.gform_wrapper .gform_validation_errors h2,
.gform_wrapper .gform_submission_error {
  font-family: var(--gs-font-body);
  font-weight: 500;
  font-size: var(--gs-step-pill-sm);
  line-height: var(--gs-leading-body);
  margin: 0;
  color: var(--gs-fg);
}

.gform_wrapper .gform_validation_errors ol,
.gform_wrapper .gform_validation_errors ul {
  margin: var(--gs-space-2xs) 0 0;
  padding-inline-start: var(--gs-space-sm);
}

.gform_wrapper .gform_validation_errors a {
  color: var(--gs-fg);
}

/* The message under a failing control. This is what actually carries the error
 * in text, so it stays even where a page chooses to hide the summary. */
.gform_wrapper .validation_message,
.gform_wrapper .gfield_validation_message {
  margin-block-start: var(--gs-space-2xs);
  color: var(--gs-fg);
  font-size: var(--gs-step-chip);
  font-weight: 500;
  line-height: var(--gs-leading-body);
}

/* Gravity Forms' spinner, which it injects inline on submit. */
.gform_wrapper .gform_ajax_spinner {
  display: inline-block;
  margin-inline-start: var(--gs-space-2xs);
  vertical-align: middle;
}

/* ---- confirmation ------------------------------------------------------
 * Also a 7A decision. Gravity Forms announces it through wp.a11y.speak, and it
 * replaces the form in place so focus stays in a sensible spot.
 *
 * Note the selector: the confirmation renders in .gform_confirmation_wrapper,
 * which is a sibling of the form rather than inside .gform_wrapper, so it cannot
 * be scoped under it.
 */
.gform_confirmation_message {
  padding: var(--gs-space-md) var(--gs-space-lg);
  border-radius: var(--gs-card-radius-lg);
  background-color: var(--gs-white);
  color: var(--gs-fg);
  font-size: var(--gs-step-sm);
  line-height: var(--gs-leading-body);
}

.gform_confirmation_message p {
  margin: 0;
}