/* ============================================================
   Dot Experience — Gravity Forms
   ============================================================
   Restyles Gravity Forms' front-end output (e.g. the Group &
   Special Ticket Requests form) using this theme's design tokens
   (assets/css/tokens.css) so an embedded form reads as part of the
   site, not a stock plugin drop-in.

   STRATEGY — override GF's own variables, don't fight its CSS.
   Gravity Forms 2.7+ ships the "Orbital" theme framework, which is
   built entirely on documented CSS custom properties (--gf-*). Every
   input/label/button/error rule GF ships CONSUMES one of those
   properties. So instead of re-declaring dozens of concrete rules with
   escalating specificity, we redefine the handful of --gf-* values GF
   derives everything else from. GF's own rules then paint the form in
   our tokens.

   Because every value below resolves to a token (--ink, --accent,
   --line, --bg, --muted, --placeholder-base, --focus, --r-sm), the
   form re-themes automatically with the accessibility-preferences
   plugin's [data-theme] switch (default / high-contrast / dark) — no
   per-theme block is needed here. Note that in all three variants
   --accent and --ink resolve to the same value (jet on light,
   off-white on dark); the theme is a strictly monochrome model, so
   errors below are expressed monochromatically too — see the
   error/validation block.

   WHY !important ON THE VARIABLE OVERRIDES.
   Gravity Forms emits a per-form "appearance" block as an inline
   <style> scoped by form ID, e.g.
     #gform_wrapper_1[data-form-index="0"].gform-theme { --gf-color-primary: … }
   That selector's specificity is (1,2,0) — an ID — which no general,
   form-agnostic theme selector can out-specify without hard-coding a
   form ID. It re-declares a large subset of the framework variables
   (primary/secondary colours, control sizes, border colour, label
   colours, …), and different forms emit different subsets depending on
   their appearance settings. Marking our overrides !important is the
   only form-agnostic way to make the design system win over that inline
   block for every form, present and future. GF's own declarations are
   all normal (never !important — verified in 2.10.5), so a single
   !important here wins cleanly. This mirrors this theme's existing,
   justified !important use elsewhere (base.css disabled-button contrast
   fix, footer/mini-cart colour overrides).

   SCOPE — everything is under .gform_wrapper.gform-theme, so this never
   touches WooCommerce checkout fields, the site search input, or any
   other form on the site.

   LOADING — enqueued conditionally (only when a form renders) via GF's
   gform_enqueue_scripts action; see dot_experience_gravityforms_styles()
   in functions.php. tokens.css is loaded globally on every page, so the
   token references below always resolve.
   ============================================================ */

