/* Persistent newsletter signup band (template-parts/newsletter-signup.php).
 *
 * White band at the top of the footer landmark, opened by a 2px line-3 rule
 * so it separates from the page content above and reads as the first footer
 * row ahead of the grey Sponsors band. Two-column grid on wide screens:
 * eyebrow + title + body on the left, the form on the right. Flat, 2px
 * borders, tokens only (DESIGN.md). Ported from the sister theme. */

.newsletter-signup {
	padding: 4rem 0;
	border-top: var(--border-width-md) solid var(--color-line-3);
	background: var(--color-background);
	color: var(--color-text);
}

.newsletter-signup__inner {
	display: grid;
	gap: var(--space-05);
	align-items: end;
}

@media screen and (min-width: 50em) {

	.newsletter-signup__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--space-06);
	}
}

/* Type comes from the .kodansha--smallcaps utility (typography.css). */
.newsletter-signup__eyebrow {
	margin: 0 0 0.5rem;
}

/* Family + tracking come from the .kodansha-black utility. */
.newsletter-signup__title {
	margin: 0;
	font-size: 2.75rem;
	line-height: 1.05;
	color: var(--color-text);
}

.newsletter-signup__body {
	max-width: 28rem;
	margin: 0.75rem 0 0;
	line-height: var(--line-height);
}

.newsletter-signup__form {
	margin: 0;
}

.newsletter-signup__label {
	display: block;
	margin: 0 0 0.5rem;
	font-family: "Maax Medium";
	font-weight: 400;
	font-size: var(--font-size-03);
}

/* Input + button read as one joined control: same 3.5rem height, the
   button's border butts the input's so the seam is a single 2px line. */
.newsletter-signup__row {
	display: flex;
	align-items: stretch;
	max-width: 34rem;
}

/* Doubled class beats any global input rule. DESIGN.md "Forms & Inputs":
   2px line border, no radius, grayscale focus ring. */
.newsletter-signup .newsletter-signup__input {
	flex: 1 1 10rem;
	min-width: 0;
	min-height: 3.5rem;
	margin: 0;
	padding: 0 1.125rem;
	border: var(--border-width-md) solid var(--color-line);
	border-radius: 0;
	background: var(--color-white);
	color: var(--color-text);
	font-family: Maax;
	font-size: 1rem;
	line-height: 1.15;
	box-sizing: border-box;
}

.newsletter-signup .newsletter-signup__input::placeholder {
	color: var(--color-text-2);
	opacity: 1;
}

/* Joined control: an offset ring would read as a double border and run
   into the button, so focus thickens the border inward instead (DESIGN.md
   "Forms & Inputs" exception). */
.newsletter-signup .newsletter-signup__input:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 var(--border-width-md) var(--color-text);
}

.newsletter-signup[data-state="error-input"] .newsletter-signup__input {
	border-color: var(--color-feedback-error-text);
}

.newsletter-signup[data-state="error-input"] .newsletter-signup__input:focus-visible {
	box-shadow: inset 0 0 0 var(--border-width-md) var(--color-feedback-error-text);
}

.newsletter-signup__button {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	min-width: 9.5rem;
	margin: 0 0 0 calc(var(--border-width-md) * -1);
	padding: 0 2rem;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 0.875rem;
	white-space: nowrap;
}

.newsletter-signup__button:disabled {
	cursor: progress;
}

/* Honeypot: off-screen, out of the tab order (tabindex=-1) and the
   a11y tree (aria-hidden). */
.newsletter-signup__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.newsletter-signup__status {
	margin: 0;
	font-family: "Maax Medium";
	font-weight: 400;
}

.newsletter-signup__status:not(:empty) {
	margin-top: 0.75rem;
}

.newsletter-signup[data-state="error"] .newsletter-signup__status,
.newsletter-signup[data-state="error-input"] .newsletter-signup__status {
	color: var(--color-feedback-error-text);
}

/* Success: the confirmation takes the field's place at the field's
   footprint (2px frame, 3.5rem tall) so the panel keeps its bottom edge
   aligned with the intro copy instead of collapsing to a loose line. */
.newsletter-signup[data-state="success"] .newsletter-signup__status {
	display: flex;
	gap: 0.875rem;
	align-items: center;
	max-width: 34rem;
	min-height: 3.5rem;
	margin-top: 0;
	padding: 0.875rem 1.125rem;
	border: var(--border-width-md) solid var(--color-line);
	font-family: "Maax Medium";
	line-height: var(--line-height);
	color: var(--color-text);
	box-sizing: border-box;
}

/* CSS-drawn check in a filled black disc. */
.newsletter-signup[data-state="success"] .newsletter-signup__status::before {
	content: "";
	flex: 0 0 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background:
		no-repeat center / 0.875rem
		url(data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2014%2014%27%3E%3Cpath%20d=%27M2%207.5l3%203%207-7%27%20fill=%27none%27%20stroke=%27%23fff%27%20stroke-width=%272.25%27/%3E%3C/svg%3E),
		var(--color-black);
}

.newsletter-signup__meta {
	max-width: 34rem;
	margin: 0.75rem 0 0;
	color: var(--color-text-2);
	font-size: 0.8125rem;
	line-height: var(--line-height);
}

.newsletter-signup__meta a {
	color: inherit;
}

.newsletter-signup[data-state="success"] .newsletter-signup__meta {
	display: none;
}

@media (max-width: 768px) {

	.newsletter-signup {
		padding: 3rem 0;
	}

	.newsletter-signup__title {
		font-size: 2rem;
	}
}

@media (max-width: 640px) {

	.newsletter-signup__row {
		flex-direction: column;
		gap: var(--space-03);
	}

	/* In a column the 10rem flex basis would become the input's HEIGHT. */
	.newsletter-signup .newsletter-signup__input {
		flex-basis: auto;
	}

	.newsletter-signup__button {
		width: 100%;
		min-height: 3.5rem;
		margin-left: 0;
	}
}