/**
 * Newsletter Form Styles
 * 
 * Styles for Contact Form 7 newsletter signup forms.
 * Integrates with GetResponse API for email subscriptions.
 */

/*--------------------------------------------------------------
# Wrapper Container
--------------------------------------------------------------*/
.newsletter-wrapper {
	background-color: var(--background);
	padding: var(--spacing-2xl) var(--spacing-xl);
}

#newsletter-form p {
	margin-bottom: 0 !important;
}

/*--------------------------------------------------------------
# Heading
--------------------------------------------------------------*/
.newsletter-title {
	color: var(--black);
    font-size: var(--h1-font-size);
	text-align: center;
}

/*--------------------------------------------------------------
# Form Fields
--------------------------------------------------------------*/
.newsletter-wrapper input.newsletter-input[type="email"] {
	width: 100%;
	padding: var(--spacing-lg) var(--spacing-md);
	font-size: var(--text-lg);
	color: var(--black);
	border: none;
	margin-bottom: var(--spacing-lg);
	border-radius: var(--border-radius);
	background-color: var(--white);
}

/* text-transform: none prevents uppercase conversion */
.newsletter-wrapper input.newsletter-submit[type='submit'] {
	display: block;
	margin: 0 auto;
	padding: var(--spacing-md) var(--spacing-xl);
	font-size: var(--text-md);
	color: var(--white);
	background-color: var(--yellow);
	border-radius: var(--border-radius);
	border: none;
	cursor: pointer;
	transition: background-color 0.3s ease;
	text-transform: none;
}

.newsletter-wrapper input.newsletter-submit[type='submit']:hover {
	background-color: var(--blue);
	border: none;
}

/*--------------------------------------------------------------
# Loading Spinner
--------------------------------------------------------------*/
.newsletter-wrapper .wpcf7-spinner {
	display: block;
	margin-inline: auto;
	margin-top: var(--spacing-sm);
}

/*--------------------------------------------------------------
# Information Text
--------------------------------------------------------------*/
.newsletter-info,
.newsletter-disclaimer {
	display: block;
	text-align: center;
	font-size: var(--text-sm);
}

.newsletter-disclaimer {
	margin-top: var(--spacing-sm);
}

/*--------------------------------------------------------------
# Contact Form 7 Response Messages
--------------------------------------------------------------*/
/**
 * Using sibling selector (~) to target CF7 response div
 * that appears after the form wrapper on submission.
 * Overrides CF7 default styles with theme colors.
 */
form .newsletter-wrapper ~ .wpcf7-response-output {
	text-align: center;
	margin-top: var(--spacing-md);
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 0;
	background-color: var(--blue);
	border: none;
}

/*--------------------------------------------------------------
# Responsive - Mobile
--------------------------------------------------------------*/
/**
 * Break out of container's constraint on mobile
 * Removes span padding (15px) and extends to full viewport width
 */
@media (max-width: 767px) {
	[class*="span"] .newsletter-wrapper {
		margin-left: calc(-15px - (100vw - var(--content-width)) / 2);
		margin-right: calc(-15px - (100vw - var(--content-width)) / 2);
		width: 100vw;
	}
}