/**
 * Gravity Forms Theme Integration
 *
 * Styling to integrate Gravity Forms with the 3MW Core theme design system.
 * Supports both Orbital theme (GF 2.5+) and legacy gravity-theme.
 * Uses theme CSS variables for consistent styling across the site.
 *
 * This file provides:
 * - Form field styling (inputs, textareas, selects)
 * - Label and description styling
 * - Submit button theming (inherits btn-primary styles)
 * - Validation and error states
 * - Multi-column/row layout support
 * - Accessibility enhancements
 *
 * @package 3MW_Core_Child
 * @since 1.0.0
 * @version 2.0.0 - Added Orbital theme support (GF 2.5+)
 */

/* ============================================
   Orbital Theme CSS Variable Overrides (GF 2.5+)
   ============================================ */

.gform_wrapper.gform-theme--orbital {
	/* Typography - Labels */
	--gf-label-font-family: var(--font-family-body);
	--gf-label-font-size: var(--font-size-body);
	--gf-label-font-weight: var(--font-weight-medium);
	--gf-label-color: var(--color-text-primary);

	/* Typography - Controls */
	--gf-ctrl-font-family: var(--font-family-body);
	--gf-ctrl-font-size: var(--font-size-body);
	--gf-ctrl-color: var(--color-text-primary);

	/* Typography - Descriptions */
	--gf-desc-font-size: var(--font-size-small);
	--gf-desc-color: var(--color-text-primary);

	/* Form Controls */
	--gf-ctrl-border-color: var(--color-border);
	--gf-ctrl-border-radius: var(--input-radius);
	--gf-ctrl-bg-color: var(--color-white);
	--gf-ctrl-padding-x: var(--space-md);
	--gf-ctrl-padding-y: var(--space-sm);

	/* Focus States */
	--gf-ctrl-focus-border-color: var(--color-primary);
	--gf-ctrl-focus-shadow: 0 0 0 3px var(--color-primary-transparent);

	/* Buttons - Primary */
	--gf-btn-primary-bg-color: var(--btn-primary-bg);
	--gf-btn-primary-border-color: var(--btn-primary-border-color);
	--gf-btn-primary-color: var(--btn-primary-text-color);
	--gf-btn-primary-bg-color-hover: var(--btn-primary-hover-bg);
	--gf-btn-primary-border-color-hover: var(--btn-primary-hover-border-color);
	--gf-btn-primary-color-hover: var(--btn-primary-hover-text-color);
	--gf-btn-border-radius: var(--radius-button);
	--gf-btn-font-family: var(--font-family-body);
	--gf-btn-font-size: var(--font-size-button);
	--gf-btn-font-weight: var(--font-weight-medium);

	/* Fixed to match .btn / .wp-element-button in frontend-child.css — --space-xl/
	 * --space-md are fluid clamp() tokens that made the Orbital-native button
	 * (sized directly from these variables) grow larger than the site-wide
	 * button size at wider viewports, and disagree with the 12px/24px override
	 * further down this file. */
	--gf-btn-padding-x: 24px;
	--gf-btn-padding-y: 12px;

	/* Buttons - Secondary */
	--gf-btn-secondary-bg-color: var(--btn-secondary-bg);
	--gf-btn-secondary-border-color: var(--btn-secondary-border-color);
	--gf-btn-secondary-color: var(--btn-secondary-text-color);
	--gf-btn-secondary-bg-color-hover: var(--btn-secondary-hover-bg);
	--gf-btn-secondary-border-color-hover: var(--btn-secondary-hover-border-color);
	--gf-btn-secondary-color-hover: var(--btn-secondary-hover-text-color);

	/* Error States */
	--gf-ctrl-error-border-color: var(--color-error);
	--gf-field-error-bg-color: transparent;
	--gf-validation-msg-color: var(--color-error);

	/* Radio/Checkbox */
	--gf-ctrl-choice-accent-color: var(--color-primary);
	--gf-ctrl-choice-size: 18px;

	/* Progress Bar */
	--gf-progress-bar-bg-color: var(--color-bg-secondary);
	--gf-progress-bar-fill-color: var(--btn-primary-bg);

	/* File Upload */
	--gf-file-upload-bg-color: var(--color-bg-secondary);
	--gf-file-upload-border-color: var(--color-border);

	/* Spacing */
	--gf-field-margin-bottom: var(--space-sm);
}

/* ============================================
   Form Container - Both Themes
   ============================================ */

.gform_wrapper.gform-theme--orbital,
.gform_wrapper.gravity-theme {
	font-family: var(--font-family-body);
}

/* Legacy theme variable overrides */
.gform_wrapper.gravity-theme {
	--gf-ctrl-border-color: var(--color-border);
	--gf-ctrl-border-radius: var(--input-radius);
	--gf-ctrl-bg-color: var(--color-white);
	--gf-ctrl-font-size: var(--font-size-body);
	--gf-label-font-size: var(--font-size-body);
	--gf-label-font-weight: var(--font-weight-medium);
	--gf-ctrl-padding: var(--space-sm) var(--space-md);
}

/* ============================================
   Form Fields - Inputs, Textareas, Selects
   ============================================ */

/*
 * Form-field border token.
 *
 * --color-border (#E8F5F9) is a near-invisible pale blue: against the white
 * field/modal background it measures ~1.11:1, so fields read as floating text
 * with no perceptible boundary. WCAG 2.1 SC 1.4.11 requires 3:1 for input
 * boundaries, so this was an accessibility failure as well as a visual one.
 *
 * --color-input (#5B6770) measures 5.80:1 on white and clears that comfortably.
 * Scoped to this stylesheet on purpose: --color-border has 25+ consumers
 * site-wide (cards, tables, dividers, accordions) and redefining it globally
 * would restyle far more than forms.
 */
