/**
 * Goodman Popups - structural styles only.
 *
 * Deliberately no fonts, colours, button or form styling: those come from the
 * active theme. Everything here is wrapped in :where() so it has zero
 * specificity and any theme rule wins without !important.
 *
 * Themes customise through CSS custom properties (set them on :root or on
 * .gpop__dialog) and through the goodman_popups/scheme_classes filter.
 */

:where(.gpop__dialog) {
	/* Defaults a theme may override */
	--gpop-max-width: 960px;
	--gpop-max-width-content-only: 640px;
	--gpop-gutter: 16px;            /* gap between dialog and viewport edge */
	--gpop-padding: 40px;           /* content padding, desktop */
	--gpop-padding-mobile: 24px;
	--gpop-media-inset: 0;          /* extra frame around the image; the template's p-3 wrapper already gives 12px */
	--gpop-radius: 0;
	--gpop-bg: #fff;
	--gpop-color: inherit;
	--gpop-close-size: 28px;
	--gpop-close-bg: #000;
	--gpop-close-color: #fff;
	--gpop-close-offset: 16px;
	--gpop-divider: 1px solid var(--gpop-heading-color, currentColor);
	--gpop-mobile-image-ratio: 4 / 3;

	box-sizing: border-box;
	width: min(var(--gpop-max-width), calc(100vw - (var(--gpop-gutter) * 2)));
	max-width: none;
	max-height: calc(100dvh - (var(--gpop-gutter) * 2));
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: var(--gpop-radius);
	background: var(--gpop-bg);
	color: var(--gpop-color);
	overflow: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

:where(.gpop__dialog:focus) {
	outline: none;
}

:where(.gpop__dialog.gpop--content-only) {
	width: min(var(--gpop-max-width-content-only), calc(100vw - (var(--gpop-gutter) * 2)));
}

:where(.gpop-scheme-dark) {
	/* Neutral defaults. Set real site colours in Popups > Settings > Colours. */
	--gpop-bg: #222;
	--gpop-color: #fff;
}

:where(.gpop__heading) {
	color: var(--gpop-heading-color, inherit);
}

/* Backdrop does not inherit from the dialog, so variables here need :root. */
:where(.gpop__dialog)::backdrop {
	background: var(--gpop-backdrop, rgba(20, 20, 20, 0.55));
	-webkit-backdrop-filter: blur(var(--gpop-backdrop-blur, 6px));
	backdrop-filter: blur(var(--gpop-backdrop-blur, 6px));
}

:where(html.gpop-open) {
	overflow: hidden;
}

/* Layout ------------------------------------------------------------- */

:where(.gpop__inner) {
	position: relative;
	padding: 0;
}

:where(.gpop__inner > .row) {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
}

:where(.gpop__media) {
	padding: var(--gpop-media-inset);
	padding-right: 0;
	display: flex;
}

:where(.gpop__media.order-md-2) {
	padding-right: var(--gpop-media-inset);
	padding-left: 0;
}

:where(.gpop__image) {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 100%;
	object-fit: cover;
}

:where(.gpop__content) {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--gpop-padding);
}

:where(.gpop__row--image .gpop__content) {
	/* leave room for the close button on the image layout */
	padding-top: calc(var(--gpop-padding) + var(--gpop-close-size) / 2);
}

:where(.gpop__body) {
	width: 100%;
}

:where(.gpop__heading) {
	margin-top: 0;
}

:where(.gpop__text > :last-child) {
	margin-bottom: 0;
}

:where(.gpop__actions) {
	margin-top: 24px;
}

:where(.gpop__ctas) {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 16px;
}

:where(.gpop__form) {
	border-top: var(--gpop-divider);
	padding-top: 24px;
}

/* Form colours ----------------------------------------------------------- */

/*
 * Second deliberate exception to :where(): the theme's Gravity Forms rules
 * (.gform_wrapper.gravity-theme form input[type="text"] ...) carry high
 * specificity and hard-code the site's input colours, which are invisible on
 * a dark popup. Only colours are touched, and only inside the popup's form.
 * Driven by Popups > Settings > Colours, with fallbacks to the scheme colours.
 */
.gpop .gpop__form .gform_wrapper form input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.gpop .gpop__form .gform_wrapper form textarea,
.gpop .gpop__form .gform_wrapper form select {
	color: var(--gpop-form-text, var(--gpop-color));
	border-color: var(--gpop-form-accent, var(--gpop-heading-color, currentColor));
	background-color: transparent;
}

.gpop .gpop__form .gform_wrapper form input::placeholder,
.gpop .gpop__form .gform_wrapper form textarea::placeholder {
	color: var(--gpop-form-text, var(--gpop-color));
	opacity: 0.7;
}

.gpop .gpop__form .gform_wrapper form .gfield_label,
.gpop .gpop__form .gform_wrapper form .gfield_description,
.gpop .gpop__form .gform_wrapper form .gform_confirmation_message {
	color: inherit;
}

.gpop .gpop__form .gform_wrapper form input[type="submit"],
.gpop .gpop__form .gform_wrapper form button[type="submit"],
.gpop .gpop__form .gform_wrapper form input[type="submit"]:hover,
.gpop .gpop__form .gform_wrapper form button[type="submit"]:hover,
.gpop .gpop__form .gform_wrapper form input[type="submit"]:focus,
.gpop .gpop__form .gform_wrapper form button[type="submit"]:focus {
	background-color: var(--gpop-form-accent, var(--gpop-heading-color, currentColor));
	border-color: var(--gpop-form-accent, var(--gpop-heading-color, currentColor));
	color: var(--gpop-button-text, var(--gpop-bg));
}

