/* =========================================================
   GRAVITY FORMS — Geodesign design-system mapping
   =========================================================
   Maps GF's class hooks (.gform_wrapper, .gfield, .gfield_label,
   .gfield_required, .gform_button) to the same visual language as
   the reference .form-field / .hero__form-card styling.

   Scope: applied globally to every .gform_wrapper on the site so
   all 3 form-using blocks (hero-form, ready-section, page-hero-
   form-led) inherit consistently. No block-scoping needed.

   Targets GF 2.5+ markup (uses div.gform_fields > div.gfield,
   not legacy ul/li). Verified against GF 2.10.1.1.

   Loaded conditionally — see inc/enqueue-gravityforms.php.
   ========================================================= */

/* -------- Wrapper reset -------- */
.gform_wrapper,
.gform_wrapper.gravity-theme {
	width: 100%;
	margin: 0;
}

/* -------- Field list — flatten to flex column, no list bullets -------- */
.gform_wrapper .gform_fields {
	display: flex;
	flex-direction: column;
	gap: 0;
	list-style: none;
	padding: 0;
	margin: 0;
}

/* -------- Field — white pill with focus-within ring -------- */
.gform_wrapper .gfield {
	background: var(--color-white);
	padding: var(--space-3);
	margin-bottom: var(--space-2);
	border: 2px solid transparent;
	border-radius: 0;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gform_wrapper .gfield:focus-within {
	border-color: var(--color-yellow);
	box-shadow: 0 0 0 2px rgba(255, 255, 0, 0.3);
}

/* Hidden / honeypot fields shouldn't get pill styling. */
.gform_wrapper .gfield--type-hidden,
.gform_wrapper .gform_validation_container,
.gform_wrapper .gfield_honeypot {
	background: none;
	padding: 0;
	margin: 0;
	border: none;
}

/* -------- Labels — uppercase navy, 10px weight 700 -------- */
.gform_wrapper .gfield_label,
.gform_wrapper .gform-field-label {
	display: block;
	font-size: 10px;
	font-weight: 700;
	color: var(--color-navy);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: var(--space-1);
	line-height: var(--lh-snug);
}

/* -------- Required indicator — navy, not red -------- */
.gform_wrapper .gfield_required,
.gform_wrapper .gfield_required_text,
.gform_wrapper .gfield_required_asterisk {
	color: var(--color-navy);
	font-weight: 700;
	font-size: 10px;
	text-transform: none;
	letter-spacing: 0;
	margin-left: 2px;
}

/* -------- Inputs — borderless, inherit pill background -------- */
.gform_wrapper .ginput_container input[type="text"],
.gform_wrapper .ginput_container input[type="email"],
.gform_wrapper .ginput_container input[type="tel"],
.gform_wrapper .ginput_container input[type="url"],
.gform_wrapper .ginput_container input[type="number"],
.gform_wrapper .ginput_container input[type="password"],
.gform_wrapper .ginput_container input[type="search"],
.gform_wrapper .ginput_container input[type="date"],
.gform_wrapper .ginput_container select,
.gform_wrapper .ginput_container textarea {
	width: 100%;
	border: none;
	padding: 0;
	background: transparent;
	outline: none;
	box-shadow: none;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--color-navy);
	border-radius: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	min-height: 0;
}

.gform_wrapper .ginput_container input:focus,
.gform_wrapper .ginput_container select:focus,
.gform_wrapper .ginput_container textarea:focus {
	outline: none;
	border: none;
	box-shadow: none;
}

/* Select dropdown — add a navy caret since native arrow is hidden by appearance:none */
.gform_wrapper .ginput_container_select {
	position: relative;
}

.gform_wrapper .ginput_container_select::after {
	content: "";
	position: absolute;
	right: 4px;
	top: 50%;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid var(--color-navy);
	transform: translateY(-50%);
	pointer-events: none;
}

.gform_wrapper .ginput_container_select select {
	padding-right: 20px;
	cursor: pointer;
}

/* Placeholder text */
.gform_wrapper .ginput_container input::placeholder,
.gform_wrapper .ginput_container textarea::placeholder {
	color: var(--color-navy);
	opacity: 0.4;
}

/* Textarea — restore min-height */
.gform_wrapper .ginput_container textarea {
	min-height: 80px;
	resize: vertical;
}

/* -------- Submit button — match .btn.btn--primary -------- */
.gform_wrapper .gform_footer,
.gform_wrapper .gform_page_footer {
	margin: var(--space-4) 0 0;
	padding: 0;
	display: block;
}

