/* ===== Mobile menu: fixed overlay under sticky header ===== */

#mobile-menu.mobile-menu{
  position: fixed;
  left: 0;
  right: 0;
  top: var(--front-header-h);
  height: calc(100vh - var(--front-header-h));
  z-index: 900; /* header is 1000 */

  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  /* closed state */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(+15px);

  transition:
    opacity 200ms ease,
    transform 220ms ease,
    visibility 0s linear 220ms;
}

#mobile-menu.mobile-menu.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);

  transition:
    opacity 200ms ease,
    transform 220ms ease,
    visibility 0s;
}

/* Lock background scroll while menu is open (Chrome/Edge) */
body:has(#mobile-menu.is-open){
  overflow: hidden;
}

/* ===== Mobile menu is ALWAYS white ===== */
#mobile-menu.mobile-menu{
  background: #ffffff;
  color: #111111;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}


#mobile-menu.mobile-menu{
  margin: -34px !important;
  top: var(--front-header-h) !important;
}




/* If we're on desktop layout, never lock page scroll */
@media (min-width: 782px){
  body:has(#mobile-menu.is-open){
    overflow: auto !important;
  }
}
/* On desktop, force the mobile panel to be closed (state-wise and visually) */
@media (min-width: 782px){
  #mobile-menu.mobile-menu{
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}