/* The navigation of the site (shared/nav.js fills the bar). Each page styles the bar itself (.nav, .brand,
   .btn: where it sits, how it shrinks or hides); this file styles what is inside it and is the same everywhere:
   the links of the site, the booking button, and on a narrow screen the menu button and its sheet.
   The bar is the only box: the sheet hangs under it as a second surface, and inside it the links are rows
   divided by hairlines. Text is white or mint, never dimmed. */
.nav{--nav-hair:rgba(182,222,200,.24)}
.nav__links{display:flex;align-items:center;gap:clamp(16px,2.2vw,30px);margin-left:auto;font-size:.92rem}
.nav__links a{position:relative;display:inline-flex;align-items:center;min-height:40px;color:var(--tx);white-space:nowrap}
/* a line draws itself under a link on hover, and stays under the page that is open */
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1.5px;background:var(--em);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.nav__links a:hover::after,.nav__links a:focus-visible::after,.nav__links a[aria-current]::after{transform:scaleX(1)}
.nav__links a[aria-current]{font-weight:500;color:#fff}

/* booking: the action of the site */
.nav .nav__cta{flex:none;gap:.55em;min-height:40px;margin-left:0;padding:.5em 1.1em .5em .9em;font-weight:500;white-space:nowrap}
.nav__cta .ic{font-size:1.05rem}
.nav__cta[aria-current]{box-shadow:0 0 0 2px var(--bg,#050b08),0 0 0 3.5px var(--em)}
.nav__short{display:none}

/* the menu button and its sheet belong to narrow screens */
.nav__menu{display:none;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;border:1px solid rgba(182,222,200,.45);color:#fff;font-size:1.1rem;transition:background .3s,border-color .3s}
.nav__menu:hover,.nav.open .nav__menu{background:rgba(182,222,200,.12);border-color:var(--mint)}
.nav__sheet{position:absolute;top:calc(100% + 10px);left:0;right:0;display:grid;padding:6px 20px 10px;border-radius:24px;background:#08120e;border:1px solid var(--nav-hair);box-shadow:0 30px 70px -30px #000;animation:nav-sheet .35s cubic-bezier(.2,.8,.2,1)}
.nav__sheet[hidden]{display:none}
.nav__sheet a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:58px;font-size:1.15rem;color:#fff;border-top:1px solid var(--nav-hair)}
.nav__sheet a:first-child{border-top:0}
.nav__sheet a .ic{font-size:1rem;color:var(--em);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.nav__sheet a:hover .ic{transform:translateX(4px)}
.nav__sheet a[aria-current]{font-weight:500;color:var(--em)}
@keyframes nav-sheet{from{opacity:0;transform:translateY(-8px)}}

@media (max-width:760px){
  .nav__links{display:none}
  .nav .nav__cta{margin-left:auto}
  .nav__long{display:none}
  .nav__short{display:inline}
  .nav__menu{display:grid}
}
@media (prefers-reduced-motion:reduce){.nav__sheet{animation:none}}