/* ═══════════════════════════════════════════
   ANVIR SAFARIS — SINGLE DESTINATION / NATIONAL PARK PAGE
   Loaded on single-destination.php, alongside accommodations.css (shared
   .acc-card/.acc-grid/.acc-wrap/.acc-library/.acc-title rules used by the
   "Where to Stay" section) and accommodation-detail.css (the exact same
   .pagehero-prefixed / .hgal-prefixed looping-photo hero / .acc-lb-prefixed
   lightbox markup and behavior, reused here unchanged — see functions.php).
   Also loaded on page-destinations.php (the "Parks & Destinations" landing
   hub template), which reuses the .destd-related-* park-card styles below
   plus .destd-country-block/.destd-related-grid--wrap, both only used there.
═══════════════════════════════════════════ */

/* ── HEADER (title block centered over the hero's looping photos — text
   styling only; position/background/centering come from the shared
   .pagehero-info in accommodation-detail.css) ── */
.destd-info { color: var(--cream); }

.destd-breadcrumb {
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(248,244,238,.5); margin-bottom: 26px;
}
.destd-breadcrumb a { color: rgba(248,244,238,.7); transition: color .2s; }
.destd-breadcrumb a:hover { color: var(--gold); }
.destd-breadcrumb span[aria-hidden] { margin: 0 8px; opacity: .4; }

.destd-meta {
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(248,244,238,.55); margin-bottom: 16px; line-height: 1.8;
}
.destd-meta span + span::before { content: '·'; margin: 0 10px; color: rgba(248,244,238,.35); }
.destd-meta-type { color: var(--gold); }

.destd-title {
  font-family: var(--serif); font-weight: 400; color: var(--white);
  font-size: clamp(34px, 4.6vw, 58px); line-height: 1.08; margin-bottom: 22px;
  text-shadow: 0 2px 16px rgba(0,0,0,.25);
}

.destd-highlights { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; list-style: none; margin: 0 0 32px; padding: 0; }
.destd-chip {
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cream); background: rgba(248,244,238,.08); border: 1px solid rgba(248,244,238,.25);
  padding: 8px 16px; border-radius: 999px; backdrop-filter: blur(2px);
}

.destd-cta { display: inline-flex; align-items: center; gap: 10px; }

/* ── SECTION NAV ── */
/* main.css has a bare `nav { position: fixed; top: 0; z-index: 100; … }`
   rule meant for the site's main <nav id="nav"> (the floating/transparent
   header bar) — but since .destd-subnav is also a <nav> element it inherits
   that too, so every property that bare rule sets gets reset here first.
   Sticky, not static: it should scroll normally past the hero, then pin
   itself just below the main nav while the content sections scroll by, so
   the Overview/History/etc. links stay reachable. 80px clears the main
   nav's tallest (unscrolled, desktop/tablet) height; on mobile the main nav
   isn't fixed (see main.css's own ≤767px override), so this sticks at the
   very top instead — see the mobile override below. */
.destd-subnav {
  position: sticky; top: 80px; left: auto; right: auto; z-index: 50;
  display: block; padding: 0;
  background: var(--cream); border-bottom: 1px solid var(--sand); transition: none;
}
.destd-subnav-wrap { display: flex; flex-wrap: wrap; gap: 28px; padding: 18px 40px; }
.destd-subnav a {
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-mid); text-decoration: none; padding-bottom: 4px; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s;
}
.destd-subnav a:hover, .destd-subnav a:focus-visible { color: var(--green-deep); border-color: var(--gold); }

/* ── CONTENT SECTIONS ── */
/* scroll-margin-top keeps a clicked subnav link's target from landing
   underneath the two stacked sticky bars above it (the main nav, fixed at
   ~62–74px tall, plus this subnav itself sitting below it) — see the
   .destd-subnav comment above. 150px clears both with room to spare; the
   mobile override below uses a smaller value since only the subnav (not
   the main nav) is fixed at that breakpoint. */
