/**
 * Forms — Gg (F4)  ·  Gravity Forms 2.10 (Orbital / Theme Framework)
 *
 * STRATEGY — override GF's Theme Framework in place via its own CSS custom
 * property API; do NOT disable it and do NOT brute-force per-element rules.
 * Why:
 *   - GF 2.10 renders the Orbital theme by driving every control off
 *     `--gf-ctrl-*` / `--gf-color-*` / `--gf-font-*` custom properties declared
 *     on `.gform-theme--framework` (specificity 0,1,0). The orbital-theme.css
 *     file itself is empty (0 bytes); the framework CSS carries the values.
 *   - Fully DISABLING GF css needs a PHP filter (`gform_disable_css`) or the
 *     global "Output Default CSS" setting — both out of this wave's file license
 *     (forms.css only). So we override, not disable.
 *   - This stylesheet loads BEFORE GF's, so equal-specificity rules would LOSE.
 *     Declaring the tokens on `.gform_wrapper.gform-theme--framework` (0,2,0)
 *     beats GF's own `.gform-theme--framework` (0,1,0) regardless of load order,
 *     AND wins over GF's `!important` *consumers* (a rule that reads
 *     `var(--gf-ctrl-border-color)!important` resolves the value we set). 24 of
 *     the 29 token overrides below win this way with NO `!important`.
 *   - THE 5 EXCEPTIONS: GF also emits a PER-FORM inline <style> (its "CSS API"
 *     output) scoped `#gform_wrapper_1[data-form-index="0"].gform-theme` —
 *     specificity 1,2,0, an ID — that re-declares a subset of tokens:
 *     --gf-ctrl-size, --gf-ctrl-border-color, --gf-ctrl-btn-size,
 *     --gf-ctrl-btn-padding-x, --gf-ctrl-btn-font-size. An ID selector CANNOT be
 *     out-specified by a form-agnostic class/attribute selector (specificity
 *     math), and hard-coding `#gform_wrapper_1` is brittle (form IDs are seeded
 *     per-environment). So those 5 — and only those 5 — carry `!important`,
 *     tightly scoped to `.gform_wrapper.gform-theme--framework`. This is the
 *     sanctioned "neutralizing GF's own inline output" case. GF's inline config
 *     declares them WITHOUT `!important`, so an important custom-property wins.
 *     (GF's 31 foundation `!important` rules only touch full-width-submit
 *     variants + chosen/datepicker/SR widgets — none of which we fight here.)
 *
 * Visual target — D2 `Form / Input` set (Figma 2010:113, Resting/Focus/Error) +
 * Contact frame 14:160 (form 18:191–18:225) + D1 mobile 2012:197. Every value
 * aliases the theme.json palette via tokens.css — no raw brand hex.
 *
 * Spec (figma-analysis §1 Forms + D2, node-verified):
 *   - Input: fill #fffcee, border 2px #fff8d4 (cream) resting, SQUARE, 72px tall
 *     (textarea taller), 24px left padding, Public Sans Medium 16.
 *   - Focus: border 2px #900000 (maroon). No orbital blue/ring.
 *   - Error: border 2px #900000 + message (Public Sans Medium 15/18 maroon +
 *     warning icon).
 *   - Label: Public Sans Medium 16/18 black; required asterisk #d62609.
 *     First/Last sub-labels Public Sans Medium 15/18.
 *   - Layout: desktop First/Last side-by-side; mobile (<768) everything
 *     full-width stacked incl. First/Last, full-width submit.
 *   - Submit: the primary button system (same --kd-btn-* tokens as
 *     gg-buttons.css — the GF submit input carries none of the block-button
 *     classes gg-buttons.css targets, so it is re-pointed at the shared tokens
 *     here rather than duplicating button geometry/colour).
 *
 * NOTE (reviewer 🟡 carry): the old NHC-era forms.css used font-weight:700 for
 * labels — a faux-bold post-F2 (only Public Sans 500/600 faces are self-hosted).
 * This rewrite drops it entirely: the D2 spec is Public Sans **Medium (500)** for
 * all form chrome, which is a real self-hosted face. 500 supersedes the
 * "700 → 600" note (design-correct AND no faux-bold).
 */

/* ── Token overrides — GF Theme Framework custom-property API ─────────────────
   Set on `.gform_wrapper.gform-theme--framework` (0,2,0) so they win over GF's
   own `.gform-theme--framework` declarations (0,1,0) despite loading first. */
