/* Smoother mobile nav — Lt. Data's recommendation, 2026-07-19.
   The theme toggles .hidden (display:none) on .menu, which cannot animate.
   On phones we keep the menu rendered, off-canvas right, and let the same
   .hidden toggle drive a slide-in drawer with real tap targets. Desktop is
   untouched. */

@media (max-width: 684px) {
  .menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(78vw, 320px);
    display: block !important; /* defeat .hidden's display:none so it can animate */
    transform: translateX(105%);
    transition: transform 0.28s ease, box-shadow 0.28s ease;
    border: none;
    border-left: 1px solid #dcdcdc;
    margin: 0;
    padding: 76px 10px 24px;
    overflow-y: auto;
  }

  .dark-theme .menu {
    border-left-color: #3b3d42;
  }

  .menu:not(.hidden) {
    transform: translateX(0);
    box-shadow: -14px 0 36px rgba(0, 0, 0, 0.35);
  }

  .menu .menu__inner {
    padding: 0;
  }

  .menu .menu__inner li {
    margin: 2px 6px;
    padding: 0;
    width: calc(100% - 12px);
  }

  .menu .menu__inner li a {
    display: block;
    margin: 0;
    padding: 14px 18px;
    font-size: 1.05rem;
    border-radius: 8px;
  }

  .menu .menu__inner li a:hover,
  .menu .menu__inner li a:focus-visible {
    background: rgba(103, 162, 201, 0.14); /* owl blue, faint */
    text-decoration: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .menu {
      transition: none;
    }
  }
}