/* ===================================================================
   Simply Hygiene — Patient Intake Form
   Loaded only on pages using the "Patient Intake Form" template.

   Scoped entirely to .sh-intake_wrapper so nothing here can leak into
   the rest of the site. Built against Gravity Forms' Orbital theme:
   where Orbital exposes a custom property, this drives that property
   rather than fighting its stylesheet.

   Design tokens are taken from the live site — Cantata One headings,
   Open Sans body, #333 / #666 text, the #2EA3F2 link blue and the
   #ACDDE4 brand turquoise. Layout ideas (segmented Yes/No control,
   revealed follow-ups, four-column checklist) come from the preview.

   Colour roles:
     #ACDDE4  brand turquoise — forward button, selected answer,
              current step, section underlines, panel borders
     #8AC6DD  deeper turquoise — completed steps, button hover
     #2EA3F2  blue — interaction only: input focus, checkbox ticks,
              revealed follow-up boxes, links, spinner
   Turquoise fills always carry ink text; white on them is ~1.5:1.
=================================================================== */

/* -------------------------------------------------------------------
   1. Tokens
------------------------------------------------------------------- */

/* Declared on the body as well as the form wrapper: the page title sits
   outside .sh-intake_wrapper, and a custom property only inherits down. */
body.sh-intake-page,
.gform_wrapper.sh-intake_wrapper {
  /* Site palette */
  --sh-ink:        #333333;   /* headings */
  --sh-body:       #666666;   /* body copy */
  --sh-muted:      #8a9199;
  --sh-accent:     #2EA3F2;   /* site link blue */
  --sh-accent-dk:  #1B87D2;
  --sh-aqua:       #ACDDE4;   /* brand turquoise */
  --sh-aqua-deep:  #8AC6DD;   /* completed steps; also the button hover */
  --sh-aqua-tint:  #F2FAFB;
  --sh-accent-tint:#F0F8FE;

  --sh-line:       #e2e8ec;
  --sh-line-soft:  #eef2f5;
  --sh-surface:    #ffffff;
  --sh-surface-alt:#fafcfd;

  --sh-danger:     #c0392b;
  --sh-danger-bg:  #fdf4f3;

  --sh-serif: "Cantata One", Georgia, "Times New Roman", serif;

  --sh-radius:     4px;   /* controls — close to Divi's 3px */
  --sh-radius-lg:  10px;  /* cards and panels */

  --sh-shadow: 0 1px 2px rgba(17, 35, 55, .04), 0 6px 20px rgba(17, 35, 55, .05);
}

/* -------------------------------------------------------------------
   2. Orbital custom properties

   Orbital declares these on the wrapper, so these compound selectors
   need to outrank .gform-theme--framework. Redeclared on the form as
   well in case a future GF release moves them down a level.
------------------------------------------------------------------- */

.gform_wrapper.sh-intake_wrapper,
.gform_wrapper.sh-intake_wrapper form.sh-intake {
  --gf-color-primary:            var(--sh-accent);
  --gf-color-primary-darker:     var(--sh-accent-dk);
  --gf-color-primary-lighter:    #6BBFF6;
  --gf-color-primary-contrast:   #ffffff;
  --gf-color-in-ctrl:            #ffffff;
  --gf-color-in-ctrl-primary:    var(--sh-accent);

  --gf-ctrl-border-color:        var(--sh-line);
  --gf-ctrl-radius:              var(--sh-radius);
  --gf-ctrl-size:                46px;
  --gf-ctrl-label-color-primary: var(--sh-ink);

  --gf-field-gap-y:              10px;
  --gf-form-gap-y:               26px;
}

/* Buttons, through Orbital's own variables.
   GF paints buttons from these, using selectors that outrank a plain
   `.sh-intake_wrapper .gform-theme-button` rule — so setting `padding`
   or `color` directly does nothing. Everything a button needs is
   declared here instead. Note --gf-ctrl-btn-color-primary defaults to
   --gf-color-primary-contrast (white), which is why aqua buttons came
   out with unreadable white text until this block existed. */
