/**
 * Gravity Forms — design-token bridge (P14 form shell)
 *
 * The starter's form plugin of choice is Gravity Forms. Rather than fight
 * GF's stylesheet or re-implement the field grid, this maps GF's OWN custom
 * properties onto the theme's `--kd-*` tokens. GF 2.5+ ships a "theme
 * framework" whose CSS is entirely var-driven (791 `--gf-*` properties), so
 * setting those variables makes GF's own rules render the house design — no
 * selector duplication, no `!important`, and GF keeps its layout/grid CSS.
 *
 * Why not the other direction: pushing `--kd-*` values onto `.gfield` would do
 * nothing on its own. Custom properties only take effect where a rule reads
 * them, and no rule matches GF's markup with the theme's declarations. GF
 * reading its own variables is the supported extension point.
 *
 * Why not `gform_disable_css`: that filter disables ALL front-end GF CSS
 * (common.php — "disable all CSS files from being loaded on the Front End"),
 * including the field-grid layout that drives multi-column forms. We'd have to
 * re-implement it. Re-tokenising is cheaper and survives GF updates.
 *
 * SPECIFICITY — read this before changing a selector here.
 *
 * GF declares its stylesheet defaults on `.gform-theme--framework` (0,1,0), so
 * the (0,2,0) selector below beats them on specificity rather than load order.
 * Do not "simplify" it to a single class.
 *
 * BUT that only covers the variables GF sets in its STYLESHEET. GF also emits a
 * per-form inline <style> on `#gform_wrapper_N[data-form-index="0"].gform-theme`
 * — an ID selector, (1,2,0) — carrying ~76 `--gf-*` declarations. Nothing in
 * this file can outrank that without `!important`.
 *
 * That split is real and was measured: on the first pass the variables GF does
 * NOT write inline (radius, bg-color, padding, accent…) took our values, while
 * the three it DOES write inline (`--gf-ctrl-border-color`, `--gf-ctrl-size`,
 * `--gf-ctrl-label-color-primary`) silently kept GF's.
 *
 * So anything GF writes inline is set from PHP instead, via the
 * `gform_default_styles` filter in inc/gravity-forms.php — which changes what
 * GF writes into that block rather than fighting it. **If a value here appears
 * to have no effect, check that filter before adding `!important`.**
 *
 * Source of truth for the values is assets/css/forms.css (the design-system
 * form spec). If a value changes there, change it
 * here too — these are two consumers of one design, not two designs.
 */

