/* ============================================================
   SADDLE TRAVEL — shared base styles + image registry
   Imagery is centralized here as CSS vars so it can be swapped
   in one place. Each photo has a themed fallback background-color
   set inline in the markup, so a broken link degrades gracefully.
   ============================================================ */

:root {
  /* Real Kazakhstan / Central Asia photography (local). Each photo keeps a
     themed fallback background-color inline in the markup, so a missing file
     degrades to an intentional colour rather than a blank box. */
  --img-steppe-horses: url("/img/kaindy.png");       /* lone rider, snow peaks — HOME hero */
  --img-steppe-wide:   url("/img/burabay.png");       /* Burabay lake & rock mountains */
  --img-canyon:        url("/img/charyn.png");        /* Charyn Canyon */
  --img-altai:         url("/img/aktau.png");         /* Altyn-Emel / Aktau coloured mountains */
  --img-dunes:         url("/img/dunes.png");         /* Singing Dune, Altyn-Emel */
  --img-lake:          url("/img/rider.png");        /* Kaindy sunken forest */
  --img-lake-tian:     url("/img/kolsai.png");        /* Kolsai Lake */
  --img-yurts:         url("/img/hiker.png");         /* alpine trekking, green mountains */
  --img-mongolia-yurts:url("/img/summit-arms.png");   /* traveler on a rock, arms raised */
  --img-summit:        url("/img/summit.png");        /* woman at a mountain-lake sunrise */
  --img-city:          url("/img/almaty-city.png");   /* Almaty cityscape at sunset */
  /* No local photo yet — kept as curated remote placeholders */
  --img-eagle: url("/img/summit-arms.png");
  --img-eagle-action: url("/img/summit-arms.png");
  --img-silk: url("/img/summit.png");
}

/* image utility classes — pair with Tailwind bg-cover bg-center */
.img-steppe-horses { background-image: var(--img-steppe-horses); }
.img-eagle { background-image: var(--img-eagle); }
.img-eagle-action { background-image: var(--img-eagle-action); }
.img-yurts { background-image: var(--img-yurts); }
.img-steppe-wide { background-image: var(--img-steppe-wide); }
.img-altai { background-image: var(--img-altai); }
.img-canyon { background-image: var(--img-canyon); }
.img-lake { background-image: var(--img-lake); }
.img-lake-tian { background-image: var(--img-lake-tian); }
.img-mongolia-yurts { background-image: var(--img-mongolia-yurts); }
.img-dunes { background-image: var(--img-dunes); }
.img-silk { background-image: var(--img-silk); }
.img-summit { background-image: var(--img-summit); }
.img-city { background-image: var(--img-city); }

html { scroll-behavior: smooth; }
body { font-family: "Plus Jakarta Sans", sans-serif; }
/* Balance headline wrapping so no single word is left orphaned on its own line */
h1, h2, h3 { text-wrap: balance; }

.material-symbols-outlined {
  font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal;
  font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none;
  display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr;
  font-feature-settings: "liga"; -webkit-font-feature-settings: "liga"; -webkit-font-smoothing: antialiased;
}
.ms-fill { font-variation-settings: "FILL" 1; }

/* ---------- NAV ---------- */
#nav { transition: background .35s ease, box-shadow .35s ease, border-color .35s ease; }
#nav .navlink, #nav .wordmark-text { color: rgba(255,255,255,0.92); transition: color .3s ease; white-space: nowrap; }
#nav .navlink:hover { color: #fff; }
#nav .menu-btn { color: #fff; }
#nav.nav--solid {
  background: rgba(245,248,245,0.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom-color: rgba(0,0,0,0.06); box-shadow: 0 2px 20px -12px rgba(0,0,0,.25);
}
.dark #nav.nav--solid { background: rgba(16,34,16,0.82); border-bottom-color: rgba(255,255,255,0.08); }
#nav.nav--solid .navlink, #nav.nav--solid .wordmark-text { color: #1e293b; }
#nav.nav--solid .navlink:hover { color: #8a6f2e; }
#nav.nav--solid .menu-btn { color: #1e293b; }
.dark #nav.nav--solid .navlink, .dark #nav.nav--solid .wordmark-text, .dark #nav.nav--solid .menu-btn { color: #fff; }
#nav .navlink.is-active { color: #fff; }
#nav.nav--solid .navlink.is-active { color: #8a6f2e; }

