/* ==========================================================================
   Celia Noire — Newsletter (Final CTA)
   ========================================================================== */

.cn-newsletter__inner {
	max-width: 36rem;
	margin-inline: auto;
	text-align: center;
}

.cn-newsletter__text {
	max-width: 32ch;
	margin: 1.25rem auto 0;
}

.cn-newsletter__form {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	max-width: 26rem;
	margin: 2.5rem auto 0;
}

/* Best-effort styling for whatever markup the pasted MailerLite embed
   contains — the form itself is third-party HTML, not ours to restructure.
   Embeds (including the current placeholder) typically wrap their fields in
   their own <form>; display:contents flattens that wrapper out of the box
   tree so the flex rules below still reach the actual input/button, whatever
   tag the embed happens to use. */
.cn-newsletter__form > :not(input):not(button):not(select):not(textarea) {
	display: contents;
}

/* An underline reads as an editorial signature line rather than a boxed
   admin-form field. */
.cn-newsletter__form input[type="email"],
.cn-newsletter__form input[type="text"] {
	width: 100%;
	padding: 0.9em 0.2em;
	border: none;
	border-bottom: 1px solid var(--cn-rule);
	background: transparent;
	color: var(--cn-fg-strong);
	font: inherit;
	text-align: center;
	transition: border-color var(--cn-dur-hover) var(--cn-ease);
}

.cn-newsletter__form input[type="email"]:focus,
.cn-newsletter__form input[type="text"]:focus {
	border-color: var(--cn-accent);
}

.cn-newsletter__form input[type="email"]::placeholder,
.cn-newsletter__form input[type="text"]::placeholder {
	color: var(--cn-fg);
	opacity: 0.65;
}

.cn-newsletter__form button,
.cn-newsletter__form input[type="submit"] {
	padding: 1em 2.4em;
	border: 1px solid currentColor;
	background: transparent;
	color: var(--cn-fg-strong);
	font-size: var(--cn-text-sm);
	font-weight: 500;
	letter-spacing: var(--cn-tracking-wide);
	text-transform: uppercase;
	cursor: pointer;
	transition: color var(--cn-dur-hover) var(--cn-ease),
	            background-color var(--cn-dur-hover) var(--cn-ease),
	            border-color var(--cn-dur-hover) var(--cn-ease);
}

.cn-newsletter__form button:hover,
.cn-newsletter__form input[type="submit"]:hover {
	background-color: var(--cn-fg-strong);
	color: var(--cn-bg);
}

/* One editorial signature line once there is room for it — input and button
   share a baseline instead of stacking as two separate boxed controls. */
@media (min-width: 560px) {
	.cn-newsletter__form {
		flex-direction: row;
		align-items: stretch;
		gap: 1.5rem;
		max-width: 30rem;
	}

	.cn-newsletter__form input[type="email"],
	.cn-newsletter__form input[type="text"] {
		flex: 1;
		text-align: left;
	}

	.cn-newsletter__form button,
	.cn-newsletter__form input[type="submit"] {
		flex-shrink: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cn-newsletter__form input[type="email"],
	.cn-newsletter__form input[type="text"],
	.cn-newsletter__form button,
	.cn-newsletter__form input[type="submit"] {
		transition: none;
	}
}