/*
 * GameRStar News — Newsletter signup band
 * Scoped entirely to .gsn-newsletter so no other template is affected.
 * Relies on the brand color variables declared on .gsn-front-page in gsn-hero.css.
 *
 * Visual design only: the form has no backend wired up yet (no mailing-list
 * service or plugin is installed on this site). Submitting just shows a
 * client-side confirmation via gsn-newsletter.js; nothing is sent anywhere.
 */

.gsn-newsletter {
	background: linear-gradient( 135deg, var( --color-bg-secondary ), var( --color-bg-elevated ) );
	padding: clamp( 40px, 6vw, 72px ) clamp( 20px, 6vw, 80px );
	text-align: center;
}

.gsn-newsletter__inner {
	max-width: 640px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.gsn-newsletter__title {
	color: var( --gsn-white ) !important;
	font-size: clamp( 1.5rem, 3vw, 2.25rem );
	font-weight: 800;
	margin: 0;
}

.gsn-newsletter__desc {
	/* Overrides a sitewide `p { color: ...; }` rule already stored in the
	 * site's Additional CSS (Customizer), which can't be edited from here
	 * without touching the database. */
	color: var( --gsn-muted ) !important;
	font-size: 1rem;
	margin: 0;
	max-width: 46ch;
}

.gsn-newsletter__form {
	display: flex;
	width: 100%;
	max-width: 440px;
	margin-top: 10px;
	background: var( --gsn-navy-deep );
	border: 1px solid var( --color-border );
	border-radius: var( --radius-button );
	overflow: hidden;
}

.gsn-newsletter__input {
	flex: 1;
	min-width: 0;
	padding: 12px 16px;
	border: none;
	background: transparent;
	font-size: 0.95rem;
	color: var( --gsn-white );
}

.gsn-newsletter__input::placeholder {
	color: var( --gsn-muted );
}

.gsn-newsletter__button {
	background: var( --gsn-gold );
	color: #000;
	font-weight: 700;
	padding: 12px 22px;
	border: none;
	cursor: pointer;
	transition: background-color 0.25s ease;
}

.gsn-newsletter__button:hover,
.gsn-newsletter__button:focus-visible {
	background: var( --gsn-gold-soft );
}

.gsn-newsletter__button:disabled {
	cursor: default;
	opacity: 0.85;
}

.gsn-newsletter__note {
	/* Same override as .gsn-newsletter__desc, for the sitewide `p` rule. */
	color: var( --gsn-muted ) !important;
	opacity: 0.75;
	font-size: 0.75rem;
	margin: 4px 0 0;
}

@media ( max-width: 480px ) {
	.gsn-newsletter__form {
		flex-direction: column;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.gsn-newsletter__button {
		transition: none;
	}
}