/**
 * Gravity Forms · Orbital theme, styled to the CoCompass form spec.
 *
 * Two layers:
 *  1. Orbital's CSS API custom properties (colours, sizes, radius). These do
 *     most of the work and survive Gravity Forms updates.
 *  2. A few direct rules for details the API doesn't expose (sub-label size,
 *     section break, validation summary icon, confirmation panel).
 *
 * Spec: labels Inter 15/600 ink · required asterisk in error red ·
 * inputs 48px, 8px radius, 1px #8A93A3, 16px text · textarea 140px with
 * counter · choices stacked, 20px, brand when selected · text-only maple
 * submit · errors in text, never colour alone.
 */

.gform_wrapper.gform-theme--orbital,
.gform_wrapper.gform-theme--framework,
.gform_wrapper.gravity-theme {
	--gf-color-primary: #D52B1E;
	--gf-color-primary-rgb: 213, 43, 30;
	--gf-color-primary-contrast: #FFFFFF;
	--gf-color-primary-darker: #B8241A;
	--gf-color-primary-lighter: #E04A3E;
	--gf-color-secondary: #FFFFFF;
	--gf-color-secondary-contrast: #0D1321;
	--gf-color-out-ctrl-dark: #0D1321;
	--gf-color-out-ctrl-light: #E2E6EC;
	--gf-color-out-ctrl-light-darker: #8A93A3;
	--gf-color-in-ctrl: #FFFFFF;
	--gf-color-in-ctrl-contrast: #0D1321;
	--gf-color-in-ctrl-dark: #0D1321;
	--gf-color-in-ctrl-light: #E2E6EC;
	--gf-color-in-ctrl-light-darker: #8A93A3;
	--gf-color-in-ctrl-primary: #007BC1;
	--gf-color-in-ctrl-primary-rgb: 0, 123, 193;
	--gf-color-in-ctrl-primary-contrast: #FFFFFF;
	--gf-color-danger: #B42318;
	--gf-color-danger-rgb: 180, 35, 24;
	--gf-color-danger-contrast: #FEF3F2;
	--gf-color-success: #0E8A63;
	--gf-radius: 8px;
	--gf-font-size-primary: 16px;
	--gf-font-size-secondary: 15px;
	--gf-font-size-tertiary: 13px;
	--gf-ctrl-size-md: 48px;
	--gf-ctrl-size-lg: 48px;
	--gf-ctrl-border-width: 1px;
	--gf-ctrl-border-color: #8A93A3;
	--gf-ctrl-border-color-hover: #5A6374;
	--gf-ctrl-border-color-focus: #007BC1;
	--gf-ctrl-border-color-error: #B42318;
	--gf-ctrl-radius: 8px;
	--gf-ctrl-font-size: 16px;
	--gf-ctrl-shadow: none;
	--gf-ctrl-label-color-primary: #0D1321;
	--gf-ctrl-label-color-secondary: #5A6374;
	--gf-ctrl-label-color-req: #B42318;
	--gf-ctrl-label-font-size-primary: 15px;
	--gf-ctrl-label-font-size-secondary: 13px;
	--gf-ctrl-label-font-weight-primary: 600;
	--gf-ctrl-label-font-weight-secondary: 400;
	--gf-ctrl-desc-color: #5A6374;
	--gf-ctrl-desc-font-size: 13px;
	--gf-ctrl-choice-size-md: 20px;
	--gf-ctrl-btn-font-size-md: 16px;
	--gf-ctrl-btn-font-weight: 600;
	--gf-ctrl-btn-radius: 8px;
	--gf-ctrl-btn-padding-x-md: 22px;
	--gf-field-gap-y: 28px;
	--gf-field-gap-x: 20px;
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--text-body);
}

/* Required legend at the top: muted, small. */
.gform_wrapper .gform_required_legend {
	margin: 0 0 24px;
	color: #5A6374;
	font-size: 13px;
}

/* Labels and the red asterisk. */
.gform_wrapper .gfield_label,
.gform_wrapper legend.gfield_label {
	color: #0D1321;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
}

.gform_wrapper .gfield_required,
.gform_wrapper .gfield_required_asterisk {
	color: #B42318;
}

/* Sub-labels (Name: First / Last) below the inputs. */
.gform_wrapper .gform-field-label--type-sub,
.gform_wrapper .ginput_complex label {
	margin-top: 6px;
	color: #5A6374;
	font-size: 13px;
	font-weight: 400;
}

/* Inputs: 48px, flat, 16px text (no iOS zoom). */
.gform_wrapper input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="file"]),
.gform_wrapper select {
	min-height: 48px;
	border: 1px solid #8A93A3;
	border-radius: 8px;
	background-color: #FFFFFF;
	box-shadow: none;
	color: #0D1321;
	font-size: 16px;
}

