/*
 * Kinetic Intelligence — Gravity Forms styling.
 * Maps Gravity Forms markup onto the KI design tokens so plugin forms match
 * the hand-built `.form__*` contact form. Tokens come from style.css :root.
 * Dark-mode only — no light variants.
 */

/* Neutralise Gravity Forms' own framework theme so our tokens win without a
   per-property !important war. The framework theme keys most of its look off
   these custom properties; remapping them is cleaner than fighting selectors. */
.gform_wrapper.gravity-theme,
.gform_wrapper.gform-theme--framework,
.gform_wrapper {
  --gf-color-primary: var(--color-brand);
  --gf-color-primary-rgb: 92, 69, 255;
  --gf-ctrl-border-color: var(--color-border);
  --gf-ctrl-bg-color: transparent;
  --gf-label-color-primary: var(--color-text);
  --gf-label-color-secondary: var(--color-text-subtle);
  --gf-field-row-gap: var(--space-3);
  --gf-field-col-gap: var(--space-3);

  /* Submit button. GF 2.9+ paints it entirely from these, at .gform-theme--framework
     (0,1,0) — the compound selectors above outrank that, so remapping here wins where
     the .gform_button rules further down cannot. Values mirror .btn + .btn--primary;
     the white background and dark text come from the gform_default_styles filter in
     functions.php, because GF emits those two from an id-scoped inline block.
     The -md variants are the ones to set: GF re-declares --gf-ctrl-btn-padding-x and
     friends on the button element itself as var(…-md), and an element-level
     declaration always beats an ancestor's for an inherited property, so overriding
     the unsuffixed names here has no effect. --gf-ctrl-btn-radius has no such
     element-level redeclaration, so it is set directly. */
  --gf-ctrl-btn-radius: var(--radius-pill);
  --gf-ctrl-btn-padding-x-md: 32px;
  --gf-ctrl-btn-padding-y: 10px;
  --gf-ctrl-btn-font-size-md: 18px;
  --gf-ctrl-btn-size-md: auto;
  --gf-ctrl-btn-border-color-primary: #fff;
  --gf-ctrl-btn-border-width-primary: 1px;
  --gf-ctrl-btn-bg-color-hover-primary: #fff;
  --gf-ctrl-btn-color-hover-primary: var(--color-bg);
}

/* ---- Layout ---- */

.gform_wrapper .gform_fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.gform_wrapper .gfield {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

/* Full-width fields: textareas, sections, and anything GF spans to full grid. */
.gform_wrapper .gfield--width-full,
.gform_wrapper .gfield.gfield--type-textarea,
.gform_wrapper .gfield.gfield--type-section,
.gform_wrapper .gfield.gfield--type-html {
  grid-column: 1 / -1;
}

@media (max-width: 768px) {
  .gform_wrapper .gform_fields {
    grid-template-columns: 1fr;
  }
}

/* ---- Headings ---- */

.gform_wrapper .gform_title {
  font: 500 clamp(26px, 3vw, 37px)/1.1 var(--font-sans);
  letter-spacing: -0.03em;
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}

.gform_wrapper .gform_description {
  font: var(--type-body);
  color: var(--color-text-muted);
  display: block;
  margin-bottom: var(--space-4);
}

/* ---- Labels ---- */

.gform_wrapper .gfield_label,
.gform_wrapper legend.gfield_label {
  font: 500 14px/1.3 var(--font-sans);
  color: var(--color-text-subtle);
  margin: 0;
}

.gform_wrapper .gfield_required {
  color: var(--color-brand);
  margin-left: 4px;
}

/* ---- Inputs ---- */

.gform_wrapper .ginput_container input[type="text"],
.gform_wrapper .ginput_container input[type="email"],
.gform_wrapper .ginput_container input[type="tel"],
.gform_wrapper .ginput_container input[type="url"],
.gform_wrapper .ginput_container input[type="number"],
.gform_wrapper .ginput_container input[type="password"],
.gform_wrapper .ginput_container input[type="date"],
.gform_wrapper .ginput_container textarea,
.gform_wrapper .ginput_container select {
  width: 100%;
  padding: 14px 20px;
  font: 400 16px/1.35 var(--font-sans);
  color: var(--color-text);
  background: linear-gradient(174deg, #16161d 0%, var(--color-bg) 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  -webkit-appearance: none;
  appearance: none;
}

.gform_wrapper .ginput_container textarea {
  resize: vertical;
  min-height: 180px;
}

.gform_wrapper .ginput_container input::placeholder,
.gform_wrapper .ginput_container textarea::placeholder {
  color: var(--color-text);
  opacity: 0.85;
}

.gform_wrapper .ginput_container input:focus,
.gform_wrapper .ginput_container textarea:focus,
.gform_wrapper .ginput_container select:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 2px #5c45ff40;
}

/* Native select arrow on the dark gradient. */
.gform_wrapper .ginput_container select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-text-subtle) 50%),
    linear-gradient(135deg, var(--color-text-subtle) 50%, transparent 50%),
    linear-gradient(174deg, #16161d 0%, var(--color-bg) 100%);
  background-position:
    calc(100% - 22px) 50%,
    calc(100% - 16px) 50%,
    0 0;
  background-size: 6px 6px, 6px 6px, 100% 100%;
  background-repeat: no-repeat;
  padding-right: 44px;
}

