/* Unique World Holidays — Destinations page, Belmond-style 2-level
   interactive world map. Navy background (#13294b) continues straight
   from the hero section above it, matching the site's established navy
   branding. Full restart of the flat dot-map + toggle from the previous
   build — see functions.php STEP 17 for the data-model differences.

   Layout: a fixed-width side panel (Level 1/2 text + tour detail card)
   beside a flexible map area on desktop; stacks (map first, panel below)
   on narrow screens. Continent paths and pins are built/classed entirely
   by destinations-map-section.js — this file only styles the classes it
   applies (.uwh-dm-continent, .uwh-dm-pin, etc.), it never targets the
   raw SVG path ids directly. */

.uwh-dm {
  width: 100%;
  /* Was navy (#13294b), matching the map's own color so the whole
     section read as one uninterrupted dark band. Now white — the map
     itself (.uwh-dm-map-svg-wrap below) keeps its own navy/grid look
     completely untouched, it just now sits as a distinct dark card on a
     white section instead of blending into it. */
  background-color: #ffffff;
  /* More breathing room top/bottom/sides than the old 60/20/90 — the
     section previously felt cramped right up against the hero above
     it and the map below. */
  padding: 90px 24px 110px;
}

.uwh-dm-stage {
  /* Widened from 1280px so the map reads as more immersive/full-bleed
     within the section (see .uwh-dm-map-svg-wrap below for the actual
     boxed-look fix) — doesn't affect pin/hover/zoom math, which is all
     computed live off the wrap's own getBoundingClientRect()/
     getScreenCTM() in destinations-map-section.js, not this value. */
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  gap: 56px;
}

/* ---- Side panel (Level 1 text / Level 2 text / tour detail card) ---- */
.uwh-dm-side {
  flex: 0 0 340px;
  position: relative;
  min-height: 320px;
}

.uwh-dm-side-panel {
  display: none;
}
.uwh-dm-side-panel.is-visible {
  display: block;
}

.uwh-dm-side-heading {
  margin: 0 0 16px;
  font-family: Poppins, sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.25;
  /* Was white (readable against the section's old navy background).
     Section is white now, so this switches to the same navy the rest
     of the site uses for headings on a light background (About Us
     hero title, What Sets Us Apart, Trip Finder, tour card titles —
     all #13294b). */
  color: #13294b;
}

.uwh-dm-side-description {
  margin: 0;
  font-family: Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  /* Was rgba(255,255,255,.75) for the same reason as the heading above —
     #5b6472 is this site's standard body-copy gray on a light
     background (matches .uwh-dm-tour-card-desc right below and
     trip-finder.css's own description text). */
  color: #5b6472;
}

/* ---- Tour detail card (replaces the Level 2 default text once a pin is
   clicked) — a light card floating against the dark panel, matching the
   reference's white-card treatment and giving the strongest possible
   contrast for the photo. ---- */
