/* =========================================================
   DAN TOURS - LIGHT THEME OVERRIDES
   Loaded LAST so it wins over nav.css defaults.
   ========================================================= */

/* =========================================================
   LIGHT THEME RULES (folded in from the former light-theme.css)
   ========================================================= */
/* ---- Base ----
   Body copy uses the BRAND text colour (--ink #3C3C3C). --charcoal
   #1D1D1D is reserved for dark surfaces (footer, dark panels), where
   the deeper tone reads better than the brand's lighter text grey. */
body {
  background: var(--page);
  color: var(--ink);
}

/* ---- Headings: brand bronze ----
   Every H2 on the old dmtours.net is #9A8352. Matching that here so the
   new site carries the same signature. Display headings only — body copy
   and UI labels stay ink.

   NOTE: --gold-deep (#8A7446), not --gold (#9A8352). On the sand page
   #9A8352 lands at 2.66:1 — below even the 3:1 large-text floor. The
   deeper bronze is still a client-kit colour and clears it at 3.28:1
   (and 4.18:1 on the warm-white bands). If --page reverts to --warm,
   plain --gold becomes viable again at 3.39:1. */
h1, h2, h3,
.section-heading,
.intro-title,
.page-hero-title {
  color: var(--gold-deep);
}
/* Headings sitting on photos or dark panels must stay light. */
.hero h1, .hero h2, .hero h3,
.hero-band h1, .hero-band h2, .hero-band h3,
.section-cta h1, .section-cta h2, .section-cta h3,
.site-footer h1, .site-footer h2, .site-footer h3 {
  color: var(--warm);
}

/* ---- Section eyebrow labels ----
   .section-label is small (0.74rem) uppercase text, so it needs the full
   4.5:1. Bronze never cleared that even on warm white (3.39:1), and sand
   drops it to 2.66:1 — so the eyebrow takes ink and the HEADING below it
   carries the bronze instead. Same two-tone pairing as before, inverted. */
.section-label { color: var(--ink); }
/* Over photos / dark panels it stays light — see the block below. */

/* ---- Text over photos must stay light ---- */
.hero, .hero *,
.hero-band, .hero-band *,
.cat-cell-label, .cat-cell-label *,
.gallery-item-overlay, .gallery-item-overlay *,
.gallery-masonry-overlay, .gallery-masonry-overlay *,
.gallery-masonry-caption, .gallery-masonry-tag,
.related-card-overlay, .related-card-overlay *,
.related-card-name, .related-card-meta,
.section-cta, .section-cta * {
  color: var(--warm);
}
/* Bronze buttons are --gold-deep now (see "BRONZE THAT CARRIES TEXT"),
   so their label is white everywhere. Charcoal here would be 3.79:1. */
.hero .btn-gold, .hero-band .btn-gold, .section-cta .btn-gold {
  color: #FFFFFF;
}

/* ---- Navbar ----
   The bar is a solid brand-bronze band (nav.css), so every label on it is
   PURE BLACK — matching the old dmtours.net nav, and the only tone that
   clears WCAG AA on #9A8352 (5.75:1; warm white would be just 3.65:1).
   Identical in the top and the scrolled (floating-pill) states. */
