@charset "UTF-8";

/**
 * tooltips.css 1.0.0
 *
 * Tooltip system — inline and fixed positioning via #tooltipContainer.
 * Supports hover triggers, click-to-open, and mobile full-bottom mode.
 *
 * STRUCTURE
 * .tooltip-toggle > .tooltip
 * #tooltipContainer > .tooltip  — fixed positioning via JS
 *
 * BEHAVIORS
 * .tooltip-toggle:hover   — show on hover [default]
 * .tooltip.active         — show via JS
 * .tooltip.is-clickable   — enables pointer events in container
 *
 * BODY STATES
 * body.tooltiped  — blur main, show clickoutside overlay
 * body.mobile     — force tooltip to bottom
 */


/* ============================================== */
/* ==================== VARS ==================== */
/* ============================================== */


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

:root {
	--tooltip-font-size: var(--font-size);

	--tooltip-color: var(--bright-color);
	--tooltip-background: var(--dark-color);

	--tooltip-border-radius: 0px;
}


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

@media (min-width: 0px) {
	:root {
		--tooltip-padding: 1.25rem;
	}
}
@media (min-width: 1000px) {
	:root {
		--tooltip-padding: 2.5rem;
	}
}


/* ========== CUSTOM ========== */

/* here for custom tooltip variables */


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


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

/* here for tooltip transitions */


/* ========== CUSTOM ========== */

/* here for custom animation overrides */


/* ================================================= */
/* ==================== TOOLTIP ==================== */
/* ================================================= */


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

.tooltip-toggle {
	position: relative;
}
.tooltip {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	color: var(--tooltip-color);
	background: var(--tooltip-background);
	border-radius: var(--tooltip-border-radius);
	font-size: var(--tooltip-font-size);
	padding: var(--tooltip-padding);
	opacity: 0;
	visibility: hidden;
}
.tooltip-toggle:not(.clickable):hover .tooltip,
.tooltip.active {
	opacity: 1;
	visibility: visible;
}


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

.tooltip-toggle .tooltip {
	display: none;
}


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

@media (min-width: 0px) {
	.tooltip {
		pointer-events: auto;
	}
}
@media (min-width: 1000px) {
	.tooltip {
		pointer-events: none;
	}
}


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

.tooltip > .tooltip-close {
	position: absolute;
	z-index: 100;
	top: 0;
	right: 0;
	display: inline-block;
	font-size: 0;
	line-height: 0;
	border: 0;
	margin: 0;
}
.tooltip > .tooltip-close:after {
	font-family: 'icomoon';
	display: block;
	line-height: 1;
}
.tooltip > .tooltip-close:hover {
	transform: scale(.8);
}


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

@media (min-width: 0px) {
	.tooltip > .tooltip-close {
		padding: var(--tooltip-padding);
	}
	.tooltip > .tooltip-close:after {
		font-size: 1rem;
		width: 1rem;
	}
}
@media (min-width: 760px) {
	.tooltip > .tooltip-close {
		padding: var(--tooltip-padding);
	}
	.tooltip > .tooltip-close:after {
		font-size: 2rem;
		width: 2rem;
	}
}


/* =========================================================== */
/* ==================== TOOLTIP CONTAINER ==================== */
/* =========================================================== */


/* ========== FIXED ========== */

#tooltipContainer {
	position: fixed;
	z-index: 2000;
	inset: 0;
	pointer-events: none;
	overflow: visible;
}
#tooltipContainer .tooltip {
	position: absolute;
	z-index: 2000;
	top: 0;
	left: 0;
	max-width: 60rem;
	margin: -2.5rem 1.25rem 1.25rem 1.25rem;
}
#tooltipContainer .tooltip.is-clickable {
	pointer-events: all;
}


/* ========== FOR MOBILE ========== */

body.tooltiped #tooltipContainer .tooltip,
body.mobile #tooltipContainer .tooltip {
	top: auto !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	max-width: none;
	pointer-events: all;
}
#tooltipContainer .tooltip .tooltip-close {
	visibility: hidden;
	display: none;
}
body.tooltiped #tooltipContainer .tooltip .tooltip-close,
body.mobile #tooltipContainer .tooltip .tooltip-close {
	visibility: visible;
	display: inline-block;
}
#tooltipContainer .tooltip .tooltip-close + * {
	margin-top: 0;
	margin-right: 2.25rem;
}


/* ======================================================== */
/* ==================== BODY TOOLTIPED ==================== */
/* ======================================================== */

body.tooltiped main {
	filter: blur(.25rem);
	pointer-events: none;
}
body.tooltiped .clickoutside {
	opacity: .75;
	visibility: visible;
	pointer-events: auto;
}


/* ================================================ */
/* ==================== CUSTOM ==================== */
/* ================================================ */