/**
 * Fixed header — only enqueued when Appearance → Theme Settings has the
 * "Fixed Header" toggle on. Targets the <header> template part; scroll
 * state is toggled by assets/js/fixed-header.js via IntersectionObserver.
 */

:root {
	/* RGB triplet (no rgb() wrapper) so the gradient's alpha stop can reuse it. */
	--tpf-fixed-header-bg: 255, 255, 255;
	--tpf-fixed-header-opacity-start: 1;
	--tpf-fixed-header-opacity-end: 0;
}

/* Base state: header pinned to the top of the viewport once JS adds .is-fixed. */
header.is-fixed {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	background: rgb( var( --tpf-fixed-header-bg ) );
}

/* Sit below the admin toolbar for logged-in users, instead of under it —
   #wpadminbar is itself position:fixed at top:0, so our header needs an
   explicit offset. Matches WP core's own admin-bar height + breakpoint
   (32px desktop, 46px at the same 782px cutoff admin-bar.min.css uses). */
.admin-bar header.is-fixed {
	top: 32px;
}

@media screen and ( max-width: 782px ) {
	.admin-bar header.is-fixed {
		top: 46px;
	}
}

/* Gradient variant (Theme Settings → Header Background Style = Gradient):
   fades from solid to transparent before the page has scrolled. */
header.is-fixed.gradient {
	background: linear-gradient(
		180deg,
		rgba( var( --tpf-fixed-header-bg ), var( --tpf-fixed-header-opacity-start ) ) 0%,
		rgba( var( --tpf-fixed-header-bg ), var( --tpf-fixed-header-opacity-end ) ) 100%
	);
}

/* Scrolled state (JS adds .header-is-scrolled past the scroll threshold):
   solid background regardless of variant, so content stays legible. */
header.is-fixed.header-is-scrolled {
	background: rgb( var( --tpf-fixed-header-bg ) );
}

/* Reserve space for the now-fixed header so content doesn't jump underneath it.
   Adjust to match the real rendered header height per site. */
body.tpf-has-fixed-header {
	padding-top: var( --tpf-fixed-header-height, 80px );
}