/* ══════════════════════════════════════════════════════════════════════
   frame.css: the frame every page shares. The two pills at the top, and
   the page's own edges.

   Injected into every page's <head> by i18n.js, the same way lang.css is,
   so one file reaches the landing page, the trip pages, the FAQ and the
   404 in both languages.
   ══════════════════════════════════════════════════════════════════════ */

/* ── the edges ─────────────────────────────────────────────────────────
   Pulling past the top or the bottom used to stretch the page and show the
   bare page colour behind it. The page stops at its edges now, like an
   app. The cost: on a phone, pull-to-refresh does not work on this site. */
html,body{overscroll-behavior:none}

/* ── the top bar: two pills ───────────────────────────────────────────
   It used to be a band of page colour fading to nothing, so the links
   stayed legible over whatever scrolled under them; over photographs and
   the darker map it read as a smudge. Now only the pills have a ground:
   the wordmark on the left, the pages and the language switch in a pill
   on the right, and Reservar as its own solid pill beside it. There is no
   strip across the page, and nothing ever scrolls under the type.

   Reservar stays OUT of the links pill (6 October). Inside it, a solid
   round button in a rounded track read as a toggle you could slide, and
   moving it in by script after the page painted made it jump on every
   page load.

   Solid page colour, not a blur. A blurring bar re-blurs whatever is
   behind it on every scrolled frame, and scroll comes first here. */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:auto;margin:0;
  /* the right side keeps clear of the Reservar pill, which booking.js
     pins to the top-right corner on its own */
  padding:14px calc(var(--gut,clamp(24px,6vw,120px)) + 134px) 0 var(--gut,clamp(24px,6vw,120px));
  background:none;
  /* the space between the pills is not the bar's: clicks fall through */
  pointer-events:none;
}
.nav > *{pointer-events:auto}
/* the landing page's hero is a fixed stage, so its bar is fixed too */
html[data-page="index"] .nav{position:fixed;left:0;right:0}
html[data-page="index"] body.past-hero .nav{background:none}

.nav .home,
.nav .nav-links{
  height:48px;
  background:color-mix(in srgb,var(--page) 95%,transparent);
  border:1px solid color-mix(in srgb,var(--body) 13%,transparent);
  border-radius:99px;
  box-shadow:0 12px 32px -20px rgba(0,0,0,.5);
}

/* the wordmark, masked so it takes the theme's ink and recolours on hover;
   the word stays in the link for screen readers */
.nav .home{
  display:flex;align-items:center;flex:none;width:auto;margin:0;padding:0 20px;
  -webkit-mask:none;mask:none;font-size:0;color:transparent;text-decoration:none;
}
.nav .home span{
  display:block;width:74px;height:22px;background-color:var(--heading);
  -webkit-mask:url(/assets/banga-wordmark.svg) left center/auto 100% no-repeat;
          mask:url(/assets/banga-wordmark.svg) left center/auto 100% no-repeat;
  transition:background-color .2s ease;
}
.nav .home:hover span{background-color:var(--muted)}

.nav .nav-links{
  display:flex;align-items:center;gap:clamp(16px,2vw,28px);
  padding:0 24px;
}
.nav .nav-links a{
  color:var(--body);opacity:1;text-decoration:none;white-space:nowrap;
  font-family:var(--mono),var(--sans),sans-serif;font-size:10.5px;
  letter-spacing:.15em;text-transform:uppercase;
  text-underline-offset:5px;text-decoration-thickness:1px;
}
.nav .nav-links a:hover{text-decoration:underline;color:var(--body)}
.nav .nav-links a[aria-current]{text-decoration:underline;
  text-decoration-color:var(--muted);text-decoration-thickness:2px}

/* the language switch belongs to the page, not to the list of pages, so a
   hairline sets it apart instead of the box it used to wear */
.nav .nav-links .lang{
  display:block;height:auto;min-width:0;margin:0;padding:0 0 0 clamp(14px,1.6vw,22px);
  border:0;border-left:1px solid color-mix(in srgb,var(--body) 20%,transparent);
  border-radius:0;background:none;
}
.nav .nav-links .lang:hover,
.nav .nav-links .lang:focus-visible{background:none;color:var(--muted);text-decoration:none}

/* Reservar, its own pill, the same height and on the same line as the
   other two, so the three read as one bar of separate things */
#rvOpen{top:14px;right:var(--gut,clamp(24px,6vw,120px));height:48px;padding:0 22px 0 17px}
#rvOpen:hover{transform:none}

/* only exists on a phone */
.nav .nav-menu{display:none}

/* ── on a phone ───────────────────────────────────────────────────────
   Four places don't fit in a pill at this width. The right pill keeps
   Reservar and swaps the pages for Menú, which opens them full screen. */
@media(max-width:640px){
  .nav{padding-top:12px;padding-right:calc(var(--gut,24px) + 124px)}
  #rvOpen{top:12px;height:44px;padding:0 18px 0 14px}
  .nav .home,.nav .nav-links{height:44px}
  .nav .home{padding:0 16px}
  .nav .home span{width:64px;height:19px}
  .nav .nav-links{gap:14px;padding:0 18px}
  .nav .nav-links a,.nav .nav-links .lang{display:none}
  .nav .nav-menu{
    display:block;padding:0;border:0;background:none;cursor:pointer;color:var(--body);
    font-family:var(--mono),var(--sans),sans-serif;font-size:11px;
    letter-spacing:.15em;text-transform:uppercase;
  }

  .nav.open .nav-links{
    position:fixed;inset:0;height:auto;z-index:60;
    flex-direction:column;align-items:flex-start;justify-content:center;gap:20px;
    padding:0 var(--gut,24px);border:0;border-radius:0;box-shadow:none;
    background:var(--page);
  }
  .nav.open .nav-links a{
    display:block;font-family:var(--display),var(--sans),sans-serif;
    font-size:clamp(30px,9vw,40px);letter-spacing:-.02em;text-transform:none;
    color:var(--heading);
  }
  .nav.open .nav-links .lang{
    display:block;border:0;padding:0;margin-top:6px;
    font-family:var(--mono),var(--sans),sans-serif;font-size:12px;
    letter-spacing:.15em;text-transform:uppercase;color:var(--body);
  }
  /* Reservar stays in its corner above the menu, so Cerrar takes the
     wordmark's corner instead */
  .nav.open .nav-menu{position:absolute;top:28px;left:var(--gut,24px)}
  html.nav-open{overflow:hidden}
}