/**
 * Transparent header — overlay (CSS) and sticky (PHP shell + scroll JS).
 */

:root {
	--ursa6-transparent-header-z: 100;
}

/* First block clears the overlay (2× measured header height). */

body.has-ursa6-transparent-header main > :first-child {
	padding-top: calc(var(--ursa6-site-header-height, 4.5rem) * 2);
}

/* Overlay-only shells never use scroll-up sticky classes. */

header.ursa6-header-transparent-shell[data-ursa6-transparent-sticky="false"] {
	position: absolute !important;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	width: 100%;
	z-index: var(--ursa6-transparent-header-z);
}

header.ursa6-header-transparent-shell[data-ursa6-transparent-sticky="false"].is-sticky-active,
header.ursa6-header-transparent-shell[data-ursa6-transparent-sticky="false"].is-sticky-hidden {
	transform: none !important;
	transition: none !important;
	pointer-events: auto !important;
}

/* Overlay-only — no sticky, no JS. */

body:not(.wp-admin) header:has(> .ursa6-header-transparent--overlay-only) {
	position: absolute;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	width: 100%;
	z-index: var(--ursa6-transparent-header-z);
}

/* Mobile header offset is printed by Breakpoints from settings.viewport.tablet. */

/* Neutralize editor sticky on overlay-only inner groups. */

.ursa6-header-transparent--overlay-only.is-position-sticky,
.ursa6-header-transparent--overlay-only {
	position: static !important;
	top: auto !important;
	z-index: auto !important;
}

/* Neutralize editor sticky on the inner group — the shell owns positioning. */

.ursa6-header-transparent--sticky {
	position: static !important;
	top: auto !important;
	z-index: auto !important;
}

/* Shared overlay appearance (overlay-only + sticky-at-top). */

header:has(> .ursa6-header-transparent--overlay-only) > .ursa6-header-transparent,
header.ursa6-header-transparent-shell:not(.is-stuck) > .ursa6-header-transparent {
	background-color: transparent !important;
	border-bottom: 1px solid transparent;
}

/* header:has(> .ursa6-header-transparent--overlay-only) > .ursa6-header-transparent .wp-block-site-title,
header:has(> .ursa6-header-transparent--overlay-only) > .ursa6-header-transparent .wp-block-site-title a,
header:has(> .ursa6-header-transparent--overlay-only) > .ursa6-header-transparent .wp-block-navigation-item__content,
header:has(> .ursa6-header-transparent--overlay-only) > .ursa6-header-transparent .wp-block-navigation__responsive-container-open,
header.ursa6-header-transparent-shell:not(.is-stuck) > .ursa6-header-transparent .wp-block-site-title,
header.ursa6-header-transparent-shell:not(.is-stuck) > .ursa6-header-transparent .wp-block-site-title a,
header.ursa6-header-transparent-shell:not(.is-stuck) > .ursa6-header-transparent .wp-block-navigation-item__content,
header.ursa6-header-transparent-shell:not(.is-stuck) > .ursa6-header-transparent .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--base, #ffffff);
} */


/* Sticky shell — positioning seeded inline/ critically in PHP; these are fallbacks. */

header.ursa6-header-transparent-shell {
	left: 0;
	right: 0;
	width: 100%;
}

/* Stuck state — solid bar after scroll. */

header.ursa6-header-transparent-shell.is-stuck > .ursa6-header-transparent {
	background-color: var(--wp--preset--color--base, #ffffff);
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #134160) 12%, transparent);
	box-shadow: 0 1px 0 rgba(1, 22, 35, 0.06);
	color: var(--wp--preset--color--contrast, #134160);
	transition:
		background-color var(--ursa6-transparent-header-transition),
		border-color var(--ursa6-transparent-header-transition),
		color var(--ursa6-transparent-header-transition),
		box-shadow var(--ursa6-transparent-header-transition);
}

header.ursa6-header-transparent-shell.is-stuck > .ursa6-header-transparent .wp-block-site-title,
header.ursa6-header-transparent-shell.is-stuck > .ursa6-header-transparent .wp-block-site-title a,
header.ursa6-header-transparent-shell.is-stuck > .ursa6-header-transparent .wp-block-navigation-item,
header.ursa6-header-transparent-shell.is-stuck > .ursa6-header-transparent .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--contrast, #134160);
}

header.ursa6-header-transparent-shell.is-stuck > .ursa6-header-transparent .wp-block-site-logo img {
	filter: none;
}

/* Site editor — normal flow while designing. */

.editor-styles-wrapper header:has(> .ursa6-header-transparent) {
	position: relative !important;
	top: auto !important;
	left: auto;
	right: auto;
}

.editor-styles-wrapper body.has-ursa6-transparent-header main > :first-child {
	padding-top: 0;
}

/* Scroll-up hide — only when pinned + JS adds these classes. */

header.ursa6-header-transparent-shell.is-sticky-active {
	transform: translateY(0);
	transition: transform var(--ursa6-transition-transform);
}

header.ursa6-header-transparent-shell.is-sticky-hidden {
	transform: translateY(calc(-100% - var(--sticky-full-offset, 0px)));
	transition: transform var(--ursa6-transition-transform);
	pointer-events: none;
}

header.ursa6-header-transparent-shell.is-sticky-active:has(.wp-block-navigation__responsive-container.is-menu-open),
header.ursa6-header-transparent-shell.is-sticky-hidden:has(.wp-block-navigation__responsive-container.is-menu-open),
header.ursa6-header-transparent-shell.is-sticky-active:has(.wp-block-navigation [aria-expanded="true"]:not([aria-hidden="true"])),
header.ursa6-header-transparent-shell.is-sticky-hidden:has(.wp-block-navigation [aria-expanded="true"]:not([aria-hidden="true"])),
header.ursa6-header-transparent-shell.is-sticky-active:has(.wp-block-navigation:focus-within),
header.ursa6-header-transparent-shell.is-sticky-hidden:has(.wp-block-navigation:focus-within),
html.has-modal-open header.ursa6-header-transparent-shell.is-sticky-hidden,
html.has-modal-open header.ursa6-header-transparent-shell.is-sticky-active {
	transform: none !important;
	transition: none !important;
	pointer-events: auto !important;
}
