/* Sticky bar
 * Add the class k-sticky to the part of the header that should stick to the top
 * of the screen. Anything above it, like an announcement bar, scrolls away.
 * Add k-sticky--flat as well for no shadow.
 */

.k-sticky {
	transition: transform 350ms cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: transform;
}

.k-sticky.is-pinned {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 999;
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
}

.k-sticky.k-sticky--flat.is-pinned {
	box-shadow: none;
}

/* Scrolling down hides it; scrolling up brings it back. */
.k-sticky.is-pinned.is-up {
	transform: translateY(-105%);
}

/* The side menu opens directly under this bar, so the shadow would fall across
   the top of the panel as a line. It is dropped while the menu is open. */
html.kew-menu-open .k-sticky.is-pinned {
	box-shadow: none;
}

/* Room for the WordPress admin bar. */
.admin-bar .k-sticky.is-pinned {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .k-sticky.is-pinned {
		top: 46px;
	}
}

/* Holds the bar's place in the page while it is stuck to the screen. */
.k-sticky-spacer {
	display: none;
}

.k-sticky-spacer.is-on {
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	.k-sticky {
		transition: none;
	}
}