.gform_wrapper {
	--form-field-border: var(--color-input);
}

.gform_wrapper.gform-theme--orbital input:not([type="radio"], [type="checkbox"], [type="submit"], [type="button"], [type="image"], [type="file"]),
.gform_wrapper.gform-theme--orbital select,
.gform_wrapper.gform-theme--orbital textarea,
.gform_wrapper.gravity-theme input:not([type="radio"], [type="checkbox"], [type="submit"], [type="button"], [type="image"], [type="file"]),
.gform_wrapper.gravity-theme select,
.gform_wrapper.gravity-theme textarea {
	border: 1px solid var(--form-field-border);
	border-radius: var(--input-radius);
	background-color: var(--color-white);
	color: var(--color-text-primary);
	font-family: var(--font-family-body);
	font-size: var(--font-size-body);

	/* Horizontal padding stepped down from --space-md for a tighter field,
	 * while vertical stays at --space-sm to keep a comfortable tap target.
	 * Keep in sync with the select-specific padding below, which must
	 * re-declare it to reserve room for the dropdown arrow. */
	padding: var(--space-sm);
	line-height: var(--line-height-normal);

	/* Fixed floor so text inputs and the smaller-font select below render at
	 * the same total height regardless of font-size — line-height alone can't
	 * equalize them since the select intentionally uses --font-size-small. */
	min-height: 48px;
	transition: border-color var(--transition-base), box-shadow var(--transition-base);
	width: 100%;
}

/* Focus states */
.gform_wrapper.gform-theme--orbital input:not([type="radio"], [type="checkbox"], [type="submit"], [type="button"], [type="image"], [type="file"]):focus,
.gform_wrapper.gform-theme--orbital select:focus,
.gform_wrapper.gform-theme--orbital textarea:focus,
.gform_wrapper.gravity-theme input:not([type="radio"], [type="checkbox"], [type="submit"], [type="button"], [type="image"], [type="file"]):focus,
.gform_wrapper.gravity-theme select:focus,
.gform_wrapper.gravity-theme textarea:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px var(--color-primary-transparent);
	outline: none;
}

/* Placeholder styling */
.gform_wrapper.gform-theme--orbital input::placeholder,
.gform_wrapper.gform-theme--orbital textarea::placeholder,
.gform_wrapper.gravity-theme input::placeholder,
.gform_wrapper.gravity-theme textarea::placeholder {
	color: var(--color-input);
	opacity: 1;
}

/* Textarea specific */
.gform_wrapper.gform-theme--orbital textarea,
.gform_wrapper.gravity-theme textarea {
	min-height: 120px;
	resize: vertical;
}

/* Select dropdown arrow */
.gform_wrapper.gform-theme--orbital select,
.gform_wrapper.gravity-theme select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8.825L1.175 4 2.238 2.938 6 6.7l3.763-3.762L10.825 4z'/%3E%3C/svg%3E");
	background-position: right var(--space-sm) center;
	background-repeat: no-repeat;
	background-size: 12px;

	/* Matches the compact padding on the shared field rule above; the right
	 * side stays wider to clear the dropdown arrow (12px icon + its inset). */
	padding: var(--space-sm) calc(var(--space-sm) * 2 + 12px) var(--space-sm) var(--space-sm);

	/*
	 * Matches text inputs (--font-size-body) for visual consistency. Long
	 * option labels (e.g. "Cingal Patient Information") may wrap/truncate at
	 * this size since GF renders placeholders as plain <option> elements with
	 * no distinguishing class to size separately from the option list.
	 */
	font-size: var(--font-size-body);

	/* --line-height-normal (1.4) doesn't fit the 22px content box left by the
	 * shared field rule's 48px min-height, clipping text in Chrome. 1.2 fits. */
	line-height: 1.2;

	/* Inherits min-height: 48px from the shared field rule above. */
	overflow: visible;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ============================================
   Chosen Enhanced Select (Country dropdown)
   ============================================ */

/*
 * When Chosen is active the native <select> is set to display:none and this
 * anchor becomes the visible control, so the select rules above never render.
 *
 * GF's own Chosen rule pairs line-height:24px with padding-block:0, but a later
 * .gform-theme--framework rule re-applies the generic text-input values
 * (--gf-local-padding-y ~8px) on top of --gf-ctrl-line-height (38px). With
 * box-sizing:border-box on a 38px control that leaves a 22px content box for a
 * 38px line box, pushing the placeholder ~9px below centre and overflowing the
 * bottom edge.
 *
 * Dropping the vertical padding lets the full-height line-height do the
 * centring on its own, which is how Chosen expects to be sized.
 */
.gform_wrapper.gform-theme--orbital .chosen-container-single .chosen-single,
.gform_wrapper.gravity-theme .chosen-container-single .chosen-single {
	display: flex;
	align-items: center;
	padding-block: 0;
	line-height: var(--line-height-normal);

	/* Matches the 48px min-height on text inputs/selects above so the Chosen
	 * country dropdown doesn't stand out as a different height. */
	min-height: 48px;

	/* Chosen ships a 3px radius and its own grey border, which made the country
	 * dropdown the only field not matching the 12px --input-radius used by every
	 * other control. */
	border: 1px solid var(--form-field-border);
	border-radius: var(--input-radius);
	background-image: none;
	box-shadow: none;
}

