/**
 * Gravity Forms restyle for the homepage intake form.
 * Re-creates the original floating-label design (see .intake-form / .form-field
 * in style.css) on GF's markup. Scoped to .intake-form-wrap.is-gform so it never
 * touches GF forms elsewhere. !important is used because GF's "orbital" theme
 * scopes its defaults to the #gform_wrapper_<id> ID selector.
 */

/* --- Layout: form sits in the olive pane, 500px max, 2-col grid --- */
.intake-form-wrap.is-gform .gform_wrapper {
  width: 100%;
  max-width: 500px;
}

/* Contact-page "form only" layout: let the form fill the wider boxed pane
   (mirrors .intake-form-wrap-boxed .intake-form { max-width: none } for the
   static fallback). */
.intake-form-wrap-boxed.is-gform .gform_wrapper {
  max-width: none;
}

.intake-form-wrap.is-gform form,
.intake-form-wrap.is-gform .gform-body,
.intake-form-wrap.is-gform .gform_body {
  margin: 0 !important;
  padding: 0 !important;
}

.intake-form-wrap.is-gform .gform_fields {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-auto-flow: row;
  column-gap: 24px !important;
  row-gap: 20px !important;
}

/* Each field is one cell (override orbital's 12-col span). */
.intake-form-wrap.is-gform .gform_fields > .gfield {
  grid-column: span 1 !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

/* --- Floating labels --- */
/* Anchored to the input's centre (~26px from the field top), NOT top:50% of
   .gfield — the wrapper grows when a validation message is inserted, which would
   drag a 50% label downward. The input sits at the wrapper top, so a fixed
   offset keeps the label centred on it in both the normal and error states. */
.intake-form-wrap.is-gform .gfield_label {
  position: absolute;
  top: 26px;
  left: 16px;
  transform: translateY(-50%);
  margin: 0 !important;
  padding: 0 4px !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--white) !important;
  background: transparent;
  pointer-events: none;
  transition: all 0.2s ease;
  z-index: 2;
}

/* Hide the "(Required)" asterisk/text — the original design has none. */
.intake-form-wrap.is-gform .gfield_required {
  display: none !important;
}

/* Float the label up when the field is focused or filled. */
.intake-form-wrap.is-gform .gfield:focus-within .gfield_label,
.intake-form-wrap.is-gform .gfield:has(.ginput_container input:not(:placeholder-shown)) .gfield_label {
  top: 0;
  font-size: 11px !important;
  background: var(--color-desert-palms);
}

/* The Community dropdown has no floating label (matches original) — keep it
   accessible but visually hidden; the placeholder option is the visible cue. */
.intake-form-wrap.is-gform .gfield--type-select .gfield_label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- Inputs & select --- */
.intake-form-wrap.is-gform .ginput_container {
  margin: 0 !important;
}

.intake-form-wrap.is-gform .gfield input,
.intake-form-wrap.is-gform .gfield select {
  width: 100% !important;
  height: auto !important;
  box-sizing: border-box !important;
  /* background-color only — must NOT reset background-image (the select arrow). */
  background-color: transparent !important;
  border: 1px solid var(--white) !important;
  border-radius: 0 !important;
  padding: 16px !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  line-height: normal !important;
  color: var(--white) !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.2s;
}

.intake-form-wrap.is-gform .gfield input:focus,
.intake-form-wrap.is-gform .gfield select:focus {
  border-color: var(--white) !important;
}

.intake-form-wrap.is-gform .gfield input::placeholder {
  color: transparent !important;
}

/* Custom dropdown arrow (white triangle), matching .form-field select. */
.intake-form-wrap.is-gform .gfield select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23fff' d='M5 6L0 0h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  padding-right: 40px !important;
  cursor: pointer;
}

.intake-form-wrap.is-gform .gfield select option {
  background: var(--color-desert-palms);
  color: var(--white);
}

/* --- Submit button: full-width green, matching .btn-submit-full --- */
.intake-form-wrap.is-gform .gform_footer,
.intake-form-wrap.is-gform .gform-footer {
  display: block !important;
  margin: 24px 0 0 !important;
  padding: 0 !important;
}

.intake-form-wrap.is-gform .gform_footer input[type="submit"],
.intake-form-wrap.is-gform .gform_button {
  width: 100% !important;
  background: var(--color-submit-btn) !important;
  color: var(--white) !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0;
  padding: 16px 32px !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer;
  transition: background 0.2s;
}

.intake-form-wrap.is-gform .gform_footer input[type="submit"]:hover,
.intake-form-wrap.is-gform .gform_button:hover {
  background: var(--color-submit-btn-hover) !important;
}

/* --- Validation / error states on the olive background --- */
.intake-form-wrap.is-gform .gfield_error input,
.intake-form-wrap.is-gform .gfield_error select {
  border-color: var(--color-error) !important;
}

.intake-form-wrap.is-gform .gfield_validation_message,
.intake-form-wrap.is-gform .validation_message,
.intake-form-wrap.is-gform .gform_validation_errors {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 4px 0 0 !important;
  margin: 0 !important;
  color: var(--white) !important;
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 600;
}

.intake-form-wrap.is-gform .gform_validation_errors > h2 {
  color: var(--white) !important;
  font-size: 12px !important;
}

/* --- AJAX confirmation message --- */
.intake-form-wrap.is-gform .gform_confirmation_message {
  color: var(--white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
}

/* Single column on small screens, mirroring .form-grid behaviour. */
@media (max-width: 768px) {
  .intake-form-wrap.is-gform .gform_fields {
    grid-template-columns: 1fr !important;
  }
}