/* ==========================================================================
   BON JEU — mobile navigation

   The hero hides its nav links below 900px and the word "Menu" was removed
   from the design, which left phones with no way off the homepage. This is an
   icon-only trigger and a full-screen panel, mobile only; desktop is untouched.
   ========================================================================== */

.menu-toggle { display: none; }

@media (max-width: 900px) {
  .menu-toggle {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 60;
    display: grid;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 12px 9px;
    align-content: center;
    /* Colour comes from the page: white over the photograph, navy on cream. */
    color: var(--nav-ink, #fff);
  }
  .menu-toggle span {
    display: block;
    height: 2px;
    background: currentColor;
    /* White hairlines vanish against a bright sky. The shadow makes the
       trigger hold on any part of the photograph. */
    filter: drop-shadow(0 1px 2.5px rgba(0, 0, 0, 0.6));
    transition: transform 260ms cubic-bezier(.22,.61,.36,1), opacity 200ms ease;
  }
  .menu-toggle[aria-expanded='true'] { color: var(--cream); }
  .menu-toggle[aria-expanded='true'] span { filter: none; }
  .menu-toggle[aria-expanded='true'] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded='true'] span:last-child  { transform: translateY(-3.5px) rotate(-45deg); }

  /* The header's own links and cart give way to the trigger. */
  .nav__links, .nav__bag, .nav__cart { display: none !important; }

  .mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 55;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 0 26px;
    background: var(--navy);
    color: var(--cream);
  }
  .mobile-menu[hidden] { display: none; }
  .mobile-menu:focus { outline: none; }

  .mobile-menu a {
    padding: 13px 0;
    border-bottom: 1px solid rgba(244, 240, 230, 0.16);
    font-size: 22px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--cream);
  }
  .mobile-menu a:last-of-type { border-bottom: 0; }
  .mobile-menu a[aria-current='page'] { color: rgba(244, 240, 230, 0.5); }

  /* The French sits under its English, as everywhere else. */
  .mobile-menu .alt {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-style: italic;
    text-transform: none;
    letter-spacing: 0.04em;
    color: rgba(244, 240, 230, 0.55);
  }

  .mobile-menu__foot {
    margin-top: 30px;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(244, 240, 230, 0.45);
  }

  /* The page behind must not scroll under the panel. */
  body.menu-open { overflow: hidden; }
}

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