.gform_wrapper.gform-theme--framework {
	/* Fonts — Public Sans across the whole form (input, label, sub-label, desc).
	   All GF font tiers trace back to these three roots. */
	--gf-font-family-primary: var(--kd-font-heading);
	--gf-font-family-secondary: var(--kd-font-heading);
	--gf-font-family-tertiary: var(--kd-font-heading);

	/* Inputs — geometry + surfaces (D2 Resting).
	   `!important` on the two tokens GF re-declares in its per-form inline ID
	   config (see header) — the only way to beat an ID scope form-agnostically. */
	--gf-ctrl-size: 72px !important; /* single-line input height (vs inline ID config) */
	--gf-ctrl-bg-color: var(--kd-color-input-fill); /* #fffcee */
	--gf-ctrl-border-color: var(--kd-color-cream) !important; /* #fff8d4 resting (vs inline ID config) */
	--gf-ctrl-border-color-hover: var(--kd-color-cream);
	--gf-ctrl-border-color-focus: var(--kd-color-maroon); /* #900000 focus (D2) */
	--gf-ctrl-border-color-error: var(--kd-color-error); /* #900000 error (D2) */
	--gf-ctrl-border-width: 2px;
	--gf-ctrl-radius: var(--kd-radius-0); /* square corners — not orbital's 3px */
	--gf-ctrl-padding-x: 24px; /* 24px inline padding (design: 24px left) */
	--gf-ctrl-color: var(--kd-color-contrast); /* typed text — black */
	--gf-ctrl-font-size: var(--kd-size-body); /* 16px */
	--gf-ctrl-font-weight: 500; /* Public Sans Medium */
	--gf-ctrl-shadow: none; /* kill orbital's subtle control shadow */
	--gf-ctrl-outline-width-focus: 0; /* kill orbital's 3px focus ring — D2 uses the maroon border only */

	/* Required asterisk — resolved to primary #d62609 (D2 retires NHC purple) */
	--gf-ctrl-label-color-req: var(--kd-color-primary);
	--gf-ctrl-label-font-size-req: var(--kd-size-body); /* 16px, match label (not GF's 12px) */

	/* Submit — re-point GF's primary-button tokens at the shared --kd-btn-* set
	   (single source of truth in tokens.css; no duplicated button rules). */
	--gf-ctrl-btn-bg-color-primary: var(--kd-btn-bg); /* #d62609 */
	--gf-ctrl-btn-bg-color-hover-primary: var(--kd-btn-bg-hover); /* #900000 */
	--gf-ctrl-btn-bg-color-focus-primary: var(--kd-btn-bg); /* default fill on focus (D2) */
	--gf-ctrl-btn-color-primary: var(--kd-btn-fg); /* white */
	--gf-ctrl-btn-size: var(--kd-btn-height) !important; /* button height — shared token (vs inline ID config) */
	--gf-ctrl-btn-radius: var(--kd-radius-0); /* square */
	--gf-ctrl-btn-padding-x: var(--kd-btn-padding-x) !important; /* shared token (vs inline ID config) */
	--gf-ctrl-btn-font-family: var(--kd-font-buttons); /* DM Sans */
	--gf-ctrl-btn-font-size: var(--kd-size-btn) !important; /* 17px (vs inline ID config) */
	--gf-ctrl-btn-font-weight: 600; /* SemiBold */
}

/* ── Typography — direct rules scoped 0,2,0+ so they beat GF's framework text
   rules (`.gform-theme--framework <el>` = 0,2,0) on load order too. ────────── */

/* Field label — Public Sans Medium 16/18 black */
.gform_wrapper.gform-theme--framework .gfield_label {
	font-family: var(--kd-font-heading);
	font-size: var(--kd-size-label); /* 16px */
	font-weight: 500; /* Medium */
	line-height: 1.125; /* 18/16 */
	color: var(--kd-color-contrast); /* black */
}

/* Sub-labels (First / Last) — Public Sans Medium 15/18 black */
.gform_wrapper.gform-theme--framework .gform-field-label--type-sub,
.gform_wrapper.gform-theme--framework .ginput_container_name label {
	font-family: var(--kd-font-heading);
	font-size: var(--kd-size-sub-label); /* 15px */
	font-weight: 500;
	line-height: 1.2; /* 18/15 */
	color: var(--kd-color-contrast);
}