/* Square off the bottom corners while the dropdown panel is open so the
 * control and panel read as one shape. */
.gform_wrapper.gform-theme--orbital .chosen-container-active.chosen-with-drop .chosen-single,
.gform_wrapper.gravity-theme .chosen-container-active.chosen-with-drop .chosen-single {
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}

/* Match the open dropdown panel and its search field to the same language. */
.gform_wrapper.gform-theme--orbital .chosen-container .chosen-drop,
.gform_wrapper.gravity-theme .chosen-container .chosen-drop {
	border: 1px solid var(--form-field-border);
	border-top: 0;
	border-bottom-right-radius: var(--input-radius);
	border-bottom-left-radius: var(--input-radius);
}

/*
 * GF's own rule targets `.chosen-search input[type="text"]` — an attribute
 * selector, which outranks a class-only match. Mirror that shape so the search
 * field picks up the shared border instead of Chosen's #aaa / 0 radius.
 */
.gform_wrapper.gform-theme--orbital .chosen-container .chosen-search input[type="text"],
.gform_wrapper.gravity-theme .chosen-container .chosen-search input[type="text"] {
	border: 1px solid var(--form-field-border);
	border-radius: var(--input-radius);
}

/* Keep the label from being pushed under the arrow on narrow viewports. */
.gform_wrapper.gform-theme--orbital .chosen-container-single .chosen-single span,
.gform_wrapper.gravity-theme .chosen-container-single .chosen-single span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gform_wrapper.gform-theme--orbital .gfield.gfield--type-checkbox .gfield_label {
	margin-bottom: var(--space-md);
}

/* ============================================
   Labels and Descriptions
   ============================================ */

.gform_wrapper.gform-theme--orbital .gfield_label,
.gform_wrapper.gform-theme--orbital .gform_heading .gform_title,
.gform_wrapper.gravity-theme .gfield_label,
.gform_wrapper.gravity-theme .gform_heading .gform_title {
	color: var(--color-text-primary);
	display: block;
	font-family: var(--font-family-body);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-medium);
	margin-bottom: var(--space-xs);
}

/* Complex fields (Name, Address) use a <legend> above per-input sub-labels
   (e.g. "Name *" legend above a "First" sub-label). The base margin-bottom
   above is sized for label-to-input spacing, which reads as too tight
   between the legend and the first sub-label below it - close enough that
   it can look like one label awkwardly wrapping onto two lines rather than
   two distinct elements. */
.gform_wrapper.gform-theme--orbital .gfield_label_before_complex,
.gform_wrapper.gravity-theme .gfield_label_before_complex {
	margin-bottom: var(--space-sm);
}

/* Required indicator */
.gform_wrapper.gform-theme--orbital .gfield_required,
.gform_wrapper.gravity-theme .gfield_required {
	color: var(--color-error);
}

/* Field descriptions */
.gform_wrapper.gform-theme--orbital .gfield_description,
.gform_wrapper.gform-theme--orbital .instruction,
.gform_wrapper.gravity-theme .gfield_description,
.gform_wrapper.gravity-theme .instruction {
	color: var(--color-text-primary);
	font-size: var(--font-size-small);
	margin-top: var(--space-2xs);
}

/* Form description */
.gform_wrapper.gform-theme--orbital .gform_heading .gform_description,
.gform_wrapper.gravity-theme .gform_heading .gform_description {
	color: var(--color-text-primary);
	font-size: var(--font-size-body);
	margin-bottom: var(--space-lg);
}

/* ============================================
   Submit Button - Inherits Theme Button Styles
   ============================================ */

/* Target all Gravity Forms buttons with high specificity to override GF defaults */
.gform_wrapper input[type="submit"],
.gform_wrapper button[type="submit"],
.gform_wrapper .gform_button,
.gform_wrapper input.gform_button,
.gform_wrapper.gform-theme--orbital .gform_footer input[type="submit"],
.gform_wrapper.gform-theme--orbital .gform_page_footer input[type="submit"],
.gform_wrapper.gform-theme--orbital .gform_footer button[type="submit"],
.gform_wrapper.gform-theme--orbital .gform_page_footer button[type="submit"],
.gform_wrapper.gravity-theme .gform_footer input[type="submit"],
.gform_wrapper.gravity-theme .gform_page_footer input[type="submit"],
.gform_wrapper.gravity-theme .gform_footer button[type="submit"],
.gform_wrapper.gravity-theme .gform_page_footer button[type="submit"] {
	/*
	 * Inherit primary button styles from parent theme buttons.css
	 * Using !important to override Gravity Forms default high-specificity styles
	 *
	 * Colors read --adapt-btn-* so the parent theme's dark background adaptation
	 * (dark-bg-adaptation.css) can swap in the light button variant. These
	 * selectors are (0,2,1) and outrank the parent's (0,2,0) adaptation rules,
	 * so consuming the variables is the only way the light variant applies.
	 * --adapt-btn-* is defined ONLY inside [data-dark-bg]/[data-section-dark-bg],
	 * so the --btn-primary-* fallback supplies the default light-background style.
	 */
	background: var(--adapt-btn-bg, var(--btn-primary-bg)) !important;
	border-color: var(--adapt-btn-border, var(--btn-primary-border-color)) !important;
	border-radius: var(--radius-button) !important;
	border-style: var(--btn-primary-border-style) !important;
	border-width: var(--btn-primary-border-width) !important;
	color: var(--adapt-btn-color, var(--btn-primary-text-color)) !important;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-family-body);

	/*
	 * !important on font-size/line-height/padding: GF's own core stylesheets
	 * (gravity-forms-theme-framework.min.css) declare these on the button too
	 * without matching specificity guarantees, and were winning over this rule
	 * even though it loads after — verified via computed styles in the browser
	 * (rendered as 14px/0px 16px instead of these values before this was added).
	 */
	font-size: var(--font-size-button) !important;
	font-weight: var(--font-weight-medium);
	gap: var(--space-xs);
	line-height: var(--line-height-tight) !important;

	/* Matches .btn / .wp-element-button in frontend-child.css — --space-md/--space-xl
	 * are fluid clamp() tokens that outgrow the fixed site-wide button size at
	 * wider viewports, so use the same hardcoded value here. */
	padding: 12px 24px !important;
	text-decoration: none;
	transition: background var(--transition-base),
		color var(--transition-base),
		border-color var(--transition-base),
		box-shadow var(--transition-base);
}

