/* ==========================================================================
   Component: Sticky header shell
   Wraps the logo/search row + navbar. Scrolling down lets the block leave;
   scrolling up slides it back in pinned to the top.
   The drawer and overlay deliberately live OUTSIDE this wrapper — a
   transformed ancestor would break their position: fixed.
   Requires: common.css  |  JS: assets/js/sticky-header.js
   ========================================================================== */

.di-sticky {
  background-color: var(--di-white);
  z-index: 1030;
}

/* Pinned: taken out of flow, slides on the Y axis only */
.di-sticky.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(0);
  /* Coming back in is quick and snappy… */
  transition: transform .34s cubic-bezier(.22, .61, .36, 1), box-shadow .34s ease;
  box-shadow: 0 6px 22px rgba(18, 53, 36, .1);
}

/* …leaving is slower and gentler, so it glides away instead of snapping */
.di-sticky.is-fixed.is-hidden {
  transform: translateY(-101%);
  box-shadow: none;
  transition: transform .55s cubic-bezier(.4, 0, .2, 1), box-shadow .3s ease;
}

/* Keeps the page from jumping when the block is pinned */
.di-sticky-spacer {
  height: 0;
}

/* A pinned header is a compact header: the search row tightens up a little */
.di-sticky.is-fixed .di-header__inner { padding-block: 10px; }

@media (prefers-reduced-motion: reduce) {
  .di-sticky.is-fixed { transition: none; }
}