/**
 * Sticky header behaviors — Sprint 2b.
 *
 * 6 modes (one is `none`). The body data attribute is the source of
 * truth: each selector below reacts to the current state emitted by
 * assets/js/customize-sticky.js. Transitions are 0.3s so scroll
 * direction changes feel snappy without being twitchy.
 *
 *   data-ls-sticky="false"            → no chrome change
 *   data-ls-sticky="always"           → header pinned at top
 *   data-ls-sticky="scroll-up-active" → header visible
 *   data-ls-sticky="scroll-up-hidden" → header translated -100% (off-screen)
 *   data-ls-sticky="shrink-active"    → header compact (smaller padding, smaller title)
 *   data-ls-sticky="shrink-inactive"  → header at rest
 *   data-ls-sticky="hidden"           → header translated -100% (off-screen)
 *   data-ls-sticky="visible"          → header at rest
 *   data-ls-sticky="color-solid"      → solid background + soft shadow
 *   data-ls-sticky="color-transparent"→ transparent background, no shadow
 *
 * @package License_Store
 */

/* =================================================================
 * Always
 * ================================================================= */
.site-header--sticky {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* =================================================================
 * Scroll-up: visible when scrolling up, hidden when scrolling down.
 * The body data attr is the single source of truth so the same
 * header element can transition between states without JS juggling
 * class names.
 * ================================================================= */
.site-header--sticky-scroll-up {
	position: sticky;
	top: 0;
	z-index: 100;
	transform: translateY(0);
	transition: transform 0.3s ease;
	will-change: transform;
}
body[data-ls-sticky="scroll-up-hidden"] .site-header--sticky-scroll-up {
	transform: translateY(-100%);
}
body[data-ls-sticky="scroll-up-active"] .site-header--sticky-scroll-up {
	transform: translateY(0);
}

/* =================================================================
 * Hide-on-scroll-down: same translate trick as scroll-up, but with
 * the visible/hidden polarity inverted.
 * ================================================================= */
.site-header--sticky-hide-down {
	position: sticky;
	top: 0;
	z-index: 100;
	transform: translateY(0);
	transition: transform 0.3s ease;
	will-change: transform;
}
body[data-ls-sticky="hidden"] .site-header--sticky-hide-down {
	transform: translateY(-100%);
}
body[data-ls-sticky="visible"] .site-header--sticky-hide-down {
	transform: translateY(0);
}

/* =================================================================
 * Shrink: padding + min-height compress when the page is scrolled
 * past 100px; the brand title also shrinks. We keep the
 * `transition: all` because we want padding + min-height + font-size
 * to interpolate together.
 * ================================================================= */
.site-header--sticky-shrink {
	position: sticky;
	top: 0;
	z-index: 100;
	transition: padding 0.3s ease, min-height 0.3s ease, background-color 0.3s ease;
}
body[data-ls-sticky="shrink-active"] .site-header--sticky-shrink {
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
	min-height: 56px;
}
body[data-ls-sticky="shrink-active"] .site-header--sticky-shrink .site-title,
body[data-ls-sticky="shrink-active"] .site-header--sticky-shrink .site-title a {
	font-size: 1.1rem;
	line-height: 1.2;
}
body[data-ls-sticky="shrink-inactive"] .site-header--sticky-shrink {
	padding-top: 1rem;
	padding-bottom: 1rem;
	min-height: 80px;
}
body[data-ls-sticky="shrink-inactive"] .site-header--sticky-shrink .site-title,
body[data-ls-sticky="shrink-inactive"] .site-header--sticky-shrink .site-title a {
	font-size: 1.4rem;
	line-height: 1.3;
}

/* =================================================================
 * Color-change: transparent at the top, solid (with a soft shadow)
 * after the user has scrolled past the hero. Pair with the
 * `license_store_header_layout = transparent` customizer setting
 * for the standard landing-page treatment.
 * ================================================================= */
.site-header--sticky-color {
	position: sticky;
	top: 0;
	z-index: 100;
	background: transparent;
	box-shadow: none;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
body[data-ls-sticky="color-solid"] .site-header--sticky-color {
	background: var(--ls-color-bg, #ffffff);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
body[data-ls-sticky="color-transparent"] .site-header--sticky-color {
	background: transparent;
	box-shadow: none;
}

/* =================================================================
 * Reduce motion: respect the OS-level setting so users with
 * vestibular disorders don't get a sliding header.
 * ================================================================= */
@media (prefers-reduced-motion: reduce) {
	.site-header--sticky-scroll-up,
	.site-header--sticky-hide-down,
	.site-header--sticky-shrink,
	.site-header--sticky-color {
		transition: none;
	}
}