@charset "UTF-8";
/* ===================================================================
   Ocean Haven — destination (country) detail layer
   Loaded only by page-country.php, after ds.css.

   Rules:
   - Every generic affordance (section, shell, card, rail, chip, modal,
     sticky bar, empty state, accordion) comes from ds.css. Nothing in
     this file redefines one of those blocks.
   - Everything new is prefixed .oh-dest- .
   - No price / rating / availability / weather affordance exists here,
     because the site stores none of that data.
   =================================================================== */

:root{
  /* Height the site header occupies once it is stuck. dest.js overwrites
     this from the measured header, so it is a starting value, not a
     hardcoded truth. */
  --oh-dest-stick:80px;
  --oh-dest-navh:60px;
}

/* Anchored scrolling has to clear the stuck header AND the section nav. */
html{scroll-padding-top:calc(var(--oh-dest-stick) + var(--oh-dest-navh) + 12px)}
.oh-dest-anchor{scroll-margin-top:calc(var(--oh-dest-stick) + var(--oh-dest-navh) + 12px)}

/* ------------------------------------------------------------------
   1. HERO
   ------------------------------------------------------------------ */
.oh-dest-hero{
  position:relative;
  display:flex;
  align-items:flex-end;
  min-height:clamp(440px,74vh,760px);
  padding-block:calc(var(--hd) + var(--oh-s6)) var(--oh-s7);
  overflow:hidden;
  background:var(--green-d);
  isolation:isolate;
}
.oh-dest-hero__media{position:absolute;inset:0;z-index:-2}
.oh-dest-hero__img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.03);
}
.oh-dest-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(to top,rgba(22,33,27,.86) 0%,rgba(22,33,27,.52) 38%,rgba(22,33,27,.24) 66%,rgba(22,33,27,.46) 100%);
}
.oh-dest-hero__in{position:relative;width:100%;display:flex;flex-direction:column;gap:var(--oh-s3)}

.oh-dest-crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:0;padding:0;list-style:none;
  font-family:var(--sans);font-size:var(--oh-fs-micro);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(250,246,243,.76);
}
.oh-dest-crumbs li{display:inline-flex;align-items:center;gap:8px}
.oh-dest-crumbs li + li::before{content:"/";opacity:.5}
.oh-dest-crumbs a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color var(--oh-dur) var(--oh-ease),color var(--oh-dur) var(--oh-ease)}
.oh-dest-crumbs a:hover{color:var(--white);border-bottom-color:currentColor}
.oh-dest-crumbs [aria-current="page"]{color:var(--white)}

.oh-dest-hero .oh-eyebrow{color:var(--tan)}
.oh-dest-hero__title{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(42px,6.6vw,86px);line-height:1.02;letter-spacing:-.015em;
  color:var(--white);margin:0;text-wrap:balance;
  text-shadow:0 2px 26px rgba(22,33,27,.35);
}
.oh-dest-hero__facts{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--oh-s2) var(--oh-s4);
  margin:var(--oh-s2) 0 0;padding:0;list-style:none;
}
.oh-dest-hero__fact{
  display:inline-flex;align-items:baseline;gap:9px;
  font-family:var(--sans);font-size:var(--oh-fs-base);color:rgba(250,246,243,.9);
}
.oh-dest-hero__fact b{
  font-family:var(--serif);font-weight:500;font-size:clamp(24px,2.4vw,34px);
  line-height:1;color:var(--white);
}
.oh-dest-hero__fact span{letter-spacing:.06em;text-transform:lowercase}
.oh-dest-hero__cta{display:flex;flex-wrap:wrap;gap:var(--oh-s2);margin:var(--oh-s3) 0 0}
.oh-dest-hero__cta .oh-btn--ghost{background:rgba(254,253,251,.94);border-color:transparent}

/* ------------------------------------------------------------------
   2. STICKY SECTION NAV
   ------------------------------------------------------------------ */
