/* ===========================================================================
   Gravity Forms -> JP2BA design
   Gravity's own four stylesheets are disabled in code (functions.php,
   gform_disable_css). This maps its markup onto the field styles that came
   from the approved design — values are taken from base.css, not invented.
   =========================================================================== */

.gform_wrapper form { margin: 0; }

/* The field stack — mirrors .grid-stack */
.gform_wrapper .gform_fields {
  display: grid;
  gap: var(--space-4);
}

/* Field wrapper — mirrors .form-field */
.gform_wrapper .gfield {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.gform_wrapper fieldset.gfield { border: 0; margin: 0; padding: 0; }

/* The design pairs Email+Phone and Age+Experience on one row. Fields carrying
   the jp-half CSS class sit two-up, matching .hero-9 / .contact-4. */
.gform_wrapper .gform_fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gform_wrapper .gfield { grid-column: 1 / -1; }
.gform_wrapper .gfield.jp-half { grid-column: span 1; }

/* Label — mirrors .field-label */
.gform_wrapper .gfield_label,
.gform_wrapper legend.gfield_label {
  font: var(--type-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
  margin: 0;
  padding: 0;
  float: none;
  width: auto;
}
.gform_wrapper .gform-field-label__text { font: inherit; }

/* The design marks required fields with a copper asterisk, not the words
   "(Required)". The words are clipped rather than removed so screen readers
   still announce them. */
.gform_wrapper .gfield_required_text {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.gform_wrapper .gfield_required::after {
  content: " *";
  color: var(--text-accent);
}

/* Sub-labels (the phone field's "Phone Number") are not in the design. */
.gform_wrapper .gform-field-label--type-sub {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Inputs — mirrors .field-input / .field-select / .contact-6 */
.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 input[type="url"],
.gform_wrapper .ginput_container input[type="number"],
.gform_wrapper .ginput_container select,
.gform_wrapper .ginput_container textarea {
  width: 100%;
  display: block;
  font: var(--type-body-sm);
  color: var(--text-heading);
  background: var(--surface-inset);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  outline: none;
  transition: var(--transition-interactive);
}
.gform_wrapper .ginput_container input:focus,
.gform_wrapper .ginput_container select:focus,
.gform_wrapper .ginput_container textarea:focus {
  border-color: var(--border-accent);
}
/* Gravity emits rows="10" whatever the field's size setting, and leaves the
   height to its own stylesheet — which is disabled. The design's message box is
   four rows, so that height is restated here from the same tokens: four lines
   of body-sm leading, plus the 12px padding either side and the 1px borders. */
.gform_wrapper .ginput_container textarea {
  resize: vertical;
  height: calc(var(--leading-body) * var(--text-sm) * 4 + 26px);
}

/* Select — the copper chevron drawn with two gradients, as in .field-select */
.gform_wrapper .ginput_container select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--jp2ba-copper) 50%),
    linear-gradient(135deg, var(--jp2ba-copper) 50%, transparent 50%);
  background-position: calc(100% - 18px) 21px, calc(100% - 12px) 21px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* Submit — mirrors .btn .btn-primary .btn-md .btn-block */
/* The design's form is one stack with a 16px rhythm, and the submit button is
   just another item in it. Gravity puts the button in its own footer outside
   the field grid, so the gap has to be restated here. */
.gform_wrapper .gform_footer { margin: var(--space-4) 0 0; padding: 0; }
.gform_wrapper .gform_button {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font: var(--type-button);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: 14px 26px;
  border: var(--border-width-thick) solid var(--action-primary);
  border-radius: var(--radius-sm);
  background: var(--action-primary);
  color: var(--text-on-accent);
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition-interactive);
}
.gform_wrapper .gform_button:hover {
  background: var(--action-primary-hover);
  border-color: var(--action-primary-hover);
}
.gform_wrapper .gform_button:active { transform: translateY(1px); }

/* Validation. The brand has no red in its palette; --status-danger is the
   burnt tone that belongs to it. */
.gform_wrapper .gfield_error .gfield_label { color: var(--text-accent); }
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea { border-color: var(--status-danger); }
.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
  font: var(--type-body-sm);
  font-size: var(--text-2xs);
  color: var(--status-danger);
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
}
.gform_wrapper .gform_validation_errors {
  font: var(--type-body-sm);
  color: var(--text-body);
  background: var(--surface-inset);
  border: 1px solid var(--status-danger);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  margin: 0 0 var(--space-4);
  box-shadow: none;
}
.gform_wrapper .gform_validation_errors h2 {
  font: var(--type-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-heading);
  margin: 0 0 var(--space-2);
}

/* This is Gravity's honeypot. It must stay hidden. */
.gform_wrapper .gform_validation_container { display: none !important; }

/* Confirmation — matches the bordered panel the approved page showed after a
   successful submit. */
.gform_confirmation_message {
  padding: var(--space-6);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-sm);
  font: var(--type-body-sm);
  color: var(--text-body);
}

/* Gravity's AJAX spinner is a light GIF on a dark card. */
.gform_wrapper .gform_ajax_spinner { filter: invert(1) hue-rotate(180deg); }

@media (max-width: 640px) {
  .gform_wrapper .gfield.jp-half { grid-column: 1 / -1; }
}