.omg-newsletter-signup {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	padding-block: 64px;
	padding-inline: var(--wp--preset--spacing--space-20);
}

.omg-newsletter-signup__container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--space-48);
	max-width: 1009px;
	margin-inline: auto;
}

.omg-newsletter-signup__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--space-12);
	text-align: center;
	width: 100%;
}

.omg-newsletter-signup__subheading {
	margin: 0;
	font-family: var(--wp--preset--font-family--kalam);
	font-size: var(--wp--preset--font-size--subheading);
	font-weight: 700;
	line-height: 1.25;
	color: inherit;
}

.omg-newsletter-signup__heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--h-2);
	font-weight: 800;
	line-height: 1.0833;
	color: inherit;
}

.omg-newsletter-signup__form {
	width: 100%;
}

/* The rules below re-skin Gravity Forms' Orbital markup, whose class names
   (gform_wrapper, gfield, ginput_container, ...) are third-party and not BEM. */
/* stylelint-disable selector-class-pattern */

/* Override the Orbital theme's wrapper spacing so layout is ours to set. */
.omg-newsletter-signup .gform_wrapper {
	margin: 0;
}

/* Labels are screen-reader only; the placeholders carry the visible text. */
.omg-newsletter-signup .gform_wrapper .gfield_label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Replace Orbital's CSS grid with a flex stack (rows at desktop, see below). */
.omg-newsletter-signup .gform_wrapper .gform_fields {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--space-4);
}

/* 4px transparent gutter that becomes the focus halo without shifting layout. */
.omg-newsletter-signup .gform_wrapper .ginput_container {
	padding: 4px;
	border-radius: 20px;
	background-color: transparent;
	transition: background-color 0.15s ease;
}

.omg-newsletter-signup .gform_wrapper .gfield:focus-within .ginput_container {
	background-color: var(--wp--preset--color--primary-tint-4);
}

.omg-newsletter-signup .gform_wrapper .ginput_container input {
	width: 100%;
	height: 52px;
	padding: 12px 20px;
	border: 1px solid rgba(0, 0, 0, 0.01);
	border-radius: 16px;
	background-color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	color: var(--wp--preset--color--dark-blue);
	box-sizing: border-box;
	transition: border-color 0.15s ease;
}

.omg-newsletter-signup .gform_wrapper .ginput_container input::placeholder {
	color: var(--wp--preset--color--dark-blue);
	opacity: 0.8;
}

.omg-newsletter-signup .gform_wrapper .ginput_container input:focus {
	outline: none;
	border-color: var(--wp--preset--color--dark-blue);
}

/* The design has no top error summary; keep it for screen readers only. */
.omg-newsletter-signup .gform_wrapper .gform_validation_errors {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Error: red input border, no halo, white pill message with an info icon. */
.omg-newsletter-signup .gform_wrapper .gfield_error .ginput_container input {
	border-color: var(--wp--preset--color--alert);
}

.omg-newsletter-signup .gform_wrapper .gfield_validation_message {
	display: flex;
	align-items: center;
	gap: 10px;
	width: fit-content;
	margin-top: var(--wp--preset--spacing--space-12);
	padding: 8px 20px;
	border-radius: 24px;
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--alert);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
}

.omg-newsletter-signup .gform_wrapper .gfield_validation_message::before {
	content: "";
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	background-color: currentcolor;
	mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8zm-1-13h2v2h-2zm0 4h2v6h-2z%27/%3E%3C/svg%3E") center / contain no-repeat;
}

.omg-newsletter-signup .gform_wrapper .gform_footer {
	margin: var(--wp--preset--spacing--space-16) 0 0;
	padding: 0;
}

/* Selector mirrors Orbital's own button classes (.gform-theme, .gform_button,
   .button) so it out-specifies the framework's (0,6,1) button rule and wins
   regardless of stylesheet order. */
.omg-newsletter-signup .gform-theme.gform_wrapper .gform_footer button[type="submit"].gform_button.button {
	width: 100%;
	min-height: 60px;
	padding: 16px 40px;
	border: 0;
	border-radius: 100px;
	background-color: var(--wp--preset--color--dark-blue);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--button);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: -0.32px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.omg-newsletter-signup .gform-theme.gform_wrapper .gform_footer button[type="submit"].gform_button.button:hover,
.omg-newsletter-signup .gform-theme.gform_wrapper .gform_footer button[type="submit"].gform_button.button:focus-visible {
	background-color: var(--wp--preset--color--yellow);
	color: var(--wp--preset--color--dark-blue);
}

/* On a successful submission GF swaps the form for its confirmation in place;
   the banner header sits outside that swap, so hide it to leave only the
   success message (matches the design's success state). */
.omg-newsletter-signup__container:has(.gform_confirmation_message) .omg-newsletter-signup__header {
	display: none;
}

.omg-newsletter-signup__success,
.omg-newsletter-signup .gform_confirmation_message {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--space-16);
	max-width: 720px;
	margin-inline: auto;
	text-align: center;
}

.omg-newsletter-signup__success-heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--h-2);
	font-weight: 800;
	line-height: 1.0833;
	color: inherit;
}

.omg-newsletter-signup__success-message {
	margin: 0;
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 400;
	line-height: 1.6;
	color: inherit;
}

@media (min-width: 834px) {

	.omg-newsletter-signup {
		padding-block: var(--wp--preset--spacing--space-100);
	}

	.omg-newsletter-signup__form {
		width: auto;
	}

	/* Fields and submit sit on one row, tops aligned so an error message
	   can grow a field downward without dragging the button with it. */
	.omg-newsletter-signup .gform_wrapper form {
		display: flex;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--space-20);
	}

	.omg-newsletter-signup .gform_wrapper .gform_fields {
		flex-direction: row;
		gap: var(--wp--preset--spacing--space-12);
	}

	.omg-newsletter-signup .gform_wrapper .gfield {
		width: 300px;
		flex-shrink: 0;
	}

	/* The form's own flex gap spaces the button here; drop the mobile top-margin so it stays top-aligned in the row. */
	.omg-newsletter-signup .gform_wrapper .gform_footer {
		margin-top: 0;
	}

	.omg-newsletter-signup .gform-theme.gform_wrapper .gform_footer button[type="submit"].gform_button.button {
		width: 200px;
	}
}