/**
 * css/components/forms.css — Website 2.0 form controls (#54, #158, #164)
 *
 * #122 already shipped the button component (css/components/button.css,
 * `.cg-btn`/`.cg-link`) — not duplicated here. This file covers Gravity
 * Forms field polish (via the `--form-element-*`/`--font-body` tokens
 * repointed to the CG palette in #121) + the `:focus-visible` ring + 44px
 * mobile tap targets + (#158/#164) the validation/error state, restrained
 * to small inline rust (`--accent`) text on every surface instead of GF's
 * default oversized cream/white error blocks. The GF submit-button
 * appearance fix (dropping a hardcoded `border-radius: 4px` + an 18px
 * font-size override) lives as companion edits directly on the conflicting
 * legacy rules in theme.css (`.sidebar-form`/`.bar-form … input[type=submit]`).
 *
 * Scoped as `.gform_wrapper .gfield …` (not bare `input[type]`) so GF's own
 * structural CSS isn't fought — this only touches border/font/focus, never
 * layout. Text/background *colour* for the field controls themselves is
 * deliberately left untouched here: the gff-contact popup (form id 4,
 * every page except /contact-us/) renders the same GF markup on a dark
 * panel via its own plugin CSS (wp-content/plugins/gff-contact/assets/css/
 * gff-contact-popup.css) — an ink-on-dark override here would make typed
 * text unreadable there. The validation/error rules below are the
 * exception: `--accent` (rust) reads on both cream and ink (same pattern
 * already used by css/components/footer.css `.cg-footer__links a:hover`
 * and band.css eyebrows), so they're safe to set once, globally.
 *
 * Cascade note: Gravity Forms' own stylesheets (gravityforms/assets/css/
 * dist/{basic,theme-components,theme}.min.css) are enqueued LAST — after
 * lrxd-theme.css — so every validation-state override below matches or
 * exceeds GF's own `.gform_wrapper.gravity-theme <class>` specificity
 * (never relying on cascade order, per the project's no-`!important` rule).
 *
 * Surfaces exercised: /contact-us/ (.sidebar-form), the footer subscribe
 * (.bar-form), the gff-contact popup (form id 4), event sidebar forms
 * (.sidebar-form, single-event.php).
 *
 * Tokens only — no raw hex, no @layer, no !important.
 */

/* ─── Text-like inputs + textarea ───────────────────────────────────── */

.gform_wrapper .gfield input[type="text"],
.gform_wrapper .gfield input[type="email"],
.gform_wrapper .gfield input[type="tel"],
.gform_wrapper .gfield input[type="number"],
.gform_wrapper .gfield input[type="url"],
.gform_wrapper .gfield input[type="password"],
.gform_wrapper .gfield textarea {
	border-bottom: var( --hairline ) solid var( --form-element-border-color );
	font-family: var( --font-body );
	font-weight: 400;
	min-height: var( --form-element-height );
	transition: border-color var( --fade-out ) var( --fade-ease );
}

.gform_wrapper .gfield textarea {
	min-height: calc( var( --form-element-height ) * 2 );
}

.gform_wrapper .gfield input[type="text"]:focus,
.gform_wrapper .gfield input[type="email"]:focus,
.gform_wrapper .gfield input[type="tel"]:focus,
.gform_wrapper .gfield input[type="number"]:focus,
.gform_wrapper .gfield input[type="url"]:focus,
.gform_wrapper .gfield input[type="password"]:focus,
.gform_wrapper .gfield textarea:focus {
	border-bottom-color: var( --form-element-focus-border-color );
}

/* ─── jcf-replaced <select> (the control actually visible — js/jquery.main.js `initCustomForms`) ── */

.jcf-select .jcf-select-opener::before {
	color: var( --accent );
}

.jcf-select.jcf-drop-active,
.jcf-select:focus-within {
	border-bottom-color: var( --form-element-focus-border-color );
}

/* ─── Checkboxes (consent field etc.) — jcf-replaced ────────────────── */

.jcf-checkbox {
	border-color: var( --form-element-border-color );
}

.jcf-checkbox.jcf-checked {
	background: var( --accent );
}

/*
 * #208: defensive fallback only. The actual "purple consent checkbox" bug
 * was a hardcoded #ba95ea on `.sidebar-form .jcf-checkbox` (theme.css),
 * fixed there. This rule additionally covers the case where jcf never wraps
 * the checkbox at all (leaving a bare native input as a DIRECT child of
 * .ginput_container_consent) — it styles that native box to the same neutral
 * token, so it's a no-op wherever jcf succeeds (the box is nested, not a
 * direct child) including the fly-out.
 */
.gform_wrapper .ginput_container_consent > input[type="checkbox"] {
	accent-color: var( --form-element-border-color );
	border: var( --hairline ) solid var( --form-element-border-color );
}

/* 44px minimum tap target (WCAG 2.5.5) without inflating the visual
   checkbox — the label is the actual hit area. */
