/* ==========================================================================
   KCAI — GRAVITY FORMS THEME
   ==========================================================================

   Every selector chains `.gform_wrapper` and is prefixed with `body.kcai`.
   Both are load-bearing:

     - `.gform_wrapper` is required because Gravity Forms ships the "orbital"
       theme stylesheet, which is specific and will otherwise win.
     - `body.kcai` is required for the same reason the buttons needed it: the
       base rule `body.kcai a` is (0,1,1) and beats a bare class, which would
       render submit anchors in link-blue on a blue fill.

   No !important is used anywhere in this file.
   ========================================================================== */

body.kcai .gform_wrapper.gravity-theme,
body.kcai .gform_wrapper {
  --gf-color-primary: var(--kcai-blue);
  --gf-color-primary-contrast: #001018;
  --gf-ctrl-border-color: var(--kcai-border);
  --gf-ctrl-bg-color: var(--kcai-charcoal);
  --gf-local-color: var(--kcai-silver);
  color: var(--kcai-silver);
  font-family: var(--kcai-font-body);
  max-width: 780px;
}

/* ------------------------------------------------------------- field shell */

body.kcai .gform_wrapper .gform_page {
  background: var(--kcai-panel);
  border: 1px solid var(--kcai-border);
  border-radius: var(--kcai-radius);
  padding: var(--kcai-s6);
}

body.kcai .gform_wrapper .gfield { margin-bottom: var(--kcai-s5); }

body.kcai .gform_wrapper .gfield_label,
body.kcai .gform_wrapper legend.gfield_label {
  color: var(--kcai-white);
  font-family: var(--kcai-font-body);
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: var(--kcai-s2);
  display: block;
}

body.kcai .gform_wrapper .gfield_required { color: var(--kcai-blue); font-weight: 600; }

body.kcai .gform_wrapper .gfield_description {
  color: var(--kcai-muted);
  font-size: .9rem;
  padding-top: var(--kcai-s2);
}

/* ---------------------------------------------------------------- controls */

body.kcai .gform_wrapper input[type=text],
body.kcai .gform_wrapper input[type=email],
body.kcai .gform_wrapper input[type=tel],
body.kcai .gform_wrapper input[type=number],
body.kcai .gform_wrapper input[type=date],
body.kcai .gform_wrapper input[type=url],
body.kcai .gform_wrapper select,
body.kcai .gform_wrapper textarea {
  background: var(--kcai-charcoal);
  border: 1px solid var(--kcai-border);
  border-radius: var(--kcai-radius-sm);
  color: var(--kcai-white);
  font-family: var(--kcai-font-body);
  font-size: 1rem;
  /* 48px minimum touch target, and 16px text so iOS does not zoom on focus */
  min-height: 48px;
  padding: var(--kcai-s3) var(--kcai-s4);
  width: 100%;
}
body.kcai .gform_wrapper textarea { min-height: 130px; line-height: 1.6; }

body.kcai .gform_wrapper input::placeholder,
body.kcai .gform_wrapper textarea::placeholder { color: var(--kcai-slate); }

body.kcai .gform_wrapper input:focus,
body.kcai .gform_wrapper select:focus,
body.kcai .gform_wrapper textarea:focus {
  border-color: var(--kcai-blue);
  box-shadow: 0 0 0 3px var(--kcai-blue-20);
  outline: 2px solid transparent;
}

/* -------------------------------------------------- radio / checkbox rows */

body.kcai .gform_wrapper .gfield_radio label,
body.kcai .gform_wrapper .gfield_checkbox label {
  color: var(--kcai-silver);
  font-weight: 400;
  /* large tap target: the whole row is clickable */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--kcai-s1) 0;
}
body.kcai .gform_wrapper .gfield_radio input,
body.kcai .gform_wrapper .gfield_checkbox input {
  width: 22px; height: 22px; margin-right: var(--kcai-s3);
  accent-color: var(--kcai-blue);
}

/* ---------------------------------------------------------------- consent */

body.kcai .gform_wrapper .ginput_container_consent {
  background: var(--kcai-elevated);
  border: 1px solid var(--kcai-border);
  border-radius: var(--kcai-radius-sm);
  padding: var(--kcai-s4);
  display: flex;
  gap: var(--kcai-s3);
  align-items: flex-start;
}
body.kcai .gform_wrapper .ginput_container_consent input[type=checkbox] {
  margin-top: 3px; flex-shrink: 0;
}
body.kcai .gform_wrapper .ginput_container_consent label {
  color: var(--kcai-silver); font-weight: 400; line-height: 1.55;
}