.uwh-dm-tour-card {
  position: relative;
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.uwh-dm-tour-card-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 30px;
  height: 30px;
  padding: 0; /* Same Astra global "Buttons" customizer fix as
    .uwh-dm-zoom-out above: it injects padding: 20px 40px into every
    <button> on the site, which was inflating this one into an 80x40
    OVAL instead of the intended 30x30 circle (confirmed live via
    getComputedStyle) — that's what read as "size/proportions are off"
    and made the × look lost/hard to see inside the oversized shape.
    This was the one button in this file missing that reset. */
  border: none;
  border-radius: 50%;
  background: rgba(1, 34, 69, 0.55);
  color: #ffffff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}
.uwh-dm-tour-card-close:hover,
.uwh-dm-tour-card-close:focus-visible {
  background: rgba(1, 34, 69, 0.85);
  /* Astra's theme-wide "Buttons" customizer style has its own
     `button:hover { color: ... }` rule (class-astra-dynamic-css.php)
     that applies to every <button> on the site, including this one —
     that's what was turning the × blue on hover (it never touched
     .uwh-dm-tour-card-cta below since that's an <a>, not a <button>,
     so Astra's button-hover rule never matched it — nothing to fix
     there). This selector's specificity (0,2,0) already beats Astra's
     `button:hover` (0,1,1), so simply re-asserting white here is
     enough to win — no !important needed. */
  color: #ffffff;
}

.uwh-dm-tour-card-image {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
}

.uwh-dm-tour-card-region {
  margin: 18px 24px 0;
  font-family: Roboto, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #327d81;
}

.uwh-dm-tour-card-title {
  margin: 6px 24px 0;
  font-family: Poppins, sans-serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
  color: #13294b;
}

.uwh-dm-tour-card-desc {
  margin: 10px 24px 0;
  font-family: Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #5b6472;
  /* Clamp to keep card heights consistent regardless of how long a
     tour's short description happens to be. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.uwh-dm-tour-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 18px 24px 24px;
  background: linear-gradient(120deg, #feae02, #fecd48);
  color: #13294b;
  font-family: Poppins, sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 50px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.uwh-dm-tour-card-cta:hover,
.uwh-dm-tour-card-cta:focus-visible {
  filter: brightness(0.96);
  transform: translateY(-2px);
}

/* ---- Map area ---- */
.uwh-dm-map-wrap {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}

/* ---- Level 2 nav tabs (top-left) ----
   Explore/List were non-functional (clicking did nothing) and confusing
   users, and with them gone "Map" would be the only option left to pick
   from — so the whole bar is hidden rather than leaving a single
   unselectable "Map" pill. JS (destinations-map-section.js) still
   toggles this element's `hidden` attribute on zoom in/out same as
   before; that's harmless under this override, so nothing there needed
   to change. */
.uwh-dm-tabs {
  display: none !important;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  gap: 4px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50px;
}

.uwh-dm-tab {
  padding: 8px 20px;
  border: none;
  border-radius: 50px;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  font-family: Poppins, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: not-allowed;
}
.uwh-dm-tab.is-active {
  background: linear-gradient(120deg, #feae02, #fecd48);
  color: #13294b;
  cursor: default;
}

/* ---- Zoom-out control (top-right) ---- */
.uwh-dm-zoom-out {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  width: 42px;
  height: 42px;
  padding: 0; /* Astra's global "Buttons" customizer style (an inline
    <style> block targeting a plain `button` selector) injects
    padding: 20px 40px into every <button> on the site, including this
    icon-only one -- without this reset it inflates the box to an
    80x42 oval instead of the intended 42x42 circle. */
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.24);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.uwh-dm-zoom-out:hover,
.uwh-dm-zoom-out:focus-visible {
  background: rgba(255, 255, 255, 0.36);
  transform: scale(1.06);
}

/* ---- The SVG itself ----
   Was a flat #0d1f3a rectangle — a visibly different shade from the
   section's own #13294b — which is exactly what read as a hard "boxed"
   navy card. Fixed by:
   1) Color blend: base background now matches the section color
      exactly, so there's no seam/edge to see in the first place.
   2) Subtle grid: two low-opacity (5%) repeating-linear-gradient
      layers give a faint cartographic graticule (Belmond-style) —
      only visible over open "ocean", never fights the continent fills.
   3) Edge fade/vignette: a large, heavily-blurred inset box-shadow
      (not a flat border) darkens toward the edges gradually, so the
      map still reads as a distinct "map area" without a hard cut line.
   4) border-radius reduced (not removed) — soft corners, not a card.
   width/aspect-ratio/position:relative/overflow are all UNCHANGED —
   destinations-map-section.js's pin/hover/zoom math reads this
   element's live getBoundingClientRect()/getScreenCTM() on every
   interaction and on resize, so nothing here touches its geometry. */
.uwh-dm-map-svg-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 500;
  overflow: hidden;
  border-radius: 6px;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.05) 0,
      rgba(255, 255, 255, 0.05) 1px,
      transparent 1px,
      transparent 48px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.05) 0,
      rgba(255, 255, 255, 0.05) 1px,
      transparent 1px,
      transparent 48px
    ),
    #13294b;
  box-shadow: inset 0 0 110px 36px rgba(8, 18, 36, 0.55);
}
.uwh-dm-map-svg-wrap svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Continent shapes — classed onto the SVG's <path id="continent-*">
   elements by destinations-map-section.js on init (see
   assets/images/destinations-world-map.svg for the raw shapes). */
