/* =========================================================================
 * forms.css — form styling, two jobs in one file:
 *   (A) the approved .mtg-form* design (static fallback markup), and
 *   (B) a BRIDGE that maps that design onto Gravity Forms' native .gform_*
 *       markup, so the LIVE imported form looks identical to the design.
 *
 * Why this exists: the .mtg-form* rules were authored in the approved HTML but
 * never migrated to a theme stylesheet, AND the live Gravity Form renders its
 * own .gform_* / .gfield / .ginput_container markup that no CSS targeted — so
 * the form shipped unstyled (default GF look). Loaded globally (contact page +
 * homepage sidebar lead form both use it). Austin 2026-06-05.
 *
 * Design tokens come from global.css :root (--fire, --border-soft, etc.).
 * ========================================================================= */

p.gform_required_legend {
    display: none;
}

.gchoice.gchoice_5_5_1 {
    color: #fff;
}

.gchoice.gchoice_5_6_1 {
    color: #fff;
}

/* =========================================================================
 * (A) STATIC .mtg-form* — verbatim from the approved design
 * ========================================================================= */
.mtg-form { display:flex; flex-direction:column; gap:16px; font-family:var(--body); width:100%; }
.mtg-form-row { display:flex; gap:14px; }
.mtg-form-row > * { flex:1; min-width:0; }
.mtg-form-field { display:flex; flex-direction:column; gap:6px; }
.mtg-form-label { font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted-text); }
.mtg-form-label .req { color:var(--fire); margin-left:2px; }
.mtg-form-input,
.mtg-form-select,
.mtg-form-textarea {
  font-family:var(--body); padding:14px 16px; border:1px solid var(--border-soft);
  border-radius:4px; font-size:0.95rem; background:var(--surface-card); color:var(--ink);
  outline:none; transition:border-color .2s, box-shadow .2s, background .2s;
  width:100%; box-sizing:border-box;
}
.mtg-form-textarea { resize:vertical; min-height:110px; line-height:1.55; }
.mtg-form-select {
  appearance:none; -webkit-appearance:none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted-text) 50%), linear-gradient(135deg, var(--muted-text) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  padding-right:40px; cursor:pointer;
}
.mtg-form-input:focus,
.mtg-form-select:focus,
.mtg-form-textarea:focus { border-color:var(--fire); box-shadow:0 0 0 3px rgba(244,100,33,0.12); }
.mtg-form-input::placeholder,
.mtg-form-textarea::placeholder { color:var(--faint-text); }
.mtg-form-consent { display:flex; gap:10px; align-items:flex-start; font-size:0.78rem; color:var(--muted-text); line-height:1.6; margin-top:4px; }
.mtg-form-consent input[type="checkbox"] { margin-top:3px; width:16px; height:16px; accent-color:var(--fire); flex-shrink:0; cursor:pointer; }
.mtg-form-consent a { color:var(--fire); text-decoration:none; }
.mtg-form-consent a:hover { text-decoration:underline; }
.mtg-form-submit {
  background:var(--fire); color:#fff; border:none; padding:16px 28px;
  font-family:var(--body); font-size:12px; font-weight:600; letter-spacing:2.5px;
  text-transform:uppercase; cursor:pointer; border-radius:4px;
  transition:background .2s, transform .2s, box-shadow .2s; margin-top:6px;
}
.mtg-form-submit:hover { background:var(--fire-deep); transform:translateY(-1px); box-shadow:0 6px 20px rgba(244,100,33,0.28); }
.mtg-form-submit:active { transform:translateY(0); }
.mtg-form-footnote { font-size:0.75rem; color:var(--faint-text); text-align:center; margin-top:10px; line-height:1.6; }

/* =========================================================================
 * (B) GRAVITY FORMS BRIDGE — make .gform_* markup match the design above.
 * Scoped under .gform_wrapper so it never touches non-GF markup. GF default
 * CSS is already stripped in functions.php (pre_option_rg_gforms_disable_css),
 * so these rules style from a near-blank slate.
 * ========================================================================= */

