/* ==========================================================================
   Platform KSG — Gravity Forms styling
   --------------------------------------------------------------------------
   Loaded only when Gravity Forms is active. All values come from theme.json
   tokens; child themes re-skin forms by overriding the palette.
   Covers every field type and state so any form a site editor builds
   inherits design consistency without manual styling.
   ========================================================================== */

/* 1. Form container ----------------------------------------------------- */
.gform_wrapper {
  font-family: var(--font-sans);
  font-size: var(--wp--preset--font-size--medium);
  color: var(--text-body);
}
.gform_wrapper .gform_heading { margin-bottom: var(--wp--preset--spacing--40, 1.5rem); }
.gform_wrapper .gform_title {
  font-family: var(--font-display);
  font-size: var(--wp--preset--font-size--x-large);
  color: var(--text-heading);
  margin-bottom: 0.5rem;
  font-weight: 500;
}
.gform_wrapper .gform_description {
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* 2. Field list + rows -------------------------------------------------- */
.gform_wrapper .gform_fields {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(12, 1fr);
}
.gform_wrapper .gfield { grid-column: 1 / -1; }
.gform_wrapper .gfield.gfield--width-half    { grid-column: span 6; }
.gform_wrapper .gfield.gfield--width-third   { grid-column: span 4; }
.gform_wrapper .gfield.gfield--width-quarter { grid-column: span 3; }
.gform_wrapper .gfield.gfield--width-two-thirds { grid-column: span 8; }
.gform_wrapper .gfield.gfield--width-three-quarters { grid-column: span 9; }
@media (max-width: 560px) {
  .gform_wrapper .gfield.gfield--width-half,
  .gform_wrapper .gfield.gfield--width-third,
  .gform_wrapper .gfield.gfield--width-quarter,
  .gform_wrapper .gfield.gfield--width-two-thirds,
  .gform_wrapper .gfield.gfield--width-three-quarters { grid-column: 1 / -1; }
}

/* 3. Labels ------------------------------------------------------------- */
.gform_wrapper .gfield_label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}
.gform_wrapper .gfield_required {
  color: var(--status-error);
  font-weight: 500;
  margin-inline-start: 0.15rem;
}
.gform_wrapper .gfield_description {
  margin-top: 0.4rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.gform_wrapper .ginput_container_sub_label label,
.gform_wrapper .gform-field-label--type-sub {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 0.35rem;
}

/* 4. Text / email / tel / url / password / number / textarea / select --- */
.gform_wrapper :is(
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  input[type="file"],
  textarea,
  select
) {
  background: var(--bg-page);
  border: var(--stroke-hair) solid var(--border-subtle);
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  font: inherit;
  color: var(--text-body);
  width: 100%;
  transition: border-color var(--motion-quick), box-shadow var(--motion-quick);
}
.gform_wrapper textarea { min-height: 140px; resize: vertical; line-height: 1.5; }

/* Focus indicator.
   Gravity Forms drives its own outline through custom properties and applies
   them as longhands from selectors more specific than anything sensible we
   could write here, so we set its variables rather than fight them. Its
   default focus colour is rgba(primary, 0.65) - a translucent tint - and the
   `outline: none` plus 18% box-shadow this file used to add on top measured
   1.00:1 on the blue newsletter band, the same colour as the band it sat on.
   --ksg-ring-color is the theme's context-aware focus colour: dark blue on
   light, bright green on the blue band and the footer. WCAG 1.4.11 asks 3:1;
   this measures 5.07:1 on the band, 9.93:1 on cream, 11.20:1 on white. */
/* Gravity Forms' theme framework is driven by custom properties, and its own
   rules are far more specific than anything sensible this file can write - its
   input rule is `.gform-theme--framework input[type].gform-text-input-reset`,
   which is (0,3,1). Setting its tokens is the supported way in, and it is what
   actually holds. Everything below this block is the theme's own layer on top;
   where the two disagree, the tokens win, which is the point.

   `body` prefix plus !important on each token. That is deliberate: GF declares
   the same tokens from several of its own theme layers, and matching them on
   specificity turned into a guessing game. On custom properties feeding a
   third-party component this is the contained tool, not a smell - it settles
   the question once instead of per selector. */
body .gform_wrapper {
  /* Brand. GF's default primary is #204ce5, its own blue, which is what the
     submit button was rendering in. White on KSG primary measures 4.91:1. */
  --gf-color-primary:          var(--wp--preset--color--primary) !important;
  --gf-color-primary-rgb:      78, 125, 31 !important;
  --gf-color-primary-darker:   var(--brand-primary-dark) !important;
  --gf-color-primary-lighter:  var(--brand-primary-dark) !important;
  --gf-color-primary-contrast: var(--wp--preset--color--background) !important;

  /* Controls. GF ships --gf-ctrl-size-md, 38px, which is under the 48px floor
     this site's UX checklist sets for anyone with less steady hands. */
  --gf-ctrl-size:          48px !important;
  --gf-ctrl-btn-size:      48px !important;
  --gf-ctrl-btn-font-size: 16px !important;
  --gf-ctrl-font-size:     16px !important;

  /* Validation messages inherit GF's tertiary scale, which lands at 13px. That
     is the text someone has to read to find out what went wrong, on a site
     built for people who need a larger floor than that. Setting the token is
     not enough - the framework routes it through a --gf-local-font-size that
     something later resets - so the size is forced below as well. */
  --gf-ctrl-desc-font-size:       1rem !important;
  --gf-ctrl-desc-font-size-error: 1rem !important;

  /* Focus. GF's default is rgba(primary, 0.65), a translucent tint; on the
     blue newsletter band that measured 1.00:1 against the band behind it.
     --ksg-ring-color is the theme's context-aware focus colour: 5.07:1 on the
     band, 9.93:1 on cream, 11.20:1 on white. */
  --gf-ctrl-outline-color-focus: var(--ksg-ring-color) !important;
  --gf-ctrl-outline-width-focus: 3px !important;
  --gf-ctrl-outline-offset:      2px !important;
}

.gform_wrapper :is(input, textarea, select):focus-visible {
  border-color: var(--brand-secondary);
}

.gform_wrapper :is(input, textarea, select)[disabled],
.gform_wrapper :is(input, textarea, select)[readonly] {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--bg-surface);
}

