/*
 * Gravity Forms skin — restyles the Orbital theme output inside the Contact
 * page's .contact-form container to match the approved placeholder form
 * (label/input/button rules mirror .contact-form__* in main.css). Loaded only
 * when Gravity Forms is active; main.css stays verbatim.
 */

.contact-form .gform_wrapper.gravity-theme,
.contact-form .gform_wrapper {
  --gf-color-primary: var(--orange);
  --gf-form-gap-y: clamp(20px, 1.8vw, 28px);
  --gf-form-gap-x: clamp(20px, 1.8vw, 28px);
}

.contact-form .gform_wrapper .gform_fields {
  grid-row-gap: clamp(20px, 1.8vw, 28px);
  grid-column-gap: clamp(20px, 1.8vw, 28px);
}

.contact-form .gform_wrapper .gfield_label {
  margin-bottom: clamp(6px, .5vw, 10px);
  font-size: clamp(13px, .94vw, 16px);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink);
}

.contact-form .gform_wrapper .gfield_required {
  color: var(--orange);
}

/* Each field carries aria-required; the legend line is visual noise the
   approved design doesn't have. */
.contact-form .gform_wrapper .gform_required_legend {
  display: none;
}

.contact-form .gform_wrapper input[type="text"],
.contact-form .gform_wrapper input[type="email"],
.contact-form .gform_wrapper textarea {
  width: 100%;
  padding: clamp(12px, 1vw, 16px) clamp(14px, 1.1vw, 18px);
  font-family: inherit;
  font-size: clamp(15px, 1.04vw, 18px);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 6px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.contact-form .gform_wrapper input[type="text"]:focus,
.contact-form .gform_wrapper input[type="email"]:focus,
.contact-form .gform_wrapper textarea:focus {
  outline: 0;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(215, 78, 9, .15);
}

.contact-form .gform_wrapper input::placeholder,
.contact-form .gform_wrapper textarea::placeholder {
  color: rgba(61, 61, 61, .45);
}

.contact-form .gform_wrapper textarea {
  min-height: 160px;
  resize: vertical;
}

.contact-form .gform_wrapper .gform_footer {
  display: flex;
  justify-content: flex-start;
  margin-top: clamp(4px, .5vw, 10px);
  padding: 0;
}

/* The submit is swapped to a real .btn.btn--solid button (gform_submit_button
   filter in functions.php). Orbital styles buttons inside the wrapper at
   higher specificity, so the design's orange button is restated here at
   matching specificity — values mirror .btn / .btn--solid in main.css. */
.contact-form .gform_wrapper .gform_footer button.btn.btn--solid {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-family: var(--font) !important;
  font-size: clamp(14px, 1.042vw, 20px) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  line-height: 1 !important;
  border: 0 !important;
  border-radius: 10px !important;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
  background: var(--orange) !important;
  color: #fff !important;
  padding: clamp(15px, 1.09vw, 21px) clamp(22px, 1.67vw, 32px) !important;
}
.contact-form .gform_wrapper .gform_footer button.btn.btn--solid:hover {
  background: var(--orange-dark) !important;
}

/* Validation + confirmation notices in brand colors instead of Orbital red/green. */
.contact-form .gform_wrapper .gfield_validation_message,
.contact-form .gform_wrapper .validation_message {
  background: rgba(215, 78, 9, .08);
  border: 1px solid rgba(215, 78, 9, .35);
  color: var(--ink);
  border-radius: 6px;
}

.gform_confirmation_message {
  font-size: clamp(15px, 1.04vw, 18px);
  color: var(--ink);
}

@media (max-width: 640px) {
  .contact-form .gform_wrapper .gform_fields {
    grid-row-gap: 20px;
  }
}