/*
 * Fixed header. header.js sets on <html>:
 *   .nsh-scrolled  past 60px of scrolling, until back above 20px (smaller screens shrink)
 *   .nsh-hidden    phones, while scrolling down (header slides away)
 *   .nsh-measuring briefly, while header.js measures the full-size header without transitions
 *   --nsh-full     the header's full (unshrunk) height, on screens where it shrinks
 *   --nsh-h        the visible header bar's current height
 *   --nsh-offset   space the header (plus admin bar) currently covers at the top; 0 while hidden
 */

/* "body" outranks Blocksy's own #header{position:relative}, which loads after this file. */
body #header {
	position: sticky;
	top: var(--admin-bar, 0px);
	z-index: 50;
	transition: transform .3s ease;
}

/* Smaller screens (not phones, not large): shrink once scrolled. */
@media (min-width: 768px) and (max-width: 1439.98px), (min-width: 768px) and (max-height: 899.98px) {
	/*
	 * The header's box keeps its full height while the bar inside it shrinks, so the page below
	 * never moves. (Letting the box shrink shifted the page 48px, scroll anchoring pulled the scroll
	 * position back over the threshold, and the header stuttered between sizes.) The freed strip at
	 * the bottom of the box is transparent and lets clicks through.
	 */
	body #header {
		height: var(--nsh-full, auto);
		background: transparent;
		pointer-events: none;
	}
	#header > * {
		pointer-events: auto;
	}
	#header [data-row] > .ct-container {
		transition: height .25s ease;
	}
	#header .site-logo-container img {
		transition: max-height .25s ease;
	}
	#header .site-title,
	#header .site-description {
		transition: font-size .25s ease, opacity .2s ease;
	}
	.nsh-scrolled #header [data-row="middle"] {
		--height: 72px;
	}
	.nsh-scrolled #header .site-logo-container {
		--logo-max-height: 56px;
	}
	.nsh-scrolled #header .site-logo-container img {
		max-height: 56px;
		width: auto;
	}
	.nsh-scrolled #header .site-title {
		font-size: 24px;
	}
	.nsh-scrolled #header .site-description {
		display: none;
	}
}

/* The "COMING SOON" strip under the header on phones and tablets travels with it. */
.noctshop-cs-strip {
	position: sticky;
	top: calc(var(--admin-bar, 0px) + var(--nsh-h, 0px));
	z-index: 49;
	transition: transform .3s ease;
}

/* Phones: slide away on scroll down. The strip goes up by the header's height plus its own. */
@media (max-width: 767.98px) {
	.nsh-hidden #header {
		transform: translateY(-100%);
	}
	.nsh-hidden .noctshop-cs-strip {
		transform: translateY(calc(-1 * (var(--nsh-h, 0px) + 100%)));
	}
}

.nsh-measuring #header,
.nsh-measuring #header * {
	transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
	#header,
	.noctshop-cs-strip,
	#header * {
		transition: none !important;
	}
}