/* Submit button hover state */
.gform_wrapper input[type="submit"]:hover,
.gform_wrapper input[type="submit"]:focus,
.gform_wrapper button[type="submit"]:hover,
.gform_wrapper button[type="submit"]:focus,
.gform_wrapper .gform_button:hover,
.gform_wrapper .gform_button:focus,
.gform_wrapper.gform-theme--orbital .gform_footer input[type="submit"]:hover,
.gform_wrapper.gform-theme--orbital .gform_footer input[type="submit"]:focus,
.gform_wrapper.gform-theme--orbital .gform_page_footer input[type="submit"]:hover,
.gform_wrapper.gform-theme--orbital .gform_page_footer input[type="submit"]:focus,
.gform_wrapper.gform-theme--orbital .gform_footer button[type="submit"]:hover,
.gform_wrapper.gform-theme--orbital .gform_footer button[type="submit"]:focus,
.gform_wrapper.gform-theme--orbital .gform_page_footer button[type="submit"]:hover,
.gform_wrapper.gform-theme--orbital .gform_page_footer button[type="submit"]:focus,
.gform_wrapper.gravity-theme .gform_footer input[type="submit"]:hover,
.gform_wrapper.gravity-theme .gform_footer input[type="submit"]:focus,
.gform_wrapper.gravity-theme .gform_page_footer input[type="submit"]:hover,
.gform_wrapper.gravity-theme .gform_page_footer input[type="submit"]:focus,
.gform_wrapper.gravity-theme .gform_footer button[type="submit"]:hover,
.gform_wrapper.gravity-theme .gform_footer button[type="submit"]:focus,
.gform_wrapper.gravity-theme .gform_page_footer button[type="submit"]:hover,
.gform_wrapper.gravity-theme .gform_page_footer button[type="submit"]:focus {
	background: var(--adapt-btn-hover-bg, var(--btn-primary-hover-bg)) !important;
	border-color: var(--adapt-btn-hover-border, var(--btn-primary-hover-border-color)) !important;
	color: var(--adapt-btn-hover-color, var(--btn-primary-hover-text-color)) !important;
}

/* Focus visible for keyboard navigation */
.gform_wrapper.gform-theme--orbital .gform_footer input[type="submit"]:focus-visible,
.gform_wrapper.gform-theme--orbital .gform_page_footer input[type="submit"]:focus-visible,
.gform_wrapper.gravity-theme .gform_footer input[type="submit"]:focus-visible,
.gform_wrapper.gravity-theme .gform_page_footer input[type="submit"]:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* Previous button (multi-page forms) - Secondary style */
.gform_wrapper.gform-theme--orbital .gform_page_footer .gform_previous_button,
.gform_wrapper.gravity-theme .gform_page_footer .gform_previous_button {
	background: var(--btn-secondary-bg) !important;
	border-color: var(--btn-secondary-border-color) !important;
	border-radius: var(--radius-button) !important;
	border-style: var(--btn-secondary-border-style) !important;
	border-width: var(--btn-secondary-border-width) !important;
	color: var(--btn-secondary-text-color) !important;
	cursor: pointer;
	font-family: var(--font-family-body);
	font-size: var(--font-size-button);
	font-weight: var(--font-weight-medium);
	padding: var(--space-md) var(--space-xl);
	transition: background var(--transition-base),
		color var(--transition-base),
		border-color var(--transition-base);
}

.gform_wrapper.gform-theme--orbital .gform_page_footer .gform_previous_button:hover,
.gform_wrapper.gform-theme--orbital .gform_page_footer .gform_previous_button:focus,
.gform_wrapper.gravity-theme .gform_page_footer .gform_previous_button:hover,
.gform_wrapper.gravity-theme .gform_page_footer .gform_previous_button:focus {
	background: var(--btn-secondary-hover-bg) !important;
	border-color: var(--btn-secondary-hover-border-color) !important;
	color: var(--btn-secondary-hover-text-color) !important;
}

/* Next button (multi-page forms) - Primary style */
.gform_wrapper.gform-theme--orbital .gform_page_footer .gform_next_button,
.gform_wrapper.gravity-theme .gform_page_footer .gform_next_button {
	background: var(--btn-primary-bg) !important;
	border-color: var(--btn-primary-border-color) !important;
	border-radius: var(--radius-button) !important;
	border-style: var(--btn-primary-border-style) !important;
	border-width: var(--btn-primary-border-width) !important;
	color: var(--btn-primary-text-color) !important;
	cursor: pointer;
	font-family: var(--font-family-body);
	font-size: var(--font-size-button);
	font-weight: var(--font-weight-medium);
	padding: var(--space-md) var(--space-xl);
	transition: background var(--transition-base),
		color var(--transition-base),
		border-color var(--transition-base);
}

