/**
 * Header behaviour: sticky, transparent, and the scroll-to-top button.
 *
 * Every rule here is behind a body class the Customizer switches put there, so a
 * page with the defaults behaves exactly as it did before this sheet existed.
 * Loaded after style.css and after the builder sheet on purpose: it has to be able
 * to lift the stickiness off the header part and to take the paint back off a band
 * the builder has coloured.
 */

/* --- sticky --------------------------------------------------------------- */

/* The header template part is a flex item of `.wp-site-blocks` and it spans the
   whole document, so the part wrapper is what has to stick — a sticky child
   inside the short wrapper would never travel. */
body.sonipat-sticky-header .wp-site-blocks > .wp-block-template-part:first-child,
body.sonipat-sticky-header .wp-site-blocks > .wp-block-template-part:has( .sonipat-header ) {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* --- transparent ---------------------------------------------------------- */

/* Out of the flow, so the first section of the page really does start at the top
   of the window and the header reads through it. With sticky also on it has to
   stay put while the page travels under it, which is `fixed` — a sticky box would
   still hold its own height in the flow. */
body.sonipat-transparent-header .wp-site-blocks > .wp-block-template-part:first-child,
body.sonipat-transparent-header .wp-site-blocks > .wp-block-template-part:has( .sonipat-header ) {
	inset-inline: 0;
	position: absolute;
	top: 0;
	z-index: 100;
}

body.sonipat-transparent-header.sonipat-sticky-header .wp-site-blocks > .wp-block-template-part:first-child,
body.sonipat-transparent-header.sonipat-sticky-header .wp-site-blocks > .wp-block-template-part:has( .sonipat-header ) {
	position: fixed;
}

/* Nothing paints until the page has travelled: the header's own glass and the band
   colours the builder wrote both step aside. */
body.sonipat-transparent-header .sonipat-header:not( .is-scrolled ) {
	backdrop-filter: none;
	background: transparent;
	border-bottom-color: transparent;
	-webkit-backdrop-filter: none;
}

body.sonipat-transparent-header .sonipat-hb-row {
	background: transparent;
}

body.sonipat-transparent-header .sonipat-header:not( .is-scrolled ) .sonipat-hb-row {
	border-bottom-color: transparent;
}

/* A band the owner coloured keeps that colour in `--sonipat-band-bg`, so the
   scrolled state restores the pick rather than a colour this sheet invented. An
   unpainted band has no such property and stays see-through, which is the point of
   switching the mode on. */
body.sonipat-transparent-header .sonipat-header.is-scrolled .sonipat-hb-row {
	background: var( --sonipat-band-bg, transparent );
}

/* --- scroll to top -------------------------------------------------------- */

.sonipat-scroll-top {
	align-items: center;
	background: var( --sonipat-primary );
	border: 1px solid var( --sonipat-primary-hover );
	border-radius: 999px;
	box-shadow: var( --sonipat-shadow );
	color: #fff;
	display: flex;
	height: 46px;
	justify-content: center;
	opacity: 0;
	position: fixed;
	right: clamp( 1rem, 3vw, 2rem );
	bottom: clamp( 1rem, 3vw, 2rem );
	transform: translateY( 10px );
	transition: opacity 0.3s var( --sonipat-ease ), transform 0.3s var( --sonipat-ease ), background var( --sonipat-duration ) var( --sonipat-ease );
	visibility: hidden;
	width: 46px;
	z-index: 90;
}

/* `visibility` rather than `pointer-events` so a button that is not on screen is
   also not in the tab order. */
body.sonipat-scroll-top-shown .sonipat-scroll-top {
	opacity: 1;
	transform: none;
	visibility: visible;
}

.sonipat-scroll-top:hover {
	background: var( --sonipat-primary-hover );
}

@media (prefers-reduced-motion: reduce) {
	.sonipat-scroll-top {
		transform: none;
		transition: none;
	}
}