/* ============================================================================
   Forms (Contact and Collaborate). Moved out of css/pages/contact.css on
   2026-10-02 so both pages share one set of form styles.

   Selectors target Gravity Forms 2.5+ class names (gform_wrapper, gfield,
   gchoice, ginput_container, gfield_description, gform_page_footer, ...) so this
   file can style the live Gravity Forms forms with little rework. Keep the
   selectors on GF's classes; don't invent new ones for form parts.

   Theme port (2026-11-07): the forms are Gravity Forms 3.2 printed with its 2.5 markup and its own
   CSS switched off (blocks/contact-form/gf.php). The review-only state switcher and email previews
   are not ported; GF shows and hides conditional fields and pages itself (inline display:none), so
   the static build's .is-on / .is-current rules are gone. A few rules below cover markup GF adds
   that the static form did not have (hidden inputs, the honeypot, hidden labels, the scroll anchor).
   ========================================================================= */

/* ============================================================================
   THE FORM (Gravity Forms class names)
   ========================================================================= */
.gform_wrapper { color: var(--ink); }
.gform_fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; }
.gfield { grid-column: 1 / -1; min-width: 0; margin: 0; padding: 0; border: 0; }
.gfield--width-half { grid-column: span 1; }
@media (max-width: 479px) { .gfield--width-half { grid-column: 1 / -1; } }

/* Markup Gravity Forms adds: hidden inputs and the honeypot take no grid cell; a hidden label stays
   for screen readers only. */
.gfield--type-hidden, .gform_validation_container { display: none; }
.hidden_label > .gfield_label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; text-transform: none;
}
.gform_anchor:focus { outline: none; }

.gsection_title {
  font-family: var(--display); font-weight: 300; font-size: var(--size-h4); line-height: 1.3;
  color: var(--headline);
}
.gsection_title:focus { outline: none; }

.gfield_label {
  display: block; padding: 0; margin-bottom: 8px;
  font-size: var(--size-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  line-height: 1.5; color: var(--quiet);
}
.gfield_required, .gfield_optional { text-transform: none; letter-spacing: 0; color: var(--ink-2); }
.gfield_description { margin: -2px 0 10px; font-size: var(--size-caption); line-height: 1.5; color: var(--ink-2); }
.tbd-tag {
  display: inline-block; margin-left: 6px; padding: 1px 8px;
  border: 1px dashed var(--quiet);
  font-size: 11px; letter-spacing: .08em; text-transform: none; color: var(--quiet);
}

/* Text, email, phone, select, textarea: a sheet of Linen with a hairline edge */
.ginput_container input[type="text"],
.ginput_container input[type="email"],
.ginput_container input[type="tel"],
.ginput_container select,
.ginput_container textarea {
  display: block; width: 100%; padding: 12px 14px;
  background: var(--linen); border: 1px solid var(--hairline); border-radius: 0;
  font-size: 16px; line-height: 1.5; color: var(--ink);   /* 16px: no zoom on iPhone */
  transition: border-color var(--dur-micro) var(--ease);
}
.ginput_container textarea { min-height: 8.5em; resize: vertical; }
.ginput_container select {
  appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.ginput_container input:hover, .ginput_container select:hover, .ginput_container textarea:hover { border-color: var(--ink-2); }
.ginput_container input:focus-visible, .ginput_container select:focus-visible, .ginput_container textarea:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus);
}

/* Card choices: Contact's four doors, Collaborate's "What brings you here?" (pure CSS over
   GF's radio markup; .gfield--readiness on Contact, .gfield--cards elsewhere) */