.gform_wrapper.gform-theme--orbital .gform_page_footer .gform_next_button:hover,
.gform_wrapper.gform-theme--orbital .gform_page_footer .gform_next_button:focus,
.gform_wrapper.gravity-theme .gform_page_footer .gform_next_button:hover,
.gform_wrapper.gravity-theme .gform_page_footer .gform_next_button:focus {
	background: var(--btn-primary-hover-bg) !important;
	border-color: var(--btn-primary-hover-border-color) !important;
	color: var(--btn-primary-hover-text-color) !important;
}

/* ============================================
   Validation and Error States
   ============================================ */

/* Field with error */
.gform_wrapper.gform-theme--orbital .gfield_error input:not([type="radio"], [type="checkbox"], [type="submit"], [type="button"]),
.gform_wrapper.gform-theme--orbital .gfield_error select,
.gform_wrapper.gform-theme--orbital .gfield_error textarea,
.gform_wrapper.gravity-theme .gfield_error input:not([type="radio"], [type="checkbox"], [type="submit"], [type="button"]),
.gform_wrapper.gravity-theme .gfield_error select,
.gform_wrapper.gravity-theme .gfield_error textarea {
	border-color: var(--color-error);
}

.gform_wrapper.gform-theme--orbital .gfield_error input:not([type="radio"], [type="checkbox"], [type="submit"], [type="button"]):focus,
.gform_wrapper.gform-theme--orbital .gfield_error select:focus,
.gform_wrapper.gform-theme--orbital .gfield_error textarea:focus,
.gform_wrapper.gravity-theme .gfield_error input:not([type="radio"], [type="checkbox"], [type="submit"], [type="button"]):focus,
.gform_wrapper.gravity-theme .gfield_error select:focus,
.gform_wrapper.gravity-theme .gfield_error textarea:focus {
	box-shadow: 0 0 0 3px var(--color-error);
}

/* Validation message
 * Uses --dark-bg-error so the red lightens on dark section fills. On light
 * backgrounds it resolves to --color-error exactly as before. */
.gform_wrapper.gform-theme--orbital .gfield_error .gfield_validation_message,
.gform_wrapper.gform-theme--orbital .validation_message,
.gform_wrapper.gravity-theme .gfield_error .gfield_validation_message,
.gform_wrapper.gravity-theme .validation_message {
	background-color: transparent;
	border: none;
	color: var(--dark-bg-error);
	font-size: var(--font-size-small);
	margin-top: var(--space-2xs);
	padding: 0;
}

/* Form validation error box
 * This box keeps its own light background even inside a dark section, so it is
 * a nested light surface: reset the dark-bg tokens back to their light values
 * or inherited white text becomes unreadable on the pale pink fill. */
.gform_wrapper.gform-theme--orbital .gform_validation_errors,
.gform_wrapper.gravity-theme .gform_validation_errors {
	--dark-bg-text: var(--color-text-primary);
	--dark-bg-link: var(--color-error);
	--dark-bg-link-hover: var(--color-error);
	--dark-bg-link-hover-opacity: 1;
	--dark-bg-error: var(--color-error);

	background-color: var(--color-error-bg);
	border: 1px solid var(--color-error);
	border-radius: var(--radius-card);
	margin-bottom: var(--space-lg);
	padding: var(--space-md);
}

.gform_wrapper.gform-theme--orbital .gform_validation_errors h2,
.gform_wrapper.gravity-theme .gform_validation_errors h2 {
	color: var(--color-error);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-semibold);
	margin: 0;
}

/* Numbered list of failed fields inside the summary box.
 * Previously unstyled, so on dark sections the global dark-bg link/text rules
 * painted these white on the pale pink fill (1.09:1). */
.gform_wrapper.gform-theme--orbital .gform_validation_errors ol,
.gform_wrapper.gform-theme--orbital .gform_validation_errors li,
.gform_wrapper.gravity-theme .gform_validation_errors ol,
.gform_wrapper.gravity-theme .gform_validation_errors li {
	color: var(--color-error);
}

.gform_wrapper.gform-theme--orbital .gform_validation_errors li::marker,
.gform_wrapper.gravity-theme .gform_validation_errors li::marker {
	color: var(--color-error);
}

.gform_wrapper.gform-theme--orbital .gform_validation_errors a,
.gform_wrapper.gravity-theme .gform_validation_errors a {
	color: var(--color-error);
	text-decoration: underline;
}

.gform_wrapper.gform-theme--orbital .gform_validation_errors a:hover,
.gform_wrapper.gform-theme--orbital .gform_validation_errors a:focus,
.gform_wrapper.gravity-theme .gform_validation_errors a:hover,
.gform_wrapper.gravity-theme .gform_validation_errors a:focus {
	color: var(--color-error);
	opacity: 0.8;
}

/* ============================================
   Checkboxes and Radio Buttons
   ============================================ */

.gform_wrapper.gform-theme--orbital .gfield_checkbox label,
.gform_wrapper.gform-theme--orbital .gfield_radio label,
.gform_wrapper.gravity-theme .gfield_checkbox label,
.gform_wrapper.gravity-theme .gfield_radio label {
	color: var(--color-text-primary);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-normal);
}

