/* Sticky header: the navy topbar scrolls away, the white nav stays pinned
   and slims down once the page has scrolled past it. */

.khs-mm-sticky {
	--khs-mm-sticky-ease: cubic-bezier(0.22, 0.8, 0.24, 1);
	position: sticky !important;
	top: calc(var(--khs-mm-adminbar, 0px) - var(--khs-mm-tb, 0px));
	z-index: 1000;
	margin-bottom: 0;
	transition: margin-bottom 0.45s var(--khs-mm-sticky-ease);
}

.khs-mm-sticky .khs-mm-host-nav {
	transition: box-shadow 0.4s var(--khs-mm-sticky-ease), padding 0.45s var(--khs-mm-sticky-ease);
}

.khs-mm-sticky [data-id="0f3e1d2"] {
	transition: width 0.45s var(--khs-mm-sticky-ease);
}

.khs-mm-sticky.is-stuck .khs-mm-host-nav {
	box-shadow: 0 1px 0 rgba(12, 35, 64, 0.04), 0 12px 32px -14px rgba(12, 35, 64, 0.28);
}

/* compact: the lost height moves into margin so the page below never jumps */
.khs-mm-sticky.is-compact {
	margin-bottom: var(--khs-mm-shrink, 0px);
}

.khs-mm-sticky.is-compact .khs-mm-host-nav {
	padding-block: 8px !important;
}

.khs-mm-sticky.is-compact [data-id="0f3e1d2"] {
	width: 118px !important;
}

/* Phones and tablets: pin with position fixed instead of sticky. Sticky is
   unreliable in some mobile browsers and in-app webviews. The page reserves
   the header's full height so nothing slides underneath it. */
@media (max-width: 1099px) {
	html body {
		padding-top: var(--khs-mm-header-h, 0px);
	}

	.khs-mm-sticky {
		position: fixed !important;
		top: var(--khs-mm-adminbar, 0px);
		left: 0;
		right: 0;
		width: 100%;
		margin-bottom: 0 !important;
		transform: translateY(var(--khs-mm-lift, 0px));
		will-change: transform;
	}

	.khs-mm-sticky.is-compact {
		margin-bottom: 0 !important;
	}
}

@media (max-width: 767px) {
	.khs-mm-sticky.is-compact .khs-mm-host-nav {
		padding-block: 6px !important;
	}

	.khs-mm-sticky.is-compact [data-id="0f3e1d2"] {
		width: 96px !important;
	}
}

.khs-mm-sticky.khs-mm-measuring,
.khs-mm-sticky.khs-mm-measuring .khs-mm-host-nav,
.khs-mm-sticky.khs-mm-measuring [data-id="0f3e1d2"] {
	transition: none !important;
}

/* keep a tall panel usable on short screens now that it can open mid-page */
.khs-mm-sticky .khs-mm-panel {
	max-height: var(--khs-mm-panel-max, none);
	overflow-y: auto;
	overscroll-behavior: contain;
}

@media (prefers-reduced-motion: reduce) {
	.khs-mm-sticky,
	.khs-mm-sticky .khs-mm-host-nav,
	.khs-mm-sticky [data-id="0f3e1d2"] {
		transition: none !important;
	}
}