/**
 * Sticky header transitions (paired with assets/js/sticky-header.js).
 *
 * CONFIRMED via devtools computed styles: .header-area-5 is actually
 * `position: absolute; top: 0; margin-top: 32px;` in the real theme
 * CSS — NOT fixed. That's why the hide/show toggle previously had no
 * visible effect: there was nothing pinned to the viewport to hide or
 * show in the first place.
 *
 * Fix: once JS decides we've scrolled past the threshold, we force the
 * header into `position: fixed` ourselves (via .header-scrolled), which
 * pins it to the viewport so the translateY show/hide actually works.
 * Below the threshold, it's left alone in its normal (absolute, at the
 * top of the document) position — which visually is the same place, so
 * there's no jump on page load.
 */

.header-area-5 {
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.header-area-5.header-scrolled {
	position: fixed !important;
	top: 0;
	left: 0;
	width: 100%;
	margin-top: 0 !important; /* cancel the theme's default 32px offset once pinned */
	z-index: 999;
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}

.header-area-5.header-hidden {
	transform: translateY(-110%);
}