.gform_wrapper .gform_button,
.gform_wrapper input[type="submit"].gform_button,
.gform_wrapper .gform_next_button,
.gform_wrapper .gform_previous_button {
	display: inline-block;
	width: 100%;
	background: var(--color-yellow);
	color: var(--color-navy);
	border: none;
	border-radius: 0;
	padding: var(--space-3) var(--space-5);
	font-family: inherit;
	font-size: var(--fs-body);
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: none;
	cursor: pointer;
	transition: background 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
	text-align: center;
}

.gform_wrapper .gform_button:hover,
.gform_wrapper .gform_button:focus-visible {
	background: #ffe600;
}

.gform_wrapper .gform_button:focus-visible {
	outline: 2px solid var(--color-navy);
	outline-offset: 2px;
}

/* -------- Validation messages — navy + yellow accent, never red -------- */
.gform_wrapper .gfield_validation_message,
.gform_wrapper .gfield_description.validation_message,
.gform_wrapper .gform_validation_errors {
	background: var(--color-white);
	color: var(--color-navy);
	padding: var(--space-3);
	font-size: var(--fs-xs);
	font-weight: 700;
	border-left: 3px solid var(--color-yellow);
	margin: var(--space-2) 0;
	border-radius: 0;
}

.gform_wrapper .gform_validation_errors h2,
.gform_wrapper .gform_validation_errors__title {
	color: var(--color-navy);
	font-size: var(--fs-body);
	margin: 0 0 var(--space-2);
}

.gform_wrapper .gform_validation_errors a {
	color: var(--color-navy);
	font-weight: 700;
	border-bottom: 2px solid var(--color-yellow);
	text-decoration: none;
}

/* Invalid field state — yellow ring, no red */
.gform_wrapper .gfield_error,
.gform_wrapper .gfield.gfield_error {
	border-color: var(--color-yellow);
	background: var(--color-white);
}

.gform_wrapper .gfield_error .gfield_label {
	color: var(--color-navy);
}

/* Nuke GF's red default on any element that uses style="color:red" or its variants */
.gform_wrapper [style*="color: red"],
.gform_wrapper [style*="color:red"],
.gform_wrapper [style*="color: #c0392b"],
.gform_wrapper [style*="color:#c0392b"] {
	color: var(--color-navy) !important;
}

/* -------- Field descriptions / sublabels -------- */
.gform_wrapper .gfield_description,
.gform_wrapper .gform-field-description {
	font-size: var(--fs-xs);
	color: var(--color-navy);
	opacity: 0.7;
	margin-top: 4px;
	font-weight: 400;
}

/* -------- Confirmation / thank-you message -------- */
.gform_confirmation_wrapper,
.gform_confirmation_message {
	padding: var(--space-5);
	background: var(--color-white);
	color: var(--color-navy);
	border-left: 4px solid var(--color-yellow);
	font-size: var(--fs-body);
	line-height: var(--lh-base);
}

/* -------- Hide GF's "Required" legend at top of form (we use per-field) -------- */
.gform_wrapper .gform_required_legend {
	display: none;
}

/* -------- Spinner during ajax submit -------- */
.gform_wrapper .gform_ajax_spinner {
	margin-left: var(--space-3);
}

/* -------- Checkbox / radio — minimal restyle (rare in lead-capture but covered) -------- */
.gform_wrapper .gchoice {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: var(--space-1);
}

.gform_wrapper .gchoice input[type="checkbox"],
.gform_wrapper .gchoice input[type="radio"] {
	width: auto;
	margin: 0;
	accent-color: var(--color-yellow);
}

.gform_wrapper .gchoice label {
	font-size: var(--fs-body-sm);
	color: var(--color-navy);
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	margin: 0;
}
/* =========================================================
   GRAVITY FORMS — Orbital theme overrides (patch1)
   =========================================================
   GF 2.10's "orbital" theme uses :where()-wrapped selectors that
   set CSS custom properties (--gf-local-*). These compete with the
   base mapping above. This block raises specificity where Orbital
   would otherwise win, and zeros out the field-gap variables so
   pills sit flush per the design-system.

   Append-only: keeps the upstream mapping above intact and overrides
   in cascade order.
   ========================================================= */

