/*
 * Make Room — sticky header scroll state.
 *
 * The header is a sticky block-theme group (85px, matching the negative
 * `main { margin-top: -85px }` in the Site Editor CSS that slides the hero
 * underneath it). At the top of the page it is deliberately transparent so the
 * hero shows through; once the page scrolls, content used to run underneath
 * bare white text. This gives it a solid background as soon as it leaves the
 * top.
 */

.mr-sticky-header {
	transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.mr-sticky-header.mr-scrolled {
	background-color: #000;
	box-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

/*
 * The bar's own cover block paints a video/image background on top of the
 * group, so the group's black would never be visible on its own. Fade the
 * cover's media and dim layer out instead.
 */
.mr-sticky-header.mr-scrolled .wp-block-cover__background,
.mr-sticky-header.mr-scrolled .wp-block-cover__video-background,
.mr-sticky-header.mr-scrolled .wp-block-cover__image-background {
	opacity: 0;
	transition: opacity 0.25s ease;
}

.mr-sticky-header .wp-block-cover__background,
.mr-sticky-header .wp-block-cover__video-background,
.mr-sticky-header .wp-block-cover__image-background {
	transition: opacity 0.25s ease;
}

/* The cover keeps its own background colour, which would sit above the
   group's. Make it transparent while scrolled so the black reads through. */
.mr-sticky-header.mr-scrolled > .wp-block-cover {
	background-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
	.mr-sticky-header,
	.mr-sticky-header .wp-block-cover__background,
	.mr-sticky-header .wp-block-cover__video-background,
	.mr-sticky-header .wp-block-cover__image-background {
		transition: none;
	}
}