/* =========================================================================
   Newsletter page template
   Scoped under .tm-newsletter so it never leaks into other pages.
   Brand accent is driven by --nl-accent / --nl-accent-dark, set inline
   per site (TM orange vs WOS red/blue) from the page template.
   ========================================================================= */

.tm-newsletter {
	--nl-ink: #0b1f33;
	--nl-muted: #51637a;
	--nl-line: #e2e8f0;
	--nl-card: #ffffff;
	--nl-radius: 18px;
	--nl-shadow: 0 24px 60px -28px rgba(11, 31, 51, 0.45);

	position: relative;
	overflow: hidden;
	padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 7vw, 6rem);
	background:
		radial-gradient(1200px 600px at 85% -10%, color-mix(in srgb, var(--nl-accent) 16%, transparent), transparent 60%),
		radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, var(--nl-deep) 14%, transparent), transparent 55%),
		linear-gradient(180deg, #f7f9fc 0%, #eef2f7 100%);
	font-family: inherit;
	color: var(--nl-ink);
}

/* Soft "spotlight" beams for a theatre feel */
.tm-newsletter::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		conic-gradient(from 210deg at 78% -5%, color-mix(in srgb, var(--nl-accent) 22%, transparent), transparent 22%),
		conic-gradient(from 330deg at 22% -5%, color-mix(in srgb, var(--nl-deep) 18%, transparent), transparent 18%);
	opacity: 0.5;
	pointer-events: none;
	z-index: 0;
}

.tm-newsletter__inner {
	position: relative;
	z-index: 1;
	width: min(1140px, 92vw);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
}

/* -------------------------------- Copy -------------------------------- */
.tm-newsletter__copy {
	max-width: 36rem;
}

.tm-newsletter__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0.9rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--nl-accent) 14%, #fff);
	color: var(--nl-accent-dark);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.tm-newsletter__eyebrow i {
	font-size: 0.82rem;
}

.tm-newsletter__title {
	margin: 1.1rem 0 0.9rem;
	font-size: clamp(2.1rem, 4.4vw, 3.35rem);
	line-height: 1.05;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--nl-ink);
}

.tm-newsletter__title span {
	color: var(--nl-accent);
}

.tm-newsletter__lead {
	margin: 0 0 1.6rem;
	font-size: clamp(1rem, 1.6vw, 1.16rem);
	line-height: 1.6;
	color: var(--nl-muted);
}

.tm-newsletter__benefits {
	list-style: none;
	margin: 0 0 1.8rem;
	padding: 0;
	display: grid;
	gap: 0.85rem;
}

.tm-newsletter__benefits li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--nl-ink);
}

.tm-newsletter__benefits i {
	flex: 0 0 auto;
	width: 1.9rem;
	height: 1.9rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: color-mix(in srgb, var(--nl-accent) 16%, #fff);
	color: var(--nl-accent-dark);
	font-size: 0.85rem;
}

.tm-newsletter__trust {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.92rem;
	color: var(--nl-muted);
}

.tm-newsletter__trust strong {
	color: var(--nl-ink);
}

.tm-newsletter__stars {
	color: #f5a623;
	letter-spacing: 0.1em;
}

/* -------------------------------- Card -------------------------------- */
.tm-newsletter__card {
	position: relative;
	background: var(--nl-card);
	border: 1px solid var(--nl-line);
	border-radius: var(--nl-radius);
	box-shadow: var(--nl-shadow);
	padding: clamp(1.5rem, 3vw, 2.4rem);
}

.tm-newsletter__card::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 6px;
	border-radius: var(--nl-radius) var(--nl-radius) 0 0;
	background: linear-gradient(90deg, var(--nl-accent), var(--nl-deep));
}

.tm-newsletter__card-head {
	margin-bottom: 1.3rem;
}

.tm-newsletter__card-title {
	margin: 0 0 0.35rem;
	font-size: 1.4rem;
	font-weight: 800;
	color: var(--nl-ink);
}

.tm-newsletter__card-sub {
	margin: 0;
	font-size: 0.95rem;
	color: var(--nl-muted);
}

/* ----------------------- WPForms field theming ----------------------- */
/* Reset WPForms defaults inside the card and apply our own styling.     */
.tm-newsletter .wpforms-container {
	margin: 0;
}

