/**
 * TEC HFA Video Gate (Gravity Forms ID 30) — submit button styling.
 *
 * Loaded conditionally by tec-hfa-gate.php during the gate template render.
 * Mirrors the canonical TEC primary button vocabulary — see
 * buttons.css `.is-style-tec-primary` and the parallel rule in
 * donation-form.css for form 29.
 *
 * Specificity strategy: GF 2.9 ships
 *   .gform-theme.gform-theme--framework.gform_wrapper
 *     input[type=submit].button.gform_button:where(:not(...))
 * which computes to (0,6,1). To beat this without `!important` we anchor
 * on `#gform_wrapper_30` — the wrapper ID auto-emitted by GF when form 30
 * renders. ID specificity (1,0,0) trumps any class-based stack outright,
 * so the rule wins regardless of source order.
 */

#gform_wrapper_30 .gform_footer {
	margin-block-start: var(--wp--preset--spacing--40, 1.25rem);
	padding: 0;
}

#gform_wrapper_30 .gform_footer input[type="submit"].gform_button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding-block: 0.75rem;
	padding-inline: 2rem;
	border: 1px solid var(--wp--preset--color--accent-yellow);
	border-radius: var(--wp--custom--card--border--radius, 5px);
	background-color: var(--wp--preset--color--accent-yellow);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--sans-body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.5;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

#gform_wrapper_30 .gform_footer input[type="submit"].gform_button.button:hover {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--accent-yellow);
	border-color: var(--wp--preset--color--accent-yellow);
}

#gform_wrapper_30 .gform_footer input[type="submit"].gform_button.button:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-yellow);
	outline-offset: 2px;
}

@media (max-width: 766px) {
	#gform_wrapper_30 .gform_footer input[type="submit"].gform_button.button {
		width: 100%;
	}
}