/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

/* --------------------------------------------------
// Meta Nav
// -------------------------------------------------- */
:root {
	--metaNavWrapperWidth: min(calc(100vw - 40px), 1280px);
	--metaNavWrapperPadding: calc(calc(100vw - var(--metaNavWrapperWidth)) / 2);
	--metaNavHeight: 32px;
	--metaNavIconColorHover: #002838; /* mirage.primary */
	--transitionSettings: 220ms cubic-bezier(0.65, 0.05, 0.36, 1);
}

body {
	position: relative;
}

.wpe-navs__metanav__nav {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wpe-navs__metanav__navitem {
	align-items: center;
	display: inline-flex;
	list-style: none;
	margin: 0;
	padding: 0;
}

.wpe-navs__metanav__navitem::before {
	display: none;
}

.wpe-navs__metanav-container {
	--background-color: #002838; /* mirage.primary */
	--metaNavIconColor: #99a9af; /* mirage.50 */

	display: flex;
	align-items: stretch;
	position: absolute;
	top: -6px;
	width: 100%;
	min-height: unset;
	height: auto;
	padding: 0 0 8px;
	column-gap: 20px;
	background-color: var(--background-color);
	z-index: 99998;
	overflow: unset;
}

.wpe-navs__metanav-container--light {
	--background-color: #cfdde9; /* mirage.30 */
	--metaNavIconColor: #8cabc8; /* polar.70 */
}

.wpe-navs__metanav__nav {
	display: none;
	flex-shrink: 0;
	align-items: stretch;
	justify-content: flex-start;
}

.wpe-navs__metanav__navlink {
	display: flex;
	align-items: center;
	min-height: 32px;
	position: relative;
	isolation: isolate;
	padding: 0 16px;
}

.wpe-navs__metanav__navlink::before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	opacity: 0;
	transition: opacity var(--transitionSettings);
	z-index: -1;
}

.wpe-navs__metanav__navlink--active::before,
.wpe-navs__metanav__navlink:hover::before {
	opacity: 1;
	transition: opacity var(--transitionSettings);
}

.wpe-navs__metanav__navlink > svg {
	display: block;
	position: relative;
	pointer-events: none;
	stroke: none;
	height: 18px;
	width: auto;
	max-width: unset;
	transition: fill var(--transitionSettings);
	z-index: 1;
}

.wpe-navs__metanav__navlink > svg * {
	fill: var(--metaNavIconColor);
	transition: fill var(--transitionSettings);
}

.wpe-navs__metanav__navlink--active > svg *,
.wpe-navs__metanav__navlink:hover > svg * {
	fill: var(--metaNavIconColorHover);
	transition: fill var(--transitionSettings);
}

.wpe-navs__metanav__ad-container {
	flex-shrink: 0;
	flex: 1;
}

@media screen and (min-width: 1024px) {
	.wpe-navs__metanav-container {
		top: 0;
		padding: 0 var(--metaNavWrapperPadding);
		min-height: var(--metaNavHeight);
	}

	.wpe-navs__metanav__nav {
		display: flex;
	}
}

@media screen and (min-width: 1280px) {
	html {
		padding-top: var(--metaNavHeight) !important;
	}

	.wpe-navs__metanav-container {
		top: calc(var(--metaNavHeight) * -1);
		justify-content: space-between;
	}
}