/*
 * Newsletter Signup — the inline conversion unit.
 * Full-bleed ink panel with the signal accent on the submit control, matching
 * the sidebar/footer newsletter treatment in the theme.
 */

.masthead-newsletter {
	background: var( --mh-surface-raised, #151515 );
	color: var( --mh-color-ink, #f5f5f5 );
	border: 1px solid var( --mh-color-border, #242424 );
	padding: 2.25em;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.75em;
	justify-content: space-between;
	margin: 2.5em 0;
	border-top: 2px solid var( --mh-color-accent, #d92b00 );
}

.masthead-newsletter__copy { flex: 1 1 320px; }

.masthead-newsletter__heading {
	margin: 0 0 0.35em;
	font-family: var( --mh-font-display, inherit );
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.masthead-newsletter__subtext {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var( --mh-color-muted, #a3a3a3 );
}

.masthead-newsletter__form {
	display: flex;
	gap: 0;
	flex: 1 1 320px;
}

.masthead-newsletter__input {
	flex: 1;
	min-width: 0;
	padding: 0.9em 1em;
	border: 1px solid var( --mh-color-rule, #2a2a2a );
	border-right: none;
	background: transparent;
	color: var( --mh-color-ink, #f5f5f5 );
	font-size: 0.9375rem;
}
.masthead-newsletter__input::placeholder { color: var( --mh-color-faint, #8a8a8a ); }
.masthead-newsletter__input:focus {
	outline: none;
	border-color: var( --mh-color-accent, #d92b00 );
}

.masthead-newsletter__button {
	padding: 0.9em 1.5em;
	background: var( --mh-color-accent, #d92b00 );
	color: var( --mh-color-ink, #f5f5f5 );
	border: none;
	font-family: var( --mh-font-ui, inherit );
	font-weight: 700;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s ease;
}
.masthead-newsletter__button:hover {
	background: var( --mh-color-accent-deep, #b02200 );
	color: var( --mh-color-on-accent, #ffffff );
}

.masthead-newsletter__notice {
	width: 100%;
	margin: 0;
	font-family: var( --mh-font-ui, inherit );
	font-size: 0.75rem;
	color: var( --mh-color-faint, #8a8a8a );
}

.masthead-newsletter__form--inactive .masthead-newsletter__button { opacity: 0.55; }

@media ( max-width: 520px ) {
	.masthead-newsletter { padding: 1.5em; }
	.masthead-newsletter__form { flex-wrap: wrap; }
	.masthead-newsletter__input { border-right: 1px solid var( --mh-color-rule, #2a2a2a ); }
	.masthead-newsletter__button { width: 100%; }
}