/* ==========================================================================
   BALIVIP shared navigation + footer
   --------------------------------------------------------------------------
   Loaded on every public page BEFORE that page's own inline <style>, so any
   page that already styles its own header keeps winning. This file only fills
   in what a page does not define for itself.

   Edit the LINKS in nav.js, not here. This file is presentation only.
   ========================================================================== */

/* Token fallbacks. Every page already sets these in :root; these exist so the
   nav still renders correctly if a new page forgets to. */
:root{
  --bg:#F4F2ED;
  --ink:#2B2724;
  --ink-soft:#6B645C;
  --gold:#A8894E;
  --line:rgba(43,39,36,.16);
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost',Helvetica,Arial,sans-serif;
}

/* --------------------------------------------------------------- header --- */
body.menu-open{overflow:hidden}

.site-header{position:absolute;top:0;left:0;width:100%;z-index:60;padding:34px 48px 0;display:grid;grid-template-columns:1fr auto 1fr;align-items:start}
.site-header a{color:inherit;text-decoration:none}
.header-spacer{grid-column:1}
.header-light{color:#fff}

/* The wordmark sits over a dark hero on these pages, so it follows the header
   text and goes white. The menu overlay is cream, so it returns to ink while
   the menu is open. The black file stays in src as the fallback. Footers keep
   the black mark because they sit on the cream body. */
.header-light .brand-logo{content:url(/media/balivip-logo-white.webp)}
.menu-open .header-light .brand-logo{content:url(/media/balivip-logo-black.webp)}

.wordmark{grid-column:2;text-align:center;line-height:1}
.wordmark .wm-name{font-family:var(--serif);font-weight:500;font-size:34px;letter-spacing:.34em;text-indent:.34em;display:block}
.wordmark .wm-sub{font-family:var(--sans);font-weight:400;font-size:9px;letter-spacing:.42em;text-indent:.42em;display:block;margin-top:8px}

.menu-btn{grid-column:3;justify-self:end;margin-top:10px;width:44px;height:30px;background:none;border:none;cursor:pointer;position:relative;z-index:80;color:inherit}
.menu-btn span{position:absolute;left:6px;right:0;height:1.5px;background:currentColor;transition:transform .45s cubic-bezier(.6,0,.2,1),top .45s}
.menu-btn span:nth-child(1){top:10px}
.menu-btn span:nth-child(2){top:18px}
.menu-open .menu-btn span:nth-child(1){top:14px;transform:rotate(45deg)}
.menu-open .menu-btn span:nth-child(2){top:14px;transform:rotate(-45deg)}
.menu-open .site-header{color:var(--ink);z-index:75}

/* Injected on pages that keep their own simple centred header (tools, travel,
   timeline, 404). Floats clear of that layout instead of replacing it. */
.menu-btn-float{position:fixed;top:34px;right:34px;margin-top:0;color:var(--ink)}

/* ------------------------------------------------------- overlay menu --- */
.menu-overlay{position:fixed;inset:0;background:var(--bg);z-index:70;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .6s,visibility .6s;overflow-y:auto;padding:90px 20px}
.menu-open .menu-overlay{opacity:1;visibility:visible}

.menu-list{list-style:none;text-align:center;margin:0;padding:0}
.menu-list li{overflow:hidden}
.menu-list a{display:inline-flex;align-items:baseline;gap:22px;font-family:var(--serif);font-size:clamp(34px,5.6vw,68px);letter-spacing:.06em;line-height:1.35;color:var(--ink);text-decoration:none;transform:translateY(110%);transition:transform .7s cubic-bezier(.2,.6,.2,1),color .3s}
.menu-open .menu-list a{transform:translateY(0)}
.menu-list li:nth-child(2) a{transition-delay:.05s}
.menu-list li:nth-child(3) a{transition-delay:.10s}
.menu-list li:nth-child(4) a{transition-delay:.15s}
.menu-list li:nth-child(5) a{transition-delay:.20s}
.menu-list li:nth-child(6) a{transition-delay:.25s}
.menu-list a:hover,.menu-list a:focus-visible{color:var(--gold)}
.menu-list a[aria-current="page"]{color:var(--gold)}
.menu-list .no{font-size:.32em;letter-spacing:.1em;transform:translateY(-1.4em)}

.menu-foot{position:absolute;bottom:36px;font-family:var(--sans);font-size:9px;letter-spacing:.35em;color:var(--ink-soft)}

/* --------------------------------------------------------------- footer --- */
footer{border-top:1px solid var(--line);padding:80px 48px 50px;text-align:center}
footer a{color:inherit;text-decoration:none}
.foot-mark{font-family:var(--serif);font-weight:500;font-size:22px;letter-spacing:.34em;text-indent:.34em}
.foot-sub{font-family:var(--sans);font-size:8px;letter-spacing:.4em;text-indent:.4em;margin-top:10px;color:var(--ink-soft)}
.foot-links{display:flex;justify-content:center;gap:44px;margin-top:44px;font-family:var(--sans);font-size:9px;letter-spacing:.32em;text-indent:.32em;text-transform:uppercase;flex-wrap:wrap}
.foot-links a{position:relative;padding-bottom:6px}
.foot-links a::after{content:"";position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--gold);transition:width .4s}
.foot-links a:hover::after{width:100%}
.foot-legal{margin-top:56px;font-family:var(--sans);font-size:8px;letter-spacing:.25em;color:var(--ink-soft)}

/* --------------------------------------------------------------- mobile --- */
@media(max-width:760px){
  .site-header{padding:26px 22px 0;grid-template-columns:1fr auto}
  .header-spacer{display:none}
  .wordmark{grid-column:1;justify-self:start;text-align:left}
  .wordmark .wm-name{font-size:23px}
  .wordmark .wm-sub{font-size:7px;margin-top:6px}
  .menu-btn{grid-column:2}
  .menu-btn-float{top:24px;right:20px}
  .menu-list a{font-size:clamp(28px,8vw,40px);gap:14px}
  footer{padding:60px 22px 40px}
  .foot-links{gap:22px}
}

/* Real BALIVIP mark in the shared footer, replacing the typeset wordmark. */
.foot-mark .brand-logo{width:160px;height:auto;display:block;margin:0 auto;max-width:100%}