/* ──────────────────────────────────────────────────────────────
   comms.church — Gravity Forms brand skin
   Applies to EVERY form on the site (not just intake).

   Requires the form to use modern markup: form meta `markupVersion: 2`.
   A form left on legacy markup renders `gform-theme--no-framework`,
   loads no GF stylesheets, and none of this applies.

   Brand tokens come from :root in header.php (--blue, --near-black, …);
   fallbacks are inlined so this file degrades safely on its own.
   ────────────────────────────────────────────────────────────── */

body .gform_wrapper.gform-theme {
  /* GF theme-framework variables — the supported way to re-skin Orbital */
  --gf-color-primary:                     var(--blue, #0066FF);
  --gf-color-primary-contrast:            var(--white, #ffffff);
  --gf-color-primary-darker:              var(--blue-dark, #0052cc);
  --gf-color-primary-lighter:             var(--blue-tint-2, #e6efff);

  --gf-ctrl-radius:                       8px;
  --gf-ctrl-border-color:                 #d7dde7;
  --gf-ctrl-border-color-hover:           #b6c2d4;
  --gf-ctrl-border-color-focus:           var(--blue, #0066FF);
  --gf-ctrl-size:                         48px;          /* comfortable touch target */
  --gf-ctrl-label-color-primary:          var(--near-black, #0a0a0a);
  --gf-ctrl-desc-color:                   var(--muted, #777777);

  /* Buttons match the site's .btn exactly */
  --gf-ctrl-btn-radius:                   6px;
  --gf-ctrl-btn-font-size:                15px;
  --gf-ctrl-btn-font-weight:              700;
  --gf-ctrl-btn-padding-x:                28px;
  --gf-ctrl-btn-padding-y:                14px;
  --gf-ctrl-btn-bg-color-primary:         var(--blue, #0066FF);
  --gf-ctrl-btn-bg-color-hover-primary:   var(--blue-dark, #0052cc);
  --gf-ctrl-btn-border-color-primary:     var(--blue, #0066FF);
}

/* ── Type: headings are Plus Jakarta, everything else DM Sans ── */
body .gform_wrapper.gform-theme .gsection_title,
body .gform_wrapper.gform-theme .gform_title,
body .gform_wrapper.gform-theme legend {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--near-black, #0a0a0a);
}
body .gform_wrapper.gform-theme,
body .gform_wrapper.gform-theme input,
body .gform_wrapper.gform-theme select,
body .gform_wrapper.gform-theme textarea {
  font-family: 'DM Sans', sans-serif;
}
body .gform_wrapper.gform-theme .gfield_label {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  color: var(--near-black, #0a0a0a);
  margin-bottom: 8px;
}
/* "(Required)" — the brand palette has no red; keep it quiet */
body .gform_wrapper.gform-theme .gfield_required,
body .gform_wrapper.gform-theme .gfield_required .gfield_required_text {
  color: var(--muted, #777777);
  font-weight: 400;
  font-size: 13px;
}
body .gform_wrapper.gform-theme .gfield_description {
  color: var(--muted, #777777);
  font-size: 14px;
  line-height: 1.5;
}

/* ── Controls: soft border, generous padding, brand focus ring ── */
body .gform_wrapper.gform-theme input[type=text],
body .gform_wrapper.gform-theme input[type=email],
body .gform_wrapper.gform-theme input[type=tel],
body .gform_wrapper.gform-theme input[type=url],
body .gform_wrapper.gform-theme input[type=number],
body .gform_wrapper.gform-theme select,
body .gform_wrapper.gform-theme textarea {
  border: 1px solid #d7dde7;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 16px;                /* 16px avoids iOS zoom-on-focus */
  color: var(--near-black, #0a0a0a);
  background: var(--white, #fff);
  transition: border-color .15s ease, box-shadow .15s ease;
}
body .gform_wrapper.gform-theme textarea { line-height: 1.6; padding: 14px; }

body .gform_wrapper.gform-theme input:focus,
body .gform_wrapper.gform-theme select:focus,
body .gform_wrapper.gform-theme textarea:focus {
  outline: none;
  border-color: var(--blue, #0066FF);
  box-shadow: 0 0 0 3px var(--blue-tint-2, #e6efff);
}
body .gform_wrapper.gform-theme ::placeholder { color: #9aa4b2; }

/* ── Buttons: identical to the site's .btn ── */
body .gform_wrapper.gform-theme .gform_button,
body .gform_wrapper.gform-theme .gform_next_button,
body .gform_wrapper.gform-theme .gform_previous_button,
body .gform_wrapper.gform-theme .gform_save_link {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  padding: 14px 28px;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s;
}
body .gform_wrapper.gform-theme .gform_button,
body .gform_wrapper.gform-theme .gform_next_button {
  background: var(--blue, #0066FF);
  color: var(--white, #fff);
  border-color: var(--blue, #0066FF);
}
body .gform_wrapper.gform-theme .gform_button:hover,
body .gform_wrapper.gform-theme .gform_next_button:hover {
  background: var(--blue-dark, #0052cc);
  border-color: var(--blue-dark, #0052cc);
}
/* Secondary actions mirror .btn-outline */
body .gform_wrapper.gform-theme .gform_previous_button,
body .gform_wrapper.gform-theme .gform_save_link {
  background: transparent;
  color: var(--near-black, #0a0a0a);
  border-color: var(--near-black, #0a0a0a);
  text-decoration: none;
}
body .gform_wrapper.gform-theme .gform_previous_button:hover,
body .gform_wrapper.gform-theme .gform_save_link:hover {
  background: var(--near-black, #0a0a0a);
  color: var(--white, #fff);
}

/* ── Multi-step progress: active = blue, done = near-black, rest = muted ── */
body .gform_wrapper.gform-theme .gf_progressbar_percentage,
body .gform_wrapper.gform-theme .gf_progressbar_percentage span { background: var(--blue, #0066FF); }
body .gform_wrapper.gform-theme .gf_step_active .gf_step_number,
body .gform_wrapper.gform-theme .gf_step_active .gf_step_label { color: var(--blue, #0066FF); }
body .gform_wrapper.gform-theme .gf_step_number { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; }

/* ── Choices: brand-blue selected state ── */
body .gform_wrapper.gform-theme input[type=radio],
body .gform_wrapper.gform-theme input[type=checkbox] { accent-color: var(--blue, #0066FF); width: 18px; height: 18px; }
body .gform_wrapper.gform-theme .gchoice { margin-bottom: 10px; }
body .gform_wrapper.gform-theme .gform-field-label--type-inline { font-weight: 400; color: var(--body, #444); }

/* ── Validation: readable, not shouty ── */
body .gform_wrapper.gform-theme .gfield_error input,
body .gform_wrapper.gform-theme .gfield_error textarea,
body .gform_wrapper.gform-theme .gfield_error select { border-color: #d64545; }
body .gform_wrapper.gform-theme .validation_message {
  color: #b32d2e; font-size: 14px; background: none; border: none; padding: 6px 0 0;
}
body .gform_wrapper.gform-theme .gform_validation_errors {
  border-radius: 10px; border: 1px solid #f3c2c2; background: #fdf3f3; box-shadow: none;
}

/* ── Rhythm ── */
body .gform_wrapper.gform-theme .gform_fields { row-gap: 26px; }
body .gform_wrapper.gform-theme .gform_footer { margin-top: 32px; gap: 12px; display: flex; flex-wrap: wrap; align-items: center; }
body .gform_wrapper.gform-theme .gsection { border-bottom: 1px solid #e8ecf2; padding-bottom: 10px; margin-top: 8px; }

/* ── Confirmation ── */
body .gform_confirmation_wrapper {
  background: var(--blue-tint, #f0f5ff);
  border-radius: 18px;
  padding: 32px;
  font-family: 'DM Sans', sans-serif;
  color: var(--near-black, #0a0a0a);
}

/* ── Cascade overrides ──────────────────────────────────────────
   Gravity Forms' framework sets button typography and the focus ring
   deep in its own cascade, past what specificity alone can reach.
   These few properties need !important to land. Deliberately minimal —
   everything else above wins normally via GF's own custom properties. */
body .gform_wrapper.gform-theme .gform_button,
body .gform_wrapper.gform-theme .gform_next_button,
body .gform_wrapper.gform-theme .gform_previous_button,
body .gform_wrapper.gform-theme .gform_save_link {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
}
body .gform_wrapper.gform-theme input:focus,
body .gform_wrapper.gform-theme select:focus,
body .gform_wrapper.gform-theme textarea:focus {
  border-color: var(--blue, #0066FF) !important;
  box-shadow: 0 0 0 3px var(--blue-tint-2, #e6efff) !important;
}