/**
 * ReformBox - Frontend styles.
 *
 * Core-aligned lightbox styles adapted for ReformBox overlays.
 */

/* ------------------------------------------------------------------
 * Trigger baseline
 * ----------------------------------------------------------------*/

.reformbox-video-trigger {
	cursor: zoom-in;
	display: flex;
	flex-direction: column;
	position: relative;
}

.reformbox-video-trigger img {
	cursor: zoom-in;
}

/* ------------------------------------------------------------------
 * Overlay
 * ----------------------------------------------------------------*/

.reformbox-overlay.wp-lightbox-overlay {
	box-sizing: border-box;
	cursor: zoom-out;
	height: 100vh;
	left: 0;
	overflow: hidden;
	pointer-events: none;
	position: fixed;
	top: 0;
	visibility: hidden;
	width: 100%;
	z-index: 100000;
}

.reformbox-overlay.wp-lightbox-overlay:focus {
	outline: none;
}

.reformbox-overlay.reformbox-active,
.reformbox-overlay.active {
	pointer-events: auto;
	visibility: visible;
}

.reformbox-overlay.show-closing-animation {
	pointer-events: auto;
	visibility: visible;
}

.reformbox-overlay .scrim {
	background-color: rgba(var(--reformbox-overlay-rgb, 255, 255, 255), var(--reformbox-overlay-alpha, 0.9));
	height: 100%;
	position: absolute;
	width: 100%;
	z-index: 2000000;
}

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

.reformbox-overlay .close-button,
.reformbox-overlay .reformbox-close {
	align-items: center;
	background: none;
	border: none;
	color: #111;
	cursor: pointer;
	display: flex;
	justify-content: center;
	min-height: 40px;
	min-width: 40px;
	padding: 0;
	position: absolute;
	right: calc(env(safe-area-inset-right) + 16px);
	top: calc(env(safe-area-inset-top) + 16px);
	z-index: 5000000;
}

.reformbox-overlay .close-button:focus-visible,
.reformbox-overlay .reformbox-close:focus-visible {
	outline: 3px auto #5a5a5a40;
	outline: 3px auto -webkit-focus-ring-color;
	outline-offset: 3px;
}

.reformbox-overlay .close-button:focus,
.reformbox-overlay .close-button:hover,
.reformbox-overlay .close-button:not(:hover):not(:active):not(.has-background),
.reformbox-overlay .reformbox-close:focus,
.reformbox-overlay .reformbox-close:hover,
.reformbox-overlay .reformbox-close:not(:hover):not(:active):not(.has-background) {
	background: none;
	border: none;
}

/* ------------------------------------------------------------------
 * Lightbox layout container
 * ----------------------------------------------------------------*/

.reformbox-lightbox-container.lightbox-image-container {
	height: var(--wp--lightbox-container-height);
	left: 50%;
	max-height: calc(100vh - 80px);
	max-width: calc(100vw - 32px);
	overflow: auto;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	transform-origin: top left;
	width: var(--wp--lightbox-container-width);
	z-index: 3000000;
}

.reformbox-content {
	background: #fff;
	border: 1px solid rgba(17, 17, 17, 0.08);
	border-radius: 8px;
	box-sizing: border-box;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
	height: 100%;
	max-height: 100%;
	max-width: 100%;
	overflow: auto;
	padding: 2rem;
	width: 100%;
}

.reformbox-content .wp-block-image,
.reformbox-content .wp-block-video {
	margin: 0;
}

.reformbox-content img,
.reformbox-content video {
	display: block;
	height: auto;
	max-width: 100%;
}

/* ------------------------------------------------------------------
 * Media variant
 * ----------------------------------------------------------------*/

.reformbox-overlay--media .reformbox-lightbox-container.lightbox-image-container {
	max-height: calc(100vh - 80px);
	max-width: calc(100vw - 32px);
	overflow: hidden;
}

.reformbox-overlay--media .reformbox-content {
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
}

.reformbox-overlay--media .scrim {
	background-color: rgba(var(--reformbox-overlay-rgb, 255, 255, 255), var(--reformbox-overlay-alpha, 0.9));
}

.reformbox-overlay[data-reformbox-dialog-type="content"] .reformbox-lightbox-container.lightbox-image-container {
	height: auto;
	max-height: 90vh;
	max-width: min(90vw, 960px);
	overflow: visible;
	width: auto;
}

.reformbox-overlay[data-reformbox-dialog-type="content"] .reformbox-content {
	box-shadow: none;
	height: auto;
	max-height: 90vh;
}

