/**
 * The site header, from the scrolling spec: it stays at the top, gains a
 * hairline once the page has scrolled 8px, and never hides and reappears.
 *
 * The sticky element is the template part's wrapper, because it is the
 * header's box that sits in the page. The header group inside it is exactly
 * its own height, so making the group sticky would never hold.
 */
.wp-site-blocks > .wp-block-template-part:has( > .site-header ) {
	position: sticky;
	top: var( --wp-admin--admin-bar--position-offset, 0 );
	z-index: 10;
}

.site-header {
	transition: box-shadow var( --wp--custom--duration--fast, 120ms ) var( --wp--custom--easing--enter, ease );
}

.is-scrolled .site-header {
	box-shadow: 0 var( --wp--custom--stroke--construction ) 0 var( --wp--preset--color--line-subtle );
}

.is-scrolled .site-header.is-style-inverse {
	box-shadow: 0 var( --wp--custom--stroke--construction ) 0 var( --wp--preset--color--inverse-line-subtle );
}

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

/* Compact below 960, as the design's Header: compact draws it. Two classes,
   so the inverse section style's own padding (one class, via :root) never wins
   on load order, which differs between the site and the editor. */
.wp-block-group.site-header {
	padding-block: var( --wp--preset--spacing--16 );
}

.abhinav-mark {
	margin: 0;
}

.abhinav-mark img {
	display: block;
	width: var( --wp--preset--spacing--32 );
	height: var( --wp--preset--spacing--32 );
}

@media ( min-width: 600px ) {
	.resha-mega__head .abhinav-mark img {
		width: calc( var( --wp--preset--spacing--32 ) + var( --wp--preset--spacing--4 ) );
		height: calc( var( --wp--preset--spacing--32 ) + var( --wp--preset--spacing--4 ) );
	}
}

@media ( min-width: 960px ) {
	.wp-block-group.site-header {
		padding-block: var( --wp--preset--spacing--32 );
	}

	.site-header .abhinav-mark img {
		width: calc( var( --wp--preset--spacing--32 ) + var( --wp--preset--spacing--8 ) );
		height: calc( var( --wp--preset--spacing--32 ) + var( --wp--preset--spacing--8 ) );
	}
}

/* The small screen menu moves in the brand's timing: the drawer drops a short
   way and fades in over the slow duration, easing out, and closes a little
   quicker; its rows follow one stagger step apart. The Resha Blocks mega menu
   reads these, and turns all of it off under reduced motion. */
.resha-mega {
	--resha-mega-duration: var( --wp--custom--duration--slow );
	--resha-mega-stagger: var( --wp--custom--duration--stagger );
	--resha-mega-ease-enter: var( --wp--custom--easing--enter );
	--resha-mega-ease-exit: var( --wp--custom--easing--exit );
	--resha-mega-shift: var( --wp--preset--spacing--16 );
	--resha-mega-rise: var( --wp--preset--spacing--8 );
}

/* The site title in the small screen menu takes the ink of the drawer. */
.resha-mega__head .wp-block-site-title {
	margin: 0;
	color: inherit;
	font-size: var( --wp--preset--font-size--heading-s );
}