.oh-dest-nav{
  position:sticky;top:var(--oh-dest-stick);z-index:calc(var(--oh-z-sticky) - 1);
  background:rgba(254,253,251,.93);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.oh-dest-nav__in{
  display:flex;align-items:center;gap:var(--oh-s3);
  min-height:var(--oh-dest-navh);
}
.oh-dest-nav__list{
  display:flex;align-items:center;gap:2px;
  margin:0;padding:0;list-style:none;
  flex:1 1 auto;min-width:0;
  overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.oh-dest-nav__list::-webkit-scrollbar{display:none}
.oh-dest-nav__link{
  position:relative;display:inline-flex;align-items:center;gap:7px;
  min-height:46px;padding:0 var(--oh-s3);white-space:nowrap;text-decoration:none;
  font-family:var(--sans);font-size:var(--oh-fs-sm);font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  transition:color var(--oh-dur) var(--oh-ease);
}
.oh-dest-nav__link::after{
  content:"";position:absolute;left:var(--oh-s2);right:var(--oh-s2);bottom:6px;height:2px;
  background:var(--bronze);transform:scaleX(0);transform-origin:center;
  transition:transform var(--oh-dur) var(--oh-ease);
}
.oh-dest-nav__link:hover{color:var(--ink)}
.oh-dest-nav__link.is-current{color:var(--ink)}
.oh-dest-nav__link.is-current::after{transform:scaleX(1)}
.oh-dest-nav__n{
  font-size:10px;font-weight:600;letter-spacing:.04em;color:var(--bronze);
  background:var(--cream);border:1px solid var(--line);border-radius:var(--oh-radius-pill);
  padding:2px 7px;
}
.oh-dest-nav__cta{flex:none}

/* ------------------------------------------------------------------
   3. OVERVIEW — owner-written copy, rendered untouched
   ------------------------------------------------------------------ */
.oh-dest-prose{
  font-size:var(--oh-fs-base);line-height:1.8;color:var(--body);
}
.oh-dest-prose > :first-child{margin-top:0}
.oh-dest-prose > :last-child{margin-bottom:0}
.oh-dest-prose h2{
  font-family:var(--serif);font-weight:500;font-size:var(--oh-fs-h2);line-height:1.2;
  color:var(--ink);margin:var(--oh-s6) 0 var(--oh-s3);text-wrap:balance;
}
.oh-dest-prose h3{
  font-family:var(--serif);font-weight:500;font-size:var(--oh-fs-h3);line-height:1.3;
  color:var(--ink);margin:var(--oh-s5) 0 var(--oh-s2);
}
.oh-dest-prose h4,.oh-dest-prose h5{
  font-family:var(--sans);font-weight:600;font-size:15px;letter-spacing:.04em;
  color:var(--ink);margin:var(--oh-s4) 0 var(--oh-s2);
}
.oh-dest-prose p{margin:0 0 var(--oh-s3)}
.oh-dest-prose ul,.oh-dest-prose ol{margin:0 0 var(--oh-s3);padding-left:1.25em}
.oh-dest-prose li{margin:0 0 8px}
.oh-dest-prose a{color:var(--green);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.oh-dest-prose a:hover{color:var(--bronze)}
.oh-dest-prose img{max-width:100%;height:auto;border-radius:var(--oh-radius-sm)}
.oh-dest-prose iframe,.oh-dest-prose video{max-width:100%}
.oh-dest-prose blockquote{
  margin:var(--oh-s4) 0;padding:var(--oh-s3) var(--oh-s4);
  border-left:2px solid var(--bronze);background:var(--cream);border-radius:0 var(--oh-radius-sm) var(--oh-radius-sm) 0;
  font-family:var(--serif);font-size:18px;line-height:1.7;color:var(--ink);
}
/* Legacy Elementor / Unlimited-Elements markup lives inside this copy and
   brings its own grid. Contain it rather than restyle it. */
.oh-dest-prose table{width:100%;border-collapse:collapse;font-size:var(--oh-fs-sm)}
.oh-dest-prose .oh-dest-prose__scroll{overflow-x:auto}
.oh-dest-prose img[width]{height:auto}

.oh-dest-jump{margin:0 0 var(--oh-s5)}
.oh-dest-jump__lab{
  font-family:var(--sans);font-size:var(--oh-fs-eyebrow);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--bronze);
  margin:0 0 var(--oh-s2);
}

/* ------------------------------------------------------------------
   4. QUICK FACTS
   ------------------------------------------------------------------ */
.oh-dest-facts{
  display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--oh-radius);overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.oh-dest-fact{
  display:flex;flex-direction:column;gap:6px;
  padding:var(--oh-s4) var(--oh-s4) calc(var(--oh-s4) + 2px);
  background:var(--white);
}
.oh-dest-fact__v{
  font-family:var(--serif);font-weight:500;font-size:clamp(30px,3.4vw,46px);
  line-height:1;color:var(--ink);letter-spacing:-.01em;
}
.oh-dest-fact__u{
  font-family:var(--sans);font-size:var(--oh-fs-sm);font-weight:500;
  color:var(--body);letter-spacing:.02em;
}
.oh-dest-fact__k{
  font-family:var(--sans);font-size:var(--oh-fs-eyebrow);font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:4px;
}
.oh-dest-facts__note{
  margin:var(--oh-s3) 0 0;font-size:var(--oh-fs-sm);color:var(--muted);line-height:1.65;
}

/* ------------------------------------------------------------------
   5. GALLERY + LIGHTBOX
   ------------------------------------------------------------------ */
.oh-dest-gal{
  display:grid;gap:var(--oh-s2);
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  grid-auto-rows:1fr;
}
.oh-dest-gal__cell{
  position:relative;margin:0;padding:0;border:0;background:var(--card);
  aspect-ratio:4/3;overflow:hidden;border-radius:var(--oh-radius-sm);
  cursor:zoom-in;display:block;width:100%;
  transition:transform var(--oh-dur) var(--oh-ease),box-shadow var(--oh-dur) var(--oh-ease);
}
.oh-dest-gal__cell img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--oh-dur-slow) var(--oh-ease),filter var(--oh-dur) var(--oh-ease);
}
.oh-dest-gal__cell:hover{transform:translateY(-3px);box-shadow:var(--oh-shadow-2)}
.oh-dest-gal__cell:hover img{transform:scale(1.06)}
.oh-dest-gal__cell::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(22,33,27,.3),rgba(22,33,27,0) 45%);
  opacity:0;transition:opacity var(--oh-dur) var(--oh-ease);
}
.oh-dest-gal__cell:hover::after,.oh-dest-gal__cell:focus-visible::after{opacity:1}
/* first cell reads as the lead frame when there is room for it */
.oh-dest-gal--rich .oh-dest-gal__cell:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}