.gform_wrapper ::placeholder { color: var(--text-muted); opacity: 0.7; }

/* Select dropdown arrow */
.gform_wrapper select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23000' stroke-width='1.6'><path d='M1 1.5 6 6.5 11 1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

/* 5. File upload -------------------------------------------------------- */
.gform_wrapper input[type="file"] {
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  cursor: pointer;
}
.gform_wrapper input[type="file"]::file-selector-button {
  margin-inline-end: 0.75rem;
  padding: 0.45rem 0.9rem;
  background: var(--brand-secondary);
  color: var(--text-on-inverse);
  border: 0;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
}

/* 6. Checkboxes + radios ------------------------------------------------ */
.gform_wrapper .gchoice {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding-block: 0.35rem;
}
.gform_wrapper .gchoice label {
  font-size: 0.95rem;
  color: var(--text-body);
  line-height: 1.45;
  cursor: pointer;
}
.gform_wrapper input[type="checkbox"],
.gform_wrapper input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  margin-top: 0.2rem;
  inline-size: 18px;
  block-size: 18px;
  border: var(--stroke-firm) solid var(--border-strong);
  background: var(--bg-page);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--motion-quick), border-color var(--motion-quick);
  position: relative;
}
.gform_wrapper input[type="radio"] { border-radius: 50%; }
.gform_wrapper input[type="checkbox"] { border-radius: var(--radius-xs); }
.gform_wrapper input[type="checkbox"]:checked,
.gform_wrapper input[type="radio"]:checked {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}
.gform_wrapper input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: var(--bg-page);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>") no-repeat center / contain;
}
.gform_wrapper input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 4px;
  background: var(--bg-page);
  border-radius: 50%;
}
.gform_wrapper input[type="checkbox"]:focus-visible,
.gform_wrapper input[type="radio"]:focus-visible {
  outline: var(--stroke-firm) solid var(--focus-ring-color);
  outline-offset: 2px;
}

/* Consent checkbox is usually wider body copy; respect that */
.gform_wrapper .gfield--type-consent .gchoice label { font-size: 0.9rem; color: var(--text-muted); }

/* 7. List / multi-value fields ----------------------------------------- */
.gform_wrapper .gfield_list {
  border-collapse: collapse;
  width: 100%;
}
.gform_wrapper .gfield_list td {
  padding: 0.35rem;
  border-bottom: var(--stroke-hair) solid var(--border-subtle);
}
.gform_wrapper .gfield_list_icons button {
  background: var(--brand-secondary);
  color: var(--text-on-inverse);
  border: 0;
  padding: 0.3rem 0.55rem;
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-size: 0.8rem;
  line-height: 1;
}

/* 8. Section breaks + HTML blocks -------------------------------------- */
.gform_wrapper .gsection {
  border-top: var(--stroke-hair) solid var(--border-subtle);
  margin-block: 1.5rem;
  padding-top: 1.5rem;
  grid-column: 1 / -1;
}
.gform_wrapper .gsection_title {
  font-family: var(--font-display);
  font-size: var(--wp--preset--font-size--large);
  color: var(--text-heading);
  font-weight: 500;
  margin-bottom: 0.25rem;
}
.gform_wrapper .gsection_description {
  font-size: 0.9rem;
  color: var(--text-muted);
}
.gform_wrapper .gfield_html { color: var(--text-muted); }