.gform_wrapper.gform-theme {
	/* ---- Typography: inherit the theme's Inter stack, not GF's default ---- */
	--gf-ctrl-font-family: inherit !important;
	--gf-ctrl-btn-font-family: inherit !important;
	--gf-ctrl-label-font-family-primary: inherit !important;
	--gf-ctrl-label-font-family-secondary: inherit !important;
	--gf-ctrl-label-font-family-req: inherit !important;
	--gf-ctrl-desc-font-family: inherit !important;
	--gf-form-validation-font-family: inherit !important;
	--gf-form-validation-heading-font-family: inherit !important;
	--gf-form-validation-summary-font-family: inherit !important;

	/* ---- Primary accent: drives the submit button + focus accents ----
	   GF derives --gf-ctrl-btn-bg-color-primary / -color-primary from
	   these, so the submit button picks up the site's jet-black pill fill
	   and its off-white label from one place. */
	--gf-color-primary: var(--accent) !important;
	--gf-color-primary-contrast: var(--accent-ink) !important;
	--gf-color-primary-darker: var(--ink) !important;
	--gf-color-primary-lighter: var(--ink) !important;

	/* ---- Inputs: text / email / tel / number / date / textarea / select ----
	   --bg fill and --ink text match the classic My Account fields
	   (woocommerce-myaccount.css); --r-sm (12px) radius matches the theme's
	   input radius role. The resting border is --muted, NOT the 8%-opacity
	   --line hairline: an input whose fill (--bg) equals the page background
	   is identified by its border, so that border must clear WCAG 1.4.11's
	   3:1 non-text-contrast minimum. --muted clears it in all three themes
	   (~3.6:1 default, ~16:1 high-contrast, ~7:1 dark); --line and GF's own
	   default grey (which fails on the dark theme) do not. */
	--gf-ctrl-bg-color: var(--bg) !important;
	--gf-ctrl-color: var(--ink) !important;
	--gf-ctrl-bg-color-focus: var(--bg) !important;
	--gf-ctrl-border-color: var(--muted) !important;
	--gf-ctrl-border-color-hover: var(--ink) !important;
	--gf-ctrl-border-color-focus: var(--focus) !important;
	--gf-ctrl-border-width: 1px !important;
	--gf-ctrl-radius: var(--r-sm) !important;
	--gf-ctrl-accent-color: var(--accent) !important; /* checked radio / checkbox fill */

	/* Comfortable, touch-friendly control height — sets both the text-input
	   min-height and the submit button min-height (well above the 24px WCAG
	   2.2 minimum target size, and matching the generous feel of the site's
	   other CTAs). Radios/checkboxes have their own size tokens and are
	   unaffected. */
	--gf-ctrl-size-md: 44px !important;

	/* ---- Labels + field descriptions ----
	   Plain sentence-case ink labels, weight 600 — matching this theme's
	   real form labels (My Account form-row labels / fieldset legends),
	   NOT the uppercase section-eyebrow style (which would hurt per-field
	   scannability). Descriptions use --muted. */
	--gf-ctrl-label-color-primary: var(--ink) !important;
	--gf-ctrl-label-color-secondary: var(--ink) !important;
	--gf-ctrl-label-font-weight-primary: 600 !important;
	--gf-ctrl-label-font-weight-secondary: 600 !important;
	--gf-ctrl-desc-color: var(--muted) !important;

	/* ---- Submit button: the site's black pill CTA ----
	   Same treatment as base.css's .button / the hero + product-card CTAs:
	   fully round (9999px), --accent fill, --accent-ink label, 1.5px accent
	   border, weight 500. Hover keeps the fill stable (matching the rest of
	   the site, whose --accent and --ink are identical — press feedback is
	   the :active scale, added as a targeted rule below); a colour-shift
	   hover would be a visual no-op in every theme variant. */
	--gf-ctrl-btn-radius: 9999px !important;
	--gf-ctrl-btn-font-weight: 500 !important;
	--gf-ctrl-btn-padding-x-md: 1.75rem !important;
	--gf-ctrl-btn-bg-color-primary: var(--accent) !important;
	--gf-ctrl-btn-color-primary: var(--accent-ink) !important;
	--gf-ctrl-btn-border-color-primary: var(--accent) !important;
	--gf-ctrl-btn-border-width-primary: 1.5px !important;
	--gf-ctrl-btn-bg-color-hover-primary: var(--ink) !important;
	--gf-ctrl-btn-color-hover-primary: var(--accent-ink) !important;
	--gf-ctrl-btn-border-color-hover-primary: var(--ink) !important;
	--gf-ctrl-btn-bg-color-focus-primary: var(--accent) !important;
	--gf-ctrl-btn-color-focus-primary: var(--accent-ink) !important;
	--gf-ctrl-btn-border-color-focus-primary: var(--accent) !important;

	/* ---- Error / validation: monochrome, matching .woocommerce-error ----
	   This theme is strictly monochrome and has no red token, so errors are
	   expressed without hue — the same choice My Account's notices already
	   make. Correctness comes from redundant, non-colour signals per WCAG
	   1.4.1: GF's own inline message text, aria-invalid on the field, a
	   solid (not hairline) border on the errored input, bold error text, and
	   the summary alert box — never colour alone.

	   Remapping --gf-color-danger re-tokenizes GF's derived error values in
	   one move: the required asterisk (--gf-ctrl-label-color-req), the
	   errored input border (--gf-ctrl-border-color-error), and the per-field
	   error text (--gf-ctrl-desc-color-error) all follow --gf-color-danger.
	   The summary alert box is then overridden explicitly for a crisp,
	   assertive monochrome callout (GF's auto-derived faint red tints read
	   too weak and would fail contrast on the dark theme). */
	--gf-color-danger: var(--ink) !important;
	--gf-color-danger-contrast: var(--bg) !important;
	--gf-form-validation-bg-color: var(--placeholder-base) !important;
	--gf-form-validation-color: var(--ink) !important;
	--gf-form-validation-border-color: var(--ink) !important;
	--gf-form-validation-border-width: 1px !important;
	--gf-form-validation-radius: var(--r-sm) !important;
	--gf-form-validation-heading-color: var(--ink) !important;
	--gf-form-validation-heading-icon-bg-color: var(--ink) !important;
	--gf-form-validation-heading-icon-color: var(--bg) !important;
	--gf-form-validation-heading-icon-border-color: var(--ink) !important;
	--gf-form-validation-summary-color: var(--ink) !important;
	--gf-form-validation-outline-color-focus: var(--focus) !important;
}

