/* =====================================================
   LIVE THE JOURNEY — QA fixes
   Layered on top of style.css + styles-sans.css (enqueued last).
   Keeps the approved stylesheets untouched. Each block notes the issue.
   ===================================================== */

/* 1) Hover text vanished on outline buttons.
   Cause: `.home .section-head .btn--outline {color:ink}` (specificity 30) beat
   `.btn--outline:hover {color:#fff}` (21), so on hover the bg went dark but the
   text stayed dark. Restore white-on-dark hover text everywhere. */
.btn--outline:hover,
.btn--outline:hover .arrow,
.home .btn--outline:hover,
.home .section-head .btn--outline:hover { color: #fff !important; }

/* 2) Mobile overflow — fixed at the source so content WRAPS instead of clipping.
   Grid/flex columns default to min-width:auto and refuse to shrink below their
   widest child (the tour dates table etc.), pushing the column past the
   viewport. Let them shrink, and stack the inline multi-column blocks. */
.td-body, .form-grid, .tours-page { min-width: 0; }
.td-body > *, .form-grid > *, .tours-page > * { min-width: 0; }
.td-main { min-width: 0; overflow-wrap: break-word; }
.td-main img, .at-glance img, table { max-width: 100%; height: auto; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; row-gap: 2px; }
/* Tour tab strip: scroll horizontally on narrow screens instead of overflowing the page. */
.td-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.td-tabs::-webkit-scrollbar { height: 0; }
/* Tours tools bar (sort + view toggle) wraps on mobile instead of overflowing. */
@media (max-width: 700px) {
  .tools-bar { flex-wrap: wrap; gap: 14px; align-items: flex-start; }
  .sort-view { flex-wrap: wrap; gap: 10px; }
}

@media (max-width: 700px) {
  /* Stack ALL inline-styled content grids on mobile — about "the-way", journal
     featured + sidebar, tour dates/included/reviews, destination season cards.
     front-page.php has 0 inline grids (home uses class-based grids), so the home
     is unaffected. This prevents the squashed 2-column-on-a-phone layouts. */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 24px !important; }
  /* The dates table header row (column labels) makes no sense once stacked. */
  #dates [style*="text-transform:uppercase"] { display: none; }
  /* Sticky fact-bar sits flush under the shorter (68px) mobile header — no gap. */
  .td-fact-bar { top: 67px; }
}

/* 3) Footer centred on mobile (columns, logo, social, newsletter, copy). */
@media (max-width: 700px) {
  .site-footer .wrap { text-align: center; }
  .site-footer .logo-block img { margin-left: auto; margin-right: auto; }
  .site-footer .social { justify-content: center; }
  .site-footer ul li form { justify-content: center; }
  .site-footer .copy { flex-direction: column; gap: 12px; text-align: center; }
  .site-footer .copy span:last-child a { margin: 0 9px; }
}

/* 4) Mobile navigation — the design hid the desktop links on mobile and
   referenced a `.mobile-toggle` that was never built. Add the hamburger,
   the slide-in panel, and a search overlay. */
.mobile-toggle {
  display: none; background: none; border: 0; padding: 0; cursor: pointer;
  width: 42px; height: 42px; flex-direction: column; align-items: center;
  justify-content: center; gap: 5px; color: var(--ink); flex-shrink: 0;
}
.mobile-toggle span { display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s ease, opacity .3s ease; }
.mobile-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-toggle.is-open span:nth-child(2) { opacity: 0; }
.mobile-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu { display: none; }
.mobile-menu__close { display: none; }

