/*
 * nsemm/newsletter styles.
 *
 * The footer "Stay in the loop" inline form, extracted from nsemm/site-footer
 * into its own block. Visually byte-faithful to the form previously rendered
 * inside the footer: the "Stay in the loop" text block opposite the stacked
 * input+Subscribe row, consent line, in-button spinner and aria-live status.
 *
 * SCOPING: every rule is namespaced under the block root .nsemm-newsletter so
 * nothing here touches bare WP body/landmark classes or bare tags. The block is
 * designed to sit inside the midnight footer shell ( nsemm/footer-starfield ),
 * which supplies the dark background; the translucent surfaces here are tuned
 * for that context exactly as in the original footer.
 */

:root {
	--gold: var(--wp--preset--color--knowledge-gold);
	--brown: var(--wp--preset--color--foundational-brown);
	--sandy: var(--wp--preset--color--sandy-brown);
	--gold-dark: #D4AC00; /* hover shade, not in palette */
	--r-pill: 9999px;
	--r-card: 16px;
	--body: var(--wp--preset--font-family--readex-pro);
	--head: var(--wp--preset--font-family--sora);
}

/* ── Newsletter shell ─────────────────────────────────────────────────────── */
.nsemm-newsletter.ft-news {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: var(--r-card);
	padding: 20px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}
.nsemm-newsletter .ft-news-text strong {
	display: block;
	font-family: var(--head);
	font-size: 15px;
	color: #fff;
	margin-bottom: 3px;
}
.nsemm-newsletter .ft-news-text span {
	font-size: 13px;
	color: rgba(255, 255, 255, .55);
}
/* The form stacks: the input+Subscribe flex row (.ft-news-row, byte-faithful to
   the wireframe's .ft-news-form), then the consent line, then the aria-live
   status. The form keeps the wireframe's right-hand sizing so the row still
   tucks in neatly opposite the "Stay in the loop" text. */
.nsemm-newsletter .ft-news-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
	max-width: 380px;
	min-width: 240px;
}
.nsemm-newsletter .ft-news-row {
	display: flex;
	gap: 8px;
}
.nsemm-newsletter .ft-news-form input[type="email"] {
	flex: 1;
	min-width: 0;
	background: rgba(255, 255, 255, .08);
	border: 1.5px solid rgba(255, 255, 255, .18);
	border-radius: var(--r-pill);
	padding: 10px 16px;
	color: #fff;
	font-family: var(--body);
	font-size: 14px;
}
.nsemm-newsletter .ft-news-form input[type="email"]::placeholder {
	color: rgba(255, 255, 255, .4);
}
.nsemm-newsletter .ft-news-form button {
	background: var(--gold);
	color: var(--brown);
	font-family: var(--head);
	font-weight: 600;
	font-size: 14px;
	border: none;
	border-radius: var(--r-pill);
	padding: 10px 20px;
	cursor: pointer;
	transition: background .18s, transform .18s;
	flex-shrink: 0;
}
.nsemm-newsletter .ft-news-form button:hover {
	background: var(--gold-dark);
	transform: translateY(-1px);
}
.nsemm-newsletter .ft-news-form button:disabled {
	opacity: .6;
	cursor: default;
	transform: none;
}
/* Consent line: small, quiet, on-brand. The checkbox is a real control so the
   gdprConsent flag we POST is honest. */
.nsemm-newsletter .ft-news-consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 12px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .55);
	cursor: pointer;
}
.nsemm-newsletter .ft-news-consent-box {
	margin: 2px 0 0;
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	accent-color: var(--gold);
	cursor: pointer;
}
.nsemm-newsletter .ft-news-consent a {
	color: var(--gold);
	text-decoration: underline;
}
.nsemm-newsletter .ft-news-consent a:hover {
	color: var(--gold-dark);
}
/* Spinner shown inside the button while a subscribe is in flight. */
.nsemm-newsletter .ft-news-spinner {
	display: none;
	width: 14px;
	height: 14px;
	border: 2px solid color-mix(in srgb, var(--brown) 35%, transparent);
	border-top-color: var(--brown);
	border-radius: 50%;
	margin-left: 8px;
	vertical-align: -2px;
	animation: nsemm-news-spin .6s linear infinite;
}
.nsemm-newsletter .ft-news-form button.is-loading .ft-news-spinner {
	display: inline-block;
}
.nsemm-newsletter .ft-news-form button.is-loading .ft-news-btn-label {
	opacity: .7;
}
@keyframes nsemm-news-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.nsemm-newsletter .ft-news-spinner { animation-duration: 0s; }
}

/* Honeypot: off-screen, never shown to humans, not focusable in the flow. */
.nsemm-newsletter .ft-news-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Status region (aria-live). Empty by default; animates in on submit with a
   small fade + lift so feedback feels responsive, not abrupt. */
.nsemm-newsletter .ft-news-status {
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .6);
	min-height: 0;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity .3s ease, transform .3s ease;
}
.nsemm-newsletter .ft-news-status:empty {
	display: none;
}
.nsemm-newsletter .ft-news-status.is-shown {
	opacity: 1;
	transform: translateY(0);
}
.nsemm-newsletter .ft-news-status.is-error {
	color: var(--sandy);
}
.nsemm-newsletter .ft-news-status.is-success {
	color: var(--gold);
	font-weight: 600;
}
/* On success the form gently recedes so the confirmation reads as the result. */
.nsemm-newsletter .ft-news-form.is-subscribed .ft-news-row,
.nsemm-newsletter .ft-news-form.is-subscribed .ft-news-consent {
	opacity: .55;
	transition: opacity .4s ease;
}
@media (prefers-reduced-motion: reduce) {
	.nsemm-newsletter .ft-news-status {
		transition: none;
		opacity: 1;
		transform: none;
	}
}

/* On narrow screens the newsletter box stacks directly above the About / Get in
   touch grid with no breathing room. Add a little bottom spacing on mobile only
   so it does not sit flush against what follows. Desktop layout is unchanged. */
@media (max-width: 640px) {
	.nsemm-newsletter.ft-news {
		margin-bottom: var(--wp--preset--spacing--40);
	}
}