/* ============================================================
   Targeted rules — where a token override can't reach a value.
   Prefixed with .gform_wrapper.gform-theme (0,2,0) so they win over
   GF's framework descendant rules; the per-form ID block only sets
   variables (handled above), never these concrete properties, so no
   !important is needed here.
   ============================================================ */

/* Form title / description, when the embed block chooses to render them. */
.gform_wrapper.gform-theme .gform_heading .gform_title {
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: var(--letter-spacing-display);
	color: var(--ink);
}

.gform_wrapper.gform-theme .gform_heading .gform_description {
	color: var(--muted);
}

/* Pill-button hover + press feedback, matching base.css's .btn/.button.
   GF renders its submit as a plain <button>/<input> (no .button class),
   so it's outside base.css's button family and needs the shared lift
   stated here. */
.gform_wrapper.gform-theme .gform_footer button,
.gform_wrapper.gform-theme .gform_footer input[type="submit"],
.gform_wrapper.gform-theme .gform_page_footer button,
.gform_wrapper.gform-theme .gform_page_footer input[type="submit"] {
	transition:
		transform var(--motion-med) var(--ease),
		background-color var(--motion-med) var(--ease),
		color var(--motion-med) var(--ease),
		border-color var(--motion-med) var(--ease);
}

/* Shared 2px hover lift (reduced-motion-gated, same as base.css). */
@media (prefers-reduced-motion: no-preference) {
	.gform_wrapper.gform-theme .gform_footer button:hover,
	.gform_wrapper.gform-theme .gform_footer input[type="submit"]:hover,
	.gform_wrapper.gform-theme .gform_page_footer button:hover,
	.gform_wrapper.gform-theme .gform_page_footer input[type="submit"]:hover {
		transform: translateY(-2px);
	}
}

html[data-motion="reduce"] .gform_wrapper.gform-theme .gform_footer button:hover,
html[data-motion="reduce"] .gform_wrapper.gform-theme .gform_footer input[type="submit"]:hover,
html[data-motion="reduce"] .gform_wrapper.gform-theme .gform_page_footer button:hover,
html[data-motion="reduce"] .gform_wrapper.gform-theme .gform_page_footer input[type="submit"]:hover {
	transform: none !important;
}

.gform_wrapper.gform-theme .gform_footer button:active,
.gform_wrapper.gform-theme .gform_footer input[type="submit"]:active,
.gform_wrapper.gform-theme .gform_page_footer button:active,
.gform_wrapper.gform-theme .gform_page_footer input[type="submit"]:active {
	transform: scale(0.98);
}

/* Placeholder text → --muted, matching the site search input. */
.gform_wrapper.gform-theme input::placeholder,
.gform_wrapper.gform-theme textarea::placeholder {
	color: var(--muted);
	opacity: 1;
}

/* Textarea: match the inputs' --r-sm (12px) radius. GF clamps multiline
   controls to a smaller max radius than single-line ones, so raising
   --gf-ctrl-radius alone leaves the textarea a few px tighter than its
   siblings; set it directly for a consistent field family. */
.gform_wrapper.gform-theme textarea {
	border-radius: var(--r-sm);
}

/* Errored field: a solid 2px --ink border (the resting border is a lighter
   --muted, so this is an unmistakable, non-colour-dependent change)
   reinforcing GF's inline message + aria-invalid. */
.gform_wrapper.gform-theme .gfield_error input,
.gform_wrapper.gform-theme .gfield_error select,
.gform_wrapper.gform-theme .gfield_error textarea {
	border-width: 2px;
	border-color: var(--ink);
}

/* Error text and the top-of-form validation summary: bold, so the alert
   never relies on colour alone (WCAG 1.4.1). */
.gform_wrapper.gform-theme .gfield_validation_message,
.gform_wrapper.gform-theme .gform_validation_errors {
	font-weight: 600;
}

/* Keyboard focus: match the site's global :focus-visible affordance
   (base.css) at the 3px weight, in case GF's control styling would
   otherwise soften it on any field or the submit button. */
.gform_wrapper.gform-theme input:focus-visible,
.gform_wrapper.gform-theme select:focus-visible,
.gform_wrapper.gform-theme textarea:focus-visible,
.gform_wrapper.gform-theme button:focus-visible,
.gform_wrapper.gform-theme .gform_footer input[type="submit"]:focus-visible,
.gform_wrapper.gform-theme .gform_page_footer input[type="submit"]:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
}