/* ==========================================================================
   Block: Contact CTA (bga/contact-cta)

   Form elements inherit adaptive theming from --form-* tokens.
   The .form-theme-dark class on the wrapper overrides tokens for dark bg.
   ========================================================================== */

.bga-contact-cta {
	background-color: var(--color-orange);
}

.bga-contact-cta__inner {
	padding: var(--section-padding-mobile) 0;
	color: var(--color-white);
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background-color: var(--color-orange);
}

.bga-contact-cta__inner::after {
	content: "";
	position: absolute;
	inset: 0;
	border-bottom: 1px solid rgba(60, 24, 8, 0.28);
	pointer-events: none;
	z-index: 0;
}

.bga-contact-cta__content {
	position: relative;
	z-index: 1;
}

.bga-contact-cta__layout {
	display: flex;
	flex-direction: column;
	gap: clamp(var(--sp-40), 6vw, var(--sp-64));
	align-items: flex-start;
}

.bga-contact-cta__heading-wrap {
	position: relative;
	max-width: 24rem;
}

.bga-contact-cta__heading-wrap::before {
	content: "";
	display: block;
	width: 72px;
	height: 1px;
	margin-bottom: var(--sp-24);
	background: rgba(233, 230, 225, 0.4);
}

.bga-contact-cta__heading {
	font-size: var(--text-h1);
	color: var(--color-white);
	margin-bottom: 0;
	line-height: 0.95;
	letter-spacing: -0.035em;
	white-space: nowrap;
	text-shadow: 0 16px 40px rgba(16, 8, 2, 0.18);
}

/* Form layout */
.bga-contact-cta__form {
	display: flex;
	flex-direction: column;
	gap: var(--sp-20);
}

.bga-contact-cta__row {
	display: flex;
	flex-direction: column;
	gap: var(--sp-20);
}

/* Submit button — uses form tokens for adaptive theming */
.bga-contact-cta__submit {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: var(--sp-8);
	padding: 14px var(--sp-40);
	background-color: var(--form-btn-bg);
	color: var(--form-btn-text);
	font-family: var(--font-body);
	font-size: var(--text-label);
	font-weight: var(--font-weight-light);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	line-height: 1;
	border: 1px solid var(--form-btn-border);
	cursor: pointer;
	transition: transform var(--transition-smooth), opacity var(--transition-smooth), box-shadow var(--transition-smooth);
	box-shadow: 0 18px 36px rgba(41, 19, 5, 0.16);
}

.bga-contact-cta__submit:hover {
	opacity: 0.9;
	transform: translateY(-2px);
}

.bga-contact-cta__submit:focus-visible {
	outline: 2px solid var(--color-white);
	outline-offset: var(--sp-4);
}

/* Fallback email link */
.bga-contact-cta__fallback {
	color: var(--color-cream);
}

.bga-contact-cta__fallback a {
	color: var(--color-white);
}

/* ==========================================================================
   Gravity Forms 2.9+ overrides
   Form tokens handle colors; these overrides handle GF-specific structure.
   ========================================================================== */

/* Reset GF wrapper + override GF 2.9+ theme custom properties */
.bga-contact-cta .gform_wrapper.gform-theme {
	max-width: 100%;
	--gf-color-primary: var(--form-focus-border);
	--gf-color-out-ctrl-light: transparent;
	--gf-color-out-ctrl-dark: var(--color-cream);
	--gf-color-out-ctrl-lighter: transparent;
	--gf-color-out-ctrl-darker: var(--color-cream);
	--gf-color-in-ctrl: var(--color-cream);
	--gf-color-in-ctrl-primary: var(--color-cream);
	--gf-color-in-ctrl-light: transparent;
	--gf-color-in-ctrl-dark: var(--color-cream);
	--gf-ctrl-color: var(--color-cream);
	--gf-ctrl-bg-color: transparent;
	--gf-ctrl-border-color: var(--form-border);
	--gf-label-color-primary: var(--color-cream);
}

.bga-contact-cta__form-wrap {
	width: 100%;

	/* Borderless underline style — fields sit on the orange background */
	--form-bg: transparent;
	--form-border: rgba(233, 230, 225, 0.35);
	--form-text: var(--color-cream);
	--form-font-weight: var(--font-weight-light);
	--form-label: var(--color-cream);
	--form-placeholder: rgba(233, 230, 225, 0.6);
	--form-focus-border: var(--color-cream);
	--form-focus-bg: transparent;
	--form-btn-bg: var(--color-brown);
	--form-btn-text: var(--color-cream);
	--form-btn-border: var(--color-brown);
	--form-required: rgba(233, 230, 225, 0.6);
	--form-error-border: rgba(255, 255, 255, 0.6);
	--form-error-text: var(--color-cream);
}

.bga-contact-cta .gform_wrapper .gform_fields {
	grid-row-gap: 20px !important;
}

/* Force all fields full width */
.bga-contact-cta .gform_wrapper .gfield {
	grid-column: 1 / -1 !important;
}

