@charset "UTF-8";

/**
 * overlays.css 4.0.0
 * Author: hybrid.
 *
 * Overlay and modal system.
 * Background rendered via #overlays::after — decoupled from container slide.
 * Transform applied to .overlay (not .overlay-container) to avoid scrollbar shift.
 *
 * Structure
 * #overlays > .overlay > .overlay-container > .overlay-header + .overlay-content + .overlay-footer
 *
 * Types
 * .overlay              — fullscreen (default)
 * .overlay.modal        — floating centered box
 * .overlay.viewer       — fullscreen image/swiper viewer
 *
 * Positions
 * .overlay.top / .bottom / .left / .right — slide from edge
 * .overlay.short                          — container auto-sized, aligned to edge
 * .overlay.min                            — container width auto
 *
 * Behaviors
 * .overlay.interactive  — keeps page interactive, no click-outside close
 * .overlay.freeze       — blocks all interaction until closed
 * .overlay.instant      — no transition animation
 *
 * Tokens
 * --overlay-container-bg-color  container background (default: --bright-color)
 * --overlay-border-radius       modal border radius (default: 2em)
 * --overlay-bg-opacity          background opacity (default: .66)
 * --overlay-bg-color            background color (default: dark-rgb .66)
 * --overlay-filter              container drop-shadow (inactive)
 * --overlay-active-filter       container drop-shadow (active)
 * --overlay-min-height          content min-height (default: 6em)
 * --overlay-min-width           container min-width
 * --overlay-max-width           container max-width (responsive)
 * --overlay-gap                 inner padding
 * --overlay-close-font-size     close button size (responsive)
 * --overlay-close-transform     close button hover transform (default: scale(.8))
 *
 * Dependencies
 * --gutter-gap        defined in layout.css
 * --font-size         defined in fonts.css
 * --bright-color      defined in colors.css
 * --dark-rgb          defined in colors.css
 * --duration-fast     defined in animations.css
 * --easeInQuint       defined in animations.css
 * --easeOutQuint      defined in animations.css
 */



/* ================================================================================================== */
/* ============================================= CONFIG ============================================= */
/* ================================================================================================== */


/* ============================== DEFAULT ============================== */

#overlays {
	/* container */
	--overlay-container-bg-color: var(--bright-color);

	/* overlay */
	--overlay-max-width: 95%;
	--overlay-border-radius: 2em;
	--overlay-bg-opacity: .66;
	--overlay-bg-color: rgba(var(--dark-rgb), .66);
	--overlay-filter: drop-shadow(0 0 .25em rgba(var(--dark-rgb), 0));
	--overlay-active-filter: drop-shadow(0 0 .25em rgba(var(--dark-rgb), .5));
	--overlay-min-height: 6em;
	--overlay-min-width: min(40rem, calc(100vw - var(--gutter-gap) * 4));
	--overlay-gap: var(--gutter-gap);

	/* close */
	--overlay-close-font-size: var(--font-size);
	--overlay-close-transform: scale(.8);
}


/* ============================== @MEDIA ============================== */

@media (min-width: 760px) {
	#overlays {
		--overlay-max-width: 66%;
		--overlay-close-font-size: calc(var(--font-size) * 1.75);
	}
}
@media (min-width: 1000px) {
	#overlays {
		--overlay-max-width: 60%;
		--overlay-close-font-size: calc(var(--font-size) * 2);
	}
}



/* ====================================================================================================== */
/* ============================================= ANIMATIONS ============================================= */
/* ====================================================================================================== */


/* ============================== OUT ============================== */


#overlays::after {
	transition: opacity var(--duration-fast) var(--easeInQuint);
}
.overlay {
	transition: opacity var(--duration-fast) var(--easeInQuint),
		transform calc(var(--duration-fast) / 2) var(--easeInQuint),
		visibility .01s linear var(--duration-fast);
}
.overlay .overlay-container {
	transition: filter var(--duration-fast) var(--easeInQuint),
		transform var(--duration-fast) var(--easeInQuint);
}


/* ============================== IN ============================== */

body.overlayed #overlays::after {
	transition: opacity var(--duration-fast) var(--easeOutQuint) calc(var(--duration-fast) / 2);
}
.overlay.active {
	transition: visibility .01s linear,
		opacity var(--duration-fast) var(--easeOutQuint) calc(var(--duration-fast) / 2),
		transform var(--duration-fast) var(--easeOutQuint) calc(var(--duration-fast) / 2);
}
.overlay.active .overlay-container {
	transition: filter var(--duration-fast) var(--easeOutQuint) calc(var(--duration-fast) / 2),
		transform var(--duration-fast) var(--easeOutQuint) calc(var(--duration-fast) / 2);
}


/* ============================== ONLOAD ============================== */

body.onload .overlay {
	transition: none;
}