.gform_wrapper.gform-theme--orbital .gchoice,
.gform_wrapper.gravity-theme .gchoice {
	margin-bottom: var(--space-xs);
}

/* Custom checkbox/radio styling - Override Orbital theme colors */
.gform_wrapper.gform-theme--orbital input[type="checkbox"],
.gform_wrapper.gform-theme--orbital input[type="radio"],
.gform_wrapper.gravity-theme input[type="checkbox"],
.gform_wrapper.gravity-theme input[type="radio"] {
	accent-color: var(--color-primary);
	height: 18px;
	width: 18px;
}

/* Override Orbital's custom radio/checkbox focus and checked states */
.gform_wrapper.gform-theme--orbital input[type="checkbox"]:focus,
.gform_wrapper.gform-theme--orbital input[type="radio"]:focus {
	box-shadow: 0 0 0 3px var(--color-primary-transparent) !important;
	outline: none !important;
}

/* Checkbox checked state - fill with primary color and show white checkmark.
 * White border so the selected state stays visible against dark section
 * backgrounds, where a primary-colored border would disappear. */
.gform_wrapper.gform-theme--orbital input[type="checkbox"]:checked {
	background-color: var(--color-primary) !important;
	border-color: var(--color-white) !important;
	position: relative !important;
}

/* Checkbox checkmark - white checkmark on primary background */
.gform_wrapper.gform-theme--orbital input[type="checkbox"]:checked::before {
	content: '' !important;
	display: block !important;
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	width: 5px !important;
	height: 9px !important;
	border: solid var(--color-white) !important;
	border-width: 0 2px 2px 0 !important;
	transform: translate(-50%, -60%) rotate(45deg) !important;
	background: transparent !important;
}

/* Radio checked state - primary fill with a white border, matching the checked
 * checkbox so the selection stays visible on dark section backgrounds. The
 * inner dot (::before) is switched to white to read against the primary fill. */
.gform_wrapper.gform-theme--orbital input[type="radio"]:checked {
	background-color: var(--color-primary) !important;
	border-color: var(--color-white) !important;
	position: relative !important;
}

/* Override Orbital's ::before pseudo-element for radio checked state indicator (inner dot) */
.gform_wrapper.gform-theme--orbital input[type="radio"]:checked::before {
	content: '' !important;
	display: block !important;
	background-color: var(--color-white) !important;
	width: 8px !important;
	height: 8px !important;
	border-radius: 50% !important;
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	border: none !important;
}

/* ============================================
   "Other" Choice Option Styling
   ============================================ */

/* Make the "Other" choice container use flexbox for inline layout */
.gform_wrapper.gform-theme--orbital .gchoice:has(input[value="gf_other_choice"]),
.gform_wrapper.gravity-theme .gchoice:has(input[value="gf_other_choice"]) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-xs);
}

/* Hide the <br> that Gravity Forms adds between label and text input */
.gform_wrapper.gform-theme--orbital .gchoice:has(input[value="gf_other_choice"])>br,
.gform_wrapper.gravity-theme .gchoice:has(input[value="gf_other_choice"])>br {
	display: none;
}

/* Ensure "Other" label alignment matches other radio options */
.gform_wrapper.gform-theme--orbital .gchoice:has(input[value="gf_other_choice"])>label,
.gform_wrapper.gravity-theme .gchoice:has(input[value="gf_other_choice"])>label {
	position: relative;
	left: -4px;
}

/* Style the "Other" text input to appear on its own line */
.gform_wrapper.gform-theme--orbital .gchoice_other_control,
.gform_wrapper.gravity-theme .gchoice_other_control {
	clear: both;
	flex: 0 0 100%;
	max-width: 100%;
	margin-top: var(--space-xs) !important;
}

/* ============================================
   Layout and Spacing
   ============================================ */

.gform_confirmation_message table table tr td {
	border-radius: revert !important;
}

/* Field spacing - one step down from --space-md to tighten the gap between rows */
.gform_wrapper.gform-theme--orbital .gfield,
.gform_wrapper.gravity-theme .gfield {
	margin-bottom: var(--space-sm);
}

/* Multi-column layouts */
.gform_wrapper.gform-theme--orbital .gform_fields,
.gform_wrapper.gravity-theme .gform_fields {
	gap: var(--space-sm);
}

/* Section breaks */
.gform_wrapper.gform-theme--orbital .gsection,
.gform_wrapper.gravity-theme .gsection {
	color: var(--color-heading);
	border-bottom: 1px solid var(--color-border);
	margin-bottom: var(--space-lg);
	padding-top: var(--space-md);
}

.gform_wrapper.gform-theme--orbital .gsection_title,
.gform_wrapper.gravity-theme .gsection_title {
	color: var(--color-text-primary);
	font-size: var(--font-size-lead);
	font-weight: var(--font-weight-semibold);
	margin-bottom: var(--space-xs);
}

.gform_wrapper.gform-theme--orbital .gsection_description,
.gform_wrapper.gravity-theme .gsection_description {
	color: var(--color-text-primary);
	font-size: var(--font-size-body);
}

/* Footer alignment */
.gform_wrapper.gform-theme--orbital .gform_footer,
.gform_wrapper.gravity-theme .gform_footer {
	margin-top: 0;
	padding-top: var(--space-sm);
}

/* ============================================
   File Upload
   ============================================ */