.gform_wrapper.sh-intake_wrapper,
.gform_wrapper.sh-intake_wrapper form.sh-intake {
  /* Forward action — logo aqua with ink text (8.6:1). */
  --gf-ctrl-btn-bg-color-primary:           var(--sh-aqua);
  --gf-ctrl-btn-bg-color-hover-primary:     var(--sh-aqua-deep);
  --gf-ctrl-btn-bg-color-focus-primary:     var(--sh-aqua-deep);
  --gf-ctrl-btn-color-primary:              var(--sh-ink);
  --gf-ctrl-btn-color-hover-primary:        var(--sh-ink);
  --gf-ctrl-btn-color-focus-primary:        var(--sh-ink);
  --gf-ctrl-btn-border-color-primary:       var(--sh-aqua);
  --gf-ctrl-btn-border-color-hover-primary: var(--sh-aqua-deep);
  --gf-ctrl-btn-border-color-focus-primary: var(--sh-aqua-deep);

  /* Back — quiet ghost button. */
  --gf-ctrl-btn-bg-color-secondary:           transparent;
  --gf-ctrl-btn-bg-color-hover-secondary:     transparent;
  --gf-ctrl-btn-color-secondary:              var(--sh-body);
  --gf-ctrl-btn-color-hover-secondary:        var(--sh-ink);
  --gf-ctrl-btn-border-color-secondary:       var(--sh-line);
  --gf-ctrl-btn-border-color-hover-secondary: var(--sh-muted);

  /* Shape. --gf-ctrl-btn-size is a min-height, so padding still grows
     the button past it. */
  --gf-ctrl-btn-padding-y:   13px;
  --gf-ctrl-btn-padding-x:   34px;
  --gf-ctrl-btn-radius:      999px;
  --gf-ctrl-btn-font-size:   15px;
  --gf-ctrl-btn-font-weight: 600;

  /* Progress steps: completed in the deeper turquoise, the current page
     in the brand turquoise. The completed step's tick is a ::after disc
     painted from -bg-color-complete, which defaults to GF's stock
     #204CE5 — a royal blue with nothing to do with this site.
     Glyphs are ink, not white: white on #ACDDE4 is 1.5:1 and on
     #8AC6DD 1.9:1, where ink gives 8.6:1 and 6.7:1. */
  --gf-field-pg-steps-number-bg-color-complete:     var(--sh-aqua-deep);
  --gf-field-pg-steps-number-border-color-complete: var(--sh-aqua-deep);
  --gf-field-pg-steps-number-color-complete:        var(--sh-ink);
  --gf-field-pg-steps-number-bg-color-active:       var(--sh-aqua);
  --gf-field-pg-steps-number-border-color-active:   var(--sh-aqua);
  --gf-field-pg-steps-number-color-active:          var(--sh-ink);
  --gf-field-pg-steps-number-bg-color:              var(--sh-line-soft);
  --gf-field-pg-steps-number-border-color:          var(--sh-line-soft);
  --gf-field-pg-steps-number-color:                 var(--sh-muted);

  /* Submit spinner. */
  --gf-form-spinner-fg-color: var(--sh-accent);
  --gf-form-spinner-bg-color: var(--sh-line);
}

/* -------------------------------------------------------------------
   3. Page shell
------------------------------------------------------------------- */

/* The template drops the sidebar; make sure the content area claims
   the space Divi would otherwise reserve for it. */
body.sh-intake-page #left-area {
  width: 100%;
  padding-right: 0;
}
body.sh-intake-page #sidebar { display: none; }

/* Divi leaves no bottom padding on a full-width page, so without this
   the last button sits flush against the footer. */
body.sh-intake-page #main-content .container {
  padding-top: 42px;
  padding-bottom: 90px;
}

body.sh-intake-page .entry-title,
body.sh-intake-page h1.main_title {
  font-family: var(--sh-serif);
  font-size: 38px;
  line-height: 1.25;
  font-weight: 500;
  color: var(--sh-ink);
  margin: 0 0 6px;
  padding-bottom: 0;
}

