/**
 * CLS Smooth Sticky Menu v1.0
 * Only the navigation bar becomes sticky after scroll.
 */

:root {
	--cls-sticky-admin-offset: 0px;
	--cls-sticky-nav-height: 48px;
}

body.admin-bar {
	--cls-sticky-admin-offset: 32px;
}

@media (max-width: 782px) {
	body.admin-bar {
		--cls-sticky-admin-offset: 46px;
	}
}

/* Add this class to the primary nav element. */
.cls-smooth-sticky-menu {
	position: relative;
	z-index: 999;
	width: 100%;
	will-change: transform;
}

/* Placeholder prevents layout jump when nav becomes fixed. */
.cls-sticky-menu-placeholder {
	display: none;
	height: var(--cls-sticky-nav-height);
}

body.cls-menu-is-sticky .cls-sticky-menu-placeholder {
	display: block;
}

/* Fixed menu state */
body.cls-menu-is-sticky .cls-smooth-sticky-menu {
	position: fixed;
	top: var(--cls-sticky-admin-offset);
	left: 0;
	right: 0;
	z-index: 1000;
	transform: translateY(-110%);
	animation: clsStickyMenuSlideDown 220ms ease-out forwards;
	box-shadow: 0 14px 28px rgba(15, 23, 42, .16);
}

/* Compact polish when sticky */
body.cls-menu-is-sticky .cls-smooth-sticky-menu > div {
	min-height: var(--cls-sticky-nav-height);
}

/* Prevent flickering during resize */
body.cls-menu-sticky-ready .cls-smooth-sticky-menu {
	transition: box-shadow 180ms ease, background-color 180ms ease;
}

@keyframes clsStickyMenuSlideDown {
	from {
		transform: translateY(-110%);
		opacity: .92;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.cls-menu-is-sticky .cls-smooth-sticky-menu {
		animation: none;
		transform: none;
	}
}