/*
 * Header scroll state.
 *
 * The one place in this theme where CSS + JS beat the block system: a fixed
 * header that shrinks and goes opaque on scroll is a state transition, and
 * theme.json has no vocabulary for it.
 *
 * Enqueued only when parts/header.html actually renders -- see
 * inc/header-asset.php -- not globally.
 *
 * Only the *scrolled* state lives here. The resting header is styled by
 * theme.json and core block styles, so this file arriving late costs nothing
 * at first paint: nothing is scrolled yet.
 */
.site-header {
	position: fixed;
	z-index: 50;
	inset: 0 0 auto;
	height: 84px;
	align-items: center;
	border-bottom: 1px solid var(--wp--preset--color--line, rgba(193, 154, 86, .28));
	background: linear-gradient(rgba(8, 8, 7, .7), transparent);
	backdrop-filter: blur(3px);
	transition: height .35s, background .35s, backdrop-filter .35s;
}

.site-header.is-scrolled {
	height: 70px;
	background: rgba(8, 8, 7, .94);
	backdrop-filter: blur(15px);
}

/* The header is fixed, so the document needs the space back, and in-page
   anchors (#about, #booking, ...) must not land under it. */
body {
	padding-top: 84px;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 78px;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.site-header { transition: none; }
}

/* Logged in, the admin bar occupies the top of the viewport and the fixed
   header would sit under it. WordPress sets the variable itself; the
   fallbacks match its own 32px/46px breakpoint. */
.admin-bar .site-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media screen and (max-width: 782px) {
	.admin-bar .site-header {
		top: var(--wp-admin--admin-bar--height, 46px);
	}
}

/* Below 600px the admin bar is not fixed -- it scrolls away with the page, so
   the header must return to the top edge once it is gone. */
@media screen and (max-width: 600px) {
	.admin-bar .site-header {
		top: 0;
	}
}