.oh-dest-gal__more{
  display:flex;align-items:center;justify-content:center;gap:var(--oh-s2);
  margin:var(--oh-s4) 0 0;
}
.oh-dest-gal__count{
  font-family:var(--sans);font-size:var(--oh-fs-sm);color:var(--muted);letter-spacing:.06em;
}

/* Lightbox — rides on .oh-modal from ds.css (ds.js owns open/close, Esc and
   the focus trap; dest.js only adds arrow-key paging and the image swap). */
.oh-dest-lb .oh-modal__panel{
  width:min(1180px,100%);max-height:92vh;background:var(--green-d);
  border-radius:var(--oh-radius-lg);
}
.oh-dest-lb__fig{
  position:relative;margin:0;display:flex;align-items:center;justify-content:center;
  background:#0f1713;min-height:min(62vh,620px);
}
.oh-dest-lb__img{
  display:block;max-width:100%;max-height:min(74vh,760px);
  width:auto;height:auto;object-fit:contain;
}
.oh-dest-lb__bar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--oh-s3);
  padding:var(--oh-s3) var(--oh-s4);
  color:rgba(250,246,243,.86);font-family:var(--sans);font-size:var(--oh-fs-sm);
  border-top:1px solid rgba(250,246,243,.12);
}
.oh-dest-lb__cap{min-width:0;display:flex;flex-direction:column;gap:3px}
.oh-dest-lb__cap strong{
  font-family:var(--serif);font-weight:500;font-size:17px;color:var(--white);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.oh-dest-lb__cap a{color:var(--tan);text-decoration:none;letter-spacing:.1em;text-transform:uppercase;font-size:10.5px;font-weight:600}
.oh-dest-lb__cap a:hover{text-decoration:underline}
.oh-dest-lb__idx{flex:none;font-variant-numeric:tabular-nums;letter-spacing:.1em}
.oh-dest-lb__ctrls{display:flex;align-items:center;gap:var(--oh-s1);flex:none}
.oh-dest-lb__btn{
  display:inline-grid;place-items:center;width:46px;height:46px;flex:none;
  border:1px solid rgba(250,246,243,.22);border-radius:var(--oh-radius-pill);
  background:rgba(254,253,251,.08);color:var(--white);cursor:pointer;
  transition:background-color var(--oh-dur) var(--oh-ease),border-color var(--oh-dur) var(--oh-ease);
}
.oh-dest-lb__btn:hover{background:rgba(254,253,251,.2);border-color:rgba(250,246,243,.45)}
.oh-dest-lb__btn[disabled]{opacity:.32;pointer-events:none}
.oh-dest-lb__btn svg{width:19px;height:19px}
.oh-dest-lb__close{
  position:absolute;top:var(--oh-s3);right:var(--oh-s3);z-index:3;
  background:rgba(22,33,27,.55);
}
.oh-dest-lb__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  background:rgba(22,33,27,.55);
}
.oh-dest-lb__nav--prev{left:var(--oh-s3)}
.oh-dest-lb__nav--next{right:var(--oh-s3)}

