/**
 * Newsletter Popup
 * Fixed banner at the bottom of the viewport. Shown until the user closes it
 * or subscribes; state persisted in the sp_inspirational_newsletter_exited cookie.
 */

.newsletter-popup {
	background-color: #e6e6e6;
	bottom: 0;
	box-sizing: border-box;
	display: grid;
	grid-column-gap: 1.5rem;
	grid-template-areas:
		"heading close"
		"content close";
	grid-template-columns: 1fr min-content;
	left: 0;
	padding: 1.5rem 1rem 1rem;
	position: fixed;
	right: 0;
	width: 100%;
	/* Deliberately left at 100: .back-to-top (201) and the speech notes drawer
	   (301) are meant to sit above this banner, so raising it hides them. Page
	   UI that must not cover it belongs below 100 instead — see the stacking
	   scale in parts/archive/archive.css. */
	z-index: 100;
}

.newsletter-popup[hidden] {
	display: none;
}

.newsletter-popup__close {
	align-items: flex-start;
	align-self: start;
	background: none;
	border: none;
	color: #5f5f5f;
	cursor: pointer;
	grid-area: close;
	padding: 0.25rem 0;
}

.newsletter-popup__close:hover {
	color: var(--c-navy-byu);
}

.newsletter-popup__close-icon {
	display: block;
}

.newsletter-popup__heading {
	color: var(--c-navy);
	font-family: var(--f-ibm-plex-sans);
	font-size: 18px;
	font-weight: 400;
	grid-area: heading;
	line-height: 1.4;
	margin: 0 0 0.5rem;
}

.newsletter-popup__content {
	grid-area: content;
}

.newsletter-popup__sub-text {
	color: #676767;
	font-family: "Source Serif Pro", "Georgia", serif;
	font-size: 16px;
	margin: 0 0 0.75rem;
}

.newsletter-popup__form {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.newsletter-popup__email {
	border: none;
	border-radius: 4px;
	box-sizing: border-box;
	color: var(--c-blue-royal);
	font-family: var(--f-ibm-plex-sans);
	font-size: 17px;
	padding: 11px 12px;
	width: 100%;
}

.newsletter-popup__email::placeholder {
	color: var(--c-blue-royal);
}

.newsletter-popup__submit {
	background-color: var(--c-blue-royal);
	border: none;
	border-radius: 4px;
	color: var(--c-white);
	cursor: pointer;
	font-family: var(--f-ibm-plex-sans);
	font-size: 15px;
	font-weight: 500;
	padding: 11px 16px;
	text-transform: uppercase;
}

.newsletter-popup__submit:disabled {
	cursor: default;
	opacity: 0.7;
}

.newsletter-popup__submit:hover:not(:disabled) {
	background-color: var(--c-navy-byu);
}

/* Subscribed state: hide the prompt heading and center the thank-you + button */
.newsletter-popup--submitted {
	padding-top: 1rem;
}

.newsletter-popup--submitted .newsletter-popup__heading {
	display: none;
}

.newsletter-popup--submitted .newsletter-popup__content {
	text-align: center;
}

.newsletter-popup--submitted .newsletter-popup__form {
	align-items: center;
	flex: 0 0 auto;
	justify-content: center;
}

/* ≥400px: email and button side-by-side */
@media (min-width: 400px) {
	.newsletter-popup__form {
		align-items: center;
		flex-direction: row;
	}

	.newsletter-popup__email {
		flex: 1;
		width: auto;
	}
}

/* ≥1024px: heading above, then sub-text + email + button in a single row */
@media (min-width: 1024px) {
	.newsletter-popup {
		padding: 2rem 1rem 0.75rem;
	}

	.newsletter-popup__heading {
		font-size: 26px;
		grid-column: 1 / -1;
		justify-self: center;
		margin-bottom: 1rem;
		max-width: 520px;
		text-align: center;
	}

	.newsletter-popup__content {
		align-items: center;
		display: flex;
		flex-direction: row;
		gap: 1.5rem;
		grid-column: 1 / -1;
		justify-content: center;
		justify-self: center;
		max-width: 900px;
		width: 100%;
	}

	.newsletter-popup__sub-text {
		flex-shrink: 0;
		font-size: 20px;
		margin: 0;
	}

	.newsletter-popup__form {
		align-items: center;
		display: flex;
		flex: 1;
		flex-direction: row;
		gap: 0.5rem;
		max-width: 600px;
	}

	.newsletter-popup__email {
		flex: 1;
		width: auto;
	}

	.newsletter-popup--submitted {
		padding-top: 0.75rem;
	}

	.newsletter-popup--submitted .newsletter-popup__content {
		justify-content: center;
		gap: 2rem;
	}
}