.uwh-dm-continent {
  fill: #3d4f70;
  stroke: #13294b;
  stroke-width: 1.5;
  transition: fill 0.2s ease;
  /* Chrome draws a default focus rectangle around SVG elements holding
     programmatic focus (tabindex="0") even on a plain mouse click here,
     not just real keyboard nav — confirmed live: clicking a continent
     left a visible white box around it through the whole zoom. Removed
     here and replaced with a real outline ONLY for genuine
     keyboard :focus-visible below, so keyboard accessibility isn't lost,
     just the mouse-click artifact. */
  outline: none;
}
.uwh-dm-continent.is-interactive {
  fill: #55698f;
  cursor: pointer;
  pointer-events: auto;
}
.uwh-dm-continent.is-interactive:hover,
.uwh-dm-continent.is-interactive:focus-visible {
  fill: #7891bd;
}
.uwh-dm-continent.is-interactive:focus-visible {
  outline: 2px solid #feae02;
  outline-offset: 2px;
}
.uwh-dm-continent:not(.is-interactive) {
  pointer-events: none;
  opacity: 0.55;
}

/* ---- Tour pins — plain HTML buttons absolutely positioned over the map
   (not SVG children), so their visual size stays constant regardless of
   the SVG's own zoom transform. See destinations-map-section.js for the
   getScreenCTM()-based positioning math. ---- */
.uwh-dm-pin {
  position: absolute;
  z-index: 2;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  background: linear-gradient(135deg, #feae02, #fecd48);
  border: 2px solid #ffffff;
  border-radius: 3px 3px 3px 0;
  transform: rotate(45deg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transition: transform 0.2s ease;
  padding: 0;
}
.uwh-dm-pin:hover,
.uwh-dm-pin:focus-visible,
.uwh-dm-pin.is-active {
  transform: rotate(45deg) scale(1.3);
}

/* ---- Pin preview tooltip (thumbnail + title) ---- */
.uwh-dm-pin-tooltip {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 220px;
  background: #ffffff;
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 16px));
}
.uwh-dm-pin-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: #ffffff;
}
.uwh-dm-pin-tooltip img {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  object-fit: cover;
  flex: none;
}
.uwh-dm-pin-tooltip span {
  font-family: Poppins, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: #13294b;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .uwh-dm-stage {
    gap: 28px;
  }
  .uwh-dm-side {
    flex: 0 0 280px;
  }
  .uwh-dm-side-heading {
    font-size: 26px;
  }
  /* Pins are a fixed pixel size (not %), so as the map itself scales
     down with the viewport they'd otherwise read as proportionately
     bigger and bigger — sized down a step here and again below so they
     stay visually balanced against the shrinking map at every width.
     margin is kept at exactly half of width/height (same relationship
     as the 16px default) so the diamond stays centered on its true
     coordinate — see destinations-map-section.js's getScreenCTM() pin
     math, which this needs to still land dead-center on. */
  .uwh-dm-pin {
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
  }
}

@media (max-width: 782px) {
  .uwh-dm {
    padding: 56px 16px 72px;
  }
  .uwh-dm-stage {
    flex-direction: column;
  }
  .uwh-dm-side {
    flex: 1 1 auto;
    min-height: 0;
    order: 2;
  }
  .uwh-dm-map-wrap {
    order: 1;
  }
  .uwh-dm-tour-card-image {
    height: 160px;
  }
  /* One step smaller again at phone widths — still comfortably tappable
     (the button's full box is the tap target, not just the visible
     diamond) without crowding/overlapping on a much narrower map. */
  .uwh-dm-pin {
    width: 13px;
    height: 13px;
    margin: -6.5px 0 0 -6.5px;
  }
}

/* [hidden] guard: the three elements above all set their own `display`
   (flex, for the layout each needs while visible), which — same
   specificity as the browser's built-in `[hidden] { display: none }` UA
   rule — would otherwise win by simply loading later in the cascade,
   defeating destinations-map-section.js's `el.hidden = true/false`
   toggles entirely (confirmed live: tabs + zoom-out control were visible
   on page load before this rule existed). Higher-specificity attribute
   selectors here restore the expected behaviour without needing
   `!important`. */
.uwh-dm-tabs[hidden],
.uwh-dm-zoom-out[hidden],
.uwh-dm-pin-tooltip[hidden] {
  display: none;
}