/* pages that are light at the top (no dark hero) force solid-style nav from the start */
body.nav-light #nav .navlink, body.nav-light #nav .wordmark-text, body.nav-light #nav .menu-btn { color: #1e293b; }
.dark body.nav-light #nav .navlink, .dark body.nav-light #nav .wordmark-text, .dark body.nav-light #nav .menu-btn { color: #fff; }

/* ---------- LOGO (swaps with nav state) ---------- */
#nav .logo { height: 30px; width: auto; display: block; }
#nav .logo--dark { display: none; }
#nav.nav--solid .logo--light { display: none; }
#nav.nav--solid .logo--dark { display: block; }
body.nav-light #nav .logo--light { display: none; }
body.nav-light #nav .logo--dark { display: block; }
.dark #nav.nav--solid .logo--light, .dark body.nav-light #nav .logo--light { display: block; }
.dark #nav.nav--solid .logo--dark, .dark body.nav-light #nav .logo--dark { display: none; }
#mobileMenu .logo--menu { height: 28px; width: auto; display: block; }
.logo--footer { height: 36px; width: auto; display: block; }

/* ---------- MOBILE MENU ---------- */
#mobileMenu { opacity: 0; pointer-events: none; transition: opacity .3s ease; }
#mobileMenu.is-open { opacity: 1; pointer-events: auto; }

/* ---------- REVEALS ---------- */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
[data-reveal].revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1 !important; transform: none !important; } }

/* ---------- FAQ / ACCORDION ---------- */
[data-acc-body] { max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(.16,1,.3,1); }
[data-acc] .acc-chev { transition: transform .3s ease; }
.acc--open .acc-chev { transform: rotate(180deg); }

/* ---------- HORIZONTAL SCROLL ---------- */
.hscroll { scrollbar-width: none; -ms-overflow-style: none; overflow-y: hidden; touch-action: pan-x; overscroll-behavior-x: contain; }
.hscroll::-webkit-scrollbar { display: none; }
/* cards inside a horizontal rail must be visible immediately (not wait for scroll-reveal),
   so the peek of the next card shows in the default state */
.hscroll [data-reveal] { opacity: 1 !important; transform: none !important; }

/* ---------- HERO KEN-BURNS ---------- */
@keyframes kb { from { transform: scale(1.05); } to { transform: scale(1.14); } }
.kenburns { animation: kb 20s ease-out forwards; }
@media (prefers-reduced-motion: reduce) { .kenburns { animation: none; } }

/* ---------- HERO SLIDESHOW ---------- */
.img-hero-1 { background-image: url("/img/hero-khan-tengri.jpg"); }
.img-hero-2 { background-image: url("/img/hero-kolsay.jpg"); }
.img-hero-3 { background-image: url("/img/hero-singing-dune.jpg"); }
.hero-slide { opacity: 0; transform: scale(1.06); transition: opacity 1.5s ease-in-out; will-change: opacity, transform; }
.hero-slide.is-active { opacity: 1; animation: heroKb 8s ease-out forwards; }
@keyframes heroKb { from { transform: scale(1.06); } to { transform: scale(1.14); } }
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: opacity .6s ease; }
  .hero-slide.is-active { animation: none; transform: none; }
}
/* slideshow dots */
.hero-dots button { width: 9px; height: 9px; border-radius: 999px; background: rgba(255,255,255,0.4); transition: background .3s ease, width .3s ease; }
.hero-dots button.is-active { background: var(--dot-active, #BB9B48); width: 26px; }

/* ---------- MOBILE: trim oversized section rhythm ---------- */
@media (max-width: 639px) {
  .py-16 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .py-20 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
  .py-24 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
  .py-28 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
}

/* ---------- TOUR CARD slideshow (Tours list + Home featured) ---------- */
.tour-slide { opacity: 0; transition: opacity .5s ease-in-out; }
.tour-slide.is-active { opacity: 1; }
.tour-dots button { width: 7px; height: 7px; border-radius: 999px; background: rgba(255,255,255,0.55); transition: background .3s ease, width .3s ease; }
.tour-dots button.is-active { background: #fff; width: 20px; }
.tour-arrow { opacity: 0; transition: opacity .25s ease, background .2s ease; }
.tour-card:hover .tour-arrow { opacity: 1; }

/* ---------- TRAVEL GUIDE sticky section nav ---------- */
.gnav [data-gchip] { transition: background .2s ease, color .2s ease, border-color .2s ease; }
.gnav [data-gchip].is-active { background: #BB9B48; color: #fff; border-color: #BB9B48; }