/* ═══════════════════════════════════════════
   Contact Form — Gravity Forms Overrides
   ═══════════════════════════════════════════
   GF's own CSS is disabled in inc/gravity-forms.php (all three
   generations, incl. the GF 2.7+ "Orbital" theme). These rules restyle
   the bare form to the theme. !important + a GF-variable remap keep the
   design winning even if a future GF stylesheet slips back in.
   ═══════════════════════════════════════════ */

/* Remap GF's own theme variables to brand colors — so any GF CSS that
   does load paints teal/cream instead of the default blue. */
.gform_wrapper {
  --gform-theme-color-primary: var(--teal);
  --gform-theme-color-primary-rgb: 0, 148, 110;
  --gform-theme-color-primary-contrast: #fff;
  --gform-theme-color-primary-darker: var(--teal-deep);
  --gform-theme-color-secondary: var(--white);
  --gform-theme-color-secondary-contrast: var(--text);
  --gf-color-primary: var(--teal);
  --gf-local-submit-background-color: var(--teal);
}

/* Replace Orbital's 12-column grid with a wrapping flex row. Fields are
   full width by default; GF's per-field width classes (set by dragging
   fields side by side in the form editor) narrow them so they sit in a
   row. This keeps the 50/50 First+Last, Email+Phone layouts working
   while still killing Orbital's blue-button + squished-input styling. */
.gform_wrapper .gform_fields {
  display: flex !important;
  flex-wrap: wrap !important;
  column-gap: 24px !important;
  row-gap: 0 !important;
  grid-template-columns: none !important;
}
.gform_wrapper .gfield {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 0 18px 0 !important;
  box-sizing: border-box;
}

/* GF 2.7+ Orbital width classes → flex widths (24px column gap accounted for) */
.gform_wrapper .gfield--width-half          { width: calc(50% - 12px) !important; }
.gform_wrapper .gfield--width-third         { width: calc(33.333% - 16px) !important; }
.gform_wrapper .gfield--width-quarter       { width: calc(25% - 18px) !important; }
.gform_wrapper .gfield--width-two-thirds    { width: calc(66.666% - 8px) !important; }
.gform_wrapper .gfield--width-three-quarter { width: calc(75% - 6px) !important; }

/* Legacy GF "ready classes" (older forms / manual CSS-class entry) */
.gform_wrapper .gf_left_half,
.gform_wrapper .gf_right_half               { width: calc(50% - 12px) !important; }
.gform_wrapper .gf_left_third,
.gform_wrapper .gf_middle_third,
.gform_wrapper .gf_right_third              { width: calc(33.333% - 16px) !important; }

/* Disclaimer notice above the form */
.form-disclaimer {
  margin: 0 0 40px;
  padding: 18px 22px;
  background: rgba(55, 92, 199, .05);
  border-left: 3px solid var(--blue);
  border-radius: 12px;
}
.form-disclaimer p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0;
}

/* Breathing room between whatever sits above (hero / disclaimer) and the form */
.gform_wrapper {
  margin-top: 8px !important;
}

/* Name field — GF wraps multi-input fields in a <fieldset>; kill the
   browser's default border and put First / Last side by side with only
   the placeholder inside each box (the "First" / "Last" sub-labels are
   hidden — the main "Name" label above is enough). */
.gform_wrapper fieldset.gfield,
.gform_wrapper .gfield fieldset {
  border: none !important;
  padding: 0 !important;
  margin: 0 0 18px 0 !important;
  min-width: 0;
}
.gform_wrapper legend.gfield_label {
  float: none !important;
  width: 100%;
  padding: 0 !important;
}
.gform_wrapper .ginput_complex {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 24px !important;
  width: 100% !important;
}
.gform_wrapper .ginput_complex > span {
  flex: 1 1 calc(50% - 12px) !important;
  min-width: 0;
  padding: 0 !important;
  margin: 0 !important;
}
.gform_wrapper .ginput_complex label,
.gform_wrapper .ginput_complex .gform-field-label--type-sub,
.gform_wrapper .gfield .ginput_container_name label {
  display: none !important;
}
@media (max-width: 600px) {
  .gform_wrapper .ginput_complex > span {
    flex-basis: 100% !important;
    margin-bottom: 18px !important;
  }
  .gform_wrapper .ginput_complex > span:last-child { margin-bottom: 0 !important; }
}