/* BASE control styling (Austin 2026-06-05) — bare-element selectors so EVERY
   input is covered in one rule: GeneratePress base inputs, Gravity Forms (any
   version), and the static .mtg-form fallback. This is what actually fixed the
   half-width First/Last/Email/Phone fields, which were inheriting GeneratePress's
   own input styling (var(--contrast) is GP's text token) that the scoped
   .gform_wrapper rules couldn't reliably out-specify. */
input[type="text"], input[type="email"], input[type="url"], input[type="password"],
input[type="search"], input[type="tel"], input[type="number"], input[type="date"],
textarea, select {
  color: var(--contrast);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
}

.gform_wrapper form { display:flex; flex-direction:column; gap:16px; font-family:var(--body); width:100%; }

/* Field rows: GF stacks .gfield in a list; remove list chrome. */
.gform_wrapper .gform_fields { display:flex; flex-direction:column; gap:16px; list-style:none; margin:0; padding:0; grid-gap:16px; }
.gform_wrapper .gfield { margin:0; padding:0; list-style:none; }

/* Labels → match .mtg-form-label */
.gform_wrapper .gfield_label {
  font-family:var(--body); font-size:11px; font-weight:600; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--muted-text); margin-bottom:6px; display:block;
}
.gform_wrapper .gfield_required { color:var(--fire); margin-left:2px; }

/* Inputs / selects / textareas → match .mtg-form-input */
.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="number"],
.gform_wrapper .ginput_container input[type="date"],
.gform_wrapper .ginput_container select,
.gform_wrapper .ginput_container textarea {
  font-family:var(--body); padding:14px 16px;
  /* !important: brand-locked tokens overriding Gravity Forms' theme/foundation
     stylesheet, which out-specifies plain selectors on half-width fields
     (the First/Last/Email/Phone bg+border bug). Justified per coding-standards
     B4 (brand-token exception). Paired with the GF theme-CSS dequeue. */
  border:1px solid var(--border-soft) !important;
  background:var(--surface-card) !important;
  border-radius:4px !important;
  font-size:0.95rem; color:var(--ink);
  outline:none; transition:border-color .2s, box-shadow .2s, background .2s;
  width:100%; box-sizing:border-box;
}
.gform_wrapper .ginput_container textarea { resize:vertical; min-height:110px; line-height:1.55; }
.gform_wrapper .ginput_container select {
  appearance:none; -webkit-appearance:none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted-text) 50%), linear-gradient(135deg, var(--muted-text) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  padding-right:40px; cursor:pointer;
}
.gform_wrapper .ginput_container input:focus,
.gform_wrapper .ginput_container select:focus,
.gform_wrapper .ginput_container textarea:focus {
  border-color:var(--fire) !important; box-shadow:0 0 0 3px rgba(244,100,33,0.12) !important;
}
.gform_wrapper .ginput_container input::placeholder,
.gform_wrapper .ginput_container textarea::placeholder { color:var(--faint-text); }

/* Two-up rows: GF emits .gfield--width-half on half-width fields. */
.gform_wrapper .gform_fields { display:flex; flex-wrap:wrap; }
.gform_wrapper .gfield { flex:1 1 100%; }
.gform_wrapper .gfield.gfield--width-half { flex:1 1 calc(50% - 8px); }

/* Consent checkbox → match .mtg-form-consent */
.gform_wrapper .gfield_consent_label,
.gform_wrapper .gfield--type-consent label {
  font-size:0.78rem; color:var(--muted-text); line-height:1.6; font-weight:400;
  letter-spacing:0; text-transform:none;
}
.gform_wrapper .gchoice { display:flex; gap:10px; align-items:flex-start; }
.gform_wrapper input[type="checkbox"] { margin-top:3px; width:16px; height:16px; accent-color:var(--fire); flex-shrink:0; cursor:pointer; }

