/************ Sticky Header (no transform) ************/
#site-header {
  position: fixed;
  top: 0;               /* start fully visible */
  left: 0;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  z-index: 1000;
  transition: top 0.3s ease, opacity 0.25s ease;
  opacity: 1;
}

/* when .hidden is toggled on scroll down */
#site-header.hidden {
  top: -100px;          /* ← match this to your header’s actual height */
  opacity: 0;
}

/* push the page content down so it sits beneath the header */
header:has(> #site-header) + main {
  margin-top: 100px !important;  /* ← same height as above */
}