:root{
  --sidebar-w: 280px;            /* width of the off-canvas menu */
  --anim: 240ms cubic-bezier(.2,.7,.2,1);
  --header-h: 64px;              /* will be updated by JS to match your header */
}

/* Toggle button */
.nav-toggle{
  appearance: none; border: none;  cursor: pointer;
  font-size: 1.25rem; line-height: 1; padding: .5rem .75rem; margin-right: .5rem;
}
.nav-toggle:focus-visible{ outline: 2px solid currentColor; outline-offset: 2px; }

/* Off-canvas sidebar */
.side-menu{
  position: fixed;
  top: var(--header-h);
  left: 0;
  height: calc(100dvh - var(--header-h));
  width: var(--sidebar-w);
  transform: translateX(-100%);
  transition: transform var(--anim);
  z-index: 1000;
  /* Keep your existing look; just ensure it’s on top */
  box-shadow: 2px 0 14px rgba(0,0,0,.15);
  will-change: transform;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
    background-color: var(--bg-color);   /* pick your solid color */
  opacity: 1;                  /* ensure no inherited transparency */
  backdrop-filter: none;       /* prevent glass/frosted effects */
}

/* When open */
body.nav-open .side-menu{ transform: translateX(0); }

/* Scrim behind the drawer */
.scrim{
  position: fixed; inset: 0;
  /* background: rgba(0,0,0,.6); */
  z-index: 900;
  opacity: 0;
  transition: opacity var(--anim);
    pointer-events: none;               /* 👈 ignore mouse when closed */
}
body.nav-open .scrim{ opacity: 1; }
body.nav-open .scrim[hidden]{ display: block; } /* ensure it can fade in */

/* Don’t animate for users who prefer less motion */
@media (prefers-reduced-motion: reduce){
  .side-menu, .scrim{ transition: none !important; }
}

/* Optional: keep it open by default on desktops */
/* @media (min-width: 1024px){
  body:not(.nav-manual) .side-menu{ transform: translateX(0); }
  body:not(.nav-manual) .scrim{ display: none !important; }
} */