/**
 * Quote popup. Pairs with inc/nld-popup.php and assets/js/nld-popup.js.
 * Sharp corners throughout, per the house rule. Built by NLD.
 */

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

.nld-popup {
	position: fixed;
	inset: 0;
	z-index: 100001; /* the theme's mobile header owns 100000 */
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 40px 16px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.nld-popup__overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 26, 29, .62);
	animation: nld-popup-fade .22s ease both;
}

.nld-popup__dialog {
	position: relative;
	width: 100%;
	max-width: 640px;
	margin: auto;
	background: #fff;
	padding: 34px 34px 30px;
	box-shadow: 0 24px 64px rgba(15, 26, 29, .3);
	animation: nld-popup-in .26s cubic-bezier(.2, .7, .3, 1) both;
	outline: none;
}
.nld-popup__dialog:before {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 4px;
	background: #89c635;
}

.nld-popup__close {
	position: absolute;
	top: 8px; right: 10px;
	width: 38px; height: 38px;
	display: flex; align-items: center; justify-content: center;
	border: 0; background: none !important; background-image: none !important;
	box-shadow: none !important;
	font-size: 30px; line-height: 1; color: #6b7783;
	cursor: pointer; padding: 0;
	transition: color .15s;
}
.nld-popup__close:after, .nld-popup__close:before { content: none !important; display: none !important; }
.nld-popup__close:hover { color: #132c52; }
.nld-popup__close:focus-visible { outline: 2px solid #132c52; outline-offset: 2px; }

.nld-popup__title {
	margin: 0 0 6px;
	font-size: 25px; line-height: 1.22; font-weight: 700; color: #132c52;
	padding-right: 34px; /* clear of the close button */
	text-wrap: balance;
}
.nld-popup__sub {
	margin: 0 0 20px;
	font-size: 15px; line-height: 1.5; color: #6b7783;
	max-width: 52ch;
}

/* Stop the page behind from scrolling while the dialog is open. */
body.nld-popup-open { overflow: hidden; }

@keyframes nld-popup-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes nld-popup-in {
	from { opacity: 0; transform: translateY(14px) }
	to   { opacity: 1; transform: none }
}

@media (max-width: 640px) {
	.nld-popup { padding: 0; align-items: stretch; }
	.nld-popup__dialog {
		max-width: none; min-height: 100%; margin: 0;
		padding: 30px 20px 26px;
	}
	.nld-popup__title { font-size: 21px; }
	.nld-popup__close { top: 4px; right: 6px; }
}

@media (prefers-reduced-motion: reduce) {
	.nld-popup__dialog, .nld-popup__overlay { animation: none; }
}