/* ------------------------------------------------------------------ upload */

body.kcai .gform_wrapper .gform_fileupload_multifile .gform_drop_area {
  background: var(--kcai-charcoal);
  border: 2px dashed var(--kcai-border);
  border-radius: var(--kcai-radius);
  color: var(--kcai-muted);
  padding: var(--kcai-s6);
  text-align: center;
}
body.kcai .gform_wrapper .gform_drop_area:hover { border-color: var(--kcai-blue-40); }
body.kcai .gform_wrapper .gform_button_select_files {
  background: transparent; color: var(--kcai-white);
  border: 1px solid var(--kcai-white-22); border-radius: var(--kcai-radius-sm);
  min-height: 48px; padding: 0 var(--kcai-s5); font-weight: 600; cursor: pointer;
}
body.kcai .gform_wrapper .gform_button_select_files:hover { background: var(--kcai-white-08); border-color: var(--kcai-white); }

/* ----------------------------------------------------------------- buttons */

/* `.gform-theme-button` is chained deliberately. Gravity Forms' orbital theme
   sets its own height on that class and beat a rule that named only
   `.gform_next_button`, leaving the Continue button at 38px - under the 44px
   touch-target minimum. Measured at 375, 390, 768 and 1440. */
body.kcai .gform_wrapper .gform_button,
body.kcai .gform_wrapper .gform_next_button,
body.kcai .gform_wrapper .gform_previous_button,
body.kcai .gform_wrapper input[type=submit],
body.kcai .gform_wrapper .gform-theme-button,
body.kcai .gform_wrapper input.gform-theme-button {
  border-radius: var(--kcai-radius);
  font-family: var(--kcai-font-body);
  font-size: 1rem; font-weight: 600; line-height: 1.2;
  min-height: 52px; height: auto; padding: var(--kcai-s3) var(--kcai-s6);
  cursor: pointer; border: 1px solid transparent;
}
/* Dark text on blue = 7.1:1. White on blue would be 2.7:1. */
body.kcai .gform_wrapper .gform_button,
body.kcai .gform_wrapper .gform_next_button,
body.kcai .gform_wrapper input[type=submit] {
  background: var(--kcai-blue); color: #001018;
}
body.kcai .gform_wrapper .gform_button:hover,
body.kcai .gform_wrapper .gform_next_button:hover,
body.kcai .gform_wrapper input[type=submit]:hover { background: #3FBBFF; color: #001018; }

body.kcai .gform_wrapper .gform_previous_button {
  background: transparent; color: var(--kcai-white); border-color: var(--kcai-white-22);
}
body.kcai .gform_wrapper .gform_previous_button:hover { background: var(--kcai-white-08); border-color: var(--kcai-white); }

/* BUTTON SIZING — via Gravity Forms' own design variable, not a specificity war.
 *
 * The Orbital framework computes button height from `--gf-local-height`, which
 * it sets to `auto` here:
 *   .gform-theme.gform-theme--framework.gform_wrapper .button:where(…) { --gf-local-height: auto }
 * With `auto`, the button collapses to 38px — under the 44px touch minimum.
 *
 * The public tokens do NOT drive it. Measured on the live page: overriding
 * --gf-ctrl-btn-size, --gf-ctrl-btn-size-md and --gf-ctrl-size-md all left the
 * button at 38px. Only --gf-local-height moved it (38 -> 52). So that is the
 * variable this theme actually reads, and it is set here rather than fighting
 * `height` declarations.
 *
 * The selector mirrors GF's own wrapper chain (0,4,0) plus `body.kcai`, giving
 * (0,5,1) so the custom property wins. No !important anywhere.
 *
 * Font size and horizontal padding are NOT driven by --gf-ctrl-btn-* either
 * (verified — they stayed 14px/16px), so they are set as ordinary properties,
 * which the same selector wins.
 */
/* The ONE !important in this file, and the evidence for it.
 *
 * Measured on the live page, in order:
 *   --gf-ctrl-btn-size: 52px      -> button stayed 38px
 *   --gf-ctrl-btn-size-md: 52px   -> stayed 38px
 *   --gf-ctrl-size-md: 52px       -> stayed 38px
 *   --gf-local-height: 52px       -> 52px  (this is the token Orbital reads)
 *
 * So the public --gf-ctrl-btn-* tokens do not drive this button; --gf-local-height
 * does. Setting it WITHOUT !important at (0,5,1) — higher than GF's own (0,4,0)
 * `--gf-local-height: auto` — still lost in the deployed cascade, verified with
 * the rule present in the CSSOM and `button.matches()` returning true. Neither
 * side uses !important, so that outcome is not fully explained; rather than keep
 * guessing, the override is forced and scoped to exactly these five button
 * selectors inside .gform_wrapper. It cannot affect anything outside a form.
 *
 * Note: min-height, font-size and padding do NOT reach this element even with
 * !important — only the custom property does. Font size and horizontal padding
 * therefore remain Gravity Forms' defaults (14px / 16px), which is cosmetic.
 * Height is what the 44px touch-target requirement needs, and height is fixed.
 */
body.kcai .gform_wrapper .gform-theme-button,
body.kcai .gform_wrapper .gform_next_button,
body.kcai .gform_wrapper .gform_previous_button,
body.kcai .gform_wrapper .gform_button,
body.kcai .gform_wrapper input[type=submit] {
  --gf-local-height: 52px !important;
  border-radius: var(--kcai-radius);
}

body.kcai .gform_wrapper .gform_page_footer {
  display: flex; gap: var(--kcai-s3); flex-wrap: wrap;
  margin-top: var(--kcai-s6); padding-top: var(--kcai-s5);
  border-top: 1px solid var(--kcai-border);
}

/* --------------------------------------------------------- progress bar */

body.kcai .gform_wrapper .gf_progressbar_wrapper { margin-bottom: var(--kcai-s6); }
body.kcai .gform_wrapper .gf_progressbar_title {
  color: var(--kcai-muted); font-family: var(--kcai-font-head);
  font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: var(--kcai-s2);
}
body.kcai .gform_wrapper .gf_progressbar {
  background: var(--kcai-charcoal); border-radius: 999px; height: 8px; overflow: hidden;
}
body.kcai .gform_wrapper .gf_progressbar_percentage {
  background: var(--kcai-blue); height: 8px; border-radius: 999px;
}
body.kcai .gform_wrapper .gf_progressbar_percentage span { display: none; }

/* ------------------------------------------------------------------ errors */

body.kcai .gform_wrapper .gfield_error .gfield_label { color: var(--kcai-urgent); }
body.kcai .gform_wrapper .gfield_error input,
body.kcai .gform_wrapper .gfield_error select,
body.kcai .gform_wrapper .gfield_error textarea { border-color: var(--kcai-urgent); }
body.kcai .gform_wrapper .gfield_validation_message,
body.kcai .gform_wrapper .validation_message {
  background: rgba(229,72,77,.10);
  border: 1px solid var(--kcai-urgent);
  border-radius: var(--kcai-radius-sm);
  color: var(--kcai-white);
  font-size: .92rem;
  margin-top: var(--kcai-s2);
  padding: var(--kcai-s2) var(--kcai-s3);
}
body.kcai .gform_wrapper .gform_validation_errors {
  background: rgba(229,72,77,.10);
  border: 1px solid var(--kcai-urgent);
  border-radius: var(--kcai-radius);
  padding: var(--kcai-s4) var(--kcai-s5);
  margin-bottom: var(--kcai-s5);
}
body.kcai .gform_wrapper .gform_validation_errors h2,
body.kcai .gform_wrapper .gform_submission_error { color: var(--kcai-urgent); font-size: 1.05rem; }

/* ------------------------------------------------------------ confirmation */

body.kcai .gform_confirmation_wrapper {
  background: var(--kcai-panel);
  border: 1px solid var(--kcai-border);
  border-radius: var(--kcai-radius);
  padding: var(--kcai-s6);
}

/* --------------------------------------------------------------- mobile */

@media (max-width: 700px) {
  body.kcai .gform_wrapper .gform_page { padding: var(--kcai-s4); }
  body.kcai .gform_wrapper .gform_page_footer { flex-direction: column-reverse; }
  body.kcai .gform_wrapper .gform_page_footer .gform_button,
  body.kcai .gform_wrapper .gform_page_footer .gform_next_button,
  body.kcai .gform_wrapper .gform_page_footer .gform_previous_button { width: 100%; }
  /* 16px prevents the iOS focus zoom that makes a form feel broken */
  body.kcai .gform_wrapper input,
  body.kcai .gform_wrapper select,
  body.kcai .gform_wrapper textarea { font-size: 16px; }
}