/* ============================================================
   Gravity Forms bridge — makes GF's own markup match the site's
   existing form design (base.css .input/.textarea/.btn-submit etc.)

   IMPORTANT: this GF install runs the 2.9+ "Orbital" theme framework
   (markup carries gform-theme / gform-theme--framework / etc. classes,
   confirmed via devtools on the live site — NOT the older .gravity-theme
   class this file originally assumed). Orbital ships its own CSS with
   multi-class chained selectors (e.g.
   ".gform-theme.gform-theme--framework.gform_wrapper .button:where(...)")
   that out-specificity our plain ".gform_wrapper .gform_button" rules
   regardless of stylesheet load order, and it also sets explicit
   font-size on its own nested required-marker element, which a bare
   font-size:0 on the ancestor doesn't override. So every rule below
   uses !important to win outright rather than fighting a specificity
   war against a framework designed to be reskinned via its own CSS
   custom properties. The inner class names (.gfield_label,
   .ginput_container, .gform_button, etc.) are stable across GF
   versions. If GF's markup ever changes again, open devtools on the
   live page, check the actual class on the relevant element, and
   adjust selectors here — the site's design tokens (var(--brand-500)
   etc., from theme.css/base.css) stay the same either way.
   ============================================================ */

/* Kill GF's own default spacing/box so it sits flush in .contact-form */
.gform_wrapper{ margin:0 !important; }
.gform_wrapper .gform_body{ margin:0 !important; }
.gform_wrapper form{ display:flex !important; flex-direction:column !important; gap:var(--sp-6) !important; }

/* Field layout — every field full-width, stacked, matching the local site's
   mobile treatment. GF's own half-width/2-up grid (its "gform-theme--orbital"
   responsive breakpoints) fought our overrides through several rounds of
   this file without ever reliably collapsing to one column at the widths
   that actually needed it — First/Last name's columns kept landing at
   inconsistent heights because whether [REQUIRED] fit inline was a coin-flip
   per label length. Simplest fix: there's no half-width column to fight
   over any more — everything is one column, always. */
.gform_wrapper .gform_fields{
  display:flex !important; flex-direction:column !important; gap:var(--sp-6) !important;
}
.gform_wrapper .gfield{ display:flex !important; flex-direction:column !important; gap:var(--sp-3) !important; width:100% !important; }

/* Address field — hide just the "Address Line 2" sub-label while keeping the
   input (per request); .address_line_2 is GF's own stable CSS-ready class
   for this specific Address-field sub-row. */
.gform_wrapper .address_line_2 label{ display:none !important; }

/* Labels — reuse .form-label look; GF appends its own required marker,
   swap it to match the site's [REQUIRED] tag style */
.gform_wrapper .gfield_label{
  font-size:var(--text-md) !important; font-weight:var(--weight-regular) !important;
  color:var(--text-on-light-heading) !important; line-height:1 !important; margin-bottom:0 !important;
  display:flex !important; flex-wrap:wrap !important; align-items:baseline !important;
  gap:var(--sp-3) !important; white-space:nowrap !important;
  /* flex-wrap lets the [REQUIRED] tag drop to its own line on narrow mobile columns
     instead of the label text itself wrapping mid-word (e.g. "First" / "Name") —
     that mid-word wrap was throwing First/Last Name's inputs out of alignment
     since one label happened to wrap and the other didn't at the same width. */
}
.gform_wrapper .gfield_required{
  font-size:0 !important; /* collapse GF's own required marker text at this level */
}
.gform_wrapper .gfield_required *{
  display:none !important; /* hide GF's own marker regardless of what element/structure carries it —
                               font-size:0 above doesn't reach a child with its own explicit font-size */
}
.gform_wrapper .gfield_required::after{
  content:'[REQUIRED]' !important;
  display:inline !important;
  font-size:var(--text-xs) !important; font-weight:700 !important; letter-spacing:var(--tracking-wider) !important;
  text-transform:uppercase !important; color:var(--brand-500) !important;
}

/* Inputs/textarea — match .input/.textarea exactly */
.gform_wrapper .ginput_container input[type="text"],
.gform_wrapper .ginput_container input[type="email"],
.gform_wrapper .ginput_container input[type="tel"],
.gform_wrapper .ginput_container textarea{
  width:100% !important; font-family:var(--font-base) !important; font-size:var(--text-md) !important; font-weight:var(--weight-regular) !important;
  color:var(--text-on-light-heading) !important; background:var(--grey-0) !important; border:1.5px solid var(--grey-200) !important;
  border-radius:var(--radius) !important; transition:border-color var(--dur-base) var(--ease-out) !important;
  appearance:none !important; -webkit-appearance:none !important;
}
.gform_wrapper .ginput_container input[type="text"],
.gform_wrapper .ginput_container input[type="email"],
.gform_wrapper .ginput_container input[type="tel"]{ padding:8px 18px !important; height:42px !important; }
.gform_wrapper .ginput_container textarea{ padding:14px 18px !important; resize:vertical !important; min-height:140px !important; }
.gform_wrapper .ginput_container input::placeholder,
.gform_wrapper .ginput_container textarea::placeholder{ color:var(--grey-300) !important; }
.gform_wrapper .ginput_container input:hover,
.gform_wrapper .ginput_container textarea:hover{ border-color:var(--grey-300) !important; }
.gform_wrapper .ginput_container input:focus,
.gform_wrapper .ginput_container textarea:focus{ outline:none !important; border-color:var(--brand-500) !important; }

/* Validation errors — match .form-error styling */
.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message{
  font-size:var(--text-sm) !important; color:var(--danger) !important; margin-top:0 !important;
}
.gform_wrapper .gfield_error .ginput_container input,
.gform_wrapper .gfield_error .ginput_container textarea{ border-color:var(--danger) !important; }
.gform_wrapper .gfield_error .gfield_label{ color:var(--text-on-light-heading) !important; } /* GF defaults this red — keep it calm */
.gform_wrapper .gform_validation_errors{ display:none !important; } /* top-of-form summary banner — per-field messages already show */

/* Submit button — match .btn.btn-submit.btn-lg. On the static site this button
   looks full-width only because it's a direct child of the flex .contact-form
   column (which stretches its children) — GF nests it inside .gform_footer
   instead, so that stretch doesn't reach it; width:100% reproduces the same
   look explicitly rather than relying on GF's markup depth matching ours. */
.gform_wrapper .gform_footer{ margin:0 !important; padding:0 !important; }
.gform_wrapper .gform_button{
  display:flex !important; width:100% !important; align-items:center !important; justify-content:center !important;
  font-family:var(--font-base) !important; font-size:var(--text-md) !important; font-weight:var(--weight-semi) !important;
  line-height:1 !important; padding:15px 34px !important; border-radius:var(--radius) !important; text-decoration:none !important;
  white-space:nowrap !important; border:2px solid var(--brand-500) !important; cursor:pointer !important; letter-spacing:var(--tracking-wide) !important;
  background:var(--brand-500) !important; color:#fff !important;
  transition:background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out) !important;
}
.gform_wrapper .gform_button:hover{ background:transparent !important; border-color:var(--brand-500) !important; color:var(--brand-500) !important; }

/* Confirmation message — match .form-success exactly */
.gform_confirmation_wrapper, .gform_confirmation_message{
  background:var(--brand-100) !important; border-left:3px solid var(--brand-500) !important; padding:var(--sp-8) !important;
}
.gform_confirmation_wrapper h3, .gform_confirmation_message h3{ margin-bottom:var(--sp-2) !important; }