/* Gravity Forms, dressed in the design system.
 *
 * The plugin's own stylesheets are switched off (inc/forms.php), so this file
 * is the whole look of a form. It restates the mockup's .form / .field rules
 * against the plugin's markup: tokens are site.css's.
 */

.gform_wrapper { max-width: 620px; }
.gform_wrapper form { margin: 0; }
.gform_wrapper .gform_heading { display: none; }

.gform_wrapper .gform_fields { display: grid; gap: 22px; }
.gform_wrapper .gfield { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.gform_wrapper .gfield_label { font-size: 16px; font-weight: 600; margin: 0; padding: 0; }
.gform_wrapper .gfield_label .opt { font-weight: 400; color: var(--ink-2); }
/* Required is carried by the field's required attribute and announced by
   screen readers; the design prints no marker beside the label. */
.gform_wrapper .gfield_required {
  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 input[type="text"],
.gform_wrapper .gfield input[type="email"],
.gform_wrapper .gfield input[type="tel"],
.gform_wrapper .gfield input[type="url"],
.gform_wrapper .gfield input[type="number"],
.gform_wrapper .gfield select,
.gform_wrapper .gfield textarea {
  font-family: var(--body); font-size: 18px; color: var(--ink);
  background: var(--sand); border: 1px solid var(--ink-muted); border-radius: 8px;
  padding: 14px 16px; min-height: 52px; width: 100%;
  /* The plugin's fields are inline; as blocks they leave no baseline gap
     under them, which is what keeps the 22px rhythm exact. */
  display: block;
}
.section--sand .gform_wrapper .gfield input,
.section--sand .gform_wrapper .gfield select,
.section--sand .gform_wrapper .gfield textarea { background: var(--ground); }
.gform_wrapper .gfield textarea { min-height: 150px; resize: vertical; }
.gform_wrapper .gfield input:focus-visible,
.gform_wrapper .gfield select:focus-visible,
.gform_wrapper .gfield textarea:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }

.gform_wrapper .gform_footer { margin: 22px 0 0; padding: 0; }

/* The honeypot. display:none, exactly as the plugin's own stylesheet hides it:
   moved off-screen it stayed in the tab order and was read out by screen
   readers under a real-sounding label, and a person who filled it in was
   treated as spam. */
.gform_wrapper .gform_validation_container,
.gform_wrapper .gfield--type-honeypot { display: none !important; }
.gform_wrapper .gform_hidden,
.gform_wrapper .gfield_visibility_hidden { position: absolute !important; left: -9999px; }
.gform_wrapper .gform_ajax_spinner { margin-left: 14px; width: 20px; height: 20px; vertical-align: middle; }
.gform_wrapper .gform-loader { display: inline-block; margin-left: 14px; }

/* Validation. */
.gform_wrapper .gform_validation_errors,
.gform_wrapper .validation_error {
  background: var(--sand); border-radius: 14px; padding: 18px 24px; margin: 0 0 22px;
  font-size: 16px; color: var(--ink-2);
}
.gform_wrapper .gform_validation_errors h2 { font-family: var(--body); font-size: 16px; font-weight: 600; color: var(--action); margin: 0; }
.gform_wrapper .gform_validation_errors ol { margin: 8px 0 0; padding-left: 20px; }
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea { border-color: var(--action); }
.gform_wrapper .validation_message,
.gform_wrapper .gfield_description { font-size: 15px; color: var(--ink-2); }
.gform_wrapper .validation_message { color: var(--action); font-weight: 600; }

/* After sending. */
.gform_confirmation_message {
  max-width: 620px; font-size: 21px; line-height: 1.55; color: var(--ink);
}

@media (max-width: 560px) {
  .gform_wrapper .gform_footer .btn { width: 100%; text-align: center; }
}