/* MyRegularTrip — primary navigation.
   Its own stylesheet because the landing page is hand-built and does not load
   trip.css; without this the header would look different on the one page most
   people arrive at. */

/* ── primary navigation ───────────────────────────────────────────────────
   Six items with two dropdowns. Below 1000px it becomes a slide-in panel
   behind a burger -- until now the nav was simply display:none on a phone,
   so the only way off the landing page on the device most people use was the
   footer or the Enquire button. */

.nav{display:flex;gap:.15rem;margin-left:auto;align-items:center}
.nav-i{position:relative;display:flex;align-items:center}
.nav-i > a{
  text-decoration:none;font-size:.92rem;font-weight:500;color:var(--ink-2);
  padding:.5rem .55rem;border-radius:9px;white-space:nowrap;
}
.nav-i > a:hover{color:var(--ink);background:var(--tint)}

/* the caret is its own button so a keyboard can open the panel without
   following the link, and a touch can too */
.sub-t{
  width:20px;height:20px;margin-left:-.3rem;padding:0;border:0;background:none;
  cursor:pointer;position:relative;flex:none;
}
.sub-t::after{
  content:"";position:absolute;top:6px;left:5px;width:6px;height:6px;
  border-right:1.6px solid var(--ink-3);border-bottom:1.6px solid var(--ink-3);
  transform:rotate(45deg);transition:transform .18s var(--ease);
}
.nav-i:hover .sub-t::after,.sub-t[aria-expanded="true"]::after{
  transform:rotate(225deg);border-color:var(--red)}

.sub{
  position:absolute;top:calc(100% + 8px);left:0;z-index:60;
  min-width:232px;padding:.4rem;display:none;
  background:#fff;color:var(--ink);
  border:1.5px solid var(--ink);border-radius:14px;
  box-shadow:5px 5px 0 var(--ink);
}
.nav-i:hover .sub,.nav-i:focus-within .sub,.sub[data-open="1"]{display:block}
.sub a{
  display:block;padding:.45rem .6rem;border-radius:9px;
  font-size:.9rem;font-weight:500;color:var(--ink-2);text-decoration:none;
}
.sub a:hover{background:var(--tint);color:var(--ink)}
.sub-all{
  margin-top:.25rem;padding-top:.5rem !important;
  border-top:1.5px solid var(--line);
  font-weight:700 !important;color:var(--red) !important;font-size:.86rem !important;
}

/* ── burger and the mobile panel ──────────────────────────────────────── */

.nav-burger{
  display:none;margin-left:.5rem;flex:none;
  width:42px;height:42px;padding:10px 9px;
  background:#fff;border:1.5px solid var(--ink);border-radius:11px;cursor:pointer;
}
.nav-burger span{
  display:block;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .22s var(--ease),opacity .18s var(--ease);
}
.nav-burger span + span{margin-top:4px}
body.nav-open .nav-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.nav-open .nav-burger span:nth-child(2){opacity:0}
body.nav-open .nav-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media(max-width:1000px){
  .nav-burger{display:block}
  .hdr .btn{margin-left:auto}

  .nav{
    position:fixed;inset:calc(var(--strip) + 66px) 0 0 auto;
    width:min(340px,86vw);z-index:70;
    flex-direction:column;align-items:stretch;gap:0;margin:0;
    padding:.6rem .8rem 2rem;overflow-y:auto;
    background:#fff;border-left:1.5px solid var(--ink);
    box-shadow:-14px 0 34px -20px rgba(28,25,23,.5);
    transform:translateX(102%);
    /* Sliding it off-screen hides it from the eye and from nobody else: the
       panel kept visibility:visible, so its twenty-five links stayed in the
       tab order and in the accessibility tree. A keyboard user tabbing down
       the page walked into a menu that was not open, and a screen reader read
       it out. visibility:hidden takes it out of both; transitioning it
       discretely means the slide still animates. */
    visibility:hidden;
    /* instant on the way in, because nav.js focuses the first item as soon as
       the class lands and a hidden element cannot take focus; delayed on the
       way out so the panel does not disappear mid-slide */
    transition:transform .26s var(--ease),visibility 0s linear .26s;
  }
  body.nav-open .nav{
    transform:none;visibility:visible;
    transition:transform .26s var(--ease),visibility 0s;
  }

  .nav-i{display:block;border-bottom:1px solid var(--line-2,#f2eae9)}
  .nav-i > a{display:block;padding:.85rem .3rem;font-size:1rem;font-weight:600;color:var(--ink)}
  .sub-t{position:absolute;top:.4rem;right:0;width:44px;height:44px;margin:0}
  .sub-t::after{top:17px;left:17px;width:8px;height:8px}

  /* inline, not floating: a dropdown that overlays the panel on a phone hides
     the items underneath it */
  .sub{
    position:static;display:none;min-width:0;padding:0 0 .6rem .3rem;
    border:0;border-radius:0;box-shadow:none;
  }
  .nav-i:hover .sub{display:none}
  .sub[data-open="1"]{display:block}
  .sub a{padding:.5rem .3rem;font-size:.94rem}
  .sub-all{border-top:0;padding-top:.4rem !important}
}

.nav-veil{
  position:fixed;inset:0;z-index:65;background:rgba(28,25,23,.45);
  opacity:0;pointer-events:none;transition:opacity .24s var(--ease);
}
body.nav-open .nav-veil{opacity:1;pointer-events:auto}
@media(min-width:1001px){.nav-veil{display:none}}

@media(prefers-reduced-motion:reduce){
  .nav,.nav-veil,.nav-burger span,.sub-t::after{transition:none}
}