/* Shared Gravity Forms styling.
   Loaded on any page that renders a form: inc/enqueue.php hooks gform_enqueue_scripts
   (fires during GF's head scan for [gravityform] shortcodes and blocks), and the landing
   template enqueues it directly because it renders its form from PHP.

   Everything is scoped under .gr-form-card so Gravity Forms' Orbital theme is beaten by
   specificity alone: no !important, no border-radius (theme rules). Tokens from global.css.
   ═══════════════════════════════════════════════ */

.gr-form-card {
  background: var(--bg3);
  border: 1px solid var(--border);
}
.gr-form-card__header {
  background: var(--brand-ink);
  padding: 16px 24px;
  text-align: center;
}
.gr-form-card__header span {
  color: var(--bg);
  font-family: var(--serif);
  font-weight: 800;
  font-size: 1rem;
}
.gr-form-card__body { padding: 24px; }
.gr-form-card__note {
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.55;
}
.gr-form-card__note a { color: var(--brand-ink); }

/* Orbital theme tokens — the GF theme framework reads these custom properties for the
   parts of the form we do not restyle explicitly below. */
.gr-form-card .gform_wrapper.gform-theme {
  --gf-color-primary: var(--brand-ink);
  --gf-color-primary-contrast: var(--bg);
  --gf-color-primary-darker: var(--brand-green-deep);
  --gf-color-primary-lighter: var(--brand-green-deep);
  --gf-color-in-ctrl-primary: var(--brand-ink);
  --gf-ctrl-radius: 0;
  --gf-ctrl-btn-radius: 0;
  --gf-ctrl-border-color: var(--border);
  --gf-ctrl-bg-color: var(--bg2);
  --gf-ctrl-color: var(--white);
  --gf-ctrl-font-family: var(--body);
  --gf-label-color-primary: var(--white);
  --gf-label-color-secondary: var(--muted);
  --gf-form-gap-y: 24px;
  --gf-field-gap-y: 22px;
  --gf-field-gap-x: 20px;
  --gf-label-req-color: var(--danger);
  --gf-color-danger: var(--danger);
  color: var(--white);
  font-family: var(--body);
}

/* The page supplies the heading; never show GF's own title/description. */
.gr-form-card .gform_wrapper .gform_heading { display: none; }

/* ── Labels ── */
.gr-form-card .gform_wrapper.gform-theme .gfield .gfield_label,
.gr-form-card .gform_wrapper.gform-theme .gsection .gsection_title {
  color: var(--white);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1.35;
  margin-bottom: 10px;
}
.gr-form-card .gform_wrapper.gform-theme .gsection {
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}
.gr-form-card .gform_wrapper.gform-theme .gfield .gfield_description,
.gr-form-card .gform_wrapper.gform-theme .gsection .gsection_description {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

/* ── Text-type controls ── */
.gr-form-card .gform_wrapper.gform-theme .gfield input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]),
.gr-form-card .gform_wrapper.gform-theme .gfield select,
.gr-form-card .gform_wrapper.gform-theme .gfield textarea {
  width: 100%;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  color: var(--white);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.4;
  padding: 12px 14px;
  min-height: 0;
}
.gr-form-card .gform_wrapper.gform-theme .gfield input:not([type="radio"]):not([type="checkbox"]):focus,
.gr-form-card .gform_wrapper.gform-theme .gfield select:focus,
.gr-form-card .gform_wrapper.gform-theme .gfield textarea:focus {
  border-color: var(--brand-ink);
  box-shadow: none;
  outline: 2px solid var(--brand-ink);
  outline-offset: 1px;
}

/* ── Radio / checkbox choices rendered as cards ──
   The label's ::after covers the whole card so any click anywhere on it hits the input. */