.navbar .nav-link,
.navbar .mobile-nav-toggle,
.navbar .hamburger { color: #000000; }
.navbar .hamburger span { background: #000000; }
.navbar .lang-btn { color: rgba(0, 0, 0, 0.6); }
.navbar .lang-btn.active,
.navbar .lang-btn:hover { color: #000000; }
.navbar .lang-divider { color: rgba(0, 0, 0, 0.3); }

/* Scrolled state is a floating bronze pill (surface painted on
   .navbar-inner in nav.css), so the full-width bar goes transparent. */
.navbar.scrolled {
  background: transparent;
  box-shadow: none;
}
.navbar.scrolled .nav-link,
.navbar.scrolled .lang-btn,
.navbar.scrolled .mobile-nav-toggle,
.navbar.scrolled .hamburger { color: #000000; }
.navbar.scrolled .hamburger span { background: #000000; }

.navbar.scrolled .navbar-logo img {
  filter: brightness(0) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}
.navbar.scrolled .lang-btn { color: rgba(0, 0, 0, 0.6); }
.navbar.scrolled .lang-btn.active,
.navbar.scrolled .lang-btn:hover { color: #000000; }
.navbar.scrolled .lang-divider { color: rgba(0, 0, 0, 0.3); }

/* ---- Dropdown menu: light panel ---- */
.dropdown-menu, .dd-sub {
  background: #FFFFFF;
  border: 1px solid rgba(154, 131, 82, 0.25);
  box-shadow: 0 16px 40px rgba(29, 29, 29, 0.12);
}
.dropdown-menu .dropdown-link { color: var(--ink); }
.dropdown-menu .dropdown-link:hover { color: var(--gold); }
.dropdown-menu .dropdown-col-title,
.dropdown-menu .dd-cat-link { color: var(--gold); }
.dd-cat:hover > .dd-cat-link,
.dd-cat:focus-within > .dd-cat-link {
  background: rgba(154, 131, 82, 0.1);
}

/* ---- Mobile menu: light panel ---- */
.mobile-menu {
  background: var(--page);
}
.mobile-menu .mobile-nav-link,
.mobile-menu .mobile-submenu-link,
.mobile-menu .mobile-menu-close { color: var(--ink); }
.mobile-menu .lang-btn { color: rgba(60, 60, 60, 0.55); }
.mobile-menu .lang-btn.active,
.mobile-menu .lang-btn:hover { color: var(--gold); }
.mobile-menu .lang-divider { color: rgba(60, 60, 60, 0.25); }

/* ---- Cards: white on warm white ---- */
.package-card, .dest-card, .related-card {
  background: #FFFFFF;
  border: 1px solid rgba(154, 131, 82, 0.18);
  box-shadow: 0 8px 28px rgba(29, 29, 29, 0.06);
}

/* =========================================================
   SECTION RHYTHM
   The homepage runs 15 sections over ~5,900px. Left alone, every one
   of them inherits --page and the whole scroll is a single flat field
   — which was true of the old warm-white build too, it just didn't
   show because a near-neutral doesn't fatigue the eye.

   So sand is assigned deliberately, as punctuation. Reading down the
   homepage the surfaces now alternate:

     hero ▸ warm ▸ SAND ▸ warm ▸ SAND ▸ warm ▸ DARK
          ▸ warm ▸ DARK ▸ SAND ▸ warm ▸ SAND ▸ warm ▸ cta ▸ DARK

   Every sand band is bracketed by warm on both sides, so it reads as
   a deliberate change of material rather than as the page colour.
   Add or remove selectors here to retune — nothing else needs editing.
   ========================================================= */
/* `body` prefix is load-bearing: features.css is linked AFTER theme.css and
   sets its own `background: var(--page)` on several of these at equal
   specificity, so a bare class selector here silently loses. */
/* Sand appears three times, and NEVER touches a dark band — every sand
   section is bracketed by warm on both sides. Adding more (migration,
   map/destinations were both tried) produces DARK-SAND-DARK-SAND through
   the middle of the page, which stripes rather than punctuates. The two
   existing dark bands already carry the interest in that stretch. */
/* ---- Band edges are BLENDED, not cut ----
   A flat sand band against flat warm white draws a hard 1px rule across
   the full viewport width at every section boundary. At this page length
   that reads as a seam — the eye catches the line before it reads the
   section.

   So each band paints itself as a vertical gradient instead of a flat
   fill: it starts as its NEIGHBOUR's colour, resolves to its own colour
   over --band-fade, holds it through the middle, then returns to the
   neighbour's colour at the bottom. The boundary becomes a soft wash
   rather than an edge, and — because the fade is painted by the band
   itself — no spacer elements or overlays are needed between sections.

   --band-top / --band-bot are what the band fades OUT to at each end, so
   a band with a different neighbour above than below just sets the two
   separately (see .section-map, which sits between two dark bands). */
:root {
  /* Depth of the fade at each end. Long enough to read as a wash rather
     than a gradient stripe; capped so short bands keep a solid middle. */
  --band-fade: clamp(56px, 8vw, 130px);
}

.band-blend {
  background-image: linear-gradient(
    to bottom,
    var(--band-top, var(--warm)) 0,
    var(--band-mid, var(--sand)) var(--band-fade),
    var(--band-mid, var(--sand)) calc(100% - var(--band-fade)),
    var(--band-bot, var(--warm)) 100%
  );
}

body .section-experience,
body .section-featured,
body .section-seasonal,
body .safaris-section {
  /* Flat sand as the fallback layer, so any browser that chokes on the
     gradient still gets the band rather than the page colour. */
  background: var(--sand);
  --band-mid: var(--sand);
  --band-top: var(--warm);
  --band-bot: var(--warm);
  background-image: linear-gradient(
    to bottom,
    var(--band-top) 0,
    var(--band-mid) var(--band-fade),
    var(--band-mid) calc(100% - var(--band-fade)),
    var(--band-bot) 100%
  );
}

/* The map band is the one sand section bracketed by DARK on both sides
   (chapter-break above, big-five below), so it fades to charcoal rather
   than to warm — fading to white here would print a light halo between
   two dark bands, which is louder than the hard edge it replaces. */
body .section-map {
  background: var(--sand);
  --band-mid: var(--sand);
  --band-top: var(--charcoal);
  --band-bot: var(--charcoal);
  background-image: linear-gradient(
    to bottom,
    var(--band-top) 0,
    var(--band-mid) var(--band-fade),
    var(--band-mid) calc(100% - var(--band-fade)),
    var(--band-bot) 100%
  );
}

/* Stats sits directly after a sand band, so it stays warm to keep the
   alternation intact. */
body .section-stats {
  background: var(--warm);
}

/* Listing pages (safaris.html, reiseziele.html) stack two or more of the
   same section type in a row, which would put sand against sand. Any sand
   band immediately following another flips to warm, so the alternation
   holds without hand-tuning each page. */
body .safaris-section + .safaris-section,
body .section-destinations + .section-destinations,
body .section-featured + .section-featured {
  background: var(--warm);
}
.section-stats * { color: var(--ink); }
.section-stats .stat-number { color: var(--safari); }

/* Cards need to separate from BOTH surfaces. White reads as a raised
   object on warm white, and much more strongly on the sand bands. */
.section-experience .package-card, .section-experience .dest-card,
.section-featured .package-card,   .section-featured .dest-card,
.section-migration .package-card,  .section-migration .dest-card,
.section-seasonal .package-card,   .section-seasonal .dest-card,
.safaris-section .package-card,    .safaris-section .dest-card,
.section-destinations .package-card, .section-destinations .dest-card {
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 10px 30px rgba(29, 29, 29, 0.10);
}

/* =========================================================
   BRONZE THAT CARRIES TEXT
   The brand bronze #9A8352 cannot hold light text: warm white on it is
   3.39:1 and pure white is 3.65:1 — both fail AA. That single pairing
   accounted for ~48 failing elements across the homepage.

   The rule now is:
     DECORATIVE bronze (rules, bars, dots, legends) → --gold, the true
       brand colour. No contrast requirement, so it stays exact.
     bronze CARRYING TEXT → --gold-deep #8A7446 + pure white, which is
       4.51:1 and passes. #8A7446 is itself a client-kit colour, so this
       stays inside the brand rather than inventing a tint.

   This keeps the white-on-bronze look the old dmtours.net used, instead
   of flipping the labels to dark to buy contrast.
   ========================================================= */
.btn-gold,
.btn-nav-cta,
.mobile-cta-btn,
.pkg-card-badge,
.adv-submit,
.sticky-mobile-bar__enquire {
  background: var(--gold-deep);
  color: #FFFFFF;
}
/* .map-detail-tag needs the same treatment but its colour is set by a
   more specific rule elsewhere, so it must be forced — without this it
   renders bronze-on-bronze at 1.23:1. */
.map-detail .map-detail-tag,
.map-detail-body .map-detail-tag {
  background: var(--gold-deep);
  color: #FFFFFF;
}
.btn-gold:hover,
.btn-nav-cta:hover,
.mobile-cta-btn:hover,
.adv-submit:hover,
.sticky-mobile-bar__enquire:hover {
  background: var(--charcoal);
  color: #FFFFFF;
}
/* The nav CTA sits ON the bronze bar, so it still needs its black edge
   to separate — the deeper fill alone isn't enough separation. */
.btn-nav-cta, .btn-nav-cta:hover { border-color: #000000; }

/* Secondary text was failing on the sand bands (4.08:1). Nudged darker:
   5.13:1 on sand, 7.05:1 on white, and visually near-identical.
   .testimonial-guest-trip was bronze on warm white (3.39:1) — small text
   can't hold bronze on ANY of our surfaces, so it joins the group. */
body .package-accom,
body .pkg-card-duration,
body .pkg-card-desc,
body .month-abbr,
body .legend-label,
body .migration-step-months,
body .testimonial-guest-trip { color: #5E584E; }

/* Footer meta was --muted on charcoal (3.02:1) — it takes the same tone
   as the rest of the footer copy instead. */
body .footer-contact-item { color: rgba(248, 246, 242, 0.85); }

/* .testimonial-stars stays bronze at 3.39:1 deliberately: a star rating is
   a graphical indicator, which WCAG holds to 3:1, not 4.5:1. The numeric
   rating beside it carries the same information as text. */

/* ---- Footer stays charcoal (matches reference design) ---- */
.site-footer {
  background: var(--charcoal);
  border-top: 2px solid var(--gold);
}
.site-footer, .site-footer p, .site-footer a, .site-footer li,
.site-footer .footer-tagline, .site-footer .footer-col-title {
  color: rgba(248, 246, 242, 0.85);
}
.site-footer a:hover { color: var(--gold); }
.site-footer .footer-logo img { filter: brightness(0) invert(1); }

/* ---- Forms ---- */
input, select, textarea {
  background: #FFFFFF;
  color: var(--ink);
  border-color: rgba(60, 60, 60, 0.2);
}

/* =========================================================
   CONTRAST FIXES — hardcoded light colours from the dark
   design that became invisible on the warm-white background
   ========================================================= */

/* About page: story paragraphs and fleet feature list */
.about-story-body { color: rgba(60, 60, 60, 0.78); }
.fleet-feature-text { color: rgba(60, 60, 60, 0.72); }

/* Booking + contact forms */
.form-required { color: rgba(60, 60, 60, 0.55); }
.form-group input,
.form-group select,
.form-group textarea {
  border-bottom-color: rgba(60, 60, 60, 0.3);
}

/* Outline buttons that relied on a dark backdrop.
   .btn-outline-white only ever appears over photos (hero /
   CTA banners), so it keeps its light styling untouched. */
.btn-enquire { border-color: rgba(60, 60, 60, 0.35); }
.hero .btn-outline-white,
.hero-band .btn-outline-white,
.section-cta .btn-outline-white {
  border-color: rgba(248, 246, 242, 0.55);
  color: var(--warm);
}
/* The CTA banner is the one place an outline button sits over a BUSY part of
   a photo rather than over sky or a dark panel — the vehicle's white wheel
   covers land right behind it on narrow viewports, where the crop can't be
   steered away from them. A transparent button can't survive that, so this
   one carries its own surface: a dark wash plus a brighter edge, which reads
   as the same outline button on the open sky and still holds its shape over
   a white disc. Deliberately NOT applied to .hero / .hero-band — those sit
   on quiet, already-dark parts of their images and don't need it. */
.section-cta .btn-outline-white {
  background: rgba(20, 16, 10, 0.38);
  border-color: rgba(248, 246, 242, 0.82);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.section-cta .btn-outline-white:hover {
  background: rgba(248, 246, 242, 0.92);
  border-color: rgba(248, 246, 242, 0.92);
  color: var(--charcoal);
}

/* Hairline borders that were tuned for dark surfaces */
.section-testimonials,
.fleet-section,
.dest-item { border-top-color: rgba(60, 60, 60, 0.08); }
.package-info { border-top-color: rgba(60, 60, 60, 0.08); }
.footer-bottom { border-top-color: rgba(248, 246, 242, 0.15); } /* footer stays dark */


/* accommodation line was too faint on warm white */
.package-accom { color: var(--muted); }