/* -------- Field gap — zero out Orbital's vertical margin tokens -------- */
.gform_wrapper.gform-theme,
.gform_wrapper.gform-theme--orbital,
.gform_wrapper.gform-theme--framework {
	--gf-local-margin-y: 0;
	--gf-form-gap-y: 0;
	--gf-ctrl-label-space-y-secondary: 0;
}

/* Field margin override — covers both legacy and Orbital token paths */
.gform_wrapper .gfield {
	margin-block: 0 var(--space-2);
}

/* -------- Labels — force navy uppercase 10px over Orbital's local color/size tokens -------- */
.gform_wrapper .gfield_label,
.gform_wrapper .gform-field-label,
.gform_wrapper.gform-theme--framework .gfield_label,
.gform_wrapper.gform-theme--framework .gform-field-label {
	color: var(--color-navy) !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	line-height: var(--lh-snug) !important;
	font-family: inherit !important;
}

/* -------- Submit button — force btn--primary appearance over Orbital's button styling
   Targets both the class hook (.gform_button) and the ID hook
   (#gform_submit_button_*) for maximum specificity. -------- */
.gform_wrapper input[type="submit"].gform_button,
.gform_wrapper button.gform_button,
.gform_wrapper [id^="gform_submit_button_"],
.gform_wrapper.gform-theme .gform_footer input[type="submit"],
.gform_wrapper.gform-theme--framework .gform_footer input[type="submit"] {
	background: var(--color-yellow) !important;
	background-color: var(--color-yellow) !important;
	color: var(--color-navy) !important;
	border: none !important;
	border-radius: 0 !important;
	padding: var(--space-3) var(--space-5) !important;
	font-family: inherit !important;
	font-size: var(--fs-body) !important;
	font-weight: 800 !important;
	letter-spacing: 0.02em !important;
	text-transform: none !important;
	cursor: pointer !important;
	width: 100% !important;
	text-align: center !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	box-shadow: none !important;
	min-height: 0 !important;
}

.gform_wrapper input[type="submit"].gform_button:hover,
.gform_wrapper button.gform_button:hover,
.gform_wrapper [id^="gform_submit_button_"]:hover {
	background: #ffe600 !important;
	background-color: #ffe600 !important;
}

.gform_wrapper input[type="submit"].gform_button:focus-visible,
.gform_wrapper button.gform_button:focus-visible,
.gform_wrapper [id^="gform_submit_button_"]:focus-visible {
	outline: 2px solid var(--color-navy) !important;
	outline-offset: 2px !important;
}

/* -------- Footer wrapper — remove Orbital's flex gap above button -------- */
.gform_wrapper .gform_footer,
.gform_wrapper .gform-footer {
	margin: var(--space-4) 0 0 !important;
	padding: 0 !important;
	display: block !important;
	gap: 0 !important;
}
/* =========================================================
   GRAVITY FORMS — Size adjustments (patch2)
   =========================================================
   Tunes field-pill padding, submit-button padding/font-size, and
   inter-field margin to match the target design (taller pills,
   chunkier submit button, more breathing room between fields).

   Append-only after patch1.
   ========================================================= */

/* -------- Field pills — taller -------- */
.gform_wrapper .gfield {
	padding: var(--space-4);
	margin-block: 0 var(--space-3);
}

/* -------- Submit button — chunkier, larger text -------- */
.gform_wrapper input[type="submit"].gform_button,
.gform_wrapper button.gform_button,
.gform_wrapper [id^="gform_submit_button_"],
.gform_wrapper.gform-theme .gform_footer input[type="submit"],
.gform_wrapper.gform-theme--framework .gform_footer input[type="submit"] {
	padding: var(--space-5) var(--space-5) !important;
	font-size: 18px !important;
}
/* =========================================================
   GRAVITY FORMS — Pill-height fine-tune (patch3)
   =========================================================
   Target: ~70px total pill height (was ~100px after patch2).
   Reduces padding from --space-4 (20px) to 8px on each side.
   ========================================================= */

.gform_wrapper .gfield {
	padding: 8px var(--space-4);
}
/* =========================================================
   GRAVITY FORMS — Pill-height final tweak (patch4)
   =========================================================
   patch3 landed at ~85px, target 70px. Reduce vertical
   padding from 8px to 4px (-8px total = ~77px), and trim
   label margin-bottom from --space-1 (4px) to 2px.
   ========================================================= */

.gform_wrapper .gfield {
	padding: 4px var(--space-4);
}