.destd-section { padding: 72px 0; background: var(--white); scroll-margin-top: 150px; }
.destd-section--alt { background: var(--cream); }
/* Matches the "Where to Stay" section's width — .destd-section-wrap used to
   narrow these to a 760px reading column, but that's dropped now so every
   content section (Overview/History/Niche Features/Attractions &
   Activities) lines up with .acc-wrap's own max-width (1280px). */
.destd-section-wrap { max-width: 1280px; }
.destd-kicker {
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 16px;
}
.destd-prose { font-family: var(--sans); font-size: 16px; font-weight: 300; line-height: 1.9; color: var(--text-mid); }
.destd-prose p { margin: 0 0 1.3em; }
.destd-prose p:last-child { margin-bottom: 0; }

/* ── WHERE TO STAY (reuses .acc-library/.acc-title/.acc-grid/.acc-empty) ── */
.destd-stay { scroll-margin-top: 150px; }

/* ── SAMPLE ITINERARIES (reuses .trips-section/.trips-grid/.trip-card from
   main.css, unchanged — see includes/itineraries-data.php) ── */
#itineraries { scroll-margin-top: 150px; }

/* ── PARKS & DESTINATIONS LANDING HUB (page-destinations.php only) ── */
.destd-country-block { margin-bottom: 56px; }
.destd-country-block:last-child { margin-bottom: 0; }
.destd-related-grid--wrap { flex-wrap: wrap; overflow-x: visible; margin-bottom: 36px; }
.destd-related-grid--wrap .destd-related-card { flex: 0 1 220px; }
/* .destd-related-title/-name default to dark text for .destd-related's
   light --green-light background on single-destination.php — this page
   instead nests them inside .acc-library's dark background, so they need
   light text here specifically. */
.acc-library .destd-related-title,
.acc-library .destd-related-name { color: var(--white); }
.acc-library .destd-related-media { background: rgba(248,244,238,.1); }

/* ── NEARBY PARKS ── */
.destd-related { background: var(--green-light); padding: 72px 0; }
.destd-related-title {
  font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3vw, 40px); color: var(--text-dark); margin-bottom: 32px;
}
.destd-related-grid { display: flex; gap: 24px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; }
.destd-related-card { flex: 0 0 240px; display: block; text-decoration: none; color: inherit; }
.destd-related-media { height: 160px; border-radius: 6px; overflow: hidden; background: var(--sand); margin-bottom: 12px; }
.destd-related-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.destd-related-card:hover .destd-related-media img { transform: scale(1.06); }
.destd-related-name { font-family: var(--serif); font-weight: 400; font-size: 19px; color: var(--text-dark); }

/* ── FINAL CTA ── */
.destd-cta-band { background: var(--green-deep); color: var(--cream); text-align: center; padding: 96px 0; }
.destd-cta-title { font-family: var(--serif); font-weight: 300; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.25; margin-bottom: 30px; }
.destd-cta-title em { font-style: italic; color: var(--gold); }

/* ── RESPONSIVE ── */
@media (max-width: 1099px) {
  .acc-wrap.destd-info-wrap { padding: 0 28px; }
  .destd-subnav-wrap { padding: 16px 28px; }
}
@media (max-width: 767px) {
  .destd-breadcrumb { margin-bottom: 18px; }
  .destd-title { margin-bottom: 16px; }
  .destd-subnav { top: 0; } /* main nav is position:relative (not fixed) at this breakpoint — see main.css */
  .destd-subnav-wrap { padding: 14px 20px; gap: 20px; overflow-x: auto; flex-wrap: nowrap; }
  .destd-section,
  .destd-stay,
  #itineraries { scroll-margin-top: 72px; } /* only this subnav is fixed here, not the main nav too — see the sticky-nav comment above .destd-section */
  .destd-section { padding: 48px 0; }
  .destd-related { padding: 48px 0; }
  .destd-related-card { flex: 0 0 200px; }
  .destd-related-media { height: 130px; }
  .destd-cta-band { padding: 64px 0; }
}