@media (max-width: 700px) {
  /* show hamburger, hide the desktop CTA button to save room */
  .mobile-toggle { display: inline-flex; }
  .main-nav .actions .btn--primary { display: none; }

  /* Hidden via opacity/visibility (NOT translateX) — a fixed element shifted
     off-screen-right extends the page width and causes horizontal scroll. */
  .mobile-menu {
    display: block; position: fixed; inset: 0; background: #fff; z-index: 9999;
    padding: 80px 28px 40px; overflow-y: auto;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .26s ease, visibility .26s ease;
  }
  .mobile-menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
  /* exclude .btn so the Plan Your Journey button keeps its white text */
  .mobile-menu a:not(.btn) { display: block; padding: 15px 0; font-family: var(--sans); font-size: 19px; color: var(--ink); border-bottom: 1px solid var(--line); text-decoration: none; }
  .mobile-menu a.sub { font-size: 15px; color: var(--ink-2); padding: 11px 0 11px 18px; }
  .mobile-menu a.sub:first-of-type { padding-top: 14px; }
  .mobile-menu .btn { margin-top: 24px; display: inline-flex; width: 100%; justify-content: center; border-bottom: 0; }
  .mobile-menu .btn--primary { color: #fff !important; }
  .mobile-menu__close { display: flex; align-items: center; justify-content: center; position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; z-index: 1; background: none; border: 0; font-size: 32px; line-height: 1; color: var(--ink); cursor: pointer; }
  body.menu-open { overflow: hidden; }
}

/* 5) Search overlay (wires the header search icon). */
.search-overlay { position: fixed; inset: 0; background: rgba(255,255,255,.98); z-index: 9999; display: none; align-items: flex-start; justify-content: center; padding: 18vh 20px 0; }
.search-overlay.is-open { display: flex; }
.search-overlay form { display: flex; gap: 12px; width: min(680px, 92vw); align-items: center; }
.search-overlay input[type="search"] { flex: 1; min-width: 0; font-family: var(--serif); font-style: italic; font-size: clamp(22px, 4vw, 34px); border: 0; border-bottom: 2px solid var(--sky); padding: 12px 4px; background: transparent; color: var(--ink); outline: none; }
.search-overlay .search-close { position: absolute; top: 26px; right: 30px; background: none; border: 0; font-size: 30px; line-height: 1; color: var(--ink-3); cursor: pointer; }
.search-overlay .search-close:hover { color: var(--ink); }

/* 6) Favourites (wires the header heart + card save hearts via localStorage). */
.main-nav .actions .icon-btn { position: relative; }
.fav-count { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--desert); color: #fff; font-size: 10px; font-weight: 600; display: none; align-items: center; justify-content: center; }
.fav-count.has { display: inline-flex; }
.tour-card__save { cursor: pointer; }
.tour-card__save.is-saved { color: var(--desert); }

/* Favourites overlay (saved tours list) */
.fav-overlay { position: fixed; inset: 0; background: rgba(20,36,44,.45); z-index: 9999; display: none; }
.fav-overlay.is-open { display: block; }
.fav-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 92vw); background: #fff; box-shadow: -8px 0 40px rgba(31,53,64,.18); padding: 28px; overflow-y: auto; }
.fav-panel h4 { font-family: var(--serif); font-style: italic; font-size: 24px; margin: 0 0 6px; color: var(--ink); }
.fav-panel .fav-close { position: absolute; top: 22px; right: 24px; background: none; border: 0; font-size: 28px; line-height: 1; color: var(--ink-3); cursor: pointer; }
.fav-panel .fav-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.fav-panel .fav-item a { color: var(--ink); font-size: 15px; text-decoration: none; }
.fav-panel .fav-item a:hover { color: var(--sky); }
.fav-panel .fav-remove { background: none; border: 0; color: var(--ink-4); cursor: pointer; font-size: 18px; }
.fav-panel .fav-empty { color: var(--ink-3); font-size: 14px; padding: 24px 0; }

/* 7) View toggles (Grid / List / A–Z / Map / Calendar). Make them interactive;
   Grid + A–Z + List work, others show a graceful note. */
.view-toggle button { cursor: pointer; }
.ltj-view-note { margin: 24px 0 0; padding: 18px 24px; background: var(--surface-warm); border: 1px solid var(--line-warm); border-radius: var(--radius-lg); color: var(--ink-2); font-size: 14px; text-align: center; }
/* Tours "List" view: collapse cards to single-column rows.
   The image column and the text sat flush together; add a grid gap so the
   photo breathes away from the content, and let the body's own left padding
   fold into that gap (padding-left:0) to keep the text block aligned. */
