/* Viewport-safe mobile navigation overrides. Kept separate from the compact
   production styles so the drawer cannot inherit the header's fixed bounds. */
@media (max-width: 1024px) {
  .menu-toggle {
    position: relative;
    z-index: 1;
  }

  .mobile-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(0, 0, 0, 0.66);
    opacity: 0;
    transition: opacity 300ms ease;
  }

  .mobile-backdrop.is-open {
    display: block;
    opacity: 1;
  }

  .mobile-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: auto;
    display: flex;
    width: min(92vw, 400px);
    height: 100vh;
    height: 100dvh;
    z-index: 1101;
    padding: calc(82px + env(safe-area-inset-top)) max(26px, env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) 26px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transform: translate3d(105%, 0, 0);
    visibility: hidden;
    transition: transform 300ms ease, visibility 0s linear 300ms;
  }

  .mobile-nav.is-open {
    transform: translate3d(0, 0, 0);
    visibility: visible;
    transition-delay: 0s;
  }

  .mobile-close {
    top: calc(20px + env(safe-area-inset-top));
    right: max(20px, env(safe-area-inset-right));
    border-radius: 8px;
  }
}

@media (max-width: 480px) {
  .mobile-nav {
    width: 100%;
    padding-right: max(22px, env(safe-area-inset-right));
    padding-left: max(22px, env(safe-area-inset-left));
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-backdrop,
  .mobile-nav {
    transition-duration: 0.01ms;
  }
}