/* ==========================================================================
   V2 CHROME — global header + off-canvas drawer + footer + WhatsApp FAB.
   Loaded on every page EXCEPT the front page (which uses v2-home.css, that
   already contains the chrome). Everything here is scoped to .hdr / .ftr /
   .v2drawer / .fab so it never restyles a page's body content.
   ========================================================================== */
:root{
  --navy:#1E2B47; --navy-2:#172238; --navy-3:#2B3A5C;
  --icon:#EC6443; --icon-soft:#FDECE7; --cta:#C8461F; --cta-hover:#A8391A;
  --accent-on-dark:#F28A6E; --blue:#1D4ED8; --green:#1B7F4C; --star:#E89B1C;
  --bg:#FFFFFF; --bg-2:#F5F7FB; --ph:#DCE3EE; --line:#E6EAF1;
  --ink:#1E2B47; --ink-2:#3A4660; --ink-3:#56617A;
  --maxw:1200px; --gut:clamp(16px, 6vw, 120px);
  --font-display:"Fraunces", Georgia, serif;
  --font-body:"Inter", -apple-system, "Segoe UI", sans-serif;
}
.hdr, .hdr *, .ftr, .ftr *, .v2drawer, .v2drawer *, .fab, .fab *{ font-family:var(--font-body); box-sizing:border-box; }
.hdr img, .ftr img, .v2drawer img{ display:block; max-width:100%; }
.hdr .wrap, .ftr .wrap{ width:100%; max-width:calc(var(--maxw) + 2*var(--gut)); margin-inline:auto; padding-inline:var(--gut); }

