/*
 * Sticky header look. Loaded only where the "Sticky compact header" style is
 * used (inc/kit/sticky-header.php). The kit script toggles .is-ge-compact and
 * sets --ge-sticky-offset; here the announcement strip folds away and the
 * main row stays, with a hairline instead of a shadow.
 */

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

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

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

.is-style-ge-sticky-header > :not(.ge-header__main) {
	transition: opacity 240ms ease, visibility 240ms;
}

.is-style-ge-sticky-header.is-ge-compact {
	background-color: transparent !important;
	pointer-events: none;
}

.is-style-ge-sticky-header.is-ge-compact > .ge-header__main {
	background-color: var(--wp--preset--color--base);
	box-shadow: 0 1px 0 var(--wp--preset--color--line), 0 16px 32px -28px rgb(37 40 35 / 0.4);
	pointer-events: auto;
}

.is-style-ge-sticky-header.is-ge-compact > :not(.ge-header__main) {
	visibility: hidden;
	opacity: 0;
}

/*
 * The announcement sits above the main row: once compact, the whole header
 * slides up by its height so the strip scrolls away instead of leaving a gap.
 * Only the sticky offset changes, so nothing on the page moves.
 */
.wp-block-template-part:has(> .is-style-ge-sticky-header > .ge-announce) {
	transition: inset-block-start 320ms ease;
}

.wp-block-template-part:has(> .is-style-ge-sticky-header.is-ge-compact > .ge-announce) {
	inset-block-start: calc(-1 * var(--ge-announce-h, 2.25rem));
}

.admin-bar .wp-block-template-part:has(> .is-style-ge-sticky-header.is-ge-compact > .ge-announce) {
	inset-block-start: calc(var(--wp-admin--admin-bar--height, 0px) - var(--ge-announce-h, 2.25rem));
}

.is-style-ge-sticky-header.is-ge-compact > .ge-announce {
	visibility: visible;
	opacity: 1;
}

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

	.is-style-ge-sticky-header > :not(.ge-header__main) {
		transition: none;
	}
}