.gform_wrapper textarea {
	min-height: 140px;
	border: 1px solid #8A93A3;
	border-radius: 8px;
	box-shadow: none;
	font-size: 16px;
}

.gform_wrapper input:focus-visible,
.gform_wrapper select:focus-visible,
.gform_wrapper textarea:focus-visible {
	outline: 2px solid #007BC1;
	outline-offset: 2px;
	border-color: #007BC1;
}

/* Descriptions, counters and consent text. */
.gform_wrapper .gfield_description,
.gform_wrapper .ginput_counter,
.gform_wrapper .gfield_consent_description {
	color: #5A6374;
	font-size: 13px;
	line-height: 1.5;
}

.gform_wrapper .gfield_consent_description {
	max-height: none;
	overflow: visible;
	padding: 0;
	border: 0;
	margin-top: 8px;
}

/* Choices: stacked, 20px controls, brand when checked. */
.gform_wrapper .gfield_checkbox,
.gform_wrapper .gfield_radio {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.gform_wrapper .gchoice {
	display: flex;
	align-items: center;
	gap: 12px;
}

.gform_wrapper .gchoice label,
.gform_wrapper .gfield_consent_label {
	color: #0D1321;
	font-size: 16px;
	font-weight: 400;
}

.gform_wrapper input[type="checkbox"],
.gform_wrapper input[type="radio"] {
	width: 20px;
	height: 20px;
	accent-color: #007BC1;
}

/* Section break: title, description, hairline. */
.gform_wrapper .gsection {
	padding: 8px 0 14px;
	border-bottom: 1px solid #E2E6EC;
	margin-top: 16px;
}

.gform_wrapper .gsection:first-child,
.gform_wrapper .gform_fields > .gsection:first-of-type {
	margin-top: 0;
}

.gform_wrapper .gsection_title {
	margin: 0;
	color: #0D1321;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.gform_wrapper .gsection_description {
	margin-top: 4px;
	padding: 0;
	color: #5A6374;
	font-size: 14px;
}

/* Validation: top summary + message under each field, in text. */
.gform_wrapper .gform_validation_errors {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 24px;
	padding: 16px 20px;
	border: 1px solid #B42318;
	border-radius: 8px;
	background: #FEF3F2;
	box-shadow: none;
}

.gform_wrapper .gform_validation_errors > h2,
.gform_wrapper .gform_submission_error {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	color: #B42318;
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
}

.gform_wrapper .gfield_error input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="file"]),
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error [aria-invalid="true"] {
	border-width: 2px;
	border-color: #B42318;
}

.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
	margin-top: 8px;
	padding: 0;
	border: 0;
	background: none;
	color: #B42318;
	font-size: 14px;
	font-weight: 500;
}

/* Submit: text only, maple red, 8px radius, Inter 16/600. */
.gform_wrapper .gform_footer,
.gform_wrapper .gform_page_footer {
	margin-top: 28px;
	padding: 0;
}

.gform_wrapper .gform_footer .gform_button,
.gform_wrapper .gform_footer button[type="submit"],
.gform_wrapper .gform_footer input[type="submit"] {
	width: auto;
	min-height: 48px;
	padding: 14px 24px;
	border: 0;
	border-radius: 8px;
	background: #D52B1E;
	color: #FFFFFF;
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 150ms ease;
}

.gform_wrapper .gform_footer .gform_button:hover,
.gform_wrapper .gform_footer button[type="submit"]:hover,
.gform_wrapper .gform_footer input[type="submit"]:hover {
	background: #B8241A;
}

.gform_wrapper .gform_footer .gform_button:focus-visible {
	outline: 2px solid #007BC1;
	outline-offset: 3px;
}

/* Confirmation: tint panel with a circle-check, title and body. */
.gform_confirmation_wrapper .gform_confirmation_message {
	padding: 32px;
	border-radius: 12px;
	background: #EEF5FB;
	color: #2A3344;
	font-size: 16px;
	line-height: 1.6;
}

.gform_confirmation_message .cc-confirm__icon {
	display: block;
	margin-bottom: 14px;
	color: #007BC1;
}

.gform_confirmation_message h2,
.gform_confirmation_message h3,
.gform_confirmation_message strong:first-child {
	display: block;
	margin: 0 0 8px;
	color: #0D1321;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.gform_confirmation_message p {
	margin: 0;
}

/* Mobile: single column always. */
@media (max-width: 640px) {
	.gform_wrapper .gform_fields {
		grid-template-columns: 1fr !important;
	}

	.gform_wrapper .gfield {
		grid-column: 1 / -1 !important;
	}
}