/* Navigation repairs share the header's 860px breakpoint. */
/* Keep the native dialog's opener focusable for its automatic focus return. */
body.modal-open .site-header.is-booking .header-book { visibility: visible; opacity: 0; pointer-events: none; }

@media (max-width: 860px) {
  :root { --booking-clearance: calc(67px + env(safe-area-inset-bottom, 0px)); }
  html { scroll-padding-bottom: var(--booking-clearance); }
  .footer { padding-bottom: calc(24px + var(--booking-clearance)); }
  .footer a { scroll-margin-bottom: var(--booking-clearance); }

  .mobile-book {
    position: fixed;
    z-index: 80;
    inset: auto 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--ink);
    color: var(--gold);
    border-top: 1px solid var(--line);
    padding: 11px max(20px, env(safe-area-inset-right, 0px)) calc(11px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
    transform: translateY(110%);
    visibility: hidden;
    pointer-events: none;
    transition: transform .3s;
  }
  .mobile-book.is-visible { transform: translateY(0); visibility: visible; pointer-events: auto; }
  .mobile-book span { font-size: 10px; font-weight: 700; letter-spacing: .08em; }
  .mobile-book a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; font-weight: 800; text-transform: uppercase; white-space: nowrap; }
  body.menu-open .mobile-book { transform: translateY(110%); visibility: hidden; pointer-events: none; }
  body.modal-open .mobile-book { transform: translateY(110%); pointer-events: none; }

  .mobile-nav {
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scroll-padding-top: calc(var(--header-h) + 16px);
    scroll-padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
    gap: 32px;
    padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
    padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
  }
  .mobile-nav__links, .mobile-nav__foot { flex-shrink: 0; }
  .mobile-nav a:focus-visible, .mobile-book a:focus-visible, .menu-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
}

@media (max-width: 860px) and (max-height: 500px) {
  .mobile-nav { padding-top: calc(var(--header-h) + 16px); gap: 24px; }
  .mobile-nav__links { gap: 0; }
  .mobile-nav__links a { font-size: 32px; line-height: 1; min-height: 44px; padding-block: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-book, .mobile-nav { transition: none; }
}