/*
 * The newsletter popup (newsletter_popup.html, .nlp) in the site's current design: a forest card
 * (#1A2116, the footer's and the app section's green, with the forest bands' glows), the starter
 * guide tilted with its gold "Free" badge (as on the home page's "start here" card), Cotoris
 * for the title, and the footer's form: a cream pill and the lime button. From 720px the guide
 * sits beside the words; below, the popup is a sheet from the bottom. It fades and rises in
 * (.is-open, set a frame after showModal) and out. Text on the forest: cream 16:1, sage 10.9:1,
 * the fine print 6.3:1.
 * It replaced newsletter_popup.css (removed: pages cached with the old popup still find it on S3,
 * as collectstatic doesn't clear old files there).
 */

/* The page behind stays put (on body, as for the navbar's sheets: site_app.css says why) */
html:has(.nlp[open]) body {
	overflow: hidden;
}

.nlp {
	width: min(100% - 2rem, 46rem);
	max-width: none;
	max-height: calc(100dvh - 2rem);
	margin: auto;
	padding: 0;
	border: 0;
	background: transparent;
	color: #F8FFF6;
	overflow: visible;
}

.nlp::backdrop {
	background: rgba(12, 16, 10, .55);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity .3s ease;
}

.nlp.is-open::backdrop {
	opacity: 1;
}

.nlp__card {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	max-height: inherit;
	overflow: hidden auto;
	border-radius: 28px;
	background-color: #1A2116;
	background-image:
		radial-gradient(60% 55% at 18% 30%, rgba(190, 227, 120, .16), transparent 70%),
		radial-gradient(55% 50% at 95% 100%, rgba(114, 160, 106, .22), transparent 70%);
	box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6);
	font-family: 'Hind Vadodara', sans-serif;
	text-align: left;
	opacity: 0;
	transform: translateY(14px) scale(.985);
	transition: opacity .3s cubic-bezier(.2, .8, .2, 1), transform .35s cubic-bezier(.2, .8, .2, 1);
}

.nlp.is-open .nlp__card {
	opacity: 1;
	transform: none;
}

/* Close: the search sheet's round glass button */
.nlp .nlp__close {
	position: absolute;
	top: .9rem;
	right: .9rem;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(248, 255, 246, .08);
	color: #F8FFF6;
	cursor: pointer;
	transition: background-color .2s;
}

.nlp .nlp__close:hover {
	background: rgba(248, 255, 246, .16);
}

.nlp__close svg {
	width: 1.3rem;
	height: 1.3rem;
}

.nlp .nlp__close:focus {
	outline: none;
}

.nlp .nlp__close:focus-visible,
.nlp .nlp__btn:focus-visible,
.nlp .nlp__policy a:focus-visible {
	outline: 2px solid #BEE378;
	outline-offset: 2px;
}

/* The guide, tilted, with its sticker */
.nlp__art {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 10.5rem;
	padding-top: 1.75rem;
}

.nlp .nlp__cover {
	width: auto;
	height: 100%;
	border-radius: 5px;
	box-shadow: 0 18px 28px -10px rgba(0, 0, 0, .65), 0 2px 5px rgba(0, 0, 0, .3);
	transform: rotate(-5deg);
}

/* "Free": the gold badge (site_app.css .pul-free) by the booklet's corner */
.nlp__sticker {
	top: 1.5rem;
	left: calc(50% + 2.4rem);
	width: 3.5rem;
	height: 3.5rem;
	font-size: .825rem;
}

/* The words and the form */
.nlp__body {
	padding: 1.25rem 1.35rem calc(1.5rem + env(safe-area-inset-bottom));
}

.nlp .nlp__eyebrow {
	margin: 0 0 .5rem;
	color: #BEE378;
	font-size: .8125rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.nlp .nlp__title {
	margin: 0;
	color: #F8FFF6;
	font-family: 'Cotoris Bold', 'Hind Vadodara', sans-serif;
	font-size: clamp(1.75rem, 6vw, 2.2rem);
	font-weight: 400;
	line-height: 1.05;
	text-wrap: balance;
}

.nlp .nlp__text {
	margin: .7rem 0 0;
	color: #C4D7C1;
	font-size: 1rem;
	line-height: 1.5;
}

.nlp__form {
	display: flex;
	flex-wrap: wrap;
	gap: .55rem;
	margin: 1.25rem 0 0;
}

.nlp .nlp__input {
	flex: 1 1 12rem;
	min-width: 0;
	min-height: 3rem;
	padding: .55rem 1.15rem .45rem;
	border: 2px solid transparent;
	border-radius: 999px;
	background: #F8FFF6;
	color: #1A2518;
	font-family: 'Hind Vadodara', sans-serif;
	font-size: 1rem;   /* 16px: iPhones don't zoom in on it */
}

.nlp .nlp__input::placeholder {
	color: #5F6B5B;
	font-family: 'Hind Vadodara', sans-serif;
	opacity: 1;
}

.nlp .nlp__input:focus {
	border-color: #BEE378;
	outline: none;
	box-shadow: 0 0 0 4px rgba(190, 227, 120, .3);
}

.nlp .nlp__btn {
	flex: none;
	min-height: 3rem;
	padding: .55rem 1.5rem .45rem;
	border: 0;
	border-radius: 999px;
	background: #BEE378;
	color: #1A2518;
	font-family: 'Hind Vadodara', sans-serif;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	transition: box-shadow .3s cubic-bezier(.2, .8, .2, 1), transform .3s cubic-bezier(.2, .8, .2, 1);
}

.nlp .nlp__btn:hover {
	box-shadow: 0 0 0 5px rgba(190, 227, 120, .25), 0 0 22px 4px rgba(190, 227, 120, .3);
	transform: translateY(-1px);
}

.nlp .nlp__btn[disabled] {
	cursor: progress;
	opacity: .75;
	box-shadow: none;
	transform: none;
}

.nlp .nlp__feedback {
	margin: .75rem 0 0;
	color: #BEE378;
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.4;
}

.nlp .nlp__feedback:empty {
	display: none;
}

.nlp .nlp__feedback.is-error {
	color: #F2A58E;
}

.nlp .nlp__policy {
	margin: .9rem 0 0;
	color: #9AA39A;
	font-size: .8125rem;
	line-height: 1.45;
}

.nlp .nlp__policy a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: .15em;
}

.nlp .nlp__policy a:hover {
	color: #F8FFF6;
}

/* Phones: a sheet from the bottom, the guide smaller */
@media (max-width: 719.98px) {
	.nlp {
		width: 100%;
		max-height: calc(100dvh - 1rem);
		margin: auto 0 0;
	}

	.nlp__card {
		border-radius: 26px 26px 0 0;
		transform: translateY(40px);
	}

	.nlp__art {
		height: 9rem;
	}
}

/* From 720px: the guide beside the words */
@media (min-width: 720px) {
	.nlp__card {
		grid-template-columns: 16rem minmax(0, 1fr);
		align-items: center;
	}

	.nlp__art {
		align-self: stretch;
		height: auto;
		min-height: 18rem;
		padding: 2.5rem 0;
	}

	.nlp .nlp__cover {
		height: 13rem;
	}

	.nlp__sticker {
		top: calc(50% - 7.25rem);
		left: calc(50% + 2.9rem);
	}

	.nlp__body {
		padding: 3rem 3rem 2.5rem .5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nlp__card,
	.nlp::backdrop,
	.nlp .nlp__btn {
		transition: none;
	}

	.nlp__card {
		transform: none;
	}
}