/**
 * FWBG Modal Maker
 *
 * Breakpoints: 1079 / 779 / 389 (page width 1280)
 *
 * There is no scrim div any more. The old #fwbgmm_wrapper was a fixed element collapsed
 * to 0x0 at z-index -1 when closed and blown up to 100% at z-index 999999 when open;
 * both primitives render in the top layer, so neither trick is needed and nothing here
 * declares a z-index at all.
 *
 * Overlays are sized to their content and centred, rather than filling the viewport.
 * That is what makes light dismiss work: a popover that covers the whole viewport has no
 * "outside" to click. The scrim is the ::backdrop pseudo-element.
 *
 * @package   fwbg-modal-maker
 * @author    Jerry Simmons <jerry@ferventsolutions.com>
 * @copyright 2023 Jerry Simmons
 * @license   GPL-2.0+
 **/


/*** TRIGGERS ***/

/**
 * All three triggers are <button>s now and need the UA button styling stripped.
 *
 * Deliberately NOT .fwbgmm_trigger: the passage trigger is also a .fw_link, and a
 * blanket `font: inherit` / `display: block` here would fight .fw_link's own font-size
 * and inline-flex on equal specificity, leaving the winner up to stylesheet order.
 * button.fw_link in fwbg-ui.css does the reset for that one.
 **/
.fwbgmm_image_trigger,
.fwbgmm_video_trigger {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: inherit;
	cursor: pointer;
}
.fwbgmm_trigger:focus-visible {
	outline: solid 2px var( --fw-red-text );
	outline-offset: 3px;
}
.fwbgmm_trigger img {
	display: block;
	max-width: 100%;
}
.fwbgmm_trigger_text {
	display: block;
}

/* VIDEO TRIGGER TILE */
.fwbgmm_video_trigger {
	position: relative;
	width: 100%;
	background-color: rgba( 60, 60, 60, .75 );
	border-radius: 15px;
	overflow: hidden;
}
.fwbgmm_video_trigger > img {
	width: 100%;
	height: auto;
	object-fit: contain;
	margin-bottom: -10px;
	transition: transform 1.35s ease;
}
.fwbgmm_video_trigger:hover > img,
.fwbgmm_video_trigger:focus-visible > img {
	transform: scale( 1.05 );
}
.fwbgmm_video_hover_wrapper,
.fwbgmm_video_hover_overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* A scrim over a photograph, not a border or shadow — a literal is right here, and
	   it reads the same in both schemes. */
	background-color: rgba( 0, 0, 0, .35 );
}
.fwbgmm_video_hover_overlay {
	display: flex;
	flex-flow: row;
	align-items: center;
	justify-content: center;
}
.fwbgmm_video_hover_icon {
	width: 75px;
	height: auto;
}
.fwbgmm_video_hover_wrapper {
	display: flex;
	flex-flow: column;
	justify-content: end;
	padding: 20px;
	opacity: 0;
	transition: opacity .35s ease;
}
/* :focus-visible as well as :hover — the tile used to be reachable by pointer only, so
   a keyboard user got no affordance at all.
   The literal values above replace var( --border-radius-large ), var( --transition-time ),
   var( --hover-scale ) and var( --padding ), none of which are defined anywhere in the
   repo. Undefined custom properties make the whole declaration invalid at computed-value
   time, so the radius, the fade and the zoom had silently never worked. */
.fwbgmm_video_trigger:hover .fwbgmm_video_hover_wrapper,
.fwbgmm_video_trigger:focus-visible .fwbgmm_video_hover_wrapper {
	opacity: 1;
}


/*** OVERLAYS — SHARED ***/

/**
 * Resets both sets of UA defaults: [popover] ships border/padding/background canvas and
 * width:fit-content, <dialog> ships border/padding/background canvas plus its own
 * max-width and max-height.
 *
 * inset:0 + margin:auto is the centring. No display in THIS block on purpose — it covers
 * both primitives at once, and an author `display` here would beat the UA rules that hide
 * a closed popover/dialog, leaving every overlay permanently visible.
 **/
.fwbgmm_overlay {
	position: fixed;
	inset: 0;
	margin: auto;
	width: fit-content;
	height: fit-content;
	max-width: 94%;
	max-height: 94%;
	padding: 0;
	border: 0;
	background-color: transparent;
	color: var( --fw-black-text );
	overflow: visible;
}
/**
 * Hide the closed state explicitly rather than leaning on the UA stylesheet.
 *
 * Relying on it is only safe where the primitive is supported. Where `popover` is not
 * (Safari below 17, so an iPhone that cannot move past iOS 16), the attribute is inert,
 * the UA's display:none never applies, and this rule block turns the element into a
 * position:fixed, opacity:0 box sitting in the middle of the viewport — invisible, but
 * still eating every tap aimed at whatever is behind it. Measured on a live chapter page:
 * taps on the image, passage and video triggers all landed on .fwbgmm_action_bar instead.
 *
 * Stating display:none makes the unsupported case degrade to a dead trigger instead of a
 * page that cannot be tapped. :popover-open (0,2,0) outranks it when the popover is open,
 * and the two dialog selectors are mutually exclusive.
 **/
