/* ==========================================================================
   Gravity Forms — R/West orbital-theme reskin
   --------------------------------------------------------------------------
   TWO LAYERS:

   1. BASE — `.rwest-gform_wrapper` (any form whose GF "CSS Class Name" includes
      `rwest-gform`). The R/West house form treatment: dark surface controls,
      brand submit button, Roboto body / Prata section headings, uppercase
      labels, square inputs, focus states. An admin can build a brand-new form
      in the GF editor, set its CSS Class Name to `rwest-gform`, and get the full
      on-brand look with zero developer CSS. Multi-column layouts come from GF's
      native per-field width control (50%/33%); this base just supplies the grid
      gaps. Section headings (core/section fields) auto-render as Prata + divider.

   2. PER-FORM — `.rwest-gform-newbiz_wrapper` (form CSS class
      `rwest-gform rwest-gform-newbiz`). Only genuinely bespoke pieces the base
      can't express generically: the 2-up checkbox grid (an opt-in field class)
      and the reassurance note under the submit button. Other designed forms
      (Contact, Newsletter) carry `rwest-gform` + their own per-form class for
      their bespoke bits, layered the same way.

   GF emits `_wrapper`-suffixed classes per cssClass token, so a form with
   `rwest-gform rwest-gform-newbiz` yields a wrapper carrying BOTH
   `rwest-gform_wrapper` and `rwest-gform-newbiz_wrapper`.

   WHY !important on the custom-property layer: GF emits a PER-FORM inline
   \3c style> block re-declaring the orbital palette + control vars at
   `#gform_wrapper_<id>[data-form-index="N"].gform-theme` — specificity 1,2,0
   (an ID), which a reusable, form-id-agnostic class selector cannot beat. GF's
   inline declarations are NOT !important, so an !important override layer wins
   cleanly and stays reusable across every R/West form. (Same mechanism
   patterns.css already uses to override WP preset color classes.) `--gf-*`
   custom-property assignments are override tokens, not element styles.

   Surface note: the reskin styles the form INTERNALS for a dark surface
   (inputs/labels/text assume a dark backdrop). The dark page background itself
   is supplied by the surrounding section the form is placed in (e.g.
   `is-style-dark`); the reskin paints no page background, so it stays portable.

   Tokens only (see design-tokens rule). Allowed literals per css-conventions:
   letter-spacing (no token mechanism), border-width 1px/2px (no token family),
   the `--gf-ctrl-size` control height (a structural dimension), the label
   0.85rem (untokenizable, matches the design), and the checkbox-collapse
   threshold (a layout threshold, not a design token).
   ========================================================================== */

/* stylelint-disable selector-class-pattern -- this file targets Gravity Forms'
   third-party markup, whose class names are snake_case (gform_fields,
   gfield_label, gsection_title, gchoice, gfield_checkbox, gform_footer, …) and
   cannot be renamed to our BEM/kebab convention. Our own hooks stay on-pattern
   (rwest-gf-checkgrid); rwest-gform_wrapper / rwest-gform-newbiz_wrapper are GF
   appending `_wrapper` to our form CSS classes. */

/* ══════════════════════════════════════════════════════════════════════════
   BASE LAYER — `.rwest-gform_wrapper` (the R/West house form treatment)
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── Orbital custom-property overrides ──────────────────────────────────── */

/* stylelint-disable declaration-no-important -- override layer must beat GF's
   per-form inline \3c style> at ID specificity (1,2,0); see file header. */
