/* --- Sticky header, hides on scroll-down --- */

header.wp-block-template-part {
	position: fixed;
	/* Sits right below the admin bar when logged in, using WordPress core's
	   own --wp-admin--admin-bar--height custom property (32px, or 46px
	   below its 782px breakpoint) rather than measuring it ourselves - it's
	   set the moment the admin bar's own stylesheet loads, no JS involved. */
	top: var(--wp-admin--admin-bar--height, 0px);
	width: 100%;
	z-index: 1000;
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: transform .4s ease-in-out,
	            opacity   .4s ease-in-out,
	            visibility 0s;
}

header.wp-block-template-part.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-100%);
	transition: transform .4s ease-in-out,
	            opacity   .4s ease-in-out,
	            visibility 0s .4s;
}

@media (prefers-reduced-motion: reduce) {
	header.wp-block-template-part,
	header.wp-block-template-part.is-hidden {
		transform: none;
		transition: opacity .2s linear, visibility 0s;
	}
	header.wp-block-template-part.is-hidden {
		transition: opacity .2s linear, visibility 0s .2s;
	}
}

/* Fixed height in every view. */
header.wp-block-template-part {
	height: 165px;
}

/* The header's own background comes from an inner wrapper group whose
   height follows its content (it has padding-top/bottom: 0, unlike the
   fixed 165px above), so it falls a few pixels short of the full fixed
   height and leaves the bottom edge unpainted - scrolled-under content
   shows through there while scrolling. Paint the full fixed box directly
   on the header itself so there's no gap regardless of inner content height. */
header.wp-block-template-part {
	background-color: var(--wp--preset--color--base);
}

/* Fine 1px line across the full width of the header, with a subtle drop
   shadow beneath it to lift the header off the page content. */
header.wp-block-template-part {
	border-bottom: 1px solid #edd5b3;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

/* Push page content below the fixed header. --telaar-header-height is set
   by sticky-header.js from the header's real, current height. */
.wp-site-blocks {
	padding-top: var(--telaar-header-height, 165px);
}

/* Stop anchor jumps landing under the fixed header. */
html {
	scroll-padding-top: var(--telaar-header-height, 165px);
}

[id] {
	scroll-margin-top: var(--telaar-header-height, 165px);
}

/* Below the stacked mobile breakpoint (see style.css), the header is
   deliberately taller than the content push-down, so the header overlaps
   the top of the page content instead of leaving a gap. */
@media (max-width: 904px) {
	.wp-site-blocks {
		padding-top: 160px;
	}
}

/* Below 500px the logo shrinks fluidly (see style.css) to keep clear of the
   hamburger icon, so let the header height follow it back down instead of
   staying fixed at 165px: drop the fixed height and go back to the
   JS-measured real height, and drop the fixed-165px content overlap along
   with it so the (now shorter) header doesn't overlap more than intended. */
@media (max-width: 500px) {
	header.wp-block-template-part {
		height: auto;
	}

	.wp-site-blocks {
		padding-top: var(--telaar-header-height, 165px);
	}

	html {
		scroll-padding-top: var(--telaar-header-height, 165px);
	}

	[id] {
		scroll-margin-top: var(--telaar-header-height, 165px);
	}
}