.mainSite {
	--footer-reveal-height: 100vh;
	--footer-reveal-header-space: 7rem;
	--footer-reveal-logo-menu-space: 12vh;
	--footer-reveal-copyright-height: 90px;
}

.mainSite > .footerReveal {
	background-color: var(--color-prim);
}

/* A footer in normal page flow covers the fixed navbar (z-index: 915). */
.mainSite:not(.dashboard):not(.footerRevealActive) > .footerReveal {
	position: relative;
	z-index: 916;
}

@media (min-width: 768px) {
}

@media (min-width: 1200px) {

	.mainSite {
		--footer-reveal-header-space: 7.5rem;
		--footer-reveal-logo-menu-space: 16vh;
		--footer-reveal-copyright-height: 96px;
	}
}

@media (min-width: 1600px) {
	.mainSite {
		--footer-reveal-header-space: 8rem;
		--footer-reveal-logo-menu-space: 18vh;
	}
}

@media (max-height: 780px) and (min-width: 1200px) {
	.mainSite {
		--footer-reveal-header-space: 6rem;
		--footer-reveal-logo-menu-space: 10vh;
		--footer-reveal-copyright-height: 82px;
	}
}

@media (min-width: 1200px) and (prefers-reduced-motion: no-preference) {
	.mainSite:not(.dashboard).footerRevealActive {
		background-color: var(--color-beige);
		isolation: isolate;
	}

	.mainSite:not(.dashboard).footerRevealActive main {
		position: relative;
		z-index: 2;
		margin-bottom: var(--footer-reveal-height);
		background-color: var(--color-beige);
	}

	.mainSite:not(.dashboard).footerRevealActive header .navbar::after {
		transition: transform .18s ease-out;
		transform: translateY(calc(var(--footer-nav-cover-progress, 0) * -125%));
	}

	.mainSite:not(.dashboard).footerRevealActive header .navbar .groupSwitch,
	.mainSite:not(.dashboard).footerRevealActive header .navbar .icon,
	.mainSite:not(.dashboard).footerRevealActive header .navbar .menuBtn {
		transition: opacity .18s ease-out, transform .18s ease-out;
		transform: translateY(calc(var(--footer-nav-cover-progress, 0) * -125%));
		opacity: calc(1 - var(--footer-nav-cover-progress, 0));
	}

	.mainSite:not(.dashboard).footerRevealActive.footerNavCovered header .navbar {
		pointer-events: none;
	}

	.mainSite:not(.dashboard).footerRevealActive:not(:has(#mainHeader)):not(:has(#mainPicker)) {
		padding-top: 0;
	}

	.mainSite:not(.dashboard).footerRevealActive:not(:has(#mainHeader)):not(:has(#mainPicker)) main {
		padding-top: 8rem;
	}

	.mainSite:not(.dashboard).footerRevealActive > .footerReveal {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1;
		height: auto;
		min-height: var(--footer-reveal-height);
		max-height: none;
		overflow: visible;
	}

	/* Keep the same natural height in reveal mode and normal page flow. */
	.mainSite:not(.dashboard) > .footerReveal footer {
		height: auto;
		min-height: var(--footer-reveal-height);
		max-height: none;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		overflow: visible;
		line-height: 1.55;
	}

	.mainSite:not(.dashboard) > .footerReveal footer .footerContent {
		flex: 1 0 auto;
		min-height: 0;
		height: auto;
		padding-top: var(--footer-reveal-header-space);
		padding-bottom: 0;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		overflow: visible;
	}

	.mainSite:not(.dashboard).footerRevealActive > .footerReveal footer .footerContent,
	.mainSite:not(.dashboard).footerRevealActive > .footerReveal footer .copyright {
		transform: translate3d(0, var(--footer-content-y, 0px), 0);
	}

	.mainSite:not(.dashboard) > .footerReveal footer .footerContent > .row:first-child {
		flex: 0 0 auto;
	}

	.mainSite:not(.dashboard) > .footerReveal footer .logo {
		max-height: 75px;
		margin-bottom: 2rem;
	}

	.mainSite:not(.dashboard) > .footerReveal footer .footerGrid {
		flex: 0 0 auto;
		margin-top: var(--footer-reveal-logo-menu-space);
		--bs-gutter-y: 1rem;
	}

	.mainSite:not(.dashboard) > .footerReveal footer .footerBlock {
		min-height: 0;
		line-height: 1.55;
	}

	.mainSite:not(.dashboard) > .footerReveal footer strong {
		font-size: 1.15em;
		margin-bottom: .5rem;
	}

	.mainSite:not(.dashboard) > .footerReveal footer .copyright {
		flex: 0 0 auto;
		min-height: var(--footer-reveal-copyright-height);
		margin-top: 0;
		display: flex;
		align-items: center;
	}

	.mainSite:not(.dashboard) > .footerReveal footer .copyright .container {
		width: 100%;
	}
}

@media (max-width: 1199.98px), (prefers-reduced-motion: reduce) {
	.mainSite:not(.dashboard) main {
		margin-bottom: 0;
	}

	.mainSite:not(.dashboard) > .footerReveal {
		position: relative;
		height: auto;
		min-height: 0;
		max-height: none;
		overflow: visible;
	}

	.mainSite:not(.dashboard) > .footerReveal footer {
		overflow: visible;
	}

	.mainSite:not(.dashboard) > .footerReveal footer .footerContent,
	.mainSite:not(.dashboard) > .footerReveal footer .copyright {
		transform: none;
	}
}