/* v2.21 — sticky header scroll-gap fix.
   Keep the normal page spacing before the header reaches the viewport edge,
   then pin it flush to the top so scrolled content cannot appear above it. */
#main-header {
  top: 0 !important;
  background: rgba(255,255,255,.985) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  isolation: isolate;
}

/* Prevent rubber-band/scroll chaining from exposing a contrasting strip
   above the app on browsers that support overscroll-behavior. */
html, body {
  overscroll-behavior-y: none;
}

/* The header is slightly shorter on compact layouts, but it must still
   attach to the viewport edge rather than leaving the previous 8px gap. */
@media (max-width: 900px) {
  #main-header { top: 0 !important; }
}

/* Keep anchor/navigation targets from disappearing underneath the sticky bar. */
html { scroll-padding-top: 104px !important; }
@media (max-width: 768px) {
  html { scroll-padding-top: 88px !important; }
}