.tm-newsletter .wpforms-form .wpforms-field {
	padding: 0 0 1rem 0;
}

.tm-newsletter .wpforms-form .wpforms-field-label {
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--nl-ink);
	margin-bottom: 0.4rem;
}

.tm-newsletter .wpforms-form input[type="text"],
.tm-newsletter .wpforms-form input[type="email"],
.tm-newsletter .wpforms-form select,
.tm-newsletter .wpforms-form .wpforms-field-large {
	width: 100%;
	height: auto;
	padding: 0.85rem 1rem;
	font-size: 1rem;
	color: var(--nl-ink);
	background: #fff;
	border: 1.5px solid var(--nl-line);
	border-radius: 12px;
	box-shadow: none;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
	-webkit-appearance: none;
	appearance: none;
}

.tm-newsletter .wpforms-form select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2351637a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	padding-right: 2.6rem;
}

.tm-newsletter .wpforms-form input::placeholder {
	color: #9aa7b8;
}

.tm-newsletter .wpforms-form input:focus,
.tm-newsletter .wpforms-form select:focus {
	outline: none;
	border-color: var(--nl-accent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--nl-accent) 22%, transparent);
}

/* Submit button */
.tm-newsletter .wpforms-form .wpforms-submit-container {
	padding: 0;
	margin-top: 0.4rem;
}

.tm-newsletter .wpforms-form button[type="submit"],
.tm-newsletter .wpforms-form .wpforms-submit {
	width: 100%;
	padding: 0.95rem 1.5rem;
	font-size: 1.02rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #fff;
	background: var(--nl-accent);
	border: none;
	border-radius: 12px;
	cursor: pointer;
	transition: background-color 0.18s ease, transform 0.08s ease, box-shadow 0.18s ease;
	box-shadow: 0 12px 24px -10px color-mix(in srgb, var(--nl-accent) 70%, transparent);
}

.tm-newsletter .wpforms-form button[type="submit"]:hover,
.tm-newsletter .wpforms-form .wpforms-submit:hover {
	background: var(--nl-accent-dark);
}

.tm-newsletter .wpforms-form button[type="submit"]:active,
.tm-newsletter .wpforms-form .wpforms-submit:active {
	transform: translateY(1px);
}

/* Validation + confirmation messages */
.tm-newsletter .wpforms-form .wpforms-error {
	font-size: 0.82rem;
	color: #d62027;
	margin-top: 0.35rem;
}

/* WPForms paints its success message green by default (and uses Modern
   Markup with !important), so we override it to match the brand. */
.tm-newsletter .wpforms-confirmation-container-full,
.tm-newsletter .wpforms-confirmation-container-full.wpforms-confirmation-scroll {
	margin: 0 !important;
	padding: 1.25rem 1.4rem !important;
	border: 1px solid color-mix(in srgb, var(--nl-accent) 38%, #fff) !important;
	border-radius: 12px !important;
	background: color-mix(in srgb, var(--nl-accent) 9%, #fff) !important;
	color: var(--nl-ink) !important;
}

.tm-newsletter .wpforms-confirmation-container-full p {
	margin: 0;
	font-size: 1.02rem;
	line-height: 1.5;
	color: var(--nl-ink) !important;
}

.tm-newsletter__fineprint {
	margin: 1.1rem 0 0;
	font-size: 0.8rem;
	line-height: 1.45;
	color: var(--nl-muted);
	text-align: center;
}

.tm-newsletter__fineprint a {
	color: var(--nl-accent-dark);
	text-decoration: underline;
}

/* ------------------------------ Responsive --------------------------- */
@media (max-width: 900px) {
	.tm-newsletter__inner {
		grid-template-columns: 1fr;
	}

	.tm-newsletter__copy {
		max-width: none;
		text-align: center;
		margin: 0 auto;
	}

	.tm-newsletter__eyebrow {
		justify-content: center;
	}

	.tm-newsletter__benefits {
		max-width: 26rem;
		margin-inline: auto;
		margin-bottom: 1.8rem;
		text-align: left;
	}

	.tm-newsletter__trust {
		justify-content: center;
	}
}

@media (max-width: 480px) {
	.tm-newsletter__card {
		padding: 1.35rem 1.15rem;
	}
}