/* Input / textarea typed text — Public Sans Medium 16, black */
.gform_wrapper.gform-theme--framework .gfield input,
.gform_wrapper.gform-theme--framework .gfield textarea,
.gform_wrapper.gform-theme--framework .gfield select {
	font-family: var(--kd-font-heading);
	font-size: var(--kd-size-body); /* 16px */
	font-weight: 500;
	color: var(--kd-color-contrast);
}

.gform_wrapper.gform-theme--framework .gfield input::placeholder,
.gform_wrapper.gform-theme--framework .gfield textarea::placeholder {
	color: var(--kd-color-neutral-500); /* muted grey (design placeholder ≈ #595959) */
	opacity: 1;
}

/* Message textarea — taller (Contact 18:194 = 535×202) */
.gform_wrapper.gform-theme--framework .gfield textarea {
	min-height: 202px;
	padding-top: 1.25rem; /* top-align text with a comfortable inset */
	padding-bottom: 1.25rem;
	resize: vertical;
}

/* ── Name field — First / Last split ─────────────────────────────────────────
   Desktop: two half-width inputs side by side (Contact 14:160: 256px each in a
   535px column, ~23px gap). Empty prefix/suffix columns collapse. */
.gform_wrapper.gform-theme--framework .ginput_container_name {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem; /* ~24px — matches the Contact-frame gap between First/Last */
}

.gform_wrapper.gform-theme--framework .ginput_container_name .name_first,
.gform_wrapper.gform-theme--framework .ginput_container_name .name_last {
	flex: 1 1 0;
	min-width: 0;
}

/* prefix/suffix are off on this form — keep any empty column from taking space */
.gform_wrapper.gform-theme--framework .ginput_container_name .name_prefix,
.gform_wrapper.gform-theme--framework .ginput_container_name .name_suffix {
	display: none;
}

/* ── Error state ─────────────────────────────────────────────────────────────
   D2 Error: input border → maroon (via --gf-ctrl-border-color-error above),
   message in maroon Public Sans Medium 15/18. Neutralize GF foundation's
   error-field container tint/inset so only the border + message read as error. */
.gform_wrapper.gform-theme--framework .gfield_error {
	background: transparent;
	border: 0;
	padding: 0;
}

.gform_wrapper.gform-theme--framework .gfield_validation_message,
.gform_wrapper.gform-theme--framework .validation_message {
	font-family: var(--kd-font-heading);
	font-size: var(--kd-size-error); /* 15px */
	font-weight: 500;
	line-height: 1.2; /* 18/15 */
	color: var(--kd-color-error); /* #900000 */
	background: transparent;
	border: 0;
	padding: 0;
}

/* ── Submit ──────────────────────────────────────────────────────────────────
   Colour/geometry come from the --gf-ctrl-btn-* overrides above (shared
   --kd-btn-* tokens). Active state (#6b0000, D2) isn't a GF token, so set it
   directly; scoped high enough to beat the framework button selector. */
.gform_wrapper.gform-theme--framework .gform_footer input[type="submit"]:active,
.gform_wrapper.gform-theme--framework .gform_footer button[type="submit"]:active {
	background-color: var(--kd-btn-bg-active); /* #6b0000 */
}

/* ── Mobile (<768) — everything full-width stacked (D1 2012:197) ───────────── */
@media (max-width: 767.98px) {
	/* First / Last stack, each full width */
	.gform_wrapper.gform-theme--framework .ginput_container_name {
		flex-direction: column;
		gap: 1rem;
	}

	.gform_wrapper.gform-theme--framework .ginput_container_name .name_first,
	.gform_wrapper.gform-theme--framework .ginput_container_name .name_last {
		flex: 1 1 100%;
		width: 100%;
	}

	/* Full-width submit (D1 mock). GF sizes the button to content via its
	   per-form ID-scoped inline config (specificity 1,x,0) — a form-agnostic
	   class rule can't out-specify an ID, so this is the sanctioned
	   "neutralize GF's own inline output" !important case (cf. the 5 token
	   overrides above). Verified live: raises the button from 179px → 335px. */
	.gform_wrapper.gform-theme--framework .gform_footer input[type="submit"],
	.gform_wrapper.gform-theme--framework .gform_footer button[type="submit"] {
		width: 100% !important;
	}
}