/* Call to action colours ------------------------------------------------ */

/*
 * Same exception as the form: theme button classes (.btn, .btn-primary,
 * .btn-text, .link-text ...) hard-code site colours. Inside the popup, text,
 * icon and border follow --gpop-cta-color; solid buttons use it as background.
 */
.gpop .gpop__ctas a,
.gpop .gpop__ctas a:hover,
.gpop .gpop__ctas a:focus,
.gpop .gpop__ctas a .link-text,
.gpop .gpop__ctas a .icon {
	color: var(--gpop-cta-color, var(--gpop-heading-color, currentColor));
	border-color: var(--gpop-cta-color, var(--gpop-heading-color, currentColor));
}

.gpop .gpop__ctas a svg * {
	stroke: currentColor;
}

.gpop .gpop__ctas a svg [fill]:not([fill="none"]) {
	fill: currentColor;
}

/* Text-style and outline buttons: no fill. Also cancels the theme's
   .content-text a { text-decoration: underline } which the CTAs sit inside. */
.gpop .gpop__ctas a,
.gpop .gpop__ctas a:hover,
.gpop .gpop__ctas a:focus {
	background-color: transparent;
	text-decoration: none;
}

/* Solid buttons: fill with the CTA colour */
.gpop .gpop__ctas a.btn-primary,
.gpop .gpop__ctas a.btn-primary:hover,
.gpop .gpop__ctas a.btn-primary:focus,
.gpop .gpop__ctas a.btn-primary .link-text,
.gpop .gpop__ctas a.btn-primary .icon {
	background-color: var(--gpop-cta-color, var(--gpop-heading-color, currentColor));
	color: var(--gpop-cta-button-text, var(--gpop-bg));
}

.gpop .gpop__ctas a.btn-primary .link-text,
.gpop .gpop__ctas a.btn-primary .icon {
	background-color: transparent;
}

/* Close button --------------------------------------------------------- */

/*
 * Deliberate exception to the :where() rule: themes style every <button>
 * (position, height, background, radius), so the close button needs enough
 * specificity to stay a small circle pinned to the dialog's top-right corner.
 * Colours remain variables, so themes and the Colours settings still control them.
 */
.gpop .gpop__close,
.gpop .gpop__close:hover,
.gpop .gpop__close:focus,
.gpop .gpop__close:active {
	position: absolute;
	top: var(--gpop-close-offset);
	right: var(--gpop-close-offset);
	left: auto;
	bottom: auto;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--gpop-close-size);
	min-width: 0;
	height: var(--gpop-close-size);
	min-height: 0;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: var(--gpop-close-bg);
	color: var(--gpop-close-color);
	box-shadow: none;
	cursor: pointer;
	line-height: 1;
	transform: none;
}

.gpop .gpop__close:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.gpop .gpop__close svg {
	width: 12px;
	height: 12px;
	display: block;
}

/* Theme close icons carry their own stroke attribute; follow the button colour instead. */
.gpop .gpop__close svg * {
	stroke: currentColor;
}

/* Mobile ------------------------------------------------------------- */

@media (max-width: 767.98px) {
	:where(.gpop__dialog) {
		--gpop-padding: var(--gpop-padding-mobile);
	}

	:where(.gpop__media),
	:where(.gpop__media.order-md-2) {
		width: 100%;
		flex: 0 0 100%;
		padding: var(--gpop-media-inset);
		padding-bottom: 0;
	}

	:where(.gpop__image) {
		aspect-ratio: var(--gpop-mobile-image-ratio);
		height: auto;
		min-height: 0;
	}

	:where(.gpop__content) {
		width: 100%;
		flex: 0 0 100%;
	}

	:where(.gpop__row--image .gpop__content) {
		padding-top: var(--gpop-padding);
	}
}

/* Motion --------------------------------------------------------------- */

:where(.gpop__dialog) {
	--gpop-duration-in: 300ms;
	--gpop-duration-out: 220ms;
}

@media (prefers-reduced-motion: no-preference) {
	:where(.gpop__dialog[open]) {
		animation: gpop-in var(--gpop-duration-in) ease-out both;
	}

	:where(.gpop__dialog[open])::backdrop {
		animation: gpop-fade-in var(--gpop-duration-in) ease-out both;
	}

	/* .gpop-closing is added by popup.js just before dialog.close() */
	:where(.gpop__dialog.gpop-closing) {
		animation: gpop-out var(--gpop-duration-out) ease-in both;
	}

	:where(.gpop__dialog.gpop-closing)::backdrop {
		animation: gpop-fade-out var(--gpop-duration-out) ease-in both;
	}

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

	@keyframes gpop-out {
		from {
			opacity: 1;
			transform: none;
		}
		to {
			opacity: 0;
			transform: translateY(8px) scale(0.98);
		}
	}

	@keyframes gpop-fade-in {
		from { opacity: 0; }
		to { opacity: 1; }
	}

	@keyframes gpop-fade-out {
		from { opacity: 1; }
		to { opacity: 0; }
	}
}

/* Fallback for browsers without <dialog> ------------------------------- */

:where(.gpop__dialog.gpop-fallback-open) {
	display: block;
	position: fixed;
	inset: 0;
	z-index: 10000;
	height: fit-content;
}

:where(.gpop__backdrop) {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: var(--gpop-backdrop, rgba(20, 20, 20, 0.55));
}