/*
 * BesaPharm "headroom" nav bar (desktop only; header is display:none < 1025px).
 * The menu/nav row scrolls away with the header normally. Once you scroll past
 * it, JS switches it to position:fixed (pinned to the viewport) — sticky can't
 * do this because the row is nested inside the header. A spacer keeps the page
 * from jumping. While pinned: hidden on scroll-down, revealed on scroll-up.
 */
@media (min-width: 1025px) {
  .bp-header-nav {
    transition: transform 0.35s ease;
    will-change: transform;
    /* will-change:transform makes this a stacking context; without an explicit
       z-index it sits at "auto" level and the mega menu (z-index:9000, but
       trapped inside this context) renders behind later page content such as
       the My Account view. Lift the whole nav so its dropdowns always win.
       Matches the pinned (.bp-nav-stuck) value below. */
    z-index: 1000;
  }

  .bp-header-nav.bp-nav-stuck {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    height: 62px;
    display: flex;
    align-items: center;
    border-top: 0;
  }

  /* When the WordPress admin bar is present it is fixed at top:0 and would
     cover the pinned nav — push the nav down by the admin-bar height. */
  body.admin-bar .bp-header-nav.bp-nav-stuck {
    top: 32px;
  }

  .bp-header-nav.bp-nav-stuck .bp-header-nav__inner {
    width: 100%;
    display: flex;
    align-items: center;
  }

  .bp-header-nav.bp-nav-stuck.bp-header--hidden {
    transform: translateY(-100%);
  }

  .bp-nav-spacer { display: none; }
  .bp-nav-spacer.is-active { display: block; }
}

/* Admin bar shrinks to 46px on narrow screens (still applies if header shows). */
@media screen and (max-width: 782px) {
  body.admin-bar .bp-header-nav.bp-nav-stuck { top: 46px; }
}

@media (max-width: 1024px) {
  .bp-nav-spacer { display: none !important; }
}