.gform_wrapper.sh-intake_wrapper {
  max-width: 1080px;
  margin: 26px auto 0;
  color: var(--sh-body);
  font-size: 15px;
  line-height: 1.65;
}

/* The form's own <h2 class="gform_title">.
   Whether this is printed is decided by the BLOCK or shortcode that embeds
   the form, not by anything in the form editor — which is why switching it
   off there had no effect. The proper fix is the "Form title" toggle in the
   Gravity Forms block sidebar, or title="false" on the shortcode. This rule
   is the belt-and-braces version; it becomes a harmless no-op once the
   toggle is off. Delete it to bring the heading back. */
.sh-intake_wrapper .gform_title {
  display: none;
}

.sh-intake_wrapper .gform_description {
  display: block;
  margin-bottom: 18px;
  color: var(--sh-muted);
  font-size: 15px;
}

.sh-intake_wrapper .gform_required_legend {
  color: var(--sh-muted);
  font-size: 13px;
  margin-bottom: 20px;
}

/* -------------------------------------------------------------------
   4. Progress steps
------------------------------------------------------------------- */

.sh-intake_wrapper .gf_page_steps {
  display: flex;
  gap: 10px;
  margin: 0 0 34px;
  padding: 0 0 22px;
  border-bottom: 1px solid var(--sh-line);
}

.sh-intake_wrapper .gf_step {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  padding: 0 0 12px;
  border-bottom: 3px solid var(--sh-line-soft);
  font-size: 13px;
  opacity: 1;                       /* Orbital dims pending steps */
  transition: border-color .2s ease;
}

.sh-intake_wrapper .gf_step_number {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--sh-line-soft);
  color: var(--sh-muted);
  font-family: var(--sh-serif);
  font-size: 14px;
  line-height: 1;
  border: 0;
}

.sh-intake_wrapper .gf_step_label {
  color: var(--sh-muted);
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
}

/* The page you are on: brand turquoise. */
.sh-intake_wrapper .gf_step_active { border-bottom-color: var(--sh-aqua); }
.sh-intake_wrapper .gf_step_active .gf_step_number {
  background: var(--sh-aqua);
  color: var(--sh-ink);
}
.sh-intake_wrapper .gf_step_active .gf_step_label { color: var(--sh-ink); }

/* Pages already done: the deeper turquoise, on both the underline and
   the tick disc. */
.sh-intake_wrapper .gf_step_completed { border-bottom-color: var(--sh-aqua-deep); }
.sh-intake_wrapper .gf_step_completed .gf_step_number {
  background: var(--sh-aqua-deep);
  color: var(--sh-ink);
}
.sh-intake_wrapper .gf_step_completed .gf_step_number::after {
  background-color: var(--sh-aqua-deep);
  color: var(--sh-ink);
}

/* -------------------------------------------------------------------
   5. Section headers

   GF's field grid is flat — sections are grid items, not containers —
   so grouping is carried by the header treatment and a full-width rule
   rather than by literal cards.
------------------------------------------------------------------- */

.sh-intake_wrapper .gsection.sh-section {
  grid-column: 1 / -1;
  margin: 0 0 4px;
  padding: 0;
  border-top: 0;
  border-bottom: 0;
}

/* A separating rule above every section EXCEPT the first on the page.
   ".sh-section ~ .sh-section" is the way to express that — the honeypot
   field GF injects is the real first child, so :first-child never
   matches the section. */
.sh-intake_wrapper .gform_fields > .sh-section ~ .sh-section {
  margin-top: 20px;
  padding-top: 26px;
  border-top: 1px solid var(--sh-line);
}

.sh-intake_wrapper .gsection_title {
  font-family: var(--sh-serif);
  font-size: 23px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--sh-ink);
  margin: 0;
  padding: 0 0 12px;
  position: relative;
}

.sh-intake_wrapper .gsection_title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46px;
  height: 3px;
  border-radius: 2px;
  background: var(--sh-aqua);
}