:is(.gfield--readiness, .gfield--cards) .gfield_radio { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 600px) { :is(.gfield--readiness, .gfield--cards) .gfield_radio { grid-template-columns: 1fr 1fr; } }
:is(.gfield--readiness, .gfield--cards) .gchoice { position: relative; }
:is(.gfield--readiness, .gfield--cards) .gchoice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
:is(.gfield--readiness, .gfield--cards) .gchoice label {
  display: flex; align-items: center; min-height: 100%; padding: 18px 20px 18px 48px; position: relative;
  border: 1px solid var(--hairline); background: transparent;
  font-family: var(--display); font-weight: 300; font-size: 19px; line-height: 1.3; color: var(--headline);
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease);
}
:is(.gfield--readiness, .gfield--cards) .gchoice label::before {       /* the radio mark */
  content: ""; position: absolute; left: 18px; top: 50%; width: 16px; height: 16px; margin-top: -8px;
  border: 1px solid var(--ink-2); border-radius: 50%;
}
:is(.gfield--readiness, .gfield--cards) .gchoice input:checked + label {
  background: var(--linen); border-color: var(--ink);
  box-shadow: 0 10px 26px rgba(52, 58, 68, .10);
}
:is(.gfield--readiness, .gfield--cards) .gchoice input:checked + label::before { border-color: var(--ink); background: radial-gradient(circle, var(--ink) 0 4px, transparent 4.5px); }
@media (hover: hover) { :is(.gfield--readiness, .gfield--cards) .gchoice input:hover + label { border-color: var(--ink-2); } }
:is(.gfield--readiness, .gfield--cards) .gchoice input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Budget: a plain list of radios (money asked quietly, last) */
.gfield--budget .gfield_radio { display: grid; gap: 10px; }
.gfield--budget .gchoice { display: flex; align-items: flex-start; gap: 12px; }
.gfield--budget .gchoice input { flex: none; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--ink); }
.gfield--budget .gchoice label { color: var(--ink); cursor: pointer; }

/* A single checkbox (GF Checkbox field with one choice), e.g. a newsletter opt-in */
.gfield--checkbox .gchoice { display: flex; align-items: flex-start; gap: 12px; }
.gfield--checkbox .gchoice input { flex: none; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--ink); }
.gfield--checkbox .gchoice label { color: var(--ink); cursor: pointer; }

/* Step indicator and page footers (GF multi-page) */
.gf_page_steps { display: none; }
.js .gf_page_steps { display: flex; gap: 24px; margin-bottom: 26px; padding-bottom: 14px; border-bottom: 1px solid var(--hairline); }
.gf_step { display: flex; align-items: baseline; gap: 10px; color: var(--quiet); opacity: .6; }
.gf_step_active { opacity: 1; color: var(--ink); }
.gf_step_number { font-family: var(--display); font-weight: 300; font-size: var(--size-h4); line-height: 1; }
.gf_step_label { font-size: var(--size-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; }

.gform_page_footer, .gform_footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--hairline);
}
:is(.gform_page_footer, .gform_footer) .btn { margin-left: auto; }
:is(.gform_page_footer, .gform_footer) [hidden] { display: none; }
.gform_previous_button { font-size: var(--size-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; }

/* Errors (GF: .gform_validation_errors summary, .gfield_error, .validation_message) */
.gform_validation_errors {
  margin-bottom: 26px; padding: 14px 18px;
  border: 1px solid var(--form-error); border-left-width: 4px; background: var(--linen);
}
.gform_validation_errors[hidden] { display: none; }
.gform_validation_errors:focus { outline: none; }
.gform_submission_error { font-size: var(--size-body); font-weight: 400; line-height: 1.5; color: var(--form-error); }
.gfield_error .gfield_label { color: var(--form-error); }
.gfield_error input, .gfield_error select, .gfield_error textarea,
.gfield_error:is(.gfield--readiness, .gfield--cards) .gchoice label { border-color: var(--form-error); }
.validation_message { margin-top: 8px; font-size: var(--size-caption); line-height: 1.5; color: var(--form-error); }

/* Confirmation (replaces the form) */
.gform_confirmation_wrapper[hidden] { display: none; }
.gform_confirmation_message {
  padding: clamp(28px, 4vw, 48px); background: var(--linen); border-top: 1px solid var(--hairline);
}
.gform_confirmation_message:focus { outline: none; }
.gform_confirmation_message p { max-width: 52ch; margin-top: 18px; color: var(--ink); }
.gform_confirmation_message p[hidden] { display: none; }
.gform_confirmation_message strong { font-weight: 700; overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  :is(.gfield--readiness, .gfield--cards) .gchoice label, .ginput_container input, .ginput_container select, .ginput_container textarea { transition: none; }
}

/* After sending, the page returns here: stop short of the fixed navigation. */
.gform_anchor { scroll-margin-top: 140px; }