/* --- buttons (only in the header) --- */
.hdr .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 24px; border-radius:999px; font-family:inherit; font-size:14px; font-weight:600; line-height:1; border:1.5px solid transparent; cursor:pointer; text-decoration:none !important; white-space:nowrap; transition:background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; }
.hdr .btn:hover{ transform:translateY(-1px); }
.hdr .btn--cta{ background:var(--cta); color:#fff; }
.hdr .btn--cta:hover{ background:var(--cta-hover); color:#fff; }
.hdr .btn--sm{ min-height:44px; padding:0 20px; font-size:13.5px; }

/* --- header --- */
.hdr{ position:sticky; top:0; z-index:100; background:rgba(255,255,255,.95); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.hdr__bar{ min-height:80px; display:flex; align-items:center; gap:32px; }
/* height:auto !important defeats the theme's img[width][height]{height:auto}
   (our logos carry width/height attrs); matches the home-page logo size. */
.hdr__logo img{ height:42px !important; width:auto !important; }
.nav{ display:flex; gap:4px; }
.nav a{ padding:10px 13px; font-size:14px; font-weight:500; color:var(--ink); border-radius:10px; text-decoration:none; white-space:nowrap; }
.nav a:hover{ background:var(--bg-2); color:var(--cta); text-decoration:none; }
.nav .btn{ display:none; }
.hdr__side{ margin-left:auto; display:flex; align-items:center; gap:14px; }
/* Account button — a fixed-size circle, so nothing in the bar can reflow with
   the length of a phone number or a display name. */
.hdr__acct{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:999px; border:1px solid #DCE2EC; background:#fff; color:var(--ink); text-decoration:none; transition:border-color .2s ease, color .2s ease, background .2s ease; }
.hdr__acct:hover{ border-color:var(--navy); color:var(--cta); text-decoration:none; }
.hdr__acct .ico{ display:inline-flex; color:var(--icon); }
.hdr__acct:hover .ico{ color:var(--cta); }

/* Listing cards: the per-person rate for a party of two, beside the "from"
   figure, which on a tiered tour is the largest party's rate. */
.met-p2{ display:block; margin-top:2px; font-size:11.5px; line-height:1.35; color:var(--ink-3); font-weight:500; }
/* Signed in: the initial, in the brand navy, so it reads as "you" at a glance. */
.hdr__acct.is-in{ background:var(--navy); border-color:var(--navy); color:#fff; }
.hdr__acct.is-in:hover{ background:var(--cta); border-color:var(--cta); color:#fff; }
.hdr__acct-av{ font-size:15px; font-weight:700; line-height:1; }
.lang{ display:flex; border:1px solid #DCE2EC; border-radius:999px; overflow:hidden; font-size:12px; font-weight:600; }
.lang a{ padding:8px 12px; color:var(--ink-3); text-decoration:none; }
.lang a[aria-current="true"]{ background:var(--navy); color:#fff; }
.burger{ display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:12px; background:#fff; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.burger span{ width:18px; height:2px; background:var(--navy); border-radius:2px; transition:transform .2s ease, opacity .2s ease; }
/* Six nav links are a tight fit beside the logo and the CTA, so the nav gives
   up some of its own padding below 1300 rather than letting anything wrap.
   The phone number used to sit here too and was the thing that broke: it wrapped
   to two lines around 1200-1300px. An earlier fix measured the BAR staying one
   line — it did — and missed that the text inside it was wrapping. It is now an
   account button of fixed width, which cannot reflow whatever it contains. */
@media (max-width:1300px){
  .hdr__bar{ gap:20px; }
  .nav a{ padding:10px 8px; }
  .hdr__side{ gap:10px; }
}
@media (max-width:1150px){
  .nav a{ padding:10px 6px; font-size:13.5px; }
}
@media (max-width:1000px){
  .burger{ display:flex; }
  .hdr__side > .btn{ display:none; }
  .nav{ display:none; }
}
/* Kept on phones rather than hidden: the drawer has an account link too, but
   that is two taps, and signing in is the one thing a returning traveller comes
   back to do. It just gets a little smaller. */
@media (max-width:420px){ .hdr__bar{ gap:12px; } .hdr__logo img{ height:34px; } .hdr__side{ gap:8px; } .hdr__acct{ width:38px; height:38px; } }

/* --- footer --- */
.ftr{ background:var(--navy); color:#C3CADA; padding-top:64px; font-size:14px; }
.ftr a{ color:#C3CADA; text-decoration:none; }
.ftr a:hover{ color:#fff; text-decoration:underline; }
.ftr__grid{ display:grid; grid-template-columns:4fr 2fr 3fr 3fr; gap:32px; padding-bottom:40px; }
@media (max-width:900px){ .ftr__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:540px){ .ftr__grid{ grid-template-columns:1fr; } }
.ftr__logo img{ height:40px !important; width:auto !important; margin-bottom:16px; }
.ftr__about{ line-height:1.65; max-width:320px; }
.ftr h4{ margin:0 0 16px; font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#fff; }
.ftr ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.ftr__contact li{ display:flex; gap:10px; align-items:center; }
.ftr .social{ display:flex; gap:8px; margin-top:18px; }
.ftr .social a{ width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,.08); color:var(--icon); display:grid; place-items:center; }
.ftr .social a:hover{ background:var(--cta); color:#fff; }
.ftr__bottom{ border-top:1px solid rgba(255,255,255,.12); padding-block:22px; display:flex; flex-wrap:wrap; gap:10px 20px; justify-content:space-between; font-size:12.5px; }
.ftr__legal{ display:flex; gap:20px; flex-wrap:wrap; align-items:center; }
.ftr2{ position:relative; padding-top:120px; overflow:hidden; }
.ftr2::before{ content:""; position:absolute; left:0; right:0; top:0; height:300px; pointer-events:none; opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cg fill='none' stroke='%23F28A6E' stroke-width='1'%3E%3Cpath d='M16 16h24v24H16z'/%3E%3Cpath d='M28 11L45 28 28 45 11 28z'/%3E%3Cpath d='M0 0l8 8M56 0l-8 8M0 56l8-8M56 56l-8-8'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image:linear-gradient(#000 40%, transparent); mask-image:linear-gradient(#000 40%, transparent); }
.ftr2 .wrap{ position:relative; }
.ftr2 .ftr__grid{ grid-template-columns:1.3fr .8fr 1.2fr 1.3fr; gap:40px; padding-bottom:44px; }
.ftr2 .ftr__about{ font-size:14px; }
.ftr2 .social a{ border-radius:14px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04); color:var(--accent-on-dark); }
.ftr2 .social a:hover{ background:var(--cta); border-color:var(--cta); color:#fff; }
.ftr2 ul a{ font-size:14px; }
.ftr2 .ftr__contact li{ gap:12px; font-size:14px; }
.ftr2 .ftr__contact .ico{ flex:none; width:36px; height:36px; border-radius:12px; background:rgba(242,138,110,.12); color:var(--accent-on-dark); display:grid; place-items:center; }
.ftr2 .ftr__bottom{ align-items:center; padding-block:22px 40px; }
.ftr2 .ftr__legal{ align-items:center; }
.ftr__lang{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.18); color:#fff !important; }
.ftr__lang:hover{ text-decoration:none !important; background:rgba(255,255,255,.08); }
.ftr__top{ width:40px; height:40px; border-radius:99px; background:var(--cta); color:#fff !important; display:grid; place-items:center; text-decoration:none !important; }
.ftr__top:hover{ background:var(--cta-hover); }
@media (max-width:900px){ .ftr2{ padding-top:96px; } .ftr2 .ftr__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:540px){ .ftr2 .ftr__grid{ grid-template-columns:1fr; gap:32px; } .ftr2 .ftr__bottom{ flex-direction:column; align-items:flex-start; } }

/* --- WhatsApp FAB --- */
.fab{ position:fixed; right:18px; bottom:18px; z-index:90; display:inline-flex; align-items:center; gap:9px; min-height:52px; padding:0 20px; border-radius:999px; background:var(--green); color:#fff; font-weight:600; font-size:14px; box-shadow:0 12px 30px -10px rgba(27,127,76,.7); text-decoration:none; }
.fab:hover{ color:#fff; text-decoration:none; background:#146239; }
@media (max-width:560px){ .fab span{ display:none; } .fab{ padding:0 15px; } }

/* --- mobile off-canvas drawer --- */
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.v2drawer{ position:fixed; inset:0; z-index:200; visibility:hidden; }
.v2drawer.is-open{ visibility:visible; }
.v2drawer__backdrop{ position:absolute; inset:0; background:rgba(20,29,50,.5); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); opacity:0; transition:opacity .3s ease; }
.v2drawer.is-open .v2drawer__backdrop{ opacity:1; }
.v2drawer__panel{ position:absolute; top:0; right:0; height:100%; width:min(89vw,392px); background:#fff; box-shadow:-24px 0 60px -28px rgba(20,29,50,.55); transform:translateX(100%); transition:transform .34s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.v2drawer.is-open .v2drawer__panel{ transform:translateX(0); }
.v2drawer__head{ position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; padding:16px 20px; background:#fff; border-bottom:1px solid var(--line); }
.v2drawer__logo img{ height:34px !important; width:auto !important; display:block; }
.v2drawer__close{ width:40px; height:40px; border:1px solid var(--line); border-radius:12px; background:#fff; display:flex; align-items:center; justify-content:center; color:var(--navy); cursor:pointer; transition:background-color .18s ease; }
.v2drawer__close:hover{ background:var(--bg-2); }
.v2drawer__body{ padding:18px 20px 26px; display:flex; flex-direction:column; gap:22px; }
.v2drawer__account{ display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:16px; background:var(--bg-2); border:1px solid var(--line); color:var(--ink); text-decoration:none; }
.v2drawer__account:hover{ background:#eef2f8; text-decoration:none; }
.v2drawer__avatar{ width:44px; height:44px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; flex:none; }
.v2drawer__avatar--guest{ background:var(--icon-soft); color:var(--icon); }
.v2drawer__acct-txt{ display:flex; flex-direction:column; line-height:1.32; min-width:0; }
.v2drawer__acct-txt strong{ font-size:14.5px; color:var(--navy); }
.v2drawer__acct-txt span{ font-size:12.5px; color:var(--ink-3); }
.v2drawer__acct-arrow{ margin-left:auto; color:var(--ink-3); flex:none; }
.v2drawer__sec-title{ font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin:0 0 8px; }
.v2drawer__nav{ display:flex; flex-direction:column; }
.v2drawer__nav a{ display:flex; align-items:center; gap:12px; padding:13px 12px; border-radius:12px; color:var(--navy); font-weight:600; font-size:15px; text-decoration:none; }
.v2drawer__nav a .ic{ color:var(--icon); display:inline-flex; flex:none; }
.v2drawer__nav a .chev{ margin-left:auto; color:var(--ph); display:inline-flex; flex:none; }
.v2drawer__nav a:hover{ background:var(--bg-2); color:var(--cta); text-decoration:none; }
.v2drawer__nav a:hover .ic{ color:var(--cta); }
.v2drawer__nav a.is-active{ background:var(--icon-soft); color:var(--cta); }
.v2drawer__nav a.is-active .ic{ color:var(--cta); }
.v2drawer__lang{ display:flex; gap:8px; }
.v2drawer__lang a{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:12px; border:1.5px solid var(--line); border-radius:12px; color:var(--ink); font-weight:600; font-size:14px; text-decoration:none; }
.v2drawer__lang a:hover{ border-color:var(--navy); }
.v2drawer__lang a[aria-current="true"]{ border-color:var(--navy); background:var(--navy); color:#fff; }
.v2drawer__contact{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.v2drawer__tile{ display:flex; flex-direction:column; align-items:center; gap:7px; padding:14px 6px; border-radius:14px; background:var(--bg-2); border:1px solid var(--line); color:var(--navy); font-size:12px; font-weight:600; text-decoration:none; }
.v2drawer__tile:hover{ background:#eef2f8; text-decoration:none; }
.v2drawer__tile .ic{ width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.v2drawer__tile--wa .ic{ background:var(--green); color:#fff; }
.v2drawer__tile--call .ic{ background:var(--icon-soft); color:var(--icon); }
.v2drawer__tile--mail .ic{ background:#e8eefc; color:var(--blue); }
.v2drawer__cta{ position:relative; display:flex; flex-direction:column; gap:2px; padding:16px 46px 16px 18px; border-radius:16px; background:var(--cta); color:#fff; text-decoration:none; transition:background-color .18s ease; }
.v2drawer__cta:hover{ background:var(--cta-hover); color:#fff; text-decoration:none; }
.v2drawer__cta b{ font-size:15.5px; font-weight:700; }
.v2drawer__cta small{ font-size:12px; opacity:.9; }
.v2drawer__cta .ic{ position:absolute; right:16px; top:50%; transform:translateY(-50%); }
.v2drawer__social{ display:flex; gap:10px; justify-content:center; }
.v2drawer__social a{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--bg-2); color:var(--navy); transition:background-color .18s ease, color .18s ease; }
.v2drawer__social a:hover{ background:var(--navy); color:#fff; }
.v2drawer__note{ text-align:center; font-size:11.5px; color:var(--ink-3); }
@media (min-width:1001px){ .v2drawer{ display:none; } }
