/* ============================================================
   World Destinations — dark theme
   Loaded last.

   Design note: the token MEANINGS are kept intact — --paper is still
   "the light colour" and --ink is still "the dark colour". Inverting
   them would silently flip every `background:var(--ink); color:var(--paper)`
   rule (hero headline, CTA panels, footer, buttons) to dark-on-dark.
   Instead we flip the page surfaces and leave the dark panels alone,
   since those were already light-text-on-dark and stay correct.

   Contrast: body 15.9:1 · muted 7.3:1 · cyan 8.9:1 · gold 8.4:1.
   ============================================================ */

:root{
  --ink:    #131211;   /* page background            */
  --sand:   #1c1a18;   /* alternating sections       */
  --deep:   #0c0b0b;   /* CTA / footer / globe panels*/
  --paper:  #f4f1ee;   /* primary text               */
  --ink-2:  #a8a19b;   /* secondary text             */
  --line:   #2e2a28;
  --depth:  #0cc1e0;   /* accent text — cyan reads on dark */
  --gold:   #c9a96e;   /* premium accent: 24/7, markers, promises */
}

html, body{ background:var(--ink); color:var(--paper); }
::selection{ background:var(--lagoon); color:#0c0b0b; }

/* ---------- panels that need to sit deeper than the page ---------- */
.cta, .ft, .globe, .ctaStrip, .pkgAside__box, .drawer,
.hero, .banner, .pkgHero{ background:var(--deep); }
.ft, .cta, .ctaStrip, .globe{ border-block:1px solid var(--line); }
.ft{ border-bottom:0; }

/* ---------- surfaces that were light and must now be dark ---------- */
.svcCard{ background:var(--ink); }
.sec--sand .svcCard{ background:var(--sand); }
.svcCard a:hover, .sec--sand .svcCard a:hover{ background:var(--deep); }
.contactCard{ background:var(--ink); }
.admin, .admin__row{ background:var(--ink); }
.pageHead{ border-bottom:1px solid var(--line); }
.pageHead--legal{ background:var(--ink); }
.svcGrid, .contactCards{ background:var(--line); border-color:var(--line); }

/* ---------- header: fixed, and readable at every scroll position ----------
   `position:sticky` silently fails here because body has overflow-x:hidden,
   which makes body a scroll container. Fixed is the reliable choice. */
.hdr.is-static{ position:fixed; }
.hdr.is-solid{
  background:rgba(19,18,17,.93);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  box-shadow:none;
  border-bottom:1px solid var(--line);
}
.hdr.is-solid .brand__name,
.hdr.is-solid .nav a,
.hdr.is-solid .burger,
.hdr.is-solid .hdr__callNum{ color:var(--paper); }
.hdr.is-solid .hdr__end .lnk{ color:var(--paper); }
.hdr.is-solid .hdr__end .lnk::after{ background:rgba(244,241,238,.45); }
.nav a[aria-current="page"]{ color:var(--gold); }
.nav a[aria-current="page"]::after{ transform:scaleX(1); background:var(--gold); }

/* the 24/7 mark — gold, not cyan */
.hdr__callLabel{ color:var(--gold); letter-spacing:.28em; font-weight:600; }
.ft__dot{ background:var(--gold); animation:none; box-shadow:none; }
.ft__hours, .pkgAside__hrs{ color:var(--ink-2); }
.clock__lead{ color:var(--gold); }

/* ---------- gold as the premium accent ---------- */
.eyebrow::before{ background:var(--gold); }
.step__n, .svcRow__n{ color:var(--gold); }
.ticks li::before{ background:var(--gold); }
.note{ border-left-color:var(--gold); }
.svcRow__promise{ color:var(--gold); }
.ft__col .micro, .pkgAside__box .micro{ color:var(--gold); }
.drawer__nav a em{ color:var(--gold); }
.drawer__mail{ border-bottom-color:var(--gold); }
.cta__meta a{ border-bottom-color:rgba(201,169,110,.75); }
.cta__meta a:hover{ border-color:var(--gold); }
a.contactCard__big{ border-bottom-color:var(--gold); }
.article__sig a{ border-bottom-color:var(--gold); }
.ft__legal a:hover, .crumbs a:hover{ color:var(--gold); }
.admin__smtp.is-warn{ color:var(--gold); }

/* ---------- text that meant "strongest ink on a light page" ----------
   These read as dark-on-dark once the surface flips, so they become the
   light colour instead. Note .btn keeps color:var(--ink) deliberately —
   it is dark text on a cyan fill, which is still correct. */
.split__r .lead,
.article__lead,
.legal__intro,
.contactCard__big,
.svcPromise,
.ticks li strong,
.admin__count,
.admin__rowHead .h3{ color:var(--paper); }

/* ---------- links on the now-dark page ---------- */
.lnk{ color:var(--paper); }
.lnk::after{ background:rgba(244,241,238,.42); }
.lnk:hover::after, .lnk:focus-visible::after{ background:var(--gold); }
.lnk--light::after{ background:rgba(244,241,238,.42); }

/* ---------- chips ---------- */
.chip{ color:var(--paper); border-color:var(--line); }
.chip:hover{ border-color:var(--ink-2); }
.chip.is-on{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.chip.is-on span{ color:var(--depth); }

/* ---------- buttons ---------- */
.btn, .btn--wa{ background:var(--lagoon); color:#0c0b0b; }
.btn:hover, .btn--wa:hover{ background:var(--gold); color:#0c0b0b; }
/* .btn--ghost also carries .btn, so the fill above must be undone here */
.btn--ghost{ background:transparent; color:var(--paper); border-color:rgba(244,241,238,.32); }
.btn--ghost:hover{ border-color:var(--gold); background:rgba(201,169,110,.12); }
.pkgCard__tag{ background:var(--lagoon); color:#0c0b0b; }
.skip{ background:var(--lagoon); color:#0c0b0b; }

/* ---------- imagery: lighter scrims now the page is already dark ---------- */
.hero__media::after{
  background:linear-gradient(180deg, rgba(12,11,11,.6) 0%, rgba(12,11,11,.22) 34%, rgba(12,11,11,.94) 100%);
}
.pkgHero__media::after{
  background:linear-gradient(180deg, rgba(12,11,11,.72) 0%, rgba(12,11,11,.42) 40%, rgba(12,11,11,.95) 100%);
}
.banner__img{ opacity:.5; }
.clock{ background:rgba(12,11,11,.66); border-top-color:var(--line); }
.tz{ border-left-color:var(--line); }
.card__img, .pkgCard__img, .col__img, .postCard__img,
.postRow__img, .svcRow__img{ background:var(--sand); }

/* ---------- forms ---------- */
.field input, .field textarea, .field select{ border-bottom-color:rgba(244,241,238,.24); }
.field select option{ background:#1c1a18; color:#f4f1ee; }
.form__note{ color:var(--lagoon); }
.form__note.is-bad{ color:#ff8f7e; }
.field.is-bad input, .field.is-bad textarea, .field.is-bad select{ border-bottom-color:#ff8f7e; }

/* ---------- rules and focus ---------- */
:focus-visible{ outline-color:var(--gold); }
.legal a, .pageHead__lead a{ color:var(--depth); border-bottom-color:var(--line); }
.legal a:hover{ border-color:var(--depth); }
.legal__note, .note{ background:var(--sand); }
.globe__hint{ color:var(--ink-2); }
.admin__smtp.is-ok{ color:var(--depth); }

@media (prefers-reduced-motion:reduce){ .ft__dot{ animation:none; } }