/* ================================================================================================ */
/* ============================================= CORE ============================================= */
/* ================================================================================================ */


/* ============================== OVERLAYS ============================== */

#overlays {
	position: relative;
	z-index: 10000;
	transform: none !important;
	margin: 0 !important;
	pointer-events: none;
}


/* ============================== BACKGROUND ============================== */

/**
 * Semi-transparent background rendered via #overlays::after.
 * Decoupled from .overlay transform — animates independently.
 */

#overlays::after {
	content: "";
	position: fixed;
	z-index: 10;
	inset: 0;
	pointer-events: none;
	background: var(--overlay-bg-color);
	opacity: 0;
}
body.overlayed #overlays::after {
	opacity: 1;
}


/* ============================== OVERLAYED ============================== */

body.overlayed { overflow: hidden !important; }
body.overlayed:not(.interactive) #wrapper { pointer-events: none; }

body.overlayed.interactive #overlays::after { display: none; }
body.overlayed.interactive { overflow: auto !important; }
body.overlayed.interactive main { pointer-events: all; }


/* ============================== OVERLAY ============================== */

.overlay {
	position: fixed;
	z-index: 1000;
	inset: 0;
	display: flex;
	width: 100%;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
	-webkit-tap-highlight-color: transparent;
}
.overlay.active {
	overflow-x: hidden;
	overflow-y: auto;
	scroll-behavior: smooth;
	opacity: 1;
	cursor: pointer;
	pointer-events: all;
	visibility: visible;
}


/* ============================== OVERLAY-CONTAINER ============================== */

.overlay-container {
	position: relative;
	z-index: 100;
	display: flex;
	flex-direction: column;
	min-height: 100%;
	min-width: var(--overlay-min-width);
	height: fit-content;
	width: 100%;
	margin: 0 auto;
	cursor: auto;
	pointer-events: none;
	background: var(--overlay-container-bg-color);
	overflow-x: clip; /* for autoheight swipers */
	overflow-y: visible;
	filter: var(--overlay-filter);
}
.overlay-container.has-auto-height {
	overflow: clip;
}
.overlay.active .overlay-container {
	filter: var(--overlay-active-filter);
}
.overlay.min .overlay-container {
	width: auto;
}


/* ============================== HEADER / CONTENT / FOOTER ============================== */

/**
 * .overlay-container > .overlay-header + .overlay-content + .overlay-footer
 */


/* =============== DEFAULT =============== */

.overlay-header,
.overlay-content,
.overlay-footer {
	position: relative;
	width: 100%;
	margin-inline: auto;
	background: var(--overlay-container-bg-color);
}
.overlay.active .overlay-header,
.overlay.active .overlay-content,
.overlay.active .overlay-footer {
	pointer-events: all;
}


/* =============== STICKY =============== */

.overlay-header.sticky,
.overlay-footer.sticky {
	position: sticky;
	z-index: 30;
}
.overlay-header.sticky { top: 0; }
.overlay-footer.sticky { bottom: 0; }


/* =============== CONTENT =============== */

.overlay-content {
	flex-grow: 1;
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	overflow: unset;
	min-height: var(--overlay-min-height);
}


/* =============== SPACING  =============== */

.overlay-header + .overlay-content { padding-top: 0; }
.overlay .overlay-container:has(.overlay-footer) .overlay-content { padding-bottom: 0; }


/* =============== ALIGNMENT =============== */

.overlay-content.vertical-centered { justify-content: center; }
.overlay-content.centered { align-items: center; }

.overlay-content.items-top { justify-content: flex-start; }
.overlay-content.items-middle { justify-content: center; }
.overlay-content.items-bottom { justify-content: flex-end; }


/* =============== @MEDIA =============== */

@media (max-width: 760px) {
	.overlay-header,
	.overlay-content,
	.overlay-footer {
		padding: calc(var(--overlay-gap) * 1.75);
	}
}
@media (min-width: 760px) {
	.overlay-header,
	.overlay-content,
	.overlay-footer {
		padding: var(--overlay-gap);
	}
}


/* ============================== POSITIONS ============================== */

/**
 * No position class = fade animation only.
 * With class = slide from the corresponding edge.
 * short = container auto-sized, aligned to edge.
 */


/* =============== DEFAULT =============== */

.overlay.top { transform: translate3d(0, -100%, 0); }
.overlay.bottom { transform: translate3d(0, 100%, 0); }
.overlay.left { transform: translate3d(-100%, 0, 0); }
.overlay.right { transform: translate3d(100%, 0, 0); }

.overlay.top.active,
.overlay.bottom.active,
.overlay.left.active,
.overlay.right.active {
	transform: translate3d(0, 0, 0);
}


/* =============== SHORT =============== */