.gform_wrapper .ginput_container_consent label {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	cursor: pointer;
}

/* ─── Focus-visible ring — every interactive form control, ≥3:1 contrast
   against both cream and ink surfaces (rust accent). ─────────────────── */

.gform_wrapper .gfield input:focus-visible,
.gform_wrapper .gfield textarea:focus-visible,
.gform_wrapper .gfield select:focus-visible,
.jcf-select:focus-within,
.jcf-checkbox:focus-within {
	outline: 2px solid var( --accent );
	outline-offset: 2px;
}

/* ─── Labels + required marker (#164) ───────────────────────────────── */

.gform_wrapper .gfield_label,
.gform_wrapper legend.gfield_label {
	font-family: var( --font-sans );
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --text );
}

/* Chained on both classes the element actually carries in the DOM
   (`class="gfield_required gfield_required_asterisk"`) so this matches
   GF's own `.gform_wrapper.gravity-theme .gfield_required` (3 classes)
   at 4 classes — see the cascade note above re: no `!important`. */
.gform_wrapper.gravity-theme .gfield_required.gfield_required_asterisk {
	color: var( --accent );
}

/* ─── Validation / error states (#158, #164) ────────────────────────────
 * GF's default (theme.min.css) renders per-field messages as a full-width
 * cream/white block with a red border, and the top summary as a padded,
 * radiused, box-shadowed card with a 48px icon gutter — both restrained
 * here to small inline `--accent` (rust) text, on every band.
 *
 * Every GF selector being overridden is itself prefixed
 * `.gform_wrapper.gravity-theme` (verified against the shipped
 * gravityforms/assets/css/dist/*.min.css — not the truncated selectors a
 * naive grep on the minified file suggests), so every rule below chains
 * enough extra real DOM classes (never an invented one) to exceed it —
 * several add `.gform_validation_error`, the class GF itself puts on
 * `.gform_wrapper` only while a validation error is showing. ──────────── */

/* Per-field inline message — kills GF's block treatment. (0,5,0) vs GF's
   `.gform_wrapper.gravity-theme .validation_message` (0,3,0). */
.gform_wrapper.gravity-theme .gfield_description.validation_message.gfield_validation_message {
	background: transparent;
	border: 0;
	color: var( --accent );
	font-family: var( --font-body );
	font-weight: 400;
	font-size: 13px;
	line-height: 1.4;
	margin-block-start: 6px;
	padding: 0;
	width: auto;
}

/* Label/legend colour GF applies to an errored field. (0,4,0)/(0,4,1) vs
   GF's `.gform_wrapper.gravity-theme .gfield_error label`/`legend` (0,3,1). */
.gform_wrapper.gravity-theme .gfield_error .gfield_label,
.gform_wrapper.gravity-theme .gfield_error legend.gfield_label {
	color: var( --accent );
}

/* Invalid control — a thin bottom-border highlight instead of GF's full
   1px box-border (matches the underline treatment every text input
   already uses above). (0,5,0) vs GF's exact-selector tie at (0,4,0). */
.gform_wrapper.gravity-theme.gform_validation_error .gfield_error [aria-invalid="true"] {
	border: 0;
	border-bottom: var( --hairline ) solid var( --accent );
}

/* Top validation summary — restrained to a plain accent-bordered strip.
   (0,4,0) vs GF's exact-selector tie at (0,3,0). */
.gform_wrapper.gravity-theme.gform_validation_error .gform_validation_errors {
	background: transparent;
	border: var( --hairline ) solid var( --accent );
	border-radius: 0;
	box-shadow: none;
	padding: 14px 20px;
	width: 100%;
}

/* (0,5,1) vs GF's highest `>h2.hide_summary` variant at (0,4,1). */
.gform_wrapper.gravity-theme.gform_validation_error .gform_validation_errors > h2.gform_submission_error {
	color: var( --accent );
	font-family: var( --font-body );
	font-weight: 500;
	font-size: 13px;
	letter-spacing: normal;
	text-transform: none;
	margin: 0;
	padding-inline-start: 26px;
}

/* (0,5,1) vs GF's `>h2 .gform-icon` at (0,4,1). */
.gform_wrapper.gravity-theme.gform_validation_error .gform_validation_errors > h2 .gform-icon {
	color: var( --accent );
	font-size: 16px;
	inset-inline-start: 0;
}

.gform_wrapper.gravity-theme.gform_validation_error .gform_validation_errors ol {
	margin: 8px 0 0;
	padding-inline-start: 20px;
}

/* (0,4,2) vs GF's `>ol li`/`>ol a` at (0,3,2). */
.gform_wrapper.gravity-theme.gform_validation_error .gform_validation_errors ol li,
.gform_wrapper.gravity-theme.gform_validation_error .gform_validation_errors ol a {
	color: var( --accent );
	font-family: var( --font-body );
	font-size: 13px;
}

.gform_wrapper.gravity-theme.gform_validation_error .gform_validation_errors:focus {
	outline-color: var( --accent );
}