.fwbgmm_popover {
	display: none;
}
.fwbgmm_dialog:not( [open] ) {
	display: none;
}
.fwbgmm_popover:popover-open,
.fwbgmm_dialog[open] {
	display: flex;
	flex-flow: column;
}
/**
 * ::backdrop does not reliably inherit custom properties from the originating element
 * across engines, so the literal fallback in var() is load-bearing, not decoration.
 **/
.fwbgmm_overlay::backdrop {
	background-color: var( --fw-scrim, rgba( 0, 0, 0, .9 ) );
}
.fwbgmm_overlay_body {
	min-height: 0;
	overflow: auto;
}

/* Lock the page behind. showModal() inerts the background but does not stop it
   scrolling, and popovers do not inert it at all. Scoped to this module's own classes so
   the footer feedback popover is unaffected. */
html:has( .fwbgmm_dialog[open] ),
html:has( .fwbgmm_popover:popover-open ) {
	overflow: hidden;
}

/* Closed overlays are display:none, so a fade needs allow-discrete to keep them painted
   for the duration. Degrades to an instant swap where unsupported. */
@media ( prefers-reduced-motion: no-preference ) {
	.fwbgmm_overlay {
		opacity: 0;
		transition: opacity .15s ease, overlay .15s allow-discrete, display .15s allow-discrete;
	}
	.fwbgmm_popover:popover-open,
	.fwbgmm_dialog[open] {
		opacity: 1;
	}
	@starting-style {
		.fwbgmm_popover:popover-open,
		.fwbgmm_dialog[open] {
			opacity: 0;
		}
	}
}


/*** IMAGE POPOVER ***/

.fwbgmm_overlay_image {
	display: block;
	width: auto;
	height: auto;
	/* Leaves room for the action bar without needing it positioned absolutely. */
	max-width: 94vw;
	max-height: calc( 94vh - 80px );
}
.fwbgmm_image_svg {
	box-sizing: border-box;
	padding: 20px;
	background-color: var( --fw-true-white );
}


/*** VIDEO DIALOG ***/

.fwbgmm_dialog_video .fwbgmm_overlay_body {
	width: min( 94vw, calc( ( 94vh - 80px ) * 16 / 9 ) );
	aspect-ratio: 16 / 9;
	background-color: var( --fw-black );
	overflow: hidden;
}
.fwbgmm_video_frame {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}


/*** HTML / PASSAGE DIALOG ***/

.fwbgmm_dialog_html {
	width: min( 94%, 900px );
	height: 94%;
}
.fwbgmm_dialog_html .fwbgmm_overlay_body {
	flex: 1 1 auto;
	background-color: var( --fw-surface );
}
.fwbgmm_html_wrapper {
	/* The old 150px of bottom padding was manual clearance for an absolutely positioned
	   action bar. The bar is a flex sibling now, so it reserves its own space. */
	padding: 40px;
	background-color: var( --fw-surface );
}
.fwbgmm_html_wrapper > * {
	margin: auto;
	width: 800px;
	max-width: 100%;
}


/*** ACTION BAR ***/

.fwbgmm_action_bar {
	flex: 0 0 auto;
	box-sizing: border-box;
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 10px;
	background-color: var( --fw-red );
}
.fwbgmm_dialog_html .fwbgmm_action_bar {
	background-color: var( --fw-blue );
}
/* display:contents so the button inside participates in the bar's flex row directly. */
.fwbgmm_action_bar_close {
	display: contents;
}
/* body.fwbg prefix so this beats the theme's own anchor colour: ferventword.css loads
   after fwbg-ui.css and Divi styles `a` globally. */
body.fwbg .fwbgmm_action_bar_item {
	display: inline-block;
	margin: 0;
	padding: 10px 20px;
	border: solid 1px var( --fw-true-white );
	background-color: transparent;
	color: var( --fw-true-white );
	font-family: inherit;
	font-size: clamp( 12px, 1vw, 14px );
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .35s ease;
}
body.fwbg .fwbgmm_action_bar_item:hover {
	background-color: var( --fw-black );
}
body.fwbg .fwbgmm_action_bar_item:focus-visible {
	outline: solid 2px var( --fw-true-white );
	outline-offset: 2px;
}


/*** BREAKPOINTS ***/

@media ( max-width: 779px ) {
	.fwbgmm_overlay {
		max-width: 100%;
		max-height: 100%;
	}
	.fwbgmm_dialog_html {
		width: 100%;
		height: 100%;
	}
	.fwbgmm_overlay_image {
		max-width: 100vw;
		max-height: calc( 100vh - 80px );
	}
	.fwbgmm_dialog_video .fwbgmm_overlay_body {
		width: min( 100vw, calc( ( 100vh - 80px ) * 16 / 9 ) );
	}
	.fwbgmm_html_wrapper {
		padding: 25px 20px;
	}
	.fwbgmm_video_hover_icon {
		width: 50px;
	}
}

@media ( max-width: 389px ) {
	/* Three items at 20px of side padding overflow a 389px bar; wrapping is what keeps
	   the page from scrolling sideways. */
	.fwbgmm_action_bar {
		gap: 6px;
		padding: 8px 6px;
	}
	body.fwbg .fwbgmm_action_bar_item {
		padding: 8px 10px;
	}
	.fwbgmm_html_wrapper {
		padding: 15px;
	}
}