.gr-form-card .gform_wrapper.gform-theme .gfield .gfield_radio,
.gr-form-card .gform_wrapper.gform-theme .gfield .gfield_checkbox {
  display: grid;
  gap: 8px;
}
.gr-form-card .gform_wrapper.gform-theme .gfield .gfield_radio .gchoice,
.gr-form-card .gform_wrapper.gform-theme .gfield .gfield_checkbox .gchoice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 12px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  -webkit-user-select: none;
  user-select: none;
}
.gr-form-card .gform_wrapper.gform-theme .gfield .gfield_radio .gchoice label,
.gr-form-card .gform_wrapper.gform-theme .gfield .gfield_checkbox .gchoice label {
  position: static;
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  color: var(--white);
  font-family: var(--body);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
}
.gr-form-card .gform_wrapper.gform-theme .gfield .gfield_radio .gchoice label::after,
.gr-form-card .gform_wrapper.gform-theme .gfield .gfield_checkbox .gchoice label::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: pointer;
}
.gr-form-card .gform_wrapper.gform-theme .gfield .gfield_radio .gchoice:hover,
.gr-form-card .gform_wrapper.gform-theme .gfield .gfield_checkbox .gchoice:hover {
  border-color: var(--border-hi);
  background: var(--glow);
}
.gr-form-card .gform_wrapper.gform-theme .gfield .gfield_radio .gchoice:has(input:checked),
.gr-form-card .gform_wrapper.gform-theme .gfield .gfield_checkbox .gchoice:has(input:checked) {
  border-color: var(--brand-ink);
  background: var(--brand-lime);
}
.gr-form-card .gform_wrapper.gform-theme .gfield .gfield_radio .gchoice:has(input:checked) label,
.gr-form-card .gform_wrapper.gform-theme .gfield .gfield_checkbox .gchoice:has(input:checked) label {
  color: var(--on-lime);
}
.gr-form-card .gform_wrapper.gform-theme .gfield .gfield_radio .gchoice:has(input:focus-visible),
.gr-form-card .gform_wrapper.gform-theme .gfield .gfield_checkbox .gchoice:has(input:focus-visible) {
  outline: 2px solid var(--brand-ink);
  outline-offset: 2px;
}
/* Native controls (Orbital replaces them with its own drawing; the native ones are fine). */
.gr-form-card .gform_wrapper.gform-theme .gfield .gfield_radio .gchoice input[type="radio"],
.gr-form-card .gform_wrapper.gform-theme .gfield .gfield_checkbox .gchoice input[type="checkbox"],
.gr-form-card .gform_wrapper.gform-theme .gfield .ginput_container_consent input[type="checkbox"] {
  -webkit-appearance: auto;
  appearance: auto;
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  background: none;
  border: 0;
  box-shadow: none;
  accent-color: var(--brand-ink);
}

/* ── Consent ── */
.gr-form-card .gform_wrapper.gform-theme .gfield .ginput_container_consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.gr-form-card .gform_wrapper.gform-theme .gfield .ginput_container_consent input[type="checkbox"] { margin-top: 2px; }
.gr-form-card .gform_wrapper.gform-theme .gfield .gfield_consent_label {
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 600;
}
.gr-form-card .gform_wrapper.gform-theme .gfield .gfield_consent_description {
  margin-top: 10px;
  padding: 0;
  max-height: none;
  overflow: visible;
  border: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.55;
}

/* ── Buttons ──
   Colours, padding and type are Gravity Forms' own: it prints them from an ID-scoped
   variable block (#gform_wrapper_N[data-form-index].gform-theme) that outranks any selector
   here, so the brand values are handed to it through the gform_default_styles filter in
   inc/enqueue.php (ink background, lime text, zero radius). Only the footer layout lives here. */
.gr-form-card .gform_wrapper.gform-theme .gform_footer,
.gr-form-card .gform_wrapper.gform-theme .gform_page_footer {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
  padding: 0;
  border: 0;
}
.gr-form-card .gform_wrapper.gform-theme .gform_footer .gform_button,
.gr-form-card .gform_wrapper.gform-theme .gform_page_footer .gform_button,
.gr-form-card .gform_wrapper.gform-theme .gform_page_footer .gform_next_button {
  flex: 1 1 220px;
  margin: 0;
}
.gr-form-card .gform_wrapper.gform-theme .gform_page_footer .gform_previous_button {
  flex: 0 0 auto;
  order: -1;
  margin: 0;
}
.gr-form-card .gform_wrapper.gform-theme .gform_footer .gform_button:focus-visible,
.gr-form-card .gform_wrapper.gform-theme .gform_page_footer .gform_button:focus-visible,
.gr-form-card .gform_wrapper.gform-theme .gform_page_footer .gform_next_button:focus-visible,
.gr-form-card .gform_wrapper.gform-theme .gform_page_footer .gform_previous_button:focus-visible {
  outline: 2px solid var(--brand-ink);
  outline-offset: 2px;
}
.gr-form-card .gform_wrapper.gform-theme .gform_ajax_spinner {
  width: 20px;
  height: 20px;
  align-self: center;
}