/* ------------------------------------------------------------------
   6. EXPERIENCES HERE
   ------------------------------------------------------------------ */
.oh-dest-exp{
  display:grid;gap:var(--oh-s2);
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  margin:0;padding:0;list-style:none;
}
.oh-dest-exp__item{display:flex}
.oh-dest-exp__link{
  display:flex;align-items:center;justify-content:space-between;gap:var(--oh-s3);
  width:100%;min-height:62px;padding:var(--oh-s2) var(--oh-s3) var(--oh-s2) var(--oh-s4);
  background:var(--white);border:1px solid var(--line);border-radius:var(--oh-radius-pill);
  text-decoration:none;color:var(--ink);
  transition:border-color var(--oh-dur) var(--oh-ease),box-shadow var(--oh-dur) var(--oh-ease),
             transform var(--oh-dur) var(--oh-ease),background-color var(--oh-dur) var(--oh-ease);
}
.oh-dest-exp__link:hover{
  border-color:var(--bronze);box-shadow:var(--oh-shadow-2);transform:translateY(-2px);background:var(--cream);
}
.oh-dest-exp__name{
  font-family:var(--sans);font-size:var(--oh-fs-base);font-weight:500;
  line-height:1.35;min-width:0;
}
.oh-dest-exp__n{
  flex:none;display:inline-grid;place-items:center;min-width:40px;height:40px;padding:0 10px;
  font-family:var(--serif);font-size:18px;color:var(--green);
  background:var(--cream);border-radius:var(--oh-radius-pill);
  font-variant-numeric:tabular-nums;
}
.oh-dest-exp__link:hover .oh-dest-exp__n{background:var(--white)}

/* ------------------------------------------------------------------
   7. ITINERARIES
   ------------------------------------------------------------------ */
.oh-dest-filters{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--oh-s2);
  margin:0 0 var(--oh-s5);
}
.oh-dest-filters__lab{
  font-family:var(--sans);font-size:var(--oh-fs-eyebrow);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 var(--oh-s1) 0 0;
}
.oh-dest-trips{
  display:grid;gap:var(--oh-s4);
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  margin:0;padding:0;list-style:none;
}
.oh-dest-trips > li{display:flex;min-width:0}
.oh-dest-trips > li > .oh-card{width:100%}
.oh-dest-trips > li[hidden]{display:none}
.oh-dest-trips__none{margin:var(--oh-s4) 0 0}

/* ------------------------------------------------------------------
   8. RELATED DESTINATIONS
   ------------------------------------------------------------------ */
.oh-dest-rel__card{
  position:relative;display:block;overflow:hidden;height:100%;
  border-radius:var(--oh-radius);background:var(--green-d);
  text-decoration:none;isolation:isolate;
  aspect-ratio:4/5;
  box-shadow:var(--oh-shadow-1);
  transition:box-shadow var(--oh-dur) var(--oh-ease),transform var(--oh-dur) var(--oh-ease);
}
.oh-dest-rel__card:hover{transform:translateY(-6px);box-shadow:var(--oh-shadow-3)}
.oh-dest-rel__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform var(--oh-dur-slow) var(--oh-ease);
}
.oh-dest-rel__card:hover .oh-dest-rel__img{transform:scale(1.06)}
.oh-dest-rel__card::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(22,33,27,.82) 0%,rgba(22,33,27,.18) 52%,rgba(22,33,27,.05) 100%);
}
.oh-dest-rel__body{
  position:absolute;left:0;right:0;bottom:0;
  padding:var(--oh-s4);display:flex;flex-direction:column;gap:5px;
}
.oh-dest-rel__name{
  font-family:var(--serif);font-weight:500;font-size:var(--oh-fs-h3);line-height:1.2;
  color:var(--white);margin:0;
}
.oh-dest-rel__n{
  font-family:var(--sans);font-size:var(--oh-fs-sm);color:rgba(250,246,243,.84);
  letter-spacing:.05em;
}

