/**
 * Newsletter page styles.
 *
 * Used both on the front end (when a page includes lff/newsletter-page) and
 * inside the block editor so SSR previews match the live render.
 *
 * The :root token block below is a safety net for the editor iframe, which
 * doesn't inherit the parent theme's :root variables.
 */

/* ---- LFF design tokens (mirrors style.css :root) ---- */
:root {
	--lff-purple: #5B2D8E;
	--lff-purple-dark: #3D1E5F;
	--lff-purple-light: #7B4DB0;

	--lff-accent: var(--lff-purple);
	--lff-text: #1a1a1a;
	--lff-text-secondary: #555;
	--lff-bg: #fff;
	--lff-bg-alt: #f5f5f5;
	--lff-border: #e0e0e0;

	--lff-font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--lff-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--lff-space-xs: 0.25rem;
	--lff-space-sm: 0.5rem;
	--lff-space-md: 1rem;
	--lff-space-lg: 1.5rem;
	--lff-space-xl: 2rem;
	--lff-space-2xl: 3rem;
	--lff-space-3xl: 4rem;
}

/* ==========================================================================
   Newsletter Page V1
   ========================================================================== */

.lff-newsletter-v1 {
	max-width: 700px;
	margin: 0 auto;
	padding: var(--lff-space-3xl) var(--lff-space-md);
}

/* Heading + lede (rendered as core blocks with these classes). */
.lff-newsletter-v1 .lff-newsletter-v1__title {
	font-family: var(--lff-font-heading);
	font-size: 2rem;
	font-weight: 900;
	text-align: center;
	margin: 0;
}

.lff-newsletter-v1 .lff-newsletter-v1__lede {
	font-size: 1.1rem;
	color: var(--lff-text-secondary);
	max-width: 500px;
	margin: var(--lff-space-md) auto var(--lff-space-2xl);
	text-align: center;
}

/* ---- Sign-up form ---- */
.lff-newsletter-v1__signup {
	background: var(--lff-bg-alt);
	padding: var(--lff-space-xl);
	border-radius: 8px;
	max-width: 450px;
	margin: 0 auto;
}

.lff-newsletter-v1__field {
	margin-bottom: var(--lff-space-md);
}

.lff-newsletter-v1__field--last {
	margin-bottom: var(--lff-space-lg);
}

.lff-newsletter-v1__label {
	display: block;
	font-weight: 600;
	margin-bottom: var(--lff-space-xs);
	font-size: 0.9rem;
}

.lff-newsletter-v1__label-optional {
	font-weight: 400;
	color: var(--lff-text-secondary);
}

.lff-newsletter-v1__input {
	width: 100%;
	padding: 0.7rem;
	border: 1px solid var(--lff-border);
	border-radius: 4px;
	font-size: 1rem;
	box-sizing: border-box;
}

.lff-newsletter-v1__honeypot {
	position: absolute;
	left: -5000px;
}

.lff-newsletter-v1__btn {
	display: block;
	width: 100%;
	padding: 0.8rem;
	background: var(--lff-accent);
	color: #fff;
	border: none;
	border-radius: 4px;
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
}

.lff-newsletter-v1__privacy {
	font-size: 0.8rem;
	color: var(--lff-text-secondary);
	margin-top: var(--lff-space-md);
	margin-bottom: 0;
	text-align: center;
}

/* ---- Inline AJAX confirmation / error message ---- */
.lff-newsletter-v1__status {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.4;
	text-align: center;
}

.lff-newsletter-v1__status.is-success {
	color: var(--lff-text);
	font-weight: 600;
}

.lff-newsletter-v1__status.is-error {
	color: #b00020;
	margin-top: var(--lff-space-md);
}

.lff-newsletter-v1__status a {
	color: inherit;
	text-decoration: underline;
}

/* ---- Stats ("What you'll get") ---- */
.lff-newsletter-v1__stats {
	margin-top: var(--lff-space-2xl);
	text-align: center;
}

.lff-newsletter-v1__stats-heading {
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: var(--lff-space-md);
}

.lff-newsletter-v1__stats-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--lff-space-lg);
	max-width: 600px;
	margin: 0 auto;
}

.lff-newsletter-v1__stat-num {
	font-size: 2rem;
	font-weight: 900;
	color: var(--lff-accent);
	margin: 0;
}

.lff-newsletter-v1__stat-label {
	font-size: 0.85rem;
	color: var(--lff-text-secondary);
	margin: 0;
}

/* ---- Donate CTA ---- */
.lff-newsletter-v1__donate {
	margin-top: var(--lff-space-2xl);
	text-align: center;
	padding: var(--lff-space-xl);
	background: var(--lff-bg-alt);
	border-radius: 8px;
}

.lff-newsletter-v1__donate-text {
	font-weight: 600;
	margin: 0;
}

.lff-newsletter-v1__donate-btn {
	display: inline-block;
	margin-top: var(--lff-space-sm);
	padding: 0.6rem 1.5rem;
	background: var(--lff-accent);
	color: #fff;
	border-radius: 4px;
	font-weight: 700;
	text-decoration: none;
}

.lff-newsletter-v1__donate-btn:hover,
.lff-newsletter-v1__donate-btn:focus {
	color: #fff;
}