/* Name sub-fields (First / Last) — side by side.
   CSS grid is used instead of flex because GF's foundation CSS applies
   inline-size:100% and padding-inline to each .gform-grid-col span.
   Grid ignores those child sizing properties entirely and divides space
   purely by the template columns. */
.bga-contact-cta .gform_wrapper .ginput_complex {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: var(--sp-16) !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

/* Strip GF's gutter padding from each column — our gap handles the space */
.bga-contact-cta .gform_wrapper .ginput_complex > span {
	padding-inline: 0 !important;
	inline-size: auto !important;
	width: auto !important;
	min-width: 0 !important;
}

/* Sub-labels (First Name, Last Name) — visible, styled for dark bg */
.bga-contact-cta .gform_wrapper .ginput_complex .name_first label,
.bga-contact-cta .gform_wrapper .ginput_complex .name_last label {
	display: block !important;
	color: rgba(233, 230, 225, 0.7) !important;
	font-size: var(--text-caption) !important;
	font-weight: var(--font-weight-light) !important;
	margin-bottom: var(--sp-4) !important;
}

/* Input, textarea, select — override GF defaults with form tokens */
.bga-contact-cta .gform_wrapper input:not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
.bga-contact-cta .gform_wrapper textarea,
.bga-contact-cta .gform_wrapper select {
	width: 100% !important;
	background-color: transparent !important;
	border: none !important;
	border-bottom: 1px solid var(--form-border) !important;
	border-radius: 0 !important;
	color: var(--form-text) !important;
	padding: 13px 0 !important;
	font-family: var(--font-body) !important;
	font-size: var(--text-base) !important;
	font-weight: var(--form-font-weight) !important;
	line-height: 1.4 !important;
	outline: none !important;
	box-shadow: none !important;
	transition: border-color 0.15s;
}

.bga-contact-cta .gform_wrapper input::placeholder,
.bga-contact-cta .gform_wrapper textarea::placeholder {
	color: var(--form-placeholder) !important;
}

.bga-contact-cta .gform_wrapper input:focus,
.bga-contact-cta .gform_wrapper textarea:focus,
.bga-contact-cta .gform_wrapper select:focus {
	border-bottom-color: var(--form-focus-border) !important;
	background-color: transparent !important;
	outline: none !important;
	box-shadow: none !important;
}

/* Labels */
.bga-contact-cta .gform_wrapper .gfield_label,
.bga-contact-cta .gform_wrapper .gform-field-label {
	font-size: var(--text-label) !important;
	font-weight: var(--font-weight-light) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.14em !important;
	color: var(--form-label) !important;
	margin-bottom: var(--sp-8) !important;
}

/* Required indicator */
.bga-contact-cta .gform_wrapper .gfield_required {
	color: var(--form-required) !important;
}

/* Select dropdown — brown chevron on cream bg */
.bga-contact-cta .gform_wrapper select {
	appearance: none !important;
	-webkit-appearance: none !important;
	cursor: pointer;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23E9E6E1' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 0 center !important;
	padding-right: 28px !important;
}

/* GF 2.9+ select text — force readable text over GF theme layer */
.bga-contact-cta .gform_wrapper.gform-theme select.gfield_select,
.bga-contact-cta .gform_wrapper .gfield select,
.bga-contact-cta .gform-theme--framework select,
.bga-contact-cta select {
	--gf-ctrl-color: var(--color-cream) !important;
	--gf-color-in-ctrl: var(--color-cream) !important;
	--gf-color-in-ctrl-primary: var(--color-cream) !important;
	--gf-color-out-ctrl-dark: var(--color-cream) !important;
	--gf-ctrl-label-color-primary: var(--color-cream) !important;
	color: var(--color-cream) !important;
	-webkit-text-fill-color: var(--color-cream) !important;
	-webkit-text-stroke: 0 !important;
	text-shadow: none !important;
	opacity: 1 !important;
	font-weight: 400 !important;
	font-size: var(--text-base) !important;
	text-indent: 0 !important;
	letter-spacing: normal !important;
	-webkit-background-clip: unset !important;
	background-clip: unset !important;
}

.bga-contact-cta .gform_wrapper select option {
	color: var(--color-brown);
	background-color: var(--color-white);
}

/* Placeholder option — muted hint text */
.bga-contact-cta .gform_wrapper select option[value=""],
.bga-contact-cta .gform_wrapper select option:first-child:disabled {
	color: var(--color-brown-40);
}

/* Textarea */
.bga-contact-cta .gform_wrapper textarea {
	resize: vertical;
	min-height: 140px !important;
}

/* Character counter */
.bga-contact-cta .gform_wrapper .charleft,
.bga-contact-cta .gform_wrapper .ginput_counter {
	color: var(--form-label) !important;
	font-size: var(--text-caption) !important;
}

/* Submit button */
.bga-contact-cta .gform_wrapper .gform-footer,
.bga-contact-cta .gform_wrapper .gform_footer {
	margin-top: var(--sp-8) !important;
	padding: 0 !important;
}

.bga-contact-cta .gform_wrapper .gform_button,
.bga-contact-cta .gform_wrapper input[type="submit"] {
	display: inline-flex !important;
	align-items: center !important;
	padding: 14px var(--sp-40) !important;
	background-color: var(--form-btn-bg) !important;
	color: var(--form-btn-text) !important;
	font-family: var(--font-body) !important;
	font-size: var(--text-label) !important;
	font-weight: var(--font-weight-light) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.14em !important;
	line-height: 1 !important;
	border: 1px solid var(--form-btn-border) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: transform var(--transition-smooth), opacity var(--transition-smooth), box-shadow var(--transition-smooth);
	box-shadow: 0 18px 36px rgba(41, 19, 5, 0.16) !important;
}

.bga-contact-cta .gform_wrapper .gform_button:hover,
.bga-contact-cta .gform_wrapper input[type="submit"]:hover {
	opacity: 0.9 !important;
	transform: translateY(-2px);
}

.bga-contact-cta .gform_wrapper .gform_button:focus-visible,
.bga-contact-cta .gform_wrapper input[type="submit"]:focus-visible {
	outline: 2px solid var(--color-white) !important;
	outline-offset: var(--sp-4) !important;
}

/* ==========================================================================
   Validation
   ========================================================================== */

/* Top banner — submission error summary */
.bga-contact-cta .gform_validation_errors {
	background: rgba(255, 255, 255, 0.08) !important;
	border: 1px solid rgba(255, 255, 255, 0.3) !important;
	border-left: 3px solid var(--color-cream) !important;
	border-radius: 0 !important;
	padding: var(--sp-16) var(--sp-20) !important;
	margin-bottom: var(--sp-24) !important;
}

.bga-contact-cta .gform_validation_errors h2 {
	color: var(--color-cream) !important;
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	font-weight: var(--font-weight-regular) !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	line-height: 1.4 !important;
	margin: 0 !important;
	display: flex !important;
	align-items: center !important;
	gap: var(--sp-8) !important;
}

/* Hide GF's icon in the banner — use CSS instead */
.bga-contact-cta .gform_validation_errors .gform-icon {
	display: none !important;
}

.bga-contact-cta .gform_validation_errors h2::before {
	content: "";
	display: inline-block;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23e9e6e1' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Error field borders — distinct red, not orange */
.bga-contact-cta .gform_wrapper .gfield_error input,
.bga-contact-cta .gform_wrapper .gfield_error textarea,
.bga-contact-cta .gform_wrapper .gfield_error select {
	border-color: var(--form-error-border) !important;
}

/* Field-level validation messages */
.bga-contact-cta .gform_wrapper .gfield_description.validation_message {
	color: var(--form-error-text) !important;
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	margin-top: var(--sp-8) !important;
	font-size: var(--text-caption) !important;
	font-weight: var(--font-weight-regular) !important;
	line-height: 1.3 !important;
}

/* Legacy .validation_error class (older GF versions) */
.bga-contact-cta .gform_wrapper .validation_error {
	color: var(--form-error-text) !important;
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
}

/* Hide GF phone format icon, SMS icon, and field descriptions */
.bga-contact-cta .gform_wrapper .gfield_description:not(.validation_message),
.bga-contact-cta .gform_wrapper .instruction,
.bga-contact-cta .gform_wrapper .gform_card_icon_container,
.bga-contact-cta .gform_wrapper .ginput_phone_icon,
.bga-contact-cta .gform_wrapper .gfield_input_sms,
.bga-contact-cta .gform_wrapper .gform-theme-button--size-xs,
.bga-contact-cta .gform_wrapper [class*="phone"] .gfield_description,
.bga-contact-cta .gform_wrapper .gfield--type-phone .gfield_description,
.bga-contact-cta .gform_wrapper .gform-icon,
.bga-contact-cta .gform_wrapper button.gform-theme-button:not([type="submit"]) {
	display: none !important;
}

/* Checkbox — cream text on orange bg */
.bga-contact-cta .gform_wrapper .gfield--type-checkbox label,
.bga-contact-cta .gform_wrapper .gfield--type-consent label,
.bga-contact-cta .gform_wrapper .gchoice label {
	color: var(--color-cream) !important;
}

.bga-contact-cta .gform_wrapper .gfield--type-checkbox input[type="checkbox"],
.bga-contact-cta .gform_wrapper .gfield--type-consent input[type="checkbox"] {
	border-color: rgba(233, 230, 225, 0.5) !important;
	background-color: transparent !important;
}

/* Confirmation message */
.bga-contact-cta .gform_confirmation_message {
	color: var(--form-confirm-text);
	font-size: var(--text-base);
}

/* Responsive */
@media (min-width: 768px) {
	.bga-contact-cta__inner {
		padding: var(--section-padding-desktop) 0;
	}

	.bga-contact-cta__layout {
		flex-direction: row;
		align-items: flex-start;
	}

	.bga-contact-cta__heading-wrap {
		flex: 0 0 35%;
		padding-inline-end: var(--sp-40);
	}

	.bga-contact-cta__form-wrap {
		flex: 1;
		padding: 0;
	}

	.bga-contact-cta__row {
		flex-direction: row;
	}

	.bga-contact-cta__row .bga-contact-cta__field {
		flex: 1;
	}
}