.rwest-gform_wrapper {
	/* Accent / primary — drives focus rings, the required marker, accents.
	   -rgb is set too so GF's rgba() focus glows use brand-aa, not orbital blue. */
	--gf-color-primary: var(--wp--preset--color--brand-aa) !important;
	--gf-color-primary-rgb: 214, 58, 45 !important;
	--gf-color-primary-contrast: var(--wp--preset--color--pure-white) !important;
	--gf-color-primary-contrast-rgb: 255, 255, 255 !important;

	/* Text inputs + textarea (controls) */
	--gf-ctrl-bg-color: color-mix(in srgb, var(--wp--preset--color--pure-white) 6%, transparent) !important;
	--gf-ctrl-bg-color-hover: color-mix(in srgb, var(--wp--preset--color--pure-white) 6%, transparent) !important;
	--gf-ctrl-bg-color-focus: color-mix(in srgb, var(--wp--preset--color--pure-white) 6%, transparent) !important;
	--gf-ctrl-border-color: color-mix(in srgb, var(--wp--preset--color--pure-white) 20%, transparent) !important;
	--gf-ctrl-border-color-hover: color-mix(in srgb, var(--wp--preset--color--pure-white) 35%, transparent) !important;
	--gf-ctrl-border-color-focus: var(--wp--preset--color--brand-aa) !important;
	--gf-ctrl-border-width: 1px !important;
	--gf-ctrl-border-style: solid !important;
	--gf-ctrl-color: var(--wp--preset--color--pure-white) !important;
	--gf-ctrl-radius: 0 !important;
	--gf-ctrl-font-family: var(--wp--preset--font-family--roboto) !important;
	--gf-ctrl-font-size: var(--wp--preset--font-size--body-md) !important;
	--gf-ctrl-line-height: 1.5 !important;
	--gf-ctrl-padding-y: var(--wp--preset--spacing--3) !important;
	--gf-ctrl-padding-x: var(--wp--preset--spacing--4) !important;

	/* Control height: orbital pins inputs/selects to a fixed --gf-ctrl-size
	   (default rendered ~38px), which clamps them shorter than the design's
	   content-driven 50px (padding 12+12 + line-height 24 + border 2). Match 50px.
	   A structural control dimension, not a design token — allowed literal. */
	--gf-ctrl-size: 50px !important;

	/* Checkbox / radio accent + check color */
	--gf-ctrl-accent-color: var(--wp--preset--color--brand-aa) !important;
	--gf-ctrl-choice-check-color: var(--wp--preset--color--pure-white) !important;

	/* Field labels (primary = top label) */
	--gf-ctrl-label-font-family-primary: var(--wp--preset--font-family--roboto) !important;

	/* 0.85rem (13.6px): matches the design target verbatim (wireframe
	   NewBusiness.css line 113). No WP font-size token maps to 0.85rem (nearest
	   body-xs 0.75rem / body-sm 0.875rem); allowed untokenizable literal. */
	--gf-ctrl-label-font-size-primary: 0.85rem !important;

	/* 80% (≈ rgb 206 on the dark surface) matches the design label's solid
	   #ccc (rgb 204). */
	--gf-ctrl-label-color-primary: color-mix(in srgb, var(--wp--preset--color--pure-white) 80%, transparent) !important;
	--gf-ctrl-label-letter-spacing-primary: 0.05em !important;
	--gf-ctrl-label-line-height-primary: 1.4 !important;

	/* Choice labels (checkbox/radio option text) */
	--gf-ctrl-label-color-secondary: color-mix(in srgb, var(--wp--preset--color--pure-white) 87%, transparent) !important;
	--gf-ctrl-label-font-family-secondary: var(--wp--preset--font-family--roboto) !important;
	--gf-ctrl-label-font-size-secondary: var(--wp--preset--font-size--body-md) !important;

	/* Required marker uses the muted label tone, not a loud accent */
	--gf-ctrl-label-color-req: color-mix(in srgb, var(--wp--preset--color--pure-white) 55%, transparent) !important;

	/* Submit button — brand-aa fill, square, uppercase Roboto. Both the `ctrl`
	   (default submit) and `primary` button variants are pinned so we win
	   whichever orbital maps the submit input to. */
	--gf-ctrl-btn-bg-color-ctrl: var(--wp--preset--color--brand-aa) !important;
	--gf-ctrl-btn-bg-color-hover-ctrl: var(--wp--preset--color--brand) !important;
	--gf-ctrl-btn-bg-color-focus-ctrl: var(--wp--preset--color--brand) !important;
	--gf-ctrl-btn-color-ctrl: var(--wp--preset--color--pure-white) !important;
	--gf-ctrl-btn-color-hover-ctrl: var(--wp--preset--color--pure-white) !important;
	--gf-ctrl-btn-color-focus-ctrl: var(--wp--preset--color--pure-white) !important;
	--gf-ctrl-btn-border-width-ctrl: 0 !important;
	--gf-ctrl-btn-bg-color-primary: var(--wp--preset--color--brand-aa) !important;
	--gf-ctrl-btn-bg-color-hover-primary: var(--wp--preset--color--brand) !important;
	--gf-ctrl-btn-bg-color-focus-primary: var(--wp--preset--color--brand) !important;
	--gf-ctrl-btn-color-primary: var(--wp--preset--color--pure-white) !important;
	--gf-ctrl-btn-color-hover-primary: var(--wp--preset--color--pure-white) !important;
	--gf-ctrl-btn-border-width-primary: 0 !important;
	--gf-ctrl-btn-font-family: var(--wp--preset--font-family--roboto) !important;
	--gf-ctrl-btn-font-size: var(--wp--preset--font-size--body-md) !important;
	--gf-ctrl-btn-font-weight: 500 !important;
	--gf-ctrl-btn-text-transform: uppercase !important;
	--gf-ctrl-btn-letter-spacing: 0.06em !important;
	--gf-ctrl-btn-radius: 0 !important;
	--gf-ctrl-btn-padding-y: var(--wp--preset--spacing--4) !important;
	--gf-ctrl-btn-padding-x: var(--wp--preset--spacing--10) !important;
}
/* stylelint-enable declaration-no-important */

