/*
 * First-visit homepage popup — the free health-check CTA, styled as one of
 * the decorative gradient blobs used elsewhere on the page. Shown once per
 * visitor; assets/js/homepage-popup.js sets a localStorage flag as soon as
 * it's dismissed (close button, backdrop click, Escape, or the CTA itself)
 * so it never reappears after that. Default markup is [hidden] regardless
 * of JS, so a blocked/failed script just means it never shows — nothing
 * else on the page depends on it.
 */

.jjd-popup-overlay {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(15, 23, 42, 0.55);
	opacity: 0;
	transition: opacity 0.3s ease;
}
.jjd-popup-overlay[hidden] {
	display: none;
}
.jjd-popup-overlay.is-visible {
	opacity: 1;
}

.jjd-popup-frame {
	position: relative;
	width: 100%;
	max-width: 460px;
	transform: scale(0.92);
	transition: transform 0.3s ease;
}
.jjd-popup-overlay.is-visible .jjd-popup-frame {
	transform: scale(1);
}

/* overflow-y here (not overflow:hidden) is only a safeguard for very short
   viewports — background clipping to the blob shape comes from border-radius
   itself and needs no overflow property. Keeping overflow off .jjd-popup-frame
   is what lets .jjd-popup__close float outside the blob's curved edge below,
   instead of being clipped by it. */
.jjd-popup {
	position: relative;
	z-index: 1;
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	padding: 56px 44px;
	text-align: center;
	border-radius: 42% 58% 60% 40% / 48% 44% 56% 52%;
	box-shadow: 0 30px 60px rgba(15, 23, 42, 0.35);
}

/* 44x44 meets the usual minimum touch-target size, and the explicit z-index
   (above .jjd-popup's own) guarantees it stays clickable above the blob
   rather than depending on paint order between two siblings. */
.jjd-popup__close {
	position: absolute;
	z-index: 2;
	top: -18px;
	right: -18px;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: none;
	background: #ffffff;
	color: var(--wp--preset--color--accent-blue);
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.3);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	transition: transform 0.15s ease;
}
.jjd-popup__close:hover,
.jjd-popup__close:focus-visible {
	transform: scale(1.08);
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

.jjd-popup__kicker {
	margin-bottom: 12px;
}
.jjd-popup__heading {
	margin: 0 0 12px;
	font-size: 1.75rem;
	font-weight: 700;
	color: #ffffff;
	line-height: 1.25;
}
.jjd-popup__body {
	margin: 0 0 28px;
	color: rgba(255, 255, 255, 0.9);
}
.jjd-popup__actions.wp-block-buttons {
	justify-content: center;
	margin: 0;
}

@media (max-width: 480px) {
	.jjd-popup {
		padding: 48px 28px;
		border-radius: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jjd-popup-overlay,
	.jjd-popup {
		transition: none;
	}
}