.gform_wrapper.gform-theme--framework {
	/* ── Inputs ─────────────────────────────────────────────────────────── */
	--gf-ctrl-bg-color: var(--kd-color-base);
	--gf-ctrl-color: var(--kd-color-contrast);
	--gf-ctrl-font-family: var(--kd-font-body);
	--gf-ctrl-font-size: var(--kd-size-body);
	--gf-ctrl-line-height: 1.5;

	/* 2px primary border + pill radius, per the form spec. */
	--gf-ctrl-border-color: var(--kd-color-primary);
	--gf-ctrl-border-width: 2px;
	--gf-ctrl-border-style: solid;
	--gf-ctrl-radius: var(--kd-radius-pill);

	/* In-control accent — GF's own blue by default. Drives the image-choice
	   check circle (package cards) and the selected-state fill of choice
	   controls. Brand primary + white. */
	--gf-color-in-ctrl-primary: var(--kd-color-primary);
	--gf-color-in-ctrl-primary-contrast: var(--kd-color-base);
	--gf-field-img-choice-card-check-ind-bg-color: var(--kd-color-primary);
	--gf-field-img-choice-card-check-ind-icon-color: var(--kd-color-base);
	--gf-field-img-choice-no-card-check-ind-bg-color: var(--kd-color-primary);
	--gf-field-img-choice-no-card-check-ind-icon-color: var(--kd-color-base);

	/* Textarea softens to 20px — matches forms.css. */
	--gf-ctrl-textarea-radius: var(--kd-radius-card);

	/* NOTE: no effect today — GF writes --gf-ctrl-size: 47px inline (inputSize: lg),
	   which wins over this. The <select> padding fix further down DEPENDS on that
	   value being a length: keep inputSize pinned to lg on every form, or the
	   select padding calc() becomes invalid and collapses to 0. */
	--gf-ctrl-size: auto;
	--gf-ctrl-padding-x: 1.5rem;
	--gf-ctrl-padding-y: 0.85rem;

	--gf-ctrl-placeholder-color: var(--kd-color-neutral-500);
	--gf-ctrl-transition: var(--kd-transition-fast);

	/* ── States ─────────────────────────────────────────────────────────── */
	--gf-ctrl-border-color-hover: var(--kd-color-primary);
	--gf-ctrl-border-color-focus: var(--kd-color-accent-1);
	--gf-ctrl-outline-color: var(--kd-color-accent-1);
	--gf-ctrl-bg-color-focus: var(--kd-color-base);
	--gf-ctrl-color-focus: var(--kd-color-contrast);

	--gf-ctrl-border-color-error: var(--kd-color-error);
	--gf-ctrl-bg-color-error: var(--kd-color-base);
	--gf-ctrl-color-error: var(--kd-color-contrast);

	/* Native checkbox/radio tint — forms.css uses accent-color for the same. */
	--gf-ctrl-accent-color: var(--kd-color-primary);

	/* ── Labels ─────────────────────────────────────────────────────────── */
	--gf-ctrl-label-color-primary: var(--kd-color-contrast);
	--gf-ctrl-label-font-family-primary: var(--kd-font-body);
	--gf-ctrl-label-font-size-primary: var(--kd-size-body);
	--gf-ctrl-label-font-weight-primary: 700;

	/* Sub-labels (First / Last) — 13px bold, secondary tier in GF's scale. */
	--gf-ctrl-label-color-secondary: var(--kd-color-body);
	--gf-ctrl-label-font-family-secondary: var(--kd-font-body);
	--gf-ctrl-label-font-size-secondary: 0.8125rem;
	--gf-ctrl-label-font-weight-secondary: 700;

	/* Required asterisk — small text, so it takes the contrast colour, not
	   primary (primary on white is 3.81:1, under the 4.5:1 AA floor). */
	--gf-ctrl-label-color-req: var(--kd-color-contrast);
	--gf-ctrl-label-font-family-req: var(--kd-font-body);

	/* ── Descriptions + validation messages ─────────────────────────────── */
	--gf-ctrl-desc-color: var(--kd-color-body);
	--gf-ctrl-desc-font-family: var(--kd-font-body);
	--gf-ctrl-desc-font-size: 0.8125rem;

	--gf-ctrl-desc-color-error: var(--kd-color-error);
	--gf-ctrl-desc-font-family-error: var(--kd-font-body);
	--gf-ctrl-desc-font-size-error: 0.8125rem;
	--gf-ctrl-desc-font-weight-error: 500;

	/* ── Submit button — reuse the theme's button tokens ────────────────── */
	--gf-ctrl-btn-font-family: var(--kd-font-heading);
	--gf-ctrl-btn-font-weight: var(--kd-fw-heading);
	--gf-ctrl-btn-radius: var(--kd-radius-pill);
	--gf-ctrl-btn-bg-color-primary: var(--kd-btn-bg);
	--gf-ctrl-btn-color-primary: var(--kd-btn-fg);
	--gf-ctrl-btn-border-color-primary: var(--kd-btn-bg);
	--gf-ctrl-btn-bg-color-hover-primary: var(--kd-btn-bg-hover);
	--gf-ctrl-btn-border-color-hover-primary: var(--kd-btn-bg-hover);
	--gf-ctrl-btn-bg-color-focus-primary: var(--kd-btn-bg-hover);
	--gf-ctrl-btn-border-color-focus-primary: var(--kd-btn-bg-hover);

	/* ── Secondary button (wizard "Back") — the theme's outline button ──── */
	/* Only the primary set was mapped, so Back fell through to GF's own
	   secondary defaults: on hover a BLACK fill under dark text — unreadable.
	   Mirrors `.is-style-outline` in global.css: transparent fill, primary
	   border, indigo on hover. GF writes only the border colour inline
	   (already primary via gform_default_styles); the rest is ours to set.
	   Label text uses the contrast colour: it is small text and primary on
	   white is 3.81:1. */
	--gf-ctrl-btn-bg-color-secondary: transparent;
	--gf-ctrl-btn-color-secondary: var(--kd-color-contrast);
	--gf-ctrl-btn-border-width-secondary: 3px;
	--gf-ctrl-btn-bg-color-hover-secondary: transparent;
	--gf-ctrl-btn-color-hover-secondary: var(--kd-btn-outline-hover);
	--gf-ctrl-btn-border-color-hover-secondary: var(--kd-btn-outline-hover);
	--gf-ctrl-btn-bg-color-focus-secondary: transparent;
	--gf-ctrl-btn-color-focus-secondary: var(--kd-btn-outline-hover);
	--gf-ctrl-btn-border-color-focus-secondary: var(--kd-btn-outline-hover);
}