.gform_wrapper.gform-theme--orbital .gform_drop_area,
.gform_wrapper.gravity-theme .gform_drop_area {
	background-color: var(--color-bg-secondary);
	border: 2px dashed var(--color-border);
	border-radius: var(--radius-card);
	padding: var(--space-xl);
	text-align: center;
	transition: border-color var(--transition-base), background-color var(--transition-base);
}

.gform_wrapper.gform-theme--orbital .gform_drop_area:hover,
.gform_wrapper.gravity-theme .gform_drop_area:hover {
	border-color: var(--color-primary);
}

/* Override Orbital's upload icon color (uses gform-icons-orbital font via ::before) */
.gform_wrapper.gform-theme--orbital .gform_drop_area::before {
	color: var(--color-primary) !important;
}

.gform_wrapper.gform-theme--orbital .gform_drop_area .gform_drop_instructions,
.gform_wrapper.gravity-theme .gform_drop_area .gform_drop_instructions {
	color: var(--color-text-primary);
	font-size: var(--font-size-body);
}

.gform_wrapper.gform-theme--orbital .gform_drop_area .button,
.gform_wrapper.gform-theme--orbital .gform_drop_area .gform_button_select_files,
.gform_wrapper.gform-theme--orbital .gform-theme-button--control,
.gform_wrapper.gravity-theme .gform_drop_area .button {
	background: var(--btn-primary-bg) !important;
	border-color: var(--btn-primary-border-color) !important;
	border-radius: var(--radius-button) !important;
	border-style: var(--btn-primary-border-style) !important;
	border-width: var(--btn-primary-border-width) !important;
	color: var(--btn-primary-text-color) !important;
	cursor: pointer;
	font-family: var(--font-family-body);
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-medium);
	margin-top: var(--space-sm);
	padding: var(--space-xs) var(--space-md) !important;
	transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

/* File upload button hover state */
.gform_wrapper.gform-theme--orbital .gform_drop_area .button:hover,
.gform_wrapper.gform-theme--orbital .gform_drop_area .button:focus,
.gform_wrapper.gform-theme--orbital .gform_drop_area .gform_button_select_files:hover,
.gform_wrapper.gform-theme--orbital .gform_drop_area .gform_button_select_files:focus,
.gform_wrapper.gform-theme--orbital .gform-theme-button--control:hover,
.gform_wrapper.gform-theme--orbital .gform-theme-button--control:focus,
.gform_wrapper.gravity-theme .gform_drop_area .button:hover,
.gform_wrapper.gravity-theme .gform_drop_area .button:focus {
	background: var(--btn-primary-hover-bg) !important;
	border-color: var(--btn-primary-hover-border-color) !important;
	color: var(--btn-primary-hover-text-color) !important;
}

/* ============================================
   Progress Bar (Multi-page Forms)
   ============================================ */

.gform_wrapper.gform-theme--orbital .gf_progressbar,
.gform_wrapper.gravity-theme .gf_progressbar {
	background-color: var(--color-bg-secondary);
	border-radius: var(--radius-full);
	height: 8px;
	margin-bottom: var(--space-lg);
	overflow: hidden;
}

.gform_wrapper.gform-theme--orbital .gf_progressbar_percentage,
.gform_wrapper.gravity-theme .gf_progressbar_percentage {
	background: var(--btn-primary-bg);
	border-radius: var(--radius-full);
	height: 100%;
	transition: width var(--transition-base);
}

/* ============================================
   Confirmation Message & Anchor Offset
   ============================================ */

/*
 * Gravity Forms uses .gform_anchor for scrolling after submission.
 * This pseudo-element offsets the anchor point to account for sticky header.
 * Uses CSS variables set by JavaScript (frontend.js) with fallbacks.
 */
.gform_anchor::before {
	content: "";
	display: block;
	height: calc(var(--header-height, 80px) + var(--announcement-bar-height, 40px) + var(--sticky-element-top-offset, 20px) + var(--space-lg));
	margin-top: calc(-1 * (var(--header-height, 80px) + var(--announcement-bar-height, 40px) + var(--sticky-element-top-offset, 20px) + var(--space-lg)));
	pointer-events: none;
}

.gform_wrapper.gform-theme--orbital .gform_confirmation_message,
.gform_wrapper.gravity-theme .gform_confirmation_message,
.gform_confirmation_wrapper {
	font-size: var(--font-size-lead);
}

/* Style the table container */
.gform_wrapper .gform_confirmation_message table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 0;
	border-radius: var(--radius-card);
	border-color: var(--color-border-light);
}

.gform_wrapper .gform_confirmation_message table table th,
.gform_wrapper .gform_confirmation_message table table tr,
.gform_wrapper .gform_confirmation_message table table td {
	border-radius: 0;
}

/* Style table headers (Field Names) */
.gform_wrapper .gform_confirmation_message table table th {
	padding: 10px;
	text-align: left;
	font-weight: bold;
}

/* Style table cells (Submitted Data) */
.gform_wrapper .gform_confirmation_message table table td {
	padding: 10px;
	text-align: left;
}

.gform_wrapper .gform_confirmation_message table table tr:nth-child(even) {
	background-color: var(--color-white);
}

/* ============================================
   Required Message
   ============================================ */

.gform_required_legend {
	margin-bottom: 2em;
	font-size: var(--font-size-small);
	font-style: italic;
}

/* ============================================
   Accessibility Enhancements
   ============================================ */

