/**
 * Component: Newsletter CTA
 *
 * Newsletter signup section used on homepage and about page.
 *
 * @package WPBlogsAndPages
 * @since 1.5.0
 */

.newsletter-cta {
	text-align: center;
	padding: var(--spacing-12) 0 var(--spacing-16);
}

.newsletter-cta__content {
	max-width: 520px;
	margin: 0 auto;
	background: var(--newsletter-bg-color, var(--color-white));
	border: 1px solid var(--color-neutral-200);
	border-radius: var(--radius-2xl);
	padding: var(--spacing-10) var(--spacing-8) var(--spacing-8);
}

.newsletter-cta__inner {
	display: block;
}

.newsletter-cta__label {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	color: var(--color-neutral-500);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	display: block;
	margin-bottom: var(--spacing-2);
}

.newsletter-cta__title {
	font-size: var(--newsletter-title-size, var(--font-size-4xl));
	font-weight: var(--font-weight-regular);
	margin-bottom: var(--spacing-4);
	color: var(--color-neutral-900);
}

.newsletter-cta__subtitle {
	font-size: var(--font-size-base);
	color: var(--color-neutral-600);
	line-height: var(--line-height-normal);
	margin-bottom: var(--spacing-4);
}

.newsletter-cta__text {
	font-size: var(--font-size-base);
	color: var(--color-neutral-600);
	line-height: var(--line-height-relaxed);
	margin-bottom: var(--spacing-6);
}

/* Newsletter form styling within CTA */
.newsletter-cta .fb-newsletter-form-wrapper {
	background: transparent;
}

.newsletter-cta .fb-newsletter-form {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-4);
}

.newsletter-cta .fb-form-field-email {
	flex: 1;
}

.newsletter-cta .fb-form-field-email input {
	width: 100%;
	padding: var(--spacing-3) var(--spacing-4);
	border: 1px solid var(--color-neutral-200);
	border-radius: var(--radius-full);
	background: var(--color-neutral-50);
	color: var(--color-neutral-900);
	font-size: var(--font-size-base);
}

.newsletter-cta .fb-form-field-email input::placeholder {
	color: var(--color-neutral-400);
}

.newsletter-cta .fb-form-field-email input:focus {
	outline: none;
	border-color: var(--color-neutral-400);
	background: var(--color-white);
}

.newsletter-cta .fb-form-field-email label {
	display: none;
}

.newsletter-cta .fb-form-row-privacy {
	text-align: center;
}

.newsletter-cta .fb-form-row-privacy label {
	color: var(--color-neutral-500);
	font-size: var(--font-size-xs);
}

.newsletter-cta .fb-form-row-privacy a {
	color: var(--color-neutral-700);
	text-decoration: underline;
}

.newsletter-cta .fb-newsletter-message {
	margin-top: var(--spacing-4);
	padding: var(--spacing-3);
	border-radius: var(--radius-md);
}

.newsletter-cta .fb-newsletter-submit {
	background: var(--color-neutral-900);
	color: var(--color-white);
	border: none;
	border-radius: var(--radius-full);
	padding: var(--spacing-3) var(--spacing-8);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-medium);
	cursor: pointer;
	transition: background var(--transition-fast);
	margin: 0 auto;
	display: inline-block;
}

.newsletter-cta .fb-newsletter-submit:hover {
	background: var(--color-neutral-700);
}

.newsletter-cta .fb-form-row-submit {
	text-align: center;
}

@media (max-width: 767px) {
	.newsletter-cta--mobile-effects .newsletter-cta__content {
		--newsletter-pop-scale-current: 1;
		--newsletter-sticky-shift-current: 0px;
		transition:
			transform var(--newsletter-pop-duration, 240ms) ease,
			box-shadow var(--newsletter-pop-duration, 240ms) ease;
		transform: translateY(var(--newsletter-sticky-shift-current)) scale(var(--newsletter-pop-scale-current));
		will-change: transform;
	}

	.newsletter-cta--mobile-effects.is-mobile-pop .newsletter-cta__content {
		--newsletter-pop-scale-current: var(--newsletter-pop-scale, 1.04);
	}

	.newsletter-cta--mobile-effects.is-mobile-pop .newsletter-cta__content {
		box-shadow: var(--shadow-xl);
	}

	.newsletter-cta--mobile-sticky .newsletter-cta__content {
		position: sticky;
		top: var(--newsletter-sticky-offset, 30px);
		z-index: 5;
	}

	.newsletter-cta--mobile-sticky.is-mobile-sticky-zone .newsletter-cta__content {
		--newsletter-sticky-shift-current: var(--newsletter-sticky-reveal-offset, 12px);
	}

	.newsletter-cta--mobile-sticky.is-mobile-sticky-reveal .newsletter-cta__content {
		--newsletter-sticky-shift-current: 0px;
	}
}