/* -------------------------------------------------------------------
   6. Labels, inputs, sub-labels
------------------------------------------------------------------- */

.sh-intake_wrapper .gfield_label,
.sh-intake_wrapper .gform-field-label {
  color: var(--sh-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 7px;
}

.sh-intake_wrapper .gform-field-label--type-sub {
  color: var(--sh-muted);
  font-size: 12px;
  font-weight: 400;
  margin-top: 5px;
}

/* "(Required)" — present for accessibility, not shouting. GF emits it
   with no separating space, so give it a margin of its own. */
.sh-intake_wrapper .gfield_required_text,
.sh-intake_wrapper .gfield_required {
  color: var(--sh-muted);
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  margin-left: 5px;
}

.sh-intake_wrapper .gfield_description {
  color: var(--sh-muted);
  font-size: 13px;
  padding-top: 4px;
}

/* background-COLOR, never the `background` shorthand. GF draws the
   dropdown chevron with background-image + no-repeat + size, and the
   shorthand resets every one of those. That left the select with no
   arrow at rest and, on hover — where GF re-applies just the image —
   the 10x6 chevron tiled across the whole field as a zigzag strip. */
.sh-intake_wrapper input[type="text"],
.sh-intake_wrapper input[type="email"],
.sh-intake_wrapper input[type="tel"],
.sh-intake_wrapper input[type="number"],
.sh-intake_wrapper input[type="date"],
.sh-intake_wrapper select,
.sh-intake_wrapper textarea {
  width: 100%;
  background-color: var(--sh-surface);
  border: 1px solid var(--sh-line);
  border-radius: var(--sh-radius);
  padding: 11px 13px;
  color: var(--sh-ink);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  transition: border-color .15s ease, box-shadow .15s ease;
  box-shadow: none;
}

.sh-intake_wrapper textarea { min-height: 92px; resize: vertical; }

.sh-intake_wrapper input:focus,
.sh-intake_wrapper select:focus,
.sh-intake_wrapper textarea:focus {
  outline: none;
  border-color: var(--sh-accent);
  box-shadow: 0 0 0 3px rgba(46, 163, 242, .16);
}

.sh-intake_wrapper ::placeholder { color: #b6bfc6; opacity: 1; }

/* -------------------------------------------------------------------
   7. Yes / No / Not Sure — segmented control

   Desktop puts the question and the control on one row; the control
   holds its width so all 19 questions line up down the page.
------------------------------------------------------------------- */

.sh-intake_wrapper .sh-ynq {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin: 0;
  padding: 15px 0;
  border: 0;
  border-bottom: 1px solid var(--sh-line-soft);
}

/* GF renders each question as a <fieldset><legend>. The browser paints a
   legend into the fieldset's border and skips normal layout for it, so
   it ignores flex and drops onto its own line. Per the HTML rendering
   spec that special handling is switched off as soon as the legend has a
   float other than none — the float itself does nothing here, because
   the legend then becomes a flex item and floats are ignored on those.
   Removing it puts the question back on its own line. */
.sh-intake_wrapper .sh-ynq > .gfield_label {
  float: left;
  flex: 1 1 300px;
  margin: 0;
  font-weight: 400;
  font-size: 15px;
  color: var(--sh-ink);
  line-height: 1.55;
}

.sh-intake_wrapper .sh-ynq .ginput_container_radio {
  flex: 0 0 auto;
  margin: 0;
  margin-left: auto;
}

/* Help text is a third child of the fieldset. Without this it becomes a
   flex item beside the control and shoves it out of alignment; a full
   basis drops it onto its own line under the question.
   clear:both is belt-and-braces — the legend above carries a float, and
   an engine that does not treat this fieldset as a flex container would
   otherwise let this text wrap around it. */
.sh-intake_wrapper .sh-ynq .gfield_description {
  flex: 1 0 100%;
  order: 3;
  margin: 0;
  padding: 0;
  clear: both;
}

/* Same for the validation message when a question is left blank. */
.sh-intake_wrapper .sh-ynq .gfield_validation_message {
  flex: 1 0 100%;
  order: 4;
  clear: both;
}

.sh-intake_wrapper .sh-ynq .gfield_radio {
  display: flex;
  /* Orbital's inline choice list reverts to a column below its own
     breakpoint, which would stack the three options. This control stays
     a three-up segment at every width. */
  flex-direction: row;
  gap: 4px;
  padding: 4px;
  background: var(--sh-surface-alt);
  border: 1px solid var(--sh-line);
  border-radius: 999px;
}

/* Orbital lays each choice out as a grid (input column + label column).
   The label would sit in an auto-sized column and never fill the
   segment, so collapse it back to a block — the input is taken out of
   flow just below anyway. */
.sh-intake_wrapper .sh-ynq .gchoice {
  display: block;
  margin: 0;
}

/* The native control stays in the DOM for keyboard and screen readers;
   the label is what gets painted. */
.sh-intake_wrapper .sh-ynq .gfield-choice-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.sh-intake_wrapper .sh-ynq .gchoice label {
  display: block;
  min-width: 82px;
  margin: 0;
  padding: 8px 16px;
  border-radius: 999px;
  color: var(--sh-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.sh-intake_wrapper .sh-ynq .gchoice label:hover { background: rgba(172, 221, 228, .32); }

/* Selected answer — brand turquoise with ink text. Ink rather than
   white for the same reason as the button: white on #ACDDE4 is 1.5:1,
   ink is 8.6:1. */
.sh-intake_wrapper .sh-ynq .gfield-choice-input:checked + label {
  background: var(--sh-aqua);
  color: var(--sh-ink);
  box-shadow: 0 1px 3px rgba(23, 50, 58, .16);
}

/* Focus ring stays the blue: a turquoise ring on this pale background
   would be too low-contrast to see. */
.sh-intake_wrapper .sh-ynq .gfield-choice-input:focus-visible + label {
  box-shadow: 0 0 0 3px rgba(46, 163, 242, .45);
}

/* -------------------------------------------------------------------
   8. Conditional follow-ups

   Only "Yes" opens these. The left rule and tint mark them as belonging
   to the question above rather than reading as a new question.
------------------------------------------------------------------- */

.sh-intake_wrapper .sh-detail {
  background: var(--sh-accent-tint);
  border: 1px solid #dceefb;
  border-left: 3px solid var(--sh-accent);
  border-radius: 0 var(--sh-radius-lg) var(--sh-radius-lg) 0;
  padding: 16px 18px;
  margin-top: 4px;
}

.sh-intake_wrapper .sh-detail .gfield_label {
  font-size: 13px;
  color: #1B6FA8;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.sh-intake_wrapper .sh-detail input,
.sh-intake_wrapper .sh-detail textarea { background-color: #fff; }

/* The allergy question has three follow-ups in a row. They are left as
   three matching boxes — a negative margin cannot close a CSS grid's
   row-gap, so trying to merge them only squares off the corners of the
   second and third. */

/* -------------------------------------------------------------------
   9. Conditions checklist

   Four columns reading DOWN, matching the paper form. CSS columns —
   not a re-ordered choice list — so that when this collapses to one
   column on a phone the list is still alphabetical.
------------------------------------------------------------------- */

.sh-intake_wrapper .sh-checklist {
  background: var(--sh-aqua-tint);
  border: 1px solid #dcedef;
  border-radius: var(--sh-radius-lg);
  padding: 22px 24px;
  margin: 6px 0;
}

.sh-intake_wrapper .sh-checklist > .gfield_label {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 16px;
}

.sh-intake_wrapper .sh-checklist .gfield_checkbox {
  columns: 4;
  column-gap: 26px;
  display: block;
}

.sh-intake_wrapper .sh-checklist .gchoice {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 4px;
  padding: 5px 8px;
  border-radius: var(--sh-radius);
  transition: background-color .12s ease;
}

.sh-intake_wrapper .sh-checklist .gchoice:hover { background: rgba(255, 255, 255, .75); }

.sh-intake_wrapper .sh-checklist .gchoice input[type="checkbox"] {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin: 2px 0 0;
  accent-color: var(--sh-accent);
  cursor: pointer;
}

.sh-intake_wrapper .sh-checklist .gchoice label {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--sh-body);
  cursor: pointer;
}

.sh-intake_wrapper .sh-checklist .gchoice:has(input:checked) { background: #fff; }
.sh-intake_wrapper .sh-checklist .gchoice:has(input:checked) label {
  color: var(--sh-ink);
  font-weight: 600;
}

/* -------------------------------------------------------------------
   10. Static content blocks
------------------------------------------------------------------- */

.sh-intake_wrapper .sh-note {
  background: var(--sh-surface-alt);
  border: 1px solid var(--sh-line-soft);
  border-radius: var(--sh-radius-lg);
  padding: 16px 20px;
  font-size: 14.5px;
  color: var(--sh-body);
}
.sh-intake_wrapper .sh-note p:last-child { margin-bottom: 0; }
.sh-intake_wrapper .sh-note strong { color: var(--sh-ink); }

/* The declaration line above the signature. */
.sh-intake_wrapper .sh-note .declaration {
  font-family: var(--sh-serif);
  font-size: 17px;
  line-height: 1.5;
  color: var(--sh-ink);
}

/* PHIPA notice — legal small print, set quietly. */
.sh-intake_wrapper .sh-legal {
  border-top: 1px solid var(--sh-line);
  padding-top: 20px;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--sh-muted);
}
.sh-intake_wrapper .sh-legal ul { margin: 0 0 12px; padding-left: 20px; }
.sh-intake_wrapper .sh-legal li { margin-bottom: 4px; }
.sh-intake_wrapper .sh-legal p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------
   11. Consent
------------------------------------------------------------------- */

.sh-intake_wrapper .sh-consent {
  background: var(--sh-aqua-tint);
  border: 1px solid var(--sh-aqua);
  border-radius: var(--sh-radius-lg);
  padding: 18px 20px;
  margin: 4px 0;
}

/* The heading above the checkbox is redundant next to the section
   title; the checkbox label carries the meaning. */
.sh-intake_wrapper .sh-consent > .gfield_label { display: none; }

.sh-intake_wrapper .sh-consent .ginput_container_consent {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.sh-intake_wrapper .sh-consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  margin: 1px 0 0;
  accent-color: var(--sh-accent);
  cursor: pointer;
}

.sh-intake_wrapper .sh-consent .gfield_consent_label {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--sh-ink);
  cursor: pointer;
}

/* -------------------------------------------------------------------
   12. Signature
------------------------------------------------------------------- */

.sh-intake_wrapper .sh-signature .gfield_signature_container,
.sh-intake_wrapper .sh-signature .gfield_signature_ui_container {
  max-width: 100%;
}

.sh-intake_wrapper .sh-signature canvas {
  max-width: 100%;
  height: auto;
  background: #fff;
  border: 1px dashed var(--sh-line) !important;
  border-radius: var(--sh-radius-lg);
  cursor: crosshair;
  touch-action: none;
}

.sh-intake_wrapper .sh-signature a {
  display: inline-block;
  margin-top: 9px;
  color: var(--sh-accent);
  font-size: 13px;
  font-weight: 600;
}

/* -------------------------------------------------------------------
   13. Buttons
------------------------------------------------------------------- */

/* Items pack from the left; the forward button takes an auto left
   margin to sit on the right. Deliberately NOT space-between: when a
   button is clicked GF injects a spinner as a third flex item, and
   space-between would redistribute all three and shove the Back button
   into the middle of the row. */
.sh-intake_wrapper .gform_page_footer,
.sh-intake_wrapper .gform-page-footer,
.sh-intake_wrapper .gform_footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid var(--sh-line);
}

.sh-intake_wrapper .gform_next_button,
.sh-intake_wrapper .gform_button,
.sh-intake_wrapper .gform_previous_button,
.sh-intake_wrapper .gform-theme-button {
  appearance: none;
  border-radius: 999px;
  padding: 13px 34px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}

/* Forward action — brand turquoise, with ink text. White on #ACDDE4 is
   1.5:1 and unreadable; ink on it is 8.6:1. */
/* The auto margin is what puts this button on the right, and it needs
   !important: GF resets control margins from a rule that outranks this
   one, so a plain `margin-left: auto` computes to 0. Verified both ways
   in the browser — without it the button packs against Back. */
.sh-intake_wrapper .gform_next_button,
.sh-intake_wrapper .gform_button,
.sh-intake_wrapper .gform-theme-button:not(.gform_previous_button) {
  order: 2;
  margin-left: auto !important;
  background: var(--sh-aqua);
  border: 1px solid var(--sh-aqua);
  color: var(--sh-ink);
}

/* On submit GF injects <span class="gform-loader"> immediately after the
   button that was clicked. Left alone it is a flex item with order 0,
   so it jumps to the front of the row and pushes the buttons along.
   Giving it the same order as the button it follows keeps it beside
   that button, and nothing else moves. */
.sh-intake_wrapper .gform-loader {
  order: 2;
  flex: 0 0 auto;
  margin: 0;
}

.sh-intake_wrapper .gform_previous_button + .gform-loader { order: 1; }
.sh-intake_wrapper .gform_next_button:hover,
.sh-intake_wrapper .gform_button:hover,
.sh-intake_wrapper .gform-theme-button:not(.gform_previous_button):hover {
  background: var(--sh-aqua-deep);
  border-color: var(--sh-aqua-deep);
}

/* Back action — quiet, and kept on the left */
.sh-intake_wrapper .gform_previous_button,
.sh-intake_wrapper .gform-theme-button.gform_previous_button {
  order: 1;
  background: transparent;
  border: 1px solid var(--sh-line);
  color: var(--sh-body);
}
.sh-intake_wrapper .gform_previous_button:hover {
  border-color: var(--sh-muted);
  color: var(--sh-ink);
  background: transparent;
}

.sh-intake_wrapper .gform-theme-button:active { transform: translateY(1px); }

.sh-intake_wrapper .gform-theme-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(46, 163, 242, .3);
}

/* -------------------------------------------------------------------
   14. Validation
------------------------------------------------------------------- */

.sh-intake_wrapper .gform_validation_errors {
  background: var(--sh-danger-bg);
  border: 1px solid #f0d3cf;
  border-left: 3px solid var(--sh-danger);
  border-radius: var(--sh-radius-lg);
  box-shadow: none;
  padding: 16px 20px;
  margin-bottom: 26px;
}
.sh-intake_wrapper .gform_validation_errors > h2 {
  font-family: var(--sh-serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--sh-danger);
  margin: 0;
}

/* background-COLOR again — a shorthand here would strip the dropdown
   chevron off an errored select, the same way it did at rest. */
.sh-intake_wrapper .gfield_error input,
.sh-intake_wrapper .gfield_error textarea,
.sh-intake_wrapper .gfield_error select {
  border-color: var(--sh-danger);
  background-color: var(--sh-danger-bg);
}

.sh-intake_wrapper .gfield_error .gfield_radio {
  border-color: var(--sh-danger);
  background: var(--sh-danger-bg);
}

.sh-intake_wrapper .gfield_validation_message,
.sh-intake_wrapper .validation_message {
  background: transparent;
  border: 0;
  padding: 6px 0 0;
  color: var(--sh-danger);
  font-size: 13px;
  font-weight: 600;
}

/* -------------------------------------------------------------------
   15. Confirmation
------------------------------------------------------------------- */

body.sh-intake-page .gform_confirmation_message {
  max-width: 640px;
  margin: 40px auto;
  padding: 34px 36px;
  background: var(--sh-aqua-tint);
  border: 1px solid var(--sh-aqua);
  border-radius: var(--sh-radius-lg);
  box-shadow: var(--sh-shadow);
  color: var(--sh-body);
  font-size: 16px;
  line-height: 1.65;
  text-align: center;
}
body.sh-intake-page .gform_confirmation_message strong {
  display: block;
  margin-bottom: 10px;
  font-family: var(--sh-serif);
  font-size: 21px;
  font-weight: 500;
  color: var(--sh-ink);
}

/* -------------------------------------------------------------------
   16. Responsive
------------------------------------------------------------------- */

@media (max-width: 980px) {
  .sh-intake_wrapper .sh-checklist .gfield_checkbox { columns: 3; }
}

@media (max-width: 780px) {
  body.sh-intake-page #main-content .container { padding-bottom: 56px; }

  body.sh-intake-page .entry-title,
  body.sh-intake-page h1.main_title { font-size: 30px; }

  .sh-intake_wrapper .gsection_title { font-size: 20px; }

  .sh-intake_wrapper .sh-checklist { padding: 18px 16px; }
  .sh-intake_wrapper .sh-checklist .gfield_checkbox { columns: 2; column-gap: 16px; }

  /* Step labels drop away; the numbers still show progress. */
  .sh-intake_wrapper .gf_page_steps { gap: 6px; margin-bottom: 26px; padding-bottom: 16px; }
  .sh-intake_wrapper .gf_step { gap: 0; justify-content: center; }
  .sh-intake_wrapper .gf_step_label { display: none; }

  /* Question above, control below and full width — the control must
     stretch rather than shrink to its content. */
  .sh-intake_wrapper .sh-ynq {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 16px 0;
  }
  /* float:none matters here. The desktop layout needs the float purely to
     stop the browser painting the <legend> into the fieldset border and
     skipping normal layout for it. Stacked, that is unnecessary — and a
     floated legend inside a flex fieldset is the one construct in this
     stylesheet whose behaviour is not consistent across engines. An engine
     that does not honour flex on <fieldset> would take the float
     literally and let the following text wrap alongside the question. */
  .sh-intake_wrapper .sh-ynq > .gfield_label { float: none; flex: 0 0 auto; width: 100%; }

  /* Percentage flex-basis resolves against the MAIN axis, which is
     vertical once the row becomes a column. Size the cross axis
     explicitly rather than leaving that to interpretation. */
  .sh-intake_wrapper .sh-ynq .gfield_description,
  .sh-intake_wrapper .sh-ynq .gfield_validation_message {
    flex: 0 0 auto;
    width: 100%;
  }

  .sh-intake_wrapper .sh-ynq .ginput_container_radio { margin-left: 0; width: 100%; flex: 0 0 auto; }
  .sh-intake_wrapper .sh-ynq .gchoice { flex: 1 1 0; }
  .sh-intake_wrapper .sh-ynq .gchoice label { min-width: 0; padding: 10px 8px; }

  .sh-intake_wrapper .gform_page_footer,
  .sh-intake_wrapper .gform-page-footer,
  .sh-intake_wrapper .gform_footer { gap: 10px; }
  /* Through the variable, not `padding` — GF's button rule outranks a
     direct declaration here. */
  .sh-intake_wrapper .gform-theme-button { flex: 1 1 auto; --gf-ctrl-btn-padding-x: 18px; }
}

@media (max-width: 520px) {
  .sh-intake_wrapper .sh-checklist .gfield_checkbox { columns: 1; }
  .sh-intake_wrapper .sh-detail { padding: 14px 15px; }
}

/* -------------------------------------------------------------------
   17. Motion and print
------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .sh-intake_wrapper * { transition: none !important; animation: none !important; }
}

@media print {
  body.sh-intake-page #main-header,
  body.sh-intake-page #main-footer,
  body.sh-intake-page .gform_page_footer,
  body.sh-intake-page .gf_page_steps { display: none !important; }

  .sh-intake_wrapper .gform_page { display: block !important; }
  .sh-intake_wrapper .sh-checklist,
  .sh-intake_wrapper .sh-consent,
  .sh-intake_wrapper .sh-detail { background: none; }
}