#tours-grid.is-list { grid-template-columns: 1fr !important; }
#tours-grid.is-list .tour-card { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: stretch; }
#tours-grid.is-list .tour-card__img { aspect-ratio: auto; height: 100%; min-height: 150px; }
#tours-grid.is-list .tour-card__body { padding-left: 0; padding-right: 28px; }
@media (max-width: 600px) { #tours-grid.is-list .tour-card { grid-template-columns: 1fr; gap: 0; } #tours-grid.is-list .tour-card__body { padding-left: 22px; } }

/* 8) Home journal card image fallback handled in PHP; ensure no empty box flashes. */
.home .post-card__img, .post-card__img { background-color: var(--sky-10); }

/* 9) Wide-screen breathing room (desktop). Reported: on large monitors the
   content looked "squashed in the middle" with big empty margins left/right.
   The approved design caps content at --maxw:1280px; nudge it to 1440px so it
   fills more of a wide monitor while keeping line-lengths readable. Applies
   site-wide (header, footer, and all .wrap content stay aligned). */
:root { --maxw: 1440px; }

/* 10) Footer copyright row sat ~24px off the bottom edge (site-footer has no
   bottom padding), reading as "touching the bottom". Give it real breathing
   room below the copyright line. */
.site-footer { padding-bottom: 28px; }

/* 11) NEW video-hero home (Revision 2): on phones the hero H1 (min 44px), the
   long kicker, the tagline and the two large CTAs overran the viewport and were
   CLIPPED (the .hero box is overflow:hidden — seen as "LIVE THE JOURN…"). Scale +
   wrap everything to fit, drop the kicker's leading rule, and stack the CTAs.
   !important because the base home styles (styles-sans.css) set these at equal
   specificity. Fixed at the source (no body clip). */
@media (max-width: 700px) {
  .home .hero--home h1 {
    font-size: clamp(32px, 12vw, 50px) !important;
    white-space: normal !important; overflow-wrap: break-word; letter-spacing: 0 !important;
  }
  .home .hero--home .kicker {
    display: block !important; max-width: 100% !important; white-space: normal !important;
    font-size: 10px !important; letter-spacing: 0.05em !important; line-height: 1.6 !important; text-align: center;
  }
  .home .hero--home .kicker::before { display: none !important; }
  .home .hero--home .hero__tagline { font-size: 15px !important; white-space: normal !important; }
  /* .hero is display:flex, so hero__content is a flex item that won't shrink
     below its content min-content (the wide kicker) — min-width:0 releases that,
     the real cause of the whole hero overflowing/clipping on phones. */
  .home .hero--home .hero__content { max-width: 100% !important; width: 100% !important; min-width: 0 !important; }
  .home .hero--home .hero__ctas { width: 100%; flex-direction: column !important; align-items: stretch !important; gap: 10px; }
  .home .hero--home .hero__ctas .btn { width: 100% !important; justify-content: center; }
}

/* 12) Journal article CTA band showed a stray "J" — the .cta-band__wm watermark
   letter is only styled under `.home` (in styles-sans.css, which loads on the home
   page only), so on single posts it rendered as raw text. Hide it off the home. */
body:not(.home) .cta-band__wm { display: none !important; }

/* 13) Destinations "Region" filter bar is position:sticky with an inline top:84px
   (desktop header height). The mobile header is 68px, leaving a ~16px gap when it
   locks. Snap it flush under the shorter mobile header (matches the tour fact-bar). */
@media (max-width: 700px) {
  .ltj-stickybar { top: 67px !important; }
}

/* Client feedback 10/07/2026 — About "By the numbers" has 3 blocks, but .pillars
   is a 4-col grid (shared with the 4-reason section). Centre the trio as a group. */
.pillars--trio { grid-template-columns: repeat(3, minmax(0, 300px)); justify-content: center; }
@media (max-width: 1024px) { .pillars--trio { grid-template-columns: repeat(2, minmax(0, 300px)); } }
@media (max-width: 700px)  { .pillars--trio { grid-template-columns: minmax(0, 340px); } }

/* Client feedback 10/07/2026 — mobile: collapse the Tours filter rail into a
   dropdown so it no longer fills the screen above the results. Desktop unchanged. */
.filters__toggle { display: none; }
@media (max-width: 1024px) {
  .filters { padding-right: 0; overflow: visible; }
  .filters__toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; padding: 13px 18px; margin: 0;
    background: #fff; border: 1px solid var(--line); border-radius: 10px;
    font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ink); cursor: pointer;
  }
  .filters__chev { transition: transform .25s ease; font-size: 12px; }
  .filters.is-open .filters__chev { transform: rotate(180deg); }
  .filters__body { display: none; padding-top: 16px; }
  .filters.is-open .filters__body { display: block; }
}

/* 15) Home page vertical rhythm — client feedback 28/07 (items 4, 5, 6).
   "Decrease open/blank space… having to scroll a lot before getting to all the
   information", plus two specific calls: the gap beneath the Stats block and the
   gap above "Don't just take our word for it".

   One root cause: styles-sans.css sets `.home .section { padding: clamp(72px,
   9vw, 128px) 0 }` — so ANY two adjacent sections stack up to 256px of empty
   space between them. Reducing the section padding fixes all three at once.
   Roughly a 40% cut; the airy feel is kept, the dead scroll is not. */
.home .section { padding: clamp(44px, 5vw, 76px) 0; }

