/*
 * ds-popup-banner-manager popup content — .dsbpm-popup is only ever
 * present on popup-layout ct_content_block markup
 * (PopupBannerRepository::buildPopupContent()); banners get their own
 * dsbpm-banner class instead, so nothing here touches banner styling.
 *
 * 2026-07-10 rework: the image is now the full-bleed background of the
 * whole popup (position:absolute, object-fit:cover) rather than a boxed
 * element above the text — heading/body/button render as a centered
 * overlay on top via .dsbpm-popup__content. A shared dark scrim now
 * sits above both image and solid-colour backgrounds so white text stays
 * readable in both light and dark theme modes.
 *
 * This file is enqueued both on the real front end and inside the
 * wp-admin edit-screen preview modal (see EditScreen.php/admin-edit.js),
 * so every rule here applies identically to both.
 *
 * Padding fix (2026-07-10, part 4): Blocksy Companion Pro's own
 * .ct-popup-content applies `padding: var(--popup-padding, 30px)`
 * (confirmed the ONLY spacing rule anywhere in the popup chrome — no
 * margin exists on .ct-popup/.ct-popup-inner/article/.ct-popup-content).
 * An earlier negative-margin/width breakout only compensated WIDTH
 * (which resolves top-down from .ct-popup-inner's definite max-width) —
 * HEIGHT resolves bottom-up in this box model (.ct-popup-content/article/
 * .ct-popup-inner are all auto-height), so there was no definite parent
 * height to negatively-compensate against, leaving a real ~30px gap at
 * the bottom. Fixed by zeroing the padding at its source instead of
 * fighting it with margins — .dsbpm-popup then needs no breakout hack at
 * all, just width:100% in normal flow.
 */

.ct-popup-content:has(.dsbpm-popup) {
	--popup-padding: 0px;
}

.ct-popup:has(.dsbpm-popup) {
	--dsbpm-popup-gutter: 48px;
	--dsbpm-popup-target-width: 960px;
	--dsbpm-popup-min-height: 540px;
}

.ct-popup:has(.dsbpm-popup) .ct-popup-inner {
	width: auto !important;
	max-width: none !important;
	min-width: 0;
}

.ct-popup:has(.dsbpm-popup) .ct-popup-inner article {
	width: min(var(--dsbpm-popup-target-width), calc(100vw - (var(--dsbpm-popup-gutter) * 2))) !important;
	max-width: min(var(--dsbpm-popup-target-width), calc(100vw - (var(--dsbpm-popup-gutter) * 2))) !important;
	min-width: 0;
	margin-inline: auto;
}

.dsbpm-popup {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--dsbpm-popup-min-height);
	width: 100%;
	box-sizing: border-box;
}

.dsbpm-popup::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.52) 100%);
	z-index: 1;
	pointer-events: none;
}

.dsbpm-popup .wp-block-image {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: 0;
}

.dsbpm-popup .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dsbpm-popup__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
	padding: 24px;
}

/* .dsbpm-banner__text (its base rule, gap:4px, lives in banner.css since it's shared with the
   strip banner) wraps the heading+body pair here too — scoped override so only popups get the
   +10% space, not the banner. */
.dsbpm-popup .dsbpm-banner__text {
	gap: 4.4px;
}

/* Part 3: white text, matching the theme's real live heading font-family
 * (--theme-font-family — confirmed via DB/compiled-CSS inspection this is
 * what h2/.wp-block-heading actually resolves to on this site, NOT the
 * child theme's unused --ds-font-headings). Font-size intentionally left
 * untouched on body/button — h2's natural size is already larger than
 * default paragraph/button text, giving the required heading > body
 * hierarchy without guessing arbitrary pixel values. */
.dsbpm-popup .wp-block-heading {
	color: var(--dsbpm-heading-text-colour, #fff);
	margin: 0;
	font-family: var(--dsbpm-heading-font-family, var(--theme-font-family));
	font-size: var(--dsbpm-heading-font-size, inherit);
	font-weight: var(--dsbpm-heading-font-weight, inherit);
	font-style: var(--dsbpm-heading-font-style, normal);
}

.dsbpm-popup p {
	margin: 0;
	color: var(--dsbpm-body-text-colour, #fff);
	font-family: var(--dsbpm-body-font-family, var(--theme-font-family));
	font-size: var(--dsbpm-body-font-size, inherit);
	font-weight: var(--dsbpm-body-font-weight, inherit);
	font-style: var(--dsbpm-body-font-style, normal);
}

.dsbpm-popup .wp-block-button__link {
	color: var(--dsbpm-button-text-colour, #fff);
	font-family: var(--dsbpm-button-font-family, var(--theme-font-family));
	font-size: var(--dsbpm-button-font-size, inherit);
	font-weight: var(--dsbpm-button-font-weight, 700);
	font-style: var(--dsbpm-button-font-style, normal);
}

.dsbpm-popup .wp-block-buttons {
	margin: 16px 0 0;
	display: flex;
	justify-content: center;
}

/* "Solid colour only, no image" — applies at every breakpoint, same as
 * banner (a genuine content choice, not a mobile-only treatment). */
.dsbpm-popup[data-dsbpm-mobile-display="text_only"] .wp-block-image {
	display: none;
}

/* Close button focus ring (2026-07-10). .ct-toggle-close is a widely
 * reused Blocksy component class (mobile menu, account modal, WooCommerce
 * quick-view/compare/cart popups, etc.) — scoped to .ct-popup specifically
 * so this never touches those other toggles. Uses :focus-visible rather
 * than removing the outline outright, so keyboard users still get a clear
 * indicator (a double ring, visible against any background image/colour)
 * — only the default blue browser outline on mouse click is suppressed. */
.ct-popup .ct-toggle-close:focus {
	outline: none;
}

.ct-popup .ct-toggle-close:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(0, 0, 0, 0.4);
}

/* Desktop only (matches the tablet block below's own 1024px boundary) — fixed sizes per
   explicit request, overriding whatever a given popup's admin-configured
   --dsbpm-*-font-size custom properties are set to. */
@media (min-width: 1025px) {
	.dsbpm-popup .wp-block-heading {
		font-size: 30.6px;
	}

	.dsbpm-popup p {
		font-size: 23.4px;
	}

	.dsbpm-popup .wp-block-button__link {
		font-size: 23.4px;
	}
}

@media (max-width: 1024px) {
	.ct-popup:has(.dsbpm-popup) {
		--dsbpm-popup-gutter: 32px;
		--dsbpm-popup-target-width: 720px;
		--dsbpm-popup-min-height: 440px;
	}
}

@media (max-width: 689.98px) {
	.ct-popup:has(.dsbpm-popup) {
		--dsbpm-popup-gutter: 16px;
		--dsbpm-popup-target-width: 100%;
		--dsbpm-popup-min-height: 360px;
	}

	.ct-popup:has(.dsbpm-popup) .ct-popup-inner article {
		width: calc(100% - (var(--dsbpm-popup-gutter) * 2)) !important;
		max-width: calc(100% - (var(--dsbpm-popup-gutter) * 2)) !important;
	}

	.dsbpm-popup__content {
		padding: 24px 20px;
	}
}