/* ------------------------------------------------------------------
   9. STICKY MOBILE ACTION BAR
   ------------------------------------------------------------------ */
.oh-dest-bar{display:none}
@media (max-width:680px){
  .oh-dest-bar{display:flex}
}
.oh-dest-bar__n{
  position:absolute;top:2px;right:2px;min-width:19px;height:19px;padding:0 5px;
  display:none;place-items:center;
  font-family:var(--sans);font-size:10px;font-weight:700;line-height:19px;
  color:var(--cream);background:var(--oh-save);border-radius:var(--oh-radius-pill);
}
.oh-dest-bar__save{position:relative}
.oh-dest-bar__save.has-saved .oh-dest-bar__n{display:grid}

/* ------------------------------------------------------------------
   10. EMPTY STATE (no destination term / no safaris)
   ------------------------------------------------------------------ */
.oh-dest-empty{max-width:var(--shell);margin-inline:auto}
.oh-dest-empty .oh-empty{margin-inline:auto}

/* ------------------------------------------------------------------
   11. RESPONSIVE
   ------------------------------------------------------------------ */
@media (max-width:1080px){
  .oh-dest-gal--rich .oh-dest-gal__cell:first-child{grid-column:span 2;grid-row:span 1;aspect-ratio:16/9}
}
@media (max-width:680px){
  :root{--oh-dest-navh:54px}
  .oh-dest-hero{min-height:clamp(400px,68vh,560px);padding-block:calc(var(--hd) + var(--oh-s4)) var(--oh-s6)}
  .oh-dest-hero__facts{gap:var(--oh-s2) var(--oh-s3)}
  .oh-dest-hero__cta .oh-btn{flex:1 1 100%}
  .oh-dest-nav__in{gap:var(--oh-s2)}
  .oh-dest-nav__cta{display:none}
  .oh-dest-nav__link{min-height:44px;padding:0 var(--oh-s2);font-size:12px;letter-spacing:.07em}
  .oh-dest-gal{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
  .oh-dest-gal--rich .oh-dest-gal__cell:first-child{grid-column:span 2;grid-row:span 1}
  .oh-dest-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .oh-dest-fact{padding:var(--oh-s3)}
  .oh-dest-trips{grid-template-columns:1fr}
  /* ds.css lifts its own controls to a 46px touch target below 680px; these
     are custom classes, so they have to opt in explicitly. */
  .oh-dest-lb__btn{width:46px;height:46px}
  .oh-dest-lb__bar{flex-wrap:wrap}
  .oh-dest-lb .oh-modal__panel{border-radius:var(--oh-radius-lg) var(--oh-radius-lg) 0 0}
}

@media (prefers-reduced-motion:reduce){
  .oh-dest-hero__img,.oh-dest-gal__cell,.oh-dest-gal__cell img,
  .oh-dest-rel__card,.oh-dest-rel__img{transition:none!important;transform:none!important}
}

@media print{
  .oh-dest-nav,.oh-dest-bar,.oh-dest-lb{display:none!important}
  .oh-dest-hero{min-height:0;padding-block:var(--oh-s4)}
}

/* ------------------------------------------------------------------
   12. LATE FIXES — contrast corrections on the dark hero
   ------------------------------------------------------------------
   .oh-btn--line is ink-on-transparent by design, which disappears on the
   hero's dark scrim. Re-tint it here rather than editing ds.css.
   ------------------------------------------------------------------ */
.oh-dest-hero__cta .oh-btn--line{color:var(--white);border-color:rgba(250,246,243,.55)}
.oh-dest-hero__cta .oh-btn--line:hover{background:var(--white);color:var(--ink);border-color:var(--white)}