/* Screen reader text */
.gform_wrapper.gform-theme--orbital .gfield_visibility_hidden,
.gform_wrapper.gravity-theme .gfield_visibility_hidden {
	clip: rect(0, 0, 0, 0);
	height: 1px;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

/* High contrast mode */
@media (prefers-contrast: more) {
	.gform_wrapper.gform-theme--orbital input:not([type="radio"], [type="checkbox"], [type="submit"], [type="button"]),
	.gform_wrapper.gform-theme--orbital select,
	.gform_wrapper.gform-theme--orbital textarea,
	.gform_wrapper.gravity-theme input:not([type="radio"], [type="checkbox"], [type="submit"], [type="button"]),
	.gform_wrapper.gravity-theme select,
	.gform_wrapper.gravity-theme textarea {
		border-width: 2px;
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.gform_wrapper.gform-theme--orbital input,
	.gform_wrapper.gform-theme--orbital select,
	.gform_wrapper.gform-theme--orbital textarea,
	.gform_wrapper.gform-theme--orbital button,
	.gform_wrapper.gform-theme--orbital .gf_progressbar_percentage,
	.gform_wrapper.gravity-theme input,
	.gform_wrapper.gravity-theme select,
	.gform_wrapper.gravity-theme textarea,
	.gform_wrapper.gravity-theme button,
	.gform_wrapper.gravity-theme .gf_progressbar_percentage {
		transition: none;
	}
}

/* ============================================
   Address Field Layout Fixes
   ============================================ */

/*
 * Fix Country dropdown being too narrow in address fields.
 * Gravity Forms address fields use a grid layout that constrains
 * the country dropdown. This ensures the country select is properly
 * sized to display full country names while maintaining the
 * side-by-side layout with other fields like ZIP code.
 */

/* Country select dropdown - ensure adequate width for country names */
.gform_wrapper.gform-theme--orbital .ginput_container_address .ginput_address_country select,
.gform_wrapper.gravity-theme .ginput_container_address .ginput_address_country select {
	width: 100%;
	min-width: 180px;
}

/* Country field container - allow it to grow to fit content */
.gform_wrapper.gform-theme--orbital .ginput_container_address .ginput_address_country,
.gform_wrapper.gravity-theme .ginput_container_address .ginput_address_country {
	flex: 1 1 auto;
	min-width: 180px;
}

/* ============================================
   Datepicker Field
   ============================================ */

.ui-datepicker table th,
.ui-datepicker table td {
	padding: 0 !important;
}

.gform-theme--foundation.ui-datepicker table .ui-state-active a,
.gform-theme--framework.ui-datepicker table .ui-datepicker-current-day a {
	color: var(--color-white) !important;
}

.gform-theme--framework.ui-datepicker table td:not(.ui-state-disabled, .ui-datepicker-current-day) a:hover {
	color: var(--color-text-primary);
}

/* ============================================
   Responsive Adjustments
   ============================================ */

@media (width <=768px) {
	.gform_wrapper.gform-theme--orbital .gform_footer input[type="submit"],
	.gform_wrapper.gform-theme--orbital .gform_page_footer input[type="submit"],
	.gform_wrapper.gravity-theme .gform_footer input[type="submit"],
	.gform_wrapper.gravity-theme .gform_page_footer input[type="submit"] {
		width: 100%;
	}

	.gform_wrapper.gform-theme--orbital .gform_page_footer,
	.gform_wrapper.gravity-theme .gform_page_footer {
		flex-direction: column;
		gap: var(--space-sm);
	}

	.gform_wrapper.gform-theme--orbital .gform_page_footer .gform_previous_button,
	.gform_wrapper.gform-theme--orbital .gform_page_footer .gform_next_button,
	.gform_wrapper.gravity-theme .gform_page_footer .gform_previous_button,
	.gform_wrapper.gravity-theme .gform_page_footer .gform_next_button {
		width: 100%;
	}
}

/*
 * Mobile Landscape Fix
 * GF uses min-width: 640px for multi-column layouts, but mobile landscape
 * often exceeds this (iPhone: 667px-896px). Force single-column layout
 * when in landscape orientation with limited height (mobile devices).
 */
@media (orientation: landscape) and (height <=500px) {
	/* Force single-column layout on mobile landscape */
	.gform_wrapper.gform-theme--orbital .gfield--width-half,
	.gform_wrapper.gravity-theme .gfield--width-half {
		grid-column: span 12 !important;
	}

	/* Stack address fields vertically */
	.gform_wrapper.gform-theme--orbital .ginput_container_address,
	.gform_wrapper.gravity-theme .ginput_container_address {
		display: flex;
		flex-direction: column;
		gap: var(--space-sm);
	}

	.gform_wrapper.gform-theme--orbital .ginput_address_city,
	.gform_wrapper.gform-theme--orbital .ginput_address_state,
	.gform_wrapper.gform-theme--orbital .ginput_address_zip,
	.gform_wrapper.gform-theme--orbital .ginput_address_country,
	.gform_wrapper.gravity-theme .ginput_address_city,
	.gform_wrapper.gravity-theme .ginput_address_state,
	.gform_wrapper.gravity-theme .ginput_address_zip,
	.gform_wrapper.gravity-theme .ginput_address_country {
		width: 100% !important;
		inline-size: 100% !important;
	}

	/* Ensure proper field spacing - matches the desktop --space-sm row gap */
	.gform_wrapper.gform-theme--orbital .gfield,
	.gform_wrapper.gravity-theme .gfield {
		margin-bottom: var(--space-sm);
	}
}


.contact-form-gravity-block .contact-form-wrapper {
	margin-top: var(--space-xs);
}