/* ── The two things GF exposes no variable for ───────────────────────────── */

/* Submit label is uppercase across the theme's button system (verified: the
   theme's own `.wp-block-button__link` computes `uppercase`). GF exposes
   variables for the button's font-family, weight and radius but NOT for
   text-transform, so this needs a real rule.

   The selector is long on purpose. GF styles its buttons through
   `.gform-theme--framework.gform-theme.gform_wrapper input:is([type=submit],…)
   .button:where(…)` — roughly (0,5,1). A shorter selector here matches the
   element but loses the cascade, which is exactly what happened on the first
   pass: `matches()` returned true while `text-transform` still computed
   `none`. Repeating the wrapper classes and adding `.button` takes this to
   (0,6,1). Do not "tidy" it back down. */
.gform_wrapper.gform-theme.gform-theme--framework
	.gform_footer
	input[type="submit"].button,
.gform_wrapper.gform-theme.gform-theme--framework .gform_footer button.button {
	text-transform: uppercase;
	letter-spacing: 0.2px;
}

/* Focus ring — forms.css pairs the cyan border with a 3px translucent glow.
   GF drives its outline from variables but not this shadow. */
.gform_wrapper.gform-theme--framework .gform-theme-field-control:focus-within {
	box-shadow: 0 0 0 3px
		color-mix(in srgb, var(--kd-color-accent-1) 35%, transparent);
}

/* Minimum button width — same `--kd-btn-min-w` token the theme's own buttons
   use, so one override opts a region out of both systems at once.
 
   GF buttons carry none of the theme's button classes, so `global.css` never
   reaches them: the wizard's "Next" rendered at 83px, the stubbiest control on
   the site and exactly what the floor exists to prevent.
 
   Both footers are listed on purpose. `.gform_footer` holds the final submit;
   the multi-step wizard's Next/Back live in `.gform_page_footer`, which the
   text-transform rule above does not cover. Same long selector shape for the
   same reason documented there — GF's own is ~(0,5,1), so a tidier selector
   would match the element and lose the cascade. Do not shorten it.
 
   Both input TYPES are listed too: GF renders the wizard's Next/Back as
   `input[type=button]` and only the final submit as `input[type=submit]`, so a
   submit-only selector silently leaves the stubby Next behind — which is what
   the first pass here did. */
.gform_wrapper.gform-theme.gform-theme--framework
	.gform_footer
	input:is([type="submit"], [type="button"]).button,
.gform_wrapper.gform-theme.gform-theme--framework .gform_footer button.button,
.gform_wrapper.gform-theme.gform-theme--framework
	.gform_page_footer
	input:is([type="submit"], [type="button"]).button,
.gform_wrapper.gform-theme.gform-theme--framework
	.gform_page_footer
	button.button {
	min-inline-size: var(--kd-btn-min-w);
}

/* Wizard footer: Back sits beside the final submit, on one line.
   The 180px floor above exists so a LONE button is never stubby. Back is
   never alone — it always pairs with Next or Submit — and at 180px it pushed
   a wizard's last row to 599px inside a 595px footer, so the
   submit wrapped by 4px. Back falls back to its natural width (~85px) here;
   at phone widths the long submit still takes the full row, which is fine. */
.gform_wrapper.gform-theme.gform-theme--framework
	.gform_page_footer
	input.gform_previous_button.button {
	min-inline-size: 0;
}

/* Select: the selected option's text was clipped at the bottom.
   `gform_default_styles` sets inputSize `lg`, so GF fixes every control at
   `--gf-ctrl-size` (47px), while the padding above (0.85rem, from forms.css)
   was sized for auto-height fields: 47 − 2×2 border − 2×13.6 padding leaves a
   15.8px content box for 24px of text. Text inputs hide this; a <select>
   clips to its content box. Derive the padding from the box instead, leaving
   exactly one line box, so the text sits centred and survives a size change. */
.gform_wrapper.gform-theme.gform-theme--framework select {
	padding-block: max(
		0px,
		calc((var(--gf-ctrl-size) - 2 * var(--gf-ctrl-border-width) - 1lh) / 2)
	);
}