/* SC Gravity Forms: Orbital theme pointed at the design-system variables, so every
   site gets its own colours, type and sizes, and forms follow invert contexts.
   !important beats the per-form variables GF prints inline (ID specificity). */
.gform-theme--orbital {
	/* Palette: Orbital derives most component colours from these */
	--gf-color-primary: var(--brand) !important;
	--gf-color-primary-darker: var(--brand-hover) !important;
	--gf-color-primary-lighter: var(--tint) !important;
	--gf-color-primary-contrast: var(--on-brand) !important;
	--gf-color-secondary: var(--surface) !important;
	--gf-color-secondary-darker: var(--tint) !important;
	--gf-color-secondary-lighter: var(--surface) !important;
	--gf-color-secondary-contrast: var(--text-color) !important;
	--gf-color-out-ctrl-dark: var(--text-color) !important;
	--gf-color-out-ctrl-dark-darker: var(--text-color) !important;
	--gf-color-out-ctrl-dark-lighter: var(--muted-text) !important;
	--gf-color-out-ctrl-light: var(--field-border) !important;
	--gf-color-out-ctrl-light-darker: var(--field-border) !important;
	--gf-color-out-ctrl-light-lighter: var(--tint) !important;
	--gf-color-in-ctrl: var(--surface) !important;
	--gf-color-in-ctrl-contrast: var(--text-color) !important;
	--gf-color-in-ctrl-dark: var(--text-color) !important;
	--gf-color-in-ctrl-dark-darker: var(--text-color) !important;
	--gf-color-in-ctrl-dark-lighter: var(--muted-text) !important;
	--gf-color-in-ctrl-light: var(--field-border) !important;
	--gf-color-in-ctrl-light-darker: var(--field-border) !important;
	--gf-color-in-ctrl-light-lighter: var(--tint) !important;
	--gf-color-in-ctrl-primary: var(--brand) !important;
	--gf-color-in-ctrl-primary-darker: var(--brand-hover) !important;
	--gf-color-in-ctrl-primary-lighter: var(--tint) !important;
	--gf-color-in-ctrl-primary-contrast: var(--on-brand) !important;
	--gf-color-danger: var(--error) !important;
	--gf-color-success: var(--success) !important;

	/* Colours GF prints inline per form instead of deriving from the palette */
	--gf-ctrl-border-color: var(--field-border) !important;
	--gf-ctrl-label-color-primary: var(--text-color) !important;
	--gf-ctrl-label-color-secondary: var(--text-color) !important;
	--gf-ctrl-btn-border-color-secondary: var(--brand) !important;
	--gf-ctrl-btn-bg-color-hover-tertiary: var(--tint) !important;

	/* Type */
	--gf-font-family-base: var(--body) !important;
	--gf-font-size-primary: var(--body-default) !important;
	--gf-font-size-secondary: calc(var(--body-default) - 0.125rem) !important;
	--gf-font-size-tertiary: var(--body-s-size) !important;
	--gf-line-height-primary: var(--body-line-height) !important;
	--gf-line-height-secondary: var(--body-line-height) !important;
	--gf-line-height-tertiary: var(--body-line-height) !important;

	/* Shape */
	--gf-radius: var(--radius-m) !important;
	--gf-ctrl-border-width: var(--border-m) !important;

	/* Controls */
	--gf-ctrl-size: auto !important;
	--gf-ctrl-padding-x: var(--button-input-padding-horizontal) !important;
	--gf-ctrl-padding-y: var(--button-input-padding-vertical) !important;
	--gf-ctrl-textarea-padding-y: var(--button-input-padding-vertical) !important;
	--gf-ctrl-line-height: var(--body-line-height) !important;
	--gf-ctrl-textarea-line-height: var(--body-line-height) !important;
	--gf-ctrl-shadow: none !important;
	--gf-ctrl-transition: 0ms !important;
	--gf-ctrl-placeholder-color: var(--muted-text) !important;

	/* Focus ring: the site-wide keyboard ring */
	--gf-ctrl-outline-width-focus: var(--focus-outline) !important;
	--gf-ctrl-outline-color-focus: var(--focus-ring, var(--brand)) !important;
	--gf-ctrl-outline-offset: var(--focus-outline-gap) !important;

	/* Buttons */
	--gf-ctrl-btn-size: auto !important;
	--gf-ctrl-btn-padding-x: var(--button-input-padding-horizontal) !important;
	--gf-ctrl-btn-padding-y: var(--button-input-padding-vertical) !important;
	--gf-ctrl-btn-font-size: var(--body-default) !important;
	--gf-ctrl-btn-line-height: var(--body-line-height) !important;
	--gf-ctrl-btn-shadow: var(--shadow-rest, none) !important;

	/* Spacing */
	--gf-label-space-primary: var(--spacing-s) !important;
	--gf-form-gap-x: var(--spacing-m) !important;
	--gf-form-gap-y: var(--spacing-m) !important;
	--gf-form-footer-margin-y-start: var(--spacing-m) !important;

	/* Colours GF builds from its own -rgb values, which can't read our variables */
	--gf-form-validation-bg-color: var(--error-wash) !important;
	--gf-form-validation-border-color: var(--error) !important;
	--gf-form-validation-outline-color-focus: var(--error) !important;
	--gf-form-validation-color: var(--error-text) !important;
	--gf-form-spinner-bg-color-secondary: var(--tint) !important;
}

/* No "* indicates required fields" line; the asterisks speak for themselves */
.gform-theme--orbital .gform_required_legend {
	display: none;
}

/* Number fields: no spinner arrows (GF's icon + the native one) */
.gform-theme--orbital input[type="number"] {
	--gf-icon-ctrl-number: none;
	--gf-ctrl-number-spin-btn-width: 0;
	appearance: textfield;
}

/* Button lift on hover, as site buttons */
.gform-theme--orbital .gform-theme-button:is(:hover, :focus-visible) {
	transform: translate3d(0, -2px, 0);
}

/* Confirmation message (GF leaves it unstyled) */
.gform_confirmation_message {
	padding: var(--button-input-padding-vertical) var(--button-input-padding-horizontal);
	border: var(--border-m) solid var(--success);
	border-radius: var(--radius-m);
	color: var(--success-text);
	background-color: var(--success-wash);
}

/* Centred form contents: opt in with "sc-centred" in the form's CSS Class Name
   setting (GF adds "sc-centred_wrapper" to the wrapper) */
.sc-centred_wrapper {
	text-align: center;
}
.sc-centred_wrapper :is(input, textarea, select) {
	text-align: center;
}
.sc-centred_wrapper :is(.gfield_label, .gchoice, .ginput_container_date, .gform_footer, .gform_page_footer) {
	justify-content: center;
}
.sc-centred_wrapper legend.gfield_label {
	width: 100%;
}
/* Inline submit button when GF stacks the row on phones */
@media (max-width: 640px) {
	.sc-centred_wrapper .gfield--type-submit {
		justify-content: center;
	}
}