/* ── Progress bar ── */
.gr-form-card .gform_wrapper.gform-theme .gf_progressbar_wrapper { margin-bottom: 20px; }
.gr-form-card .gform_wrapper.gform-theme .gf_progressbar_title {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.gr-form-card .gform_wrapper.gform-theme .gf_progressbar {
  height: 6px;
  padding: 0;
  overflow: hidden;
  background: rgba(var(--ink-rgb),0.1);
  border-radius: 0;
  box-shadow: none;
}
.gr-form-card .gform_wrapper.gform-theme .gf_progressbar .gf_progressbar_percentage {
  height: 100%;
  min-width: 0;
  background: var(--brand-ink);
  border-radius: 0;
  transition: width 0.3s ease;
}
/* The bar is 6px tall; keep the percentage text for screen readers only. */
.gr-form-card .gform_wrapper.gform-theme .gf_progressbar .gf_progressbar_percentage span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── Validation ── */
.gr-form-card .gform_wrapper.gform-theme .gform_validation_errors {
  margin: 0 0 20px;
  padding: 12px 16px;
  background: var(--bg2);
  border: 1px solid var(--danger);
  border-radius: 0;
  box-shadow: none;
  color: var(--danger);
}
.gr-form-card .gform_wrapper.gform-theme .gform_validation_errors h2 {
  margin: 0;
  color: var(--danger);
  font-family: var(--body);
  font-size: 0.95rem;
  font-weight: 600;
}
.gr-form-card .gform_wrapper.gform-theme .gfield.gfield_error {
  padding: 0;
  background: transparent;
  border: 0;
}
.gr-form-card .gform_wrapper.gform-theme .gfield.gfield_error input:not([type="radio"]):not([type="checkbox"]),
.gr-form-card .gform_wrapper.gform-theme .gfield.gfield_error select {
  border-color: var(--danger);
}
.gr-form-card .gform_wrapper.gform-theme .gfield .validation_message {
  margin-top: 8px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--danger);
  font-size: 0.85rem;
}

/* ── Confirmation ── */
.gr-form-card .gform_confirmation_wrapper .gform_confirmation_message {
  color: var(--white);
  line-height: 1.6;
}
.gr-form-card .gform_confirmation_wrapper .gform_confirmation_message h2,
.gr-form-card .gform_confirmation_wrapper .gform_confirmation_message h3 {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--brand-ink);
}
.gr-form-card .gform_confirmation_wrapper .gform_confirmation_message p { margin: 0 0 12px; }
.gr-form-card .gform_confirmation_wrapper .gform_confirmation_message ul { margin: 0 0 12px 20px; }

@media (max-width: 600px) {
  .gr-form-card__body { padding: 16px; }
  .gr-form-card .gform_wrapper.gform-theme .gfield .gfield_label { font-size: 1rem; }
}

/* /quote/ (4.12.3): the form on the left, what to expect alongside. */
.gr-quote-grid { display: grid; gap: 28px; margin-top: 8px; }
@media (min-width: 1000px) { .gr-quote-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; } }
.gr-rail { display: grid; gap: 18px; border-top: 2px solid var(--brand-ink); padding-top: 18px; }
@media (min-width: 1000px) { .gr-rail { position: sticky; top: 96px; } }
.content .gr-rail__t, .gr-rail__t { font-family: var(--serif); font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; color: var(--white); margin: 0 0 4px; }
.content .gr-rail__d, .gr-rail__d { font-size: 0.9rem; color: var(--muted); margin: 0; }
.gr-rail__d a { color: var(--accent); }