/**
 * Block Sticky Header – frontend styles
 * Applied when body has .bsh-enabled; header receives .bsh-header from JS.
 */

/* Base sticky positioning – JS sets --bsh-top for admin bar offset */
.bsh-enabled .bsh-header.bsh-stuck {
	position: sticky;
	top: var(--bsh-top, 0);
	z-index: var(--bsh-z-index, 999);
	transition: transform var(--bsh-transition-duration, 300ms) ease,
	            box-shadow var(--bsh-transition-duration, 300ms) ease,
	            background-color var(--bsh-transition-duration, 300ms) ease,
	            transform-origin var(--bsh-transition-duration, 300ms) ease,
	            margin-bottom var(--bsh-transition-duration, 300ms) ease;
}

/* Hide on scroll down: move up off-screen */
.bsh-enabled .bsh-header.bsh-stuck.bsh-hidden {
	transform: translateY(-100%);
}

/* Header background, per state (when enabled via options).
   The header can be transparent at the top of the page and coloured once docked, the other way
   round, or the same in both. JS publishes --bsh-bg-top for the resting state and --bsh-bg while
   docked, and switches the .bsh-docked class; "transparent" is an alpha of 0, which still
   overrides whatever background the theme gives the header. */
.bsh-enabled .bsh-header.bsh-stuck:not(.bsh-docked).bsh-custom-bg {
	background-color: var(--bsh-bg-top, transparent) !important;
}
.bsh-enabled .bsh-header.bsh-stuck.bsh-docked.bsh-custom-bg {
	background-color: var(--bsh-bg, transparent) !important;
}

/* Theme wrappers (e.g. .has-background) are neutralised in both states, so the colour — or a
   deliberate transparency — is the only thing visible. */
.bsh-enabled .bsh-header.bsh-stuck.bsh-custom-bg > .has-background,
.bsh-enabled .bsh-header.bsh-stuck.bsh-custom-bg > [class*="has-"][class*="-background"],
.bsh-enabled .bsh-header.bsh-stuck.bsh-blur > .has-background,
.bsh-enabled .bsh-header.bsh-stuck.bsh-blur > [class*="has-"][class*="-background"] {
	background-color: transparent !important;
	background-image: none !important;
}

/* Chameleon mode: adapt text and link colours based on detected section background */
.bsh-enabled .bsh-header.bsh-stuck.bsh-docked.bsh-chameleon {
	color: var(--bsh-text-color) !important;
	transition: background-color var(--bsh-transition-duration, 300ms) ease,
	            color var(--bsh-transition-duration, 300ms) ease,
	            box-shadow var(--bsh-transition-duration, 300ms) ease,
	            margin-bottom var(--bsh-transition-duration, 300ms) ease;
}
.bsh-enabled .bsh-header.bsh-stuck.bsh-docked.bsh-chameleon a,
.bsh-enabled .bsh-header.bsh-stuck.bsh-docked.bsh-chameleon button,
.bsh-enabled .bsh-header.bsh-stuck.bsh-docked.bsh-chameleon .wp-block-navigation-item__content,
.bsh-enabled .bsh-header.bsh-stuck.bsh-docked.bsh-chameleon .wp-block-navigation__responsive-container-open,
.bsh-enabled .bsh-header.bsh-stuck.bsh-docked.bsh-chameleon .wp-block-navigation__responsive-container-close {
	color: var(--bsh-text-color) !important;
}

/* Frosted blur: a pseudo-element carries the blur and the state's colour, so the header itself can
   stay transparent and the layer cross-fades with the docked state. */
.bsh-enabled .bsh-header.bsh-stuck.bsh-blur {
	background-color: transparent !important;
}
.bsh-enabled .bsh-header.bsh-stuck.bsh-blur::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	-webkit-backdrop-filter: blur(var(--bsh-blur-px, 10px));
	backdrop-filter: blur(var(--bsh-blur-px, 10px));
	background-color: var(--bsh-bg-top, transparent);
	transition: background-color var(--bsh-transition-duration, 300ms) ease;
}
.bsh-enabled .bsh-header.bsh-stuck.bsh-docked.bsh-blur::before {
	background-color: var(--bsh-bg, transparent);
}