.gform_wrapper .gfield_label,
.gform_wrapper .gform-field-label {
	margin-bottom: 2px !important;
}
/* =========================================================
   GRAVITY FORMS — Select hover-icon fix (patch5)
   =========================================================
   Orbital theme paints --gf-ctrl-select-icon-hover (an SVG wave
   pattern) as a background-image on <select> :hover. We render
   our own navy caret via ::after on .ginput_container_select,
   so the Orbital hover-icon collides with our caret and shows
   a wavy texture across the field. Nuke it.

   Applies to both ":where"-wrapped Orbital rules and any future
   hover-icon paint via the CSS variable.
   ========================================================= */

.gform_wrapper .gfield select,
.gform_wrapper .gfield select:hover,
.gform_wrapper .gfield select:focus,
.gform_wrapper.gform-theme--framework .gfield select,
.gform_wrapper.gform-theme--framework .gfield select:hover,
.gform_wrapper.gform-theme--orbital .gfield select,
.gform_wrapper.gform-theme--orbital .gfield select:hover {
	background-image: none !important;
	--gf-ctrl-select-icon-hover: none !important;
	--gf-ctrl-select-icon: none !important;
}
/* =========================================================
   GRAVITY FORMS — Submit button font-size tweak (patch6)
   =========================================================
   patch2 set submit-button font-size to 18px. Target: 14px.
   ========================================================= */

.gform_wrapper input[type="submit"].gform_button,
.gform_wrapper button.gform_button,
.gform_wrapper [id^="gform_submit_button_"],
.gform_wrapper.gform-theme .gform_footer input[type="submit"],
.gform_wrapper.gform-theme--framework .gform_footer input[type="submit"] {
	font-size: 14px !important;
}
/* =========================================================
   GRAVITY FORMS — Error styling (patch7)
   =========================================================
   Replaces the yellow accent-stripe on validation messages with
   red, and adds a red ring around invalid field pills. Applies
   globally (both navy form-card and white form-card) so error
   semantics are consistent across all GF instances in the theme.

   Color: #dc2626 (Tailwind red-600) — standard B2B B accessible
   contrast on both white and navy backgrounds.
   ========================================================= */

/* -------- Invalid field pill: red ring on the .gfield container -------- */
.gform_wrapper .gfield.gfield_error,
.gform_wrapper .gfield_error {
	border: 2px solid #dc2626 !important;
	background: var(--color-white);
}

/* When focused while in error state, keep red ring + faint glow */
.gform_wrapper .gfield.gfield_error:focus-within,
.gform_wrapper .gfield_error:focus-within {
	border-color: #dc2626 !important;
	box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2) !important;
}

/* -------- Inline validation messages: red accent-stripe + red text -------- */
.gform_wrapper .gfield_validation_message,
.gform_wrapper .gfield_description.validation_message {
	background: var(--color-white);
	color: #dc2626 !important;
	border-left: 3px solid #dc2626 !important;
	padding: var(--space-3);
	font-size: var(--fs-xs);
	font-weight: 700;
	margin: var(--space-2) 0 0;
	border-radius: 0;
}

/* -------- Summary box at top of form ("There was a problem..."): keep red -------- */
.gform_wrapper .gform_validation_errors {
	background: rgba(220, 38, 38, 0.05);
	color: #dc2626 !important;
	border: 1px solid #dc2626;
	border-radius: 0;
	padding: var(--space-4);
}

.gform_wrapper .gform_validation_errors h2,
.gform_wrapper .gform_validation_errors__title {
	color: #dc2626 !important;
}

.gform_wrapper .gform_validation_errors a {
	color: #dc2626 !important;
	border-bottom: 1px solid #dc2626;
}

/* -------- White-card error styling: invert subtly for contrast -------- */
.page-hero .form-card--white .gform_wrapper .gfield.gfield_error,
.page-hero .form-card--white .gform_wrapper .gfield_error {
	background: rgba(220, 38, 38, 0.04);
}

.page-hero .form-card--white .gform_wrapper .gfield_validation_message {
	background: transparent;
}
/* =========================================================
   GRAVITY FORMS — Inline-error stripe removal (patch8)
   =========================================================
   patch7 added a red left-stripe to .gfield_validation_message.
   Redundant signal — field has red ring, text is red, top
   summary is red. Strip it.
   ========================================================= */

.gform_wrapper .gfield_validation_message,
.gform_wrapper .gfield_description.validation_message {
	border-left: none !important;
	padding-left: 0 !important;
}