.reformbox-overlay[data-reformbox-dialog-type="content"] .scrim {
	background-color: rgba(var(--reformbox-overlay-rgb, 255, 255, 255), var(--reformbox-overlay-alpha, 0.9));
}

.reformbox-overlay--media .reformbox-content video,
.reformbox-overlay--media .reformbox-content .wp-block-video video,
.reformbox-overlay--media .reformbox-content .wp-block-image img {
	height: var(--wp--lightbox-image-height);
	max-height: calc(100vh - 80px);
	max-width: calc(100vw - 32px);
	min-height: var(--wp--lightbox-image-height);
	min-width: var(--wp--lightbox-image-width);
	width: var(--wp--lightbox-image-width);
}

/* ------------------------------------------------------------------
 * Animations
 * ----------------------------------------------------------------*/

@media (prefers-reduced-motion: no-preference) {

	.reformbox-overlay.reformbox-animation-zoom.reformbox-active {
		animation: none;
		opacity: 1;
		visibility: visible;
	}

	.reformbox-overlay.reformbox-animation-zoom.reformbox-active .reformbox-lightbox-container {
		animation: lightbox-zoom-in 0.4s;
	}

	.reformbox-overlay.reformbox-animation-zoom.reformbox-active .scrim {
		animation: turn-on-visibility 0.4s forwards;
	}

	.reformbox-overlay.reformbox-animation-zoom.show-closing-animation:not(.reformbox-active) {
		animation: none;
	}

	.reformbox-overlay.reformbox-animation-zoom.show-closing-animation:not(.reformbox-active) .reformbox-lightbox-container {
		animation: lightbox-zoom-out 0.4s forwards;
	}

	.reformbox-overlay.reformbox-animation-zoom.show-closing-animation:not(.reformbox-active) .scrim {
		animation: turn-off-visibility 0.4s forwards;
	}
}

@keyframes turn-on-visibility {

	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes turn-off-visibility {

	0% {
		opacity: 1;
		visibility: visible;
	}

	99% {
		opacity: 0;
		visibility: visible;
	}

	100% {
		opacity: 0;
		visibility: hidden;
	}
}

@keyframes lightbox-zoom-in {

	0% {
		transform: translate(calc((-100vw + var(--wp--lightbox-scrollbar-width, 0px)) / 2 + var(--wp--lightbox-initial-left-position, 0px)), calc(-50vh + var(--wp--lightbox-initial-top-position, 0px))) scale(var(--wp--lightbox-scale, 1));
	}

	100% {
		transform: translate(-50%, -50%) scale(1);
	}
}

@keyframes lightbox-zoom-out {

	0% {
		transform: translate(-50%, -50%) scale(1);
		visibility: visible;
	}

	99% {
		visibility: visible;
	}

	100% {
		transform: translate(calc((-100vw + var(--wp--lightbox-scrollbar-width, 0px)) / 2 + var(--wp--lightbox-initial-left-position, 0px)), calc(-50vh + var(--wp--lightbox-initial-top-position, 0px))) scale(var(--wp--lightbox-scale, 1));
		visibility: hidden;
	}
}

@media (prefers-reduced-motion: reduce) {

	.reformbox-overlay,
	.reformbox-lightbox-container,
	.reformbox-video-trigger__play {
		animation: none !important;
		transition: none !important;
	}
}

/* ------------------------------------------------------------------
 * Body lock
 * ----------------------------------------------------------------*/

body.reformbox-open {
	overflow-y: scroll;
}

/* ------------------------------------------------------------------
 * Video trigger (poster thumbnail + play icon)
 * ----------------------------------------------------------------*/

.reformbox-video-trigger__frame {
	display: block;
	line-height: 0;
	position: relative;
}

.reformbox-video-trigger__poster {
	display: block;
	height: auto;
	max-width: 100%;
}

.reformbox-video-trigger__play {
	color: #fff;
	font-size: 3rem;
	left: 50%;
	pointer-events: none;
	position: absolute;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
	top: 50%;
	transform: translate(-50%, -50%);
	transition: transform 0.2s ease;
}

.reformbox-video-trigger:hover .reformbox-video-trigger__play,
.reformbox-video-trigger:focus-visible .reformbox-video-trigger__play {
	transform: translate(-50%, -50%) scale(1.15);
}

.reformbox-video-trigger:focus-visible {
	outline: 2px solid #007cba;
	outline-offset: 2px;
}

/* ------------------------------------------------------------------
 * Trigger cursor
 * ----------------------------------------------------------------*/

[data-reformbox-trigger] {
	cursor: zoom-in;
}