/**
 * Component: Waitlist Form — styles
 * Scoped to .waitlist-form (BEM root). All rules confined to this component —
 * no global/site-wide selectors. Site-wide tokens from style.css via var(--*).
 *
 * A single row: email input (grows) + navy "Join Waitlist" button. Stacks at
 * ≤480px. Rendered inside the hero's copy column, so it has no own margins.
 */

/* ── Form row ─────────────────────────────────────────────────── */
.waitlist-form__form {
	display: flex;
	gap: var(--space-sm); /* 8px */
}

/* Double-class specificity (0,2,0) so these beat GeneratePress's own
   input[type="email"] (0,1,1) form styling. */
.waitlist-form .waitlist-form__input {
	flex: 1;
	min-width: 0;
	height: 50px;
	padding: 0 var(--space-xl);
	background: var(--color-bg);
	border: 1px solid var(--color-bg); /* borderless on the hero gradient */
	border-radius: var(--radius-md); /* 12px */
	font-family: var(--font-body);
	font-size: var(--text-body);
	color: var(--color-text-pri);
}

.waitlist-form .waitlist-form__input::placeholder {
	color: var(--color-text-ter);
}

.waitlist-form .waitlist-form__input:focus-visible {
	outline: 2px solid var(--color-brand);
	outline-offset: 1px;
	border-color: var(--color-brand);
}

.waitlist-form__submit {
	height: 50px;
	padding: 0 var(--space-xl); /* 24px */
	background: var(--color-brand);
	color: var(--color-text-inv);
	border: 0;
	border-radius: var(--radius-md); /* 12px */
	font-family: var(--font-body);
	font-size: var(--text-body);
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.waitlist-form__submit:hover {
	background: var(--color-brand-shade);
}

.waitlist-form__submit:focus-visible {
	outline: 2px solid var(--color-brand);
	outline-offset: 3px;
}

/* ── Post-submit notice ───────────────────────────────────────── */
.waitlist-form__notice {
	margin-block: 0 var(--space-lg);
	font-family: var(--font-body);
	font-size: var(--text-body);
	line-height: 1.5;
}

.waitlist-form__notice--success {
	color: var(--color-brand);
	font-weight: 600;
}

.waitlist-form__notice--error {
	color: #b3261e;
	font-weight: 600;
}

/* ── Honeypot — off-screen, not display:none ──────────────────── */
.waitlist-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ── Mobile ≤480px — stack ────────────────────────────────────── */
@media (max-width: 480px) {
	.waitlist-form__form {
		flex-direction: column;
	}

	/* flex: 1 in a column resolves against height and squashed the input. */
	.waitlist-form .waitlist-form__input {
		flex: none;
	}

	.waitlist-form__submit {
		width: 100%;
	}
}

/* ── Reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.waitlist-form__submit {
		transition: none;
	}
}