/* 9. Page breaks + multi-page progress bar ----------------------------- */
.gform_wrapper .gf_progressbar_wrapper { margin-bottom: 2rem; }
.gform_wrapper .gf_progressbar {
  background: var(--bg-surface);
  border-radius: var(--radius-pill);
  overflow: hidden;
  block-size: 10px;
}
.gform_wrapper .gf_progressbar_percentage {
  background: var(--brand-primary);
  block-size: 100%;
  transition: width var(--motion-smooth);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-inline-end: 0.5rem;
  color: var(--text-on-accent);
  font-size: 0.7rem;
  font-weight: 500;
}
.gform_wrapper .gf_progressbar_title {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}
.gform_wrapper .gform_page_footer {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

/* 10. Submit button + button styling ----------------------------------- */
.gform_wrapper .gform_footer,
.gform_wrapper .gform_page_footer {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: var(--stroke-hair) solid var(--border-subtle);
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}
.gform_wrapper :is(.gform_button, .gform_next_button, .gform_previous_button, button[type="submit"]) {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.4rem;
  background: var(--brand-primary);
  color: var(--text-on-accent);
  border: var(--stroke-hair) solid var(--brand-primary);
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  transition: transform var(--motion-quick), background var(--motion-quick), box-shadow var(--motion-quick);
}
.gform_wrapper :is(.gform_button, .gform_next_button, button[type="submit"]):hover {
  background: var(--brand-primary-dark);
  border-color: var(--brand-primary-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-btn);
}
.gform_wrapper :is(.gform_previous_button) {
  background: transparent;
  color: var(--text-body);
  border-color: var(--border-strong);
}
.gform_wrapper :is(.gform_previous_button):hover {
  background: var(--border-strong);
  color: var(--text-on-inverse);
  transform: translateY(-1px);
}
.gform_wrapper :is(.gform_button, .gform_next_button, .gform_previous_button):focus-visible {
  outline: 3px solid var(--ksg-ring-color);
  outline-offset: 2px;
  box-shadow: none;
}

body .gform_wrapper .gfield_description,
body .gform_wrapper .gfield_validation_message {
  font-size: 1rem !important;
  line-height: 1.45;
}

/* 11. Validation / error states ---------------------------------------- */
.gform_wrapper .gfield_error :is(input, textarea, select) {
  border-color: var(--status-error);
  background: color-mix(in srgb, var(--status-error) 6%, var(--bg-page));
}
.gform_wrapper .gfield_error :is(input, textarea, select):focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-error) 20%, transparent);
}
.gform_wrapper .gfield_error .gfield_label { color: var(--status-error); }

.gform_wrapper .validation_message,
.gform_wrapper .gfield_validation_message {
  color: var(--status-error);
  font-size: 0.82rem;
  margin-top: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.gform_wrapper .validation_message::before,
.gform_wrapper .gfield_validation_message::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 14px;
  block-size: 14px;
  background: var(--status-error);
  color: var(--text-on-accent);
  border-radius: 50%;
  font-size: 0.68rem;
  font-weight: 700;
  flex-shrink: 0;
}

.gform_wrapper .validation_error,
.gform_wrapper .gform_submission_error {
  background: color-mix(in srgb, var(--status-error) 8%, var(--bg-page));
  border: var(--stroke-hair) solid var(--status-error);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  color: var(--status-error);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  font-size: 0.92rem;
}

/* 12. Confirmation messages -------------------------------------------- */
.gform_confirmation_wrapper,
.gform_confirmation_message {
  background: color-mix(in srgb, var(--status-success) 8%, var(--bg-page));
  border: var(--stroke-hair) solid var(--status-success);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  color: color-mix(in srgb, var(--status-success) 70%, var(--text-body));
  padding: 1.25rem 1.5rem;
  font-size: 1rem;
  line-height: 1.5;
}

/* 13. CAPTCHA / Turnstile wrapper -------------------------------------- */
.gform_wrapper .gfield--type-captcha,
.gform_wrapper .gfield-captcha {
  padding-block: 0.25rem;
}

/* 14. Spinner (AJAX submit) -------------------------------------------- */
.gform_wrapper .gform_ajax_spinner {
  margin-inline-start: 0.75rem;
  inline-size: 18px;
  block-size: 18px;
}

/* 15. Honeypot — always hidden but keep reachable for screen readers --- */
.gform_wrapper .gform_validation_container {
  position: absolute;
  left: -10000px;
  top: auto;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
}