/* Submit button → match .mtg-form-submit */
.gform_wrapper .gform_footer { margin:6px 0 0; padding:0; }
.gform_wrapper .gform_button,
.gform_wrapper input[type="submit"] {
  background:var(--fire); color:#fff; border:none; padding:16px 28px;
  font-family:var(--body); font-size:12px; font-weight:600; letter-spacing:2.5px;
  text-transform:uppercase; cursor:pointer; border-radius:4px; width:auto;
  transition:background .2s, transform .2s, box-shadow .2s;
}
.gform_wrapper .gform_button:hover,
.gform_wrapper input[type="submit"]:hover {
  background:var(--fire-deep); transform:translateY(-1px); box-shadow:0 6px 20px rgba(244,100,33,0.28);
}

/* Validation + description text */
.gform_wrapper .gfield_description, .gform_wrapper .gform_validation_errors,
.gform_wrapper .validation_message { font-size:0.78rem; color:var(--fire); margin-top:6px; }
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea { border-color:var(--fire); }

/* Confirmation message after submit */
.gform_confirmation_message {
  font-family:var(--body); font-size:1.05rem; line-height:1.7; color:var(--ink);
  padding:20px; background:var(--surface-card); border-left:3px solid var(--fire); border-radius:4px;
}

/* Dark mode: the contact form sits on the cream section in both themes, but the
   homepage sidebar form sits on a dark card — tokens (--surface-card etc.) flip
   via global.css, so inputs adapt automatically. No extra rules needed. */

/* =========================================================================
 * (C) IMPORTED-FORM FIXES — the "Schedule a Free Consultation" forms imported
 * from the old site. GF's own grid/layout CSS is dequeued, so the multi-column
 * pieces those forms rely on must be re-provided here. Austin 2026-06-24.
 * ========================================================================= */

/* NAME field — First / Last side by side. They were stacking because each
   sub-input is width:100% and GF's grid CSS is gone. Flex + min-width so it
   collapses to one column automatically inside a narrow sidebar. */
.gform_wrapper .ginput_container_name { display:flex; flex-wrap:wrap; gap:14px; }
.gform_wrapper .ginput_container_name > span {
  flex:1 1 calc(50% - 7px); min-width:150px; width:auto !important; margin:0; padding:0;
}
.gform_wrapper .ginput_container_name > span > input { width:100% !important; }
/* GF sub-labels (First / Last) sit under each input */
.gform_wrapper .ginput_container_name label {
  font-family:var(--body); font-size:10px; font-weight:600; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--faint-text); margin-top:5px; display:block;
}

/* Legacy "Ready Classes" the imported forms use for two-up rows. GF removes
   Ready Classes in 4.0 — convert fields to the native width setting when
   convenient; until then, map them onto the flex row so Email/Phone etc. sit
   side by side like the design. */
.gform_wrapper .gfield.gf_left_half, .gform_wrapper .gfield.gf_right_half { flex:1 1 calc(50% - 8px); }
.gform_wrapper .gfield.gf_left_third,
.gform_wrapper .gfield.gf_middle_third,
.gform_wrapper .gfield.gf_right_third { flex:1 1 calc(33.333% - 11px); }

/* HONEYPOT — keep it working, never show it. Enable GF's native anti-spam
   honeypot per form (Form Settings -> Form Options -> Anti-spam honeypot); GF
   normally hides its container with CSS we dequeued, so hide it here (kept in
   the DOM, off-screen — bots fill it, humans never see it). Also hides any field
   flagged .mtg-hp (add that class to the old visible "Company" honeypot field if
   you keep it instead of deleting it). */
.gform_wrapper .gfield--type-honeypot,
.gform_wrapper .gform_validation_container,
.gform_wrapper .gfield_visibility_hidden,
.gform_wrapper .mtg-hp {
  position:absolute !important; left:-9999px !important; top:auto;
  width:1px !important; height:1px; overflow:hidden; padding:0 !important; margin:0 !important;
}

/* =========================================================================
 * RESPONSIVE
 * ========================================================================= */
@media (max-width:768px){
  .mtg-form-row { flex-direction:column; gap:16px; }
  .gform_wrapper .gfield.gfield--width-half,
  .gform_wrapper .gfield.gf_left_half, .gform_wrapper .gfield.gf_right_half,
  .gform_wrapper .gfield.gf_left_third, .gform_wrapper .gfield.gf_middle_third,
  .gform_wrapper .gfield.gf_right_third { flex:1 1 100%; }
}