/* Shadow while docked, to separate the bar from the content sliding under it */
.bsh-enabled .bsh-header.bsh-stuck.bsh-docked.bsh-custom-bg,
.bsh-enabled .bsh-header.bsh-stuck.bsh-docked.bsh-blur {
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* -------------------------------------------------------------------------
   Shrink on sticky: shorter header and smaller logo once the header is stuck.
   JS adds .bsh-shrink-ready plus .bsh-shrink-target / .bsh-shrink-logo to the
   matched elements, and sets --bsh-shrink-header-height / --bsh-shrink-logo-height (the
   compact sizes) plus --bsh-shrink-logo-height-full (the measured full-size height).
   on the header. Without JS everything keeps its full size.
   ------------------------------------------------------------------------- */
.bsh-enabled .bsh-header.bsh-shrink-ready.bsh-shrink-target,
.bsh-enabled .bsh-header.bsh-shrink-ready .bsh-shrink-target {
	transition: height var(--bsh-transition-duration, 300ms) ease,
	            min-height var(--bsh-transition-duration, 300ms) ease;
}

/* Armed: pin the logo to its measured full height so the shrink has an explicit start
   value. `height: auto` and `max-height: none` are not interpolable, which made the logo
   jump to its new size instead of shrinking with the header. */
.bsh-enabled .bsh-header.bsh-shrink-ready.bsh-has-shrink-logo .bsh-shrink-logo {
	height: var(--bsh-shrink-logo-height-full, auto) !important;
	max-height: var(--bsh-shrink-logo-height-full, none) !important;
	width: auto !important;
	transition: height var(--bsh-transition-duration, 300ms) ease,
	            max-height var(--bsh-transition-duration, 300ms) ease;
}

/* Reduced header height while stuck */
.bsh-enabled .bsh-header.bsh-stuck.bsh-docked.bsh-has-shrink-height.bsh-shrink-target,
.bsh-enabled .bsh-header.bsh-stuck.bsh-docked.bsh-has-shrink-height .bsh-shrink-target {
	height: var(--bsh-shrink-header-height, 64px) !important;
	min-height: var(--bsh-shrink-header-height, 64px) !important;
}

/* Reserve the space the compact header gives up, as a margin, so everything below it keeps
   its position. The margin and the height change over the same duration and easing, so at
   every frame they cancel out: header box + margin constantly equals the full height. */
.bsh-enabled .bsh-header.bsh-stuck.bsh-docked.bsh-has-reserve {
	margin-bottom: var(--bsh-shrink-offset, 0px) !important;
}

/* Reduced logo height while stuck; width follows the logo's aspect ratio */
.bsh-enabled .bsh-header.bsh-stuck.bsh-docked.bsh-has-shrink-logo .bsh-shrink-logo {
	height: var(--bsh-shrink-logo-height, 40px) !important;
	max-height: var(--bsh-shrink-logo-height, 40px) !important;
	width: auto !important;
	object-fit: contain;
}

/* Overlay mode: header floats over first content section (transparent header pattern) */
.bsh-overlay {
	overflow-x: clip; /* Prevent horizontal scroll from negative margin pull-up */
}

/* Push content down: spacer added by JS */
.bsh-enabled .bsh-content-spacer {
	display: block;
	width: 100%;
	height: 0;
	pointer-events: none;
}

/* Respect reduced motion: disable transitions */
@media (prefers-reduced-motion: reduce) {
	.bsh-enabled .bsh-header.bsh-stuck,
	.bsh-enabled .bsh-shrink-target,
	.bsh-enabled .bsh-shrink-logo {
		transition: none;
	}
}