/* CAPTCHA — hide the field label; the widget itself is the UI.
   (Widget only renders once reCAPTCHA keys are saved in Forms → Settings.) */
.gform_wrapper .gfield--type-captcha .gfield_label,
.gform_wrapper .gfield_captcha_container ~ .gfield_label,
.gform_wrapper .ginput_recaptcha ~ .gfield_label {
  display: none !important;
}
.gform_wrapper .gfield--type-captcha {
  margin-bottom: 24px !important;
}
/* Invisible reCAPTCHA renders nothing inline (just Google's badge in the
   page corner), so collapse the empty field instead of leaving a gap. */
.gform_wrapper .gfield--type-captcha:has(.ginput_recaptcha[data-size="invisible"]),
.gform_wrapper .gfield--type-captcha:has(.ginput_recaptcha:empty) {
  margin: 0 !important;
  height: 0 !important;
  overflow: hidden;
}

/* Inputs */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper select,
.gform_wrapper textarea {
  width: 100% !important;
  padding: 14px 18px !important;
  border: 1px solid rgba(0, 0, 0, .08) !important;
  border-radius: 12px !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  color: var(--text) !important;
  background: var(--white) !important;
  box-shadow: none !important;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
  outline: none;
  box-sizing: border-box;
}
.gform_wrapper textarea {
  min-height: 140px;
  resize: vertical;
}

/* Dropdown (Inquiry Type) — custom chevron, no native arrow */
.gform_wrapper select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  padding-right: 44px !important;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%236e7489' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
}

.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus {
  border-color: var(--teal) !important;
  box-shadow: 0 0 0 3px rgba(0, 148, 110, .12) !important;
}

.gform_wrapper .gfield_label {
  display: block;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--text) !important;
  letter-spacing: .02em !important;
  margin-bottom: 8px !important;
}
.gform_wrapper .gfield_required { color: var(--teal); }

/* Submit button — cover every GF variant (button, input[submit],
   button[submit]) so the pill always wins over Orbital's blue block. */
.gform_wrapper .gform_footer,
.gform_wrapper .gform-footer {
  padding: 8px 0 0 0 !important;
  margin: 0 !important;
}
.gform_wrapper .gform_button,
.gform_wrapper input[type="submit"],
.gform_wrapper button[type="submit"] {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  width: auto !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 15px 34px !important;
  border-radius: 100px !important;
  background: var(--teal) !important;
  color: #fff !important;
  border: none !important;
  cursor: pointer;
  text-transform: none !important;
  transition: all .35s var(--ease) !important;
  box-shadow: 0 2px 12px rgba(0, 148, 110, .2) !important;
}
.gform_wrapper .gform_button:hover,
.gform_wrapper input[type="submit"]:hover,
.gform_wrapper button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 148, 110, .3) !important;
  background: var(--teal-deep) !important;
}

/* Validation + confirmation */
.gform_wrapper .gfield_description.validation_message,
.gform_wrapper .validation_message {
  color: #d63638 !important;
  font-size: 13px !important;
  margin-top: 6px !important;
}
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select {
  border-color: #d63638 !important;
}
/* Thank-you message (rendered in place via AJAX after submit) */
.gform_confirmation_wrapper,
.gform_confirmation_message {
  text-align: center;
}
.gform_confirmation_message {
  max-width: 560px;
  margin: 0 auto;
  padding: 44px 36px;
  background: var(--white);
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(12, 29, 77, .06);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.7;
  color: var(--text);
}
.gform_confirmation_message::before {
  content: '';
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 26px no-repeat;
  box-shadow: 0 8px 24px rgba(0, 148, 110, .25);
}

/* Honeypot + admin-only + hidden fields — GF's basic.css normally hides
   these; it's disabled, so hide them here or they render as stray inputs. */
.gform_wrapper .gform_validation_container,
.gform_wrapper .gfield_visibility_hidden,
.gform_wrapper .gfield--type-honeypot,
.gform_wrapper [class*="honeypot"],
.gform_wrapper .gform_required_legend {
  display: none !important;
  position: absolute !important;
  left: -9999px !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden !important;
}

/* Mobile — stack every field full width, full-width button */
@media (max-width: 600px) {
  .gform_wrapper .gfield {
    width: 100% !important;
  }
  .gform_wrapper .gform_button,
  .gform_wrapper input[type="submit"],
  .gform_wrapper button[type="submit"] {
    width: 100% !important;
    justify-content: center;
  }
}