.overlay.short.top .overlay-container,
.overlay.short.bottom .overlay-container {
	min-height: auto;
}
.overlay.short.top .overlay-container { margin-top: 0; margin-bottom: auto; }
.overlay.short.bottom .overlay-container { margin-top: auto; margin-bottom: 0; }
.overlay.short.left .overlay-container { margin-left: 0; margin-right: auto; }
.overlay.short.right .overlay-container { margin-left: auto; margin-right: 0; }

.overlay.short.left .overlay-container,
.overlay.short.right .overlay-container {
	max-width: var(--overlay-max-width);
}


/* ============================== MODAL ============================== */

/**
 * Centered floating box.
 * Combine with .left / .right / .top / .bottom + .short for positioned modals.
 */


/* =============== DEFAULT =============== */

.overlay.modal {
	align-items: center;
	padding: var(--gutter-gap);
}
.overlay.modal .overlay-container {
	margin: auto;
	min-height: auto;
	border-radius: var(--overlay-border-radius);
}


/* =============== STRUCTURE =============== */

.overlay.modal .overlay-header { border-radius: var(--overlay-border-radius) var(--overlay-border-radius) 0 0; }
.overlay.modal .overlay-content { border-radius: var(--overlay-border-radius); }
.overlay.modal .overlay-footer { border-radius: 0 0 var(--overlay-border-radius) var(--overlay-border-radius); }

.overlay.modal .overlay-header.sticky { top: calc(var(--overlay-gap) * -1); }
.overlay.modal .overlay-footer.sticky { bottom: calc(var(--overlay-gap) * -1); }


/* =============== POSITIONS =============== */

.overlay.modal.top .overlay-container { margin-top: 0; }
.overlay.modal.bottom .overlay-container { margin-bottom: 0; }
.overlay.modal.left .overlay-container { margin-left: 0; }
.overlay.modal.right .overlay-container { margin-right: 0; }


/* =============== SHORT =============== */

.overlay.modal.short .overlay-container {
	max-width: var(--overlay-max-width);
}


/* ============================== LOADING ============================== */

/* animation in animations.css */

.overlay.is-loading::before { display: none; }
.overlay.is-loading .overlay-content { opacity: 0; }


/* ============================== CLOSE ============================== */

.overlay-close {
	display: inline-flex;
	border: 0;
	margin: 0;
	opacity: 0;
	font-size: var(--overlay-close-font-size);
	line-height: 1;
	padding: 1em;
}
.overlay-close::after {
	display: none;
}
.overlay.active .overlay-close {
	opacity: 1;
	pointer-events: all;
}
.overlay-container > .overlay-close:first-child,
.overlay-header > .overlay-close:first-child {
	position: absolute;
	z-index: 40;
	top: 0;
	right: 0;
}


/* =============== HOVER =============== */

@media (hover: hover) {
	.overlay-close:hover > [class^="icon-"] { transform: var(--overlay-close-transform); }
}
@media (hover: none) {
	.overlay-close.hover > [class^="icon-"] { transform: var(--overlay-close-transform); }
}


/* ============================== FREEZE / INSTANT ============================== */

/* No interaction until overlay is closed — eg. cookies banner. */

.overlay.freeze::after,
.overlay.instant::after {
	content: "";
	position: fixed;
	z-index: 1;
	inset: 0;
	background: var(--overlay-bg-color);
	opacity: var(--overlay-bg-opacity);
}
.overlay.freeze,
body.overlayed.freeze,
body.freeze.overlayed main {
	user-select: none;
	pointer-events: none;
}


/* ============================== INTERACTIVE ============================== */

/* Keeps page interactive — no click-outside close. */

.overlay.interactive {
	pointer-events: none;
}


/* ============================== VIEWER ============================== */

/**
 * Fullscreen image/swiper viewer — replaces lightbox.
 * figure has no class — scoped via .overlay.viewer.
 * aspect-ratio: auto overrides inline ratio set by PHP on <picture>.
 */

.overlay.viewer {
	align-items: center;
	justify-content: center;
}
.overlay.viewer .overlay-content {
	align-items: center;
	justify-content: center;
	padding: 0;
}
.overlay.viewer .swiper-container,
.overlay.viewer figure {
	height: calc(100svh - var(--overlay-gap) * 2);
	width: calc(100svw - var(--overlay-gap) * 2);
}
.overlay.viewer figure {
	--img-height: 100%;
	--img-width: 100%;
	justify-content: center;
	align-items: center;
	aspect-ratio: auto;
}
.overlay.viewer picture {
	height: 100%;
	width: 100%;
	background: transparent !important;
}
.overlay.viewer img {
	padding: calc(var(--overlay-close-font-size) * 2);
}



/* ================================================================================================= */
/* ============================================= THEME ============================================= */
/* ================================================================================================= */

/* here for project-specific media overrides */