/* ─── Field grid rhythm ──────────────────────────────────────────────────── */

/* In-group vertical rhythm = spacing-6 (24px); columns (GF native field widths)
   spacing-5 apart. Selector carries the wrapper's `.gform-theme--framework`
   class to outrank orbital's own grid-gap rule (GF default 40px/16px). */
.gform-theme--framework.rwest-gform_wrapper .gform_fields {
	gap: var(--wp--preset--spacing--6) var(--wp--preset--spacing--5);
}

/* ─── Section fields → Prata headings + group dividers ───────────────────── */

/* GF sections are flat dividers in the field grid (they don't wrap their
   following fields), so groups are delineated by a Prata heading + a top rule,
   not a bordered box. Targets GF's native `.gsection` so ANY section in a
   base-class form gets the treatment with no per-field class. The grid row-gap
   (24px) separates the rule from the previous field; padding-top (16px) sets the
   rule→heading gap — total prev-field→heading ≈ 40px. */
.rwest-gform_wrapper .gsection {
	margin-top: 0;
	padding-top: var(--wp--preset--spacing--4);
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--pure-white) 18%, transparent);
}

/* First section opens the form — no divider/extra space above it. */
.rwest-gform_wrapper .gform_fields > .gsection:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.rwest-gform_wrapper .gsection_title {
	font-family: var(--wp--preset--font-family--prata);

	/* body-xl (1.25rem ≈ 20px) matches the design legend; heading-sm (1.5rem,
	   fluid) rendered ~23px and read too large. */
	font-size: var(--wp--preset--font-size--body-xl);
	font-weight: 400; /* Prata ships 400 only — avoid faux-bold */
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--pure-white);
	margin: 0;
}

/* ─── Labels: uppercase (orbital labels are sentence-case) ───────────────── */

.rwest-gform_wrapper .gfield_label {
	text-transform: uppercase;
}

/* Choice option text is sentence-case, not uppercase — undo the inherit. */
.rwest-gform_wrapper .gchoice label,
.rwest-gform_wrapper .gform-field-label--type-inline {
	text-transform: none;
	letter-spacing: normal;
}

/* ─── Textarea height ────────────────────────────────────────────────────── */

/* Give textareas a comfortable default min-height (orbital leaves them at the
   rows-driven default, often short) and keep them vertically resizable. */
.rwest-gform_wrapper textarea.gform-control,
.rwest-gform_wrapper .gfield textarea {
	min-height: 9rem;
	resize: vertical;
}

/* ─── Footer: center the submit button + drop the orbital divider ────────── */

.rwest-gform_wrapper .gform_footer {
	justify-content: center;
	flex-direction: column;
	align-items: center;
	border-top: 0;
	margin-top: var(--wp--preset--spacing--4);
}

/* ─── Reassurance note under the submit button ───────────────────────────── */

/* Injected after the submit button by the gform_submit_button filter
   (inc/setup.php) on forms whose design has one (New Business, Contact).
   Base-level so any R/West form's note styles identically. */
.rwest-gform_wrapper .rwest-gform__note {
	margin: var(--wp--preset--spacing--3) 0 0;
	font-family: var(--wp--preset--font-family--roboto);
	font-size: var(--wp--preset--font-size--body-xs);
	color: color-mix(in srgb, var(--wp--preset--color--pure-white) 65%, transparent);
	text-align: center;
}

/* ══════════════════════════════════════════════════════════════════════════
   PER-FORM LAYER — New Business (`.rwest-gform-newbiz_wrapper`)
   Bespoke pieces the generic base can't express. Other designed forms add
   their own `.rwest-gform-<name>_wrapper` block the same way.
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── Checkbox grid: 2-up, collapsing to 1 column on narrow viewports ────── */

/* Opt-in via the `rwest-gf-checkgrid` field CSS class (not every checkbox field
   should be 2-up). auto-fit is avoided so the count is a fixed 2; collapse is a
   viewport @media (the form sits in a full-bleed section, so viewport ≈ field
   width). Selector carries `.gform-theme--framework` to outrank orbital's
   `.gfield--type-choice .gfield_checkbox` (0,3,0) `display:flex`. */
.gform-theme--framework.rwest-gform-newbiz_wrapper .rwest-gf-checkgrid .gfield_checkbox {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4);
}

@media (width <= 48rem) {
	.gform-theme--framework.rwest-gform-newbiz_wrapper .rwest-gf-checkgrid .gfield_checkbox {
		grid-template-columns: 1fr;
	}
}