/* --- Sticky Header Fixes (global) --- */
:root{
  --sticky-header-height: 64px; /* fallback; JS will set exact height */
}
/* make headings and anchor targets account for fixed header */
[id] { scroll-margin-top: calc(var(--sticky-header-height, 64px) + 12px); }

/* reasonable defaults for common header/nav containers */
header, .header, .site-header, nav.navbar, .navbar, .topbar, .main-nav {
  position: sticky;
  top: 0;
  z-index: 9999;
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  background-color: rgba(255,255,255,0.75);
  transition: background-color .2s ease, box-shadow .2s ease, border-color .2s ease;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* dark variants */
header.dark, .header.dark, .site-header.dark, .navbar.dark {
  background-color: rgba(20,20,20,0.75);
  color: #fff;
  border-bottom-color: rgba(255,255,255,0.08);
}

/* when page scrolls */
.sticky-scrolled header,
.sticky-scrolled .header,
.sticky-scrolled .site-header,
.sticky-scrolled nav.navbar,
.sticky-scrolled .navbar,
.sticky-scrolled .topbar,
.sticky-scrolled .main-nav {
  background-color: rgba(255,255,255,0.95);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

/* ensure header spans full width */
header, .header, .site-header, nav.navbar, .navbar, .topbar, .main-nav {
  left: 0; right: 0; width: 100%;
}

/* ensure body content isn't hidden under header */
body.has-sticky-offset {
  padding-top: var(--sticky-header-height, 64px);
}

/* utility: when hero overlaps, increase contrast */
.hero-overlay-header header,
.hero-overlay-header .header,
.hero-overlay-header .site-header,
.hero-overlay-header nav.navbar,
.hero-overlay-header .navbar {
  background-color: rgba(255,255,255,0.85);
}

/* mobile tweaks */
@media (max-width: 768px) {
  :root{ --sticky-header-height: 56px; }
}