/*
 * Sticky header look. Loaded only where the "Sticky compact header" style is
 * used (inc/kit/sticky-header.php). The kit script only toggles
 * .is-pa-compact and sets --pa-sticky-offset.
 *
 * Compact: the announcement strip slides up out of view and the category bar
 * fades, leaving the logo, search, account and bag. The header keeps its
 * height in the layout, so nothing below it moves.
 */

.wp-block-template-part:has(> .is-style-pa-sticky-header) {
	position: sticky;
	inset-block-start: 0;
	z-index: 50;
}

.admin-bar .wp-block-template-part:has(> .is-style-pa-sticky-header) {
	inset-block-start: var(--wp-admin--admin-bar--height, 0px);
}

html:has(.is-style-pa-sticky-header) {
	scroll-padding-top: calc(var(--pa-sticky-offset, 0px) + 8px);
}

.is-style-pa-sticky-header {
	transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1), background-color 150ms ease, border-color 150ms ease;
}

.is-style-pa-sticky-header > .pa-header__nav,
.is-style-pa-sticky-header > .pa-announcement {
	transition: opacity 150ms ease, visibility 150ms;
}

.is-style-pa-sticky-header.is-pa-compact {
	background-color: transparent !important;
	border-color: transparent;
	transform: translateY(calc(var(--pa-announce-h) * -1));
	pointer-events: none;
}

.is-style-pa-sticky-header.is-pa-compact > .pa-header__main {
	box-shadow: var(--wp--preset--shadow--sm);
	pointer-events: auto;
}

.is-style-pa-sticky-header.is-pa-compact > .pa-announcement,
.is-style-pa-sticky-header.is-pa-compact > .pa-header__nav {
	visibility: hidden;
	opacity: 0;
}

@media (max-width: 1023px) {

	/* Keep the search row while compact on small screens: it is part of the main row. */
	.is-style-pa-sticky-header.is-pa-compact > .pa-header__main {
		border-block-end: 1px solid var(--wp--preset--color--line);
	}
}

@media (prefers-reduced-motion: reduce) {

	.is-style-pa-sticky-header,
	.is-style-pa-sticky-header > * {
		transition: none;
	}
}