/* Stats block is a bare 3-up grid with no heading, so its own padding IS the
   white space the client flagged beneath it (item 4). Tighten a little further. */
.home .section:has(.stats-clean) { padding-top: clamp(36px, 4vw, 60px); padding-bottom: clamp(32px, 3.5vw, 52px); }

/* Item 6, second pass (Isaac, 31/07). The gap above "Don't just take our word
   for it" is two paddings stacked: the reels section's bottom (44px) plus the
   testimonials section's own top (44px) = 88px. Drop the top one so the single
   remaining 44px does the work. Both sections share the same tint, so there is
   no visible seam. */
.home .section.tcar { padding-top: 0; }

/* Closing CTA band carried the same oversized padding. */
.home .cta-band { padding: clamp(52px, 6vw, 88px) 0; }

/* 16) "Begin to imagine" — three filters with horizontally scrollable tour rails
   (client feedback 28/07, items 9-12). Scroll behaviour mirrors .home .reels
   ("Why travel with us"), which is what the client asked it to match. */
.home .bti-filters {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: clamp(24px, 3vw, 36px) 0 clamp(20px, 2.5vw, 30px);
}
.home .bti-filter {
  font-family: var(--sans); font-size: 13.5px; font-weight: 500; letter-spacing: .01em;
  padding: 10px 22px; border-radius: 100px; cursor: pointer;
  background: transparent; color: var(--ink-2);
  border: 1px solid var(--line);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.home .bti-filter:hover { border-color: var(--sky); color: var(--sky); }
.home .bti-filter.is-active { background: var(--sky); border-color: var(--sky); color: #fff; }

/* The rail itself — same flex + scroll-snap pattern as .home .reels */
.home .bti-rail {
  display: flex; gap: 22px;
  overflow-x: auto; padding-bottom: 12px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.home .bti-rail[hidden] { display: none; }
.home .bti-rail::-webkit-scrollbar { height: 6px; }
.home .bti-rail::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.home .bti-rail::-webkit-scrollbar-track { background: transparent; }
/* Cards are grid children by default; in a flex rail they need an explicit width. */
.home .bti-rail .tour-card {
  flex: 0 0 clamp(260px, 24vw, 310px);
  scroll-snap-align: start;
}

/* 14) Journal article pre-footer CTA button sat flush against the footer
   (client, 16/07). .cta-band only carries padding under .home (styles-sans.css),
   so on an article it had none. Add the bottom space only — layout otherwise
   untouched. */
body:not(.home) .cta-band {
  padding-bottom: clamp(64px, 8vw, 104px);
}

/* Departure status: rates not yet announced (Kuiseb90 2027, added 05/08).
   Sits with .few and .full, which style the sidebar's status pills. */
.td-sidebar .date-opt .status.tbc { background: var(--sky-60); }

/* -------------------------------------------------------------------------
 * FAQ page (05/08). No approved design existed — built in the inner-page
 * style, with the client's copy in native <details> so it stays selectable
 * and stays in the document for crawlers.
 * ---------------------------------------------------------------------- */
.ltj-faq { max-width: 860px; }

.ltj-faq__jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding-bottom: 32px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.ltj-faq__jump a {
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: .02em;
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
  transition: all var(--t, .2s ease);
}
.ltj-faq__jump a:hover { background: var(--sky); border-color: var(--sky); color: #fff; }

.ltj-faq__group { margin-top: 48px; scroll-margin-top: 110px; }
.ltj-faq__group-title {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 8px;
}

.ltj-faq__item { border-bottom: 1px solid var(--line); }
.ltj-faq__q {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
}
.ltj-faq__q::-webkit-details-marker { display: none; }   /* Safari */
.ltj-faq__q::after {
  content: "+";
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 1.2;
  color: var(--desert-deep);
  transition: transform var(--t, .2s ease);
}
.ltj-faq__item[open] .ltj-faq__q::after { content: "–"; }
.ltj-faq__q:hover { color: var(--sky); }
.ltj-faq__q:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }

.ltj-faq__a { padding: 0 34px 22px 0; }
.ltj-faq__a p {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-2);
  margin: 0;
}

.ltj-faq__cta {
  margin-top: 64px;
  padding: 36px;
  background: var(--surface-warm);
  border-radius: var(--radius-lg);
}
.ltj-faq__cta p {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink-2);
  margin: 0 0 20px;
}

@media (max-width: 700px) {
  .ltj-faq__group { margin-top: 36px; }
  .ltj-faq__group-title { font-size: 19px; }
  .ltj-faq__q { font-size: 15px; padding: 18px 0; }
  .ltj-faq__a { padding-right: 0; }
  .ltj-faq__cta { padding: 26px 20px; }
}

/* -------------------------------------------------------------------------
 * Client feedback 13/08.
 * ---------------------------------------------------------------------- */

/* Footer: the copyright row sat in its own .wrap, and .site-footer .wrap is the
   five-column grid — so the row was being laid out as a single grid item about
   256px wide, wrapping "© … All rights reserved" over three lines. Spanning it
   across every column puts it back on one full-width line. */
.site-footer .copy {
  grid-column: 1 / -1;
  flex-wrap: wrap;
  gap: 8px 24px;
}
/* The copyright row sits in a second .wrap, which picks up the 56px bottom
   padding intended for the five-column link grid above it. Stacked on the
   row's own 24px and the footer's 28px, that left ~108px of empty space
   below "All rights reserved". The footer's own padding is enough. */
.site-footer .wrap:last-child { padding-bottom: 0; }
.site-footer .copy { padding: 24px 0 0; }

/* Tour pages: the gallery is a standard .section (up to 96px top and bottom),
   which stacked against the tabs' 32px margin and the body's 80px padding —
   about 128px of empty space above the gallery and 176px below it. Tightened
   on tour pages only; the gallery keeps its full spacing everywhere else. */
.single-tour .td-tabs { margin-bottom: 12px; }
.single-tour .section--gallery { padding: 28px 0 32px; }
/* .section-head carries up to 56px beneath it, which is right for a full section
   but leaves a hole between "Moments from the journey." and the photographs. */
.single-tour .section--gallery .section-head { margin-bottom: 24px; }
.single-tour .td-body { padding-top: 32px; }

/* Hero legibility: .page-hero deliberately runs a light scrim so the photograph
   shows through, but on pale or busy images the kicker and headline get lost.
   The gradient is lifted a little and the type carries its own soft shadow, so
   text stays readable whatever image is behind it — images can be swapped
   without anyone re-checking contrast. */
.page-hero .hero__bg::after {
  background: linear-gradient(180deg,
    rgba(20,36,44,.22) 0%,
    rgba(20,36,44,.20) 38%,
    rgba(20,36,44,.58) 72%,
    rgba(20,36,44,.86) 100%);
}
.page-hero .hero__content h1,
.page-hero .hero__content .start-mark,
.page-hero .hero__content .lede {
  text-shadow: 0 1px 2px rgba(12,22,28,.28), 0 2px 14px rgba(12,22,28,.34);
}

@media (max-width: 700px) {
  .single-tour .section--gallery { padding: 20px 0 24px; }
  .single-tour .td-body { padding-top: 24px; }
}

/* --------------------------------------------------------------------------
 * Per-tour copy roll-out (client documents, 14/08).
 * ----------------------------------------------------------------------- */
/* Several of the copy documents attribute their opening pull quote to a named
   guest. The theme had no treatment for that, so this matches the attribution
   line already used on the review cards: small, upright, uppercase, muted. */
.td-main .pull cite {
  display: block;
  margin-top: 14px;
  font-family: var(--sans);
  font-style: normal;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.td-main .pull cite::before { content: "— "; }

/* --------------------------------------------------------------------------
 * Waitlist / register-interest buttons in the tour dates table.
 * ----------------------------------------------------------------------- */
/* .btn--ghost is the dark-surface variant: white text on a white border. The
   dates table sits on white, so the waitlist and "bookings open soon" buttons
   rendered white-on-white and only appeared once hovered. Inside the tour body
   they take the light-surface treatment instead. Ghost buttons on the dark
   sections elsewhere (About, Testimonials, 404, destination heroes) are not
   affected. Kept as a safety net: the seed now emits .btn--outline directly,
   but content already in the database still carries .btn--ghost. */
.td-main .btn--ghost {
  color: var(--sky);
  border-color: var(--sky);
}
.td-main .btn--ghost:hover {
  background: var(--sky);
  color: #fff;
  border-color: var(--sky);
}

/* --------------------------------------------------------------------------
 * Gallery — portrait photographs (client, 26/08).
 * ----------------------------------------------------------------------- */
/* The grid runs 200px rows and fills each cell with background-size:cover, so
   a portrait photo lost about half its height: the Tanzania giraffe was cut
   off at the neck and the Madagascar baobabs at the canopy. Portrait files are
   detected server-side and given a two-row cell, so the cell is roughly the
   shape of the photograph and almost nothing is cropped. */
.gallery .gimg.tall { grid-row: span 2; }