/* ==========================================================
   Content pop-ups (links to "#popup-<ID>", Admin → Pop-ups)
   Same look as the HubSpot form pop-up (hs-form-popup.css).
   z-index is one step below the form pop-up, so a "#hs-form-…"
   button inside a content pop-up opens the form on top of it.
   ========================================================== */

.jlp-popup {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.jlp-popup.is-open {
	display: flex;
}

.jlp-popup__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 46, 70, 0.7);
}

.jlp-popup__dialog {
	position: relative;
	width: 100%;
	max-width: 640px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: #002c41;
	color: #fff;
	border-radius: 0;
	border: 1px solid #fff;
	padding: 3rem;
	font-size: .9375rem;
	font-family: poppins, Helvetica Neue, helvetica, roboto, arial, sans-serif;
	line-height: 1.5;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
	animation: jlp-popup-in 0.2s ease-out;
	outline: none;
	box-sizing: border-box;
}

.jlp-popup__dialog.jlp-popup--wide  { max-width: 960px; }
.jlp-popup__dialog.jlp-popup--xwide { max-width: 1200px; }

.jlp-popup__close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	width: 40px;
	height: 40px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #fff;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
}

.jlp-popup__close:hover,
.jlp-popup__close:focus-visible {
	background: rgba(255, 255, 255, 0.12);
}

.jlp-popup__loading,
.jlp-popup__error {
	text-align: center;
	color: rgba(255, 255, 255, 0.75);
	margin: 24px 0;
}

/* Lock page scroll while the pop-up is open */
html.jlp-popup-open,
html.jlp-popup-open body {
	overflow: hidden;
}

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

/* ---------- Content ---------- */

.jlp-popup__body {
	color: #fff;
}

.jlp-popup__body > :first-child { margin-top: 0; }
.jlp-popup__body > :last-child  { margin-bottom: 0; }

.jlp-popup__body h1,
.jlp-popup__body h2,
.jlp-popup__title {
	font-size: 2.5rem;
	letter-spacing: -.0375rem;
	margin: 0 0 2rem;
	color: #fff;
	font-weight: 600;
	line-height: 1;
	font-family: inherit;
	padding-right: 30px; /* room for the close button */
}

.jlp-popup__body h3,
.jlp-popup__body h4,
.jlp-popup__body h5,
.jlp-popup__body h6 {
	color: #fff;
	font-weight: 600;
	font-family: inherit;
	margin: 1.5rem 0 .75rem;
}

.jlp-popup__body p,
.jlp-popup__body li {
	color: #fff;
	font-size: inherit;
	font-family: inherit;
}

.jlp-popup__body p { margin: 0 0 1.25rem; }

.jlp-popup__body a:not(.button):not(.hs-button) {
	color: #fff;
	text-decoration: underline;
}
.jlp-popup__body a:not(.button):not(.hs-button):hover {
	color: #00a88d;
}

.jlp-popup__body hr {
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, .25);
	margin: 2rem 0;
}

.jlp-popup__body table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.25rem;
	color: #fff;
}
.jlp-popup__body th,
.jlp-popup__body td {
	padding: .5rem .75rem;
	border: 1px solid rgba(255, 255, 255, .25);
	background: transparent;
	text-align: left;
}

/* Buttons: same as the HubSpot form submit button */
.jlp-popup__body .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 3.25rem;
	min-width: 9.375rem;
	padding: 0 2rem;
	margin: .5rem 0 0;
	background: #00a88d;
	border: 0;
	border-radius: 3.25rem;
	color: #002c41;
	font-family: inherit;
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: color .3s ease, background-color .3s ease;
}
.jlp-popup__body .button:hover,
.jlp-popup__body .button:focus {
	background: #fff;
	color: #002c41;
}

/* ---------- Images + captions ---------- */

.jlp-popup__body img {
	display: block;
	max-width: 100%;
	height: auto;
}

.jlp-popup__body .aligncenter { margin-left: auto; margin-right: auto; }
.jlp-popup__body .alignleft   { float: left;  margin: 0 1.5rem 1rem 0; max-width: 50%; }
.jlp-popup__body .alignright  { float: right; margin: 0 0 1rem 1.5rem; max-width: 50%; }
.jlp-popup__body::after { content: ''; display: table; clear: both; }

/* Classic editor [caption] and block editor image/figure */
.jlp-popup__body figure,
.jlp-popup__body .wp-caption {
	max-width: 100% !important; /* [caption] sets an inline width */
	margin: 0 0 1.5rem;
	padding: 0;
	background: transparent;
	border: 0;
}
.jlp-popup__body figure.aligncenter,
.jlp-popup__body .wp-caption.aligncenter {
	margin-left: auto;
	margin-right: auto;
}

.jlp-popup__body figcaption,
.jlp-popup__body .wp-caption-text,
.jlp-popup__body .wp-element-caption {
	margin: .75rem 0 0;
	padding: 0;
	color: rgba(255, 255, 255, .8);
	font-size: .8125rem;
	line-height: 1.5;
	text-align: left;
}

/* Gallery (several images side by side) */
.jlp-popup__body .gallery,
.jlp-popup__body .wp-block-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 1rem;
	margin: 0 0 1.5rem;
}
.jlp-popup__body .gallery-item { margin: 0; width: auto !important; }
.jlp-popup__body .gallery br   { display: none; }

/* Video / iframe embeds keep 16:9 */
.jlp-popup__body iframe[src*="youtube"],
.jlp-popup__body iframe[src*="vimeo"],
.jlp-popup__body iframe[src*="wistia"],
.jlp-popup__body video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
	margin: 0 0 1.5rem;
}
.jlp-popup__body .wp-block-embed__wrapper { position: relative; }

/* ---------- Mobile: full screen, like the form pop-up ---------- */

@media (max-width: 640px) {
	.jlp-popup { padding: 0; }
	.jlp-popup__dialog,
	.jlp-popup__dialog.jlp-popup--wide,
	.jlp-popup__dialog.jlp-popup--xwide {
		max-width: none;
		max-height: 100vh;
		height: 100%;
		padding: 56px 20px 24px;
	}
	.jlp-popup__body h1,
	.jlp-popup__body h2,
	.jlp-popup__title {
		font-size: 1.875rem;
	}
	.jlp-popup__body .alignleft,
	.jlp-popup__body .alignright {
		float: none;
		max-width: 100%;
		margin: 0 0 1.5rem;
	}
}