/* ============================================================
   Harbour & Hangar — CHROME v1: global header + footer
   Linked on EVERY page, last in <head>, so the header and footer
   look identical site-wide — including pages whose body has not
   been re-skinned yet. Self-contained: own font import and
   hard-coded colours (does not rely on skin.v1.css tokens).

   Shared markup (same on every page except where noted):
   <header class="nav [nav--hero]">   nav--hero = overlays a photo hero
     <div class="wrap"> a.brand (span.amp) + nav.navlinks
       (4 links; current section has aria-current — "page" on the
        section index, "true" on pages inside it;
        then a.nav-cta — its href is page-specific, leave it)
   <footer class="foot"> .fgrid (.fbrand + 4 × .fcol) + .fbase
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

/* ---------- Header ---------- */
header.nav{font-family:'Geist',system-ui,-apple-system,sans-serif}
header.nav:not(.nav--hero){background:rgba(11,12,14,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid #1F2226}
header.nav.nav--hero{background:none;border-bottom:0}
header.nav.nav--hero::before{display:none}

/* Brand | links (truly centred on the page) | CTA */
header.nav>.wrap{display:grid;grid-template-columns:minmax(max-content,1fr) repeat(4,auto) minmax(max-content,1fr);align-items:center;column-gap:clamp(24px,2.8vw,40px);height:auto;padding-block:24px}
header.nav .navlinks{display:contents}

header.nav .brand{justify-self:start;font-family:'Geist',system-ui,sans-serif;font-size:19px;font-weight:700;letter-spacing:.02em;text-transform:none;white-space:nowrap;color:#ECEDEE;text-decoration:none;text-shadow:none}
header.nav .brand .amp{color:#FFE01B}

header.nav .navlinks a:not(.nav-cta){position:relative;font-family:'Geist',system-ui,sans-serif;font-size:15px;font-weight:400;letter-spacing:0;text-transform:none;white-space:nowrap;color:#ECEDEE;opacity:1;text-decoration:none;text-shadow:none}
header.nav.nav--hero .navlinks a:not(.nav-cta){text-shadow:0 1px 12px rgba(0,0,0,.45)}
header.nav .navlinks a:not(.nav-cta):hover{opacity:1;color:#ECEDEE}
header.nav .navlinks a[aria-current],header.nav .navlinks a[aria-current]:hover{color:#FFE01B}
/* Hover: yellow underline grows in from the left */
header.nav .navlinks a:not(.nav-cta)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:#FFE01B;transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
header.nav .navlinks a:not(.nav-cta):hover::after{transform:scaleX(1)}

header.nav .navlinks a.nav-cta{grid-column:-2;justify-self:end;margin:0;background:#FFE01B!important;color:#0B0C0E!important;border:1px solid #FFE01B!important;border-radius:6px;padding:10px 16px;font-family:'Geist',system-ui,sans-serif;font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;white-space:nowrap;text-decoration:none;text-shadow:none!important;opacity:1!important}
header.nav .navlinks a.nav-cta:hover{background:#F5D400!important;border-color:#F5D400!important;color:#0B0C0E!important}
header.nav .navlinks a.nav-cta::after{display:none}

/* Currency switcher (currency.v1.js wraps it and the CTA in .hh-hr) */
header.nav .hh-hr{grid-column:-2;justify-self:end;display:flex;align-items:center;gap:10px}
header.nav select.hh-cur{appearance:none;-webkit-appearance:none;background:rgba(11,12,14,.35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23ECEDEE' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 10px center;color:#ECEDEE;border:1px solid rgba(255,255,255,.28);border-radius:6px;padding:9px 28px 9px 12px;font-family:'Geist',system-ui,sans-serif;font-size:14px;font-weight:500;cursor:pointer}
header.nav select.hh-cur:hover,header.nav select.hh-cur:focus{border-color:#FFE01B;outline:none}
header.nav select.hh-cur option{color:#0B0C0E;background:#fff}

@media (max-width:880px){
  header.nav>.wrap{grid-template-columns:minmax(0,1fr) auto}
}
@media (max-width:640px){
  header.nav select.hh-cur{padding:8px 24px 8px 9px;font-size:13px;background-position:right 8px center}
  header.nav .hh-hr{gap:6px}
}
@media (max-width:640px){
  header.nav>.wrap{padding-block:16px}
  header.nav .brand{font-size:16px}
  header.nav .navlinks a.nav-cta{padding:9px 13px;font-size:13px}
}

/* ---------- Footer ---------- */
footer.foot{background:#0B0C0E!important;color:#9EA3A9;border-top:1px solid #1F2226;padding-block:64px 0;font-family:'Geist',system-ui,-apple-system,sans-serif}
footer.foot .fgrid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:40px}
footer.foot .fbrand .b{font-family:'Geist',system-ui,sans-serif;font-size:19px;font-weight:700;letter-spacing:.02em;text-transform:none;color:#ECEDEE}
footer.foot .fbrand .b .amp{color:#FFE01B}
footer.foot .fbrand p{margin-top:14px;font-size:14px;line-height:1.6;color:#8B9096;max-width:280px}
footer.foot .fcol h4{margin:0 0 12px;font-family:'Geist Mono',ui-monospace,monospace;font-size:11px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:#6E737A!important}
footer.foot .fcol a{display:block;margin-bottom:12px;font-size:14px;color:#9EA3A9;text-decoration:none}
footer.foot .fcol a:hover{color:#ECEDEE}
footer.foot .fbase{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:40px;padding-block:20px;border-top:1px solid #1A1D20;font-family:'Geist Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:#6E737A}

@media (max-width:900px){
  footer.foot .fgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
}
@media (max-width:560px){
  footer.foot .fgrid{grid-template-columns:1fr}
}

/* phone: compact header so logo, currency and CTA fit side by side */
@media (max-width:480px){
  header.nav>.wrap{column-gap:8px}
  header.nav .brand{font-size:15px;letter-spacing:0}
  header.nav select.hh-cur{padding:7px 20px 7px 8px;font-size:12px;background-position:right 6px center}
  header.nav .navlinks a.nav-cta{padding:8px 10px;font-size:12px}
  header.nav .hh-hr{gap:6px}
}
@media (max-width:360px){header.nav .brand{font-size:14px}}

/* Header (and its currency picker) above the hero caption on destination / event / guide heroes */
header.nav.nav--hero{z-index:70}