/**
 * FWBG Popover
 *
 * @package   fwbg-popover
 * @author    Jerry Simmons <jerry@ferventsolutions.com>
 * @copyright 2026 Jerry Simmons
 * @license   GPL-2.0+
 **/

/**
 * Breakpoints: 1079px / 779px / 389px  (page width 1280px)
 *
 * Surface and text come from the theme-aware tokens in ferventword.css, so whatever HTML is
 * pasted into the admin field inherits dark mode without writing any colour of its own. The
 * backdrop colour is not here: it is an admin setting, printed as a literal rgba() beside
 * the dialog (see fwbg-popover.php for why it is not a custom property).
 *
 * Selectors carry a body.fwbg prefix where they style content, so `.fwbg p` and friends in
 * ferventword.css - which loads later - do not win on order.
 **/


/*** THE BOX ***/
#fwbg_popover {
	position: fixed;
	z-index: 100000;
	box-sizing: border-box;
	width: min( 360px, calc( 100vw - 32px ) );
	max-height: calc( 100dvh - 32px );
	margin: 0;
	padding: 24px 24px 20px;
	overflow: auto;
	border: 1px solid var( --fw-black-rule );
	border-top: 4px solid var( --fw-red );
	border-radius: 0 0 12px 12px;
	background-color: var( --fw-surface );
	color: var( --fw-black-text );
	box-shadow: 0 8px 32px rgba( 0, 0, 0, .25 );
}
#fwbg_popover:not( [open] ) {
	display: none;
}

#fwbg_popover.fwbg_popover_bottom-right {
	inset: auto 16px 16px auto;
}
#fwbg_popover.fwbg_popover_bottom-left {
	inset: auto auto 16px 16px;
}
#fwbg_popover.fwbg_popover_center-center {
	inset: 0;
	width: min( 480px, calc( 100vw - 32px ) );
	height: fit-content;
	margin: auto;
	border-radius: 0 0 12px 12px;
}

@media ( prefers-reduced-motion: no-preference ) {
	#fwbg_popover[open] {
		animation: fwbg-popover-in .25s ease-out;
	}
	@keyframes fwbg-popover-in {
		from { opacity: 0; translate: 0 12px; }
		to   { opacity: 1; translate: 0 0; }
	}
}


/*** CLOSE ***/
body.fwbg #fwbg_popover .fwbg_popover_close {
	position: absolute;
	top: 6px;
	right: 8px;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var( --fw-black-text-65 );
	font-size: 24px;
	line-height: 32px;
	cursor: pointer;
}
body.fwbg #fwbg_popover .fwbg_popover_close:hover,
body.fwbg #fwbg_popover .fwbg_popover_close:focus-visible {
	background-color: var( --fw-black-light );
	color: var( --fw-black-text );
}


/*** CONTENT ***/
body.fwbg #fwbg_popover .fwbg_popover_content > :first-child {
	margin-top: 0;
}
body.fwbg #fwbg_popover .fwbg_popover_content > :last-child {
	margin-bottom: 0;
	padding-bottom: 0;
}
body.fwbg #fwbg_popover .fwbg_popover_content h2 {
	margin: 0 0 8px;
	padding: 0 24px 0 0;
	color: var( --fw-black-text );
	font-size: 1.25em;
	line-height: 1.3;
}
body.fwbg #fwbg_popover .fwbg_popover_content p {
	margin: 0 0 12px;
	padding: 0;
	color: var( --fw-black-text-85 );
	font-size: .95em;
	line-height: 1.5;
}
body.fwbg #fwbg_popover .fwbg_popover_content a {
	color: var( --fw-red-text );
}
body.fwbg #fwbg_popover .fwbg_popover_content p.fwbg_popover_eyebrow {
	margin-bottom: 6px;
	color: var( --fw-orange-text );
	font-size: .75em;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}
body.fwbg #fwbg_popover .fwbg_popover_content img {
	max-width: 100%;
	height: auto;
}

/* The app badge and its fallback button, from jswj_fwbg_app_store_badge_html() */
body.fwbg #fwbg_popover .fwbg_app_store_badge img {
	display: block;
	width: 156px;
}
body.fwbg #fwbg_popover a.fwbg_app_store_button {
	display: inline-block;
	padding: 10px 18px;
	border-radius: 6px;
	background-color: var( --fw-red );
	color: var( --fw-true-white );
	font-size: .85em;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
}
body.fwbg #fwbg_popover a.fwbg_app_store_button:hover,
body.fwbg #fwbg_popover a.fwbg_app_store_button:focus-visible {
	background-color: var( --fw-black );
}


/*** RESPONSIVE ***/
@media ( max-width: 779px ) {
	/* Every position becomes a sheet along the bottom: a corner box on a phone covers
	   the content anyway, and the bottom is where a thumb already is */
	#fwbg_popover.fwbg_popover_bottom-right,
	#fwbg_popover.fwbg_popover_bottom-left,
	#fwbg_popover.fwbg_popover_center-center {
		inset: auto 16px 16px 16px;
		width: auto;
		height: auto;
		margin: 0;
	}
}