/* ---- Checkboxes & radios ---- */

.gform_wrapper .gfield_checkbox .gchoice,
.gform_wrapper .gfield_radio .gchoice {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.gform_wrapper .gfield_checkbox input[type="checkbox"],
.gform_wrapper .gfield_radio input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-brand);
  flex: 0 0 auto;
}

.gform_wrapper .gfield_checkbox label,
.gform_wrapper .gfield_radio label {
  font: 400 16px/1.4 var(--font-sans);
  color: var(--color-text-muted);
}

/* ---- Field descriptions ---- */

.gform_wrapper .gfield_description {
  font: 400 13px/1.4 var(--font-sans);
  color: var(--color-text-subtle);
}

/* ---- Validation ---- */

.gform_wrapper .gfield_error .ginput_container input,
.gform_wrapper .gfield_error .ginput_container textarea,
.gform_wrapper .gfield_error .ginput_container select {
  border-color: #ff5a5a;
}

.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
  font: 400 13px/1.3 var(--font-sans);
  color: #ff8a8a;
  background: none;
  border: 0;
  padding: 4px 0 0;
}

.gform_wrapper .gform_validation_errors {
  background: #5c45ff1f;
  border: 1px solid rgba(92, 69, 255, 0.4);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  box-shadow: none;
}

.gform_wrapper .gform_validation_errors .gform_submission_error {
  font: 500 16px/1.4 var(--font-sans);
  color: var(--color-text);
}

/* ---- Footer / submit ---- */

.gform_wrapper .gform_footer {
  display: flex;
  justify-content: flex-end;
  padding: 0;
  margin-top: var(--space-4);
}

/* Mirrors .btn + .btn--primary from style.css, so a Gravity Forms submit is the same
   white pill as the design's own buttons. On GF 2.9+ the framework theme paints the
   button from --gf-ctrl-btn-* instead, so these declarations only reach the legacy
   .gravity-theme wrapper; the token block at the top of this file is what wins there. */
.gform_wrapper .gform_button,
.gform_wrapper .gform_button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 10px 32px;
  font: 500 18px/1.4 var(--font-sans);
  color: var(--color-bg);
  background: #ffffffeb;
  border: 1px solid #fff;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.gform_wrapper .gform_button:hover {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px #9843ff40, var(--shadow-glow-outer);
}

/* ---- Confirmation ---- */

.gform_confirmation_wrapper .gform_confirmation_message {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: #5c45ff1f;
  border: 1px solid rgba(92, 69, 255, 0.4);
  color: var(--color-text);
  font: var(--type-body);
}

/* ---- Loading spinner ---- */

.gform_wrapper .gform_ajax_spinner {
  margin-left: var(--space-2);
}