/* ==========================================================================
   Jambo Trail Safaris - site overrides
   Loaded after style.css. Keep template CSS untouched and put brand or
   content-driven adjustments here.
   ========================================================================== */

/* ==========================================================================
   Brand palette
   Sampled from assets/docs/labour-day-poster.jpeg. The template shipped a
   cool slate/olive scheme; the poster is built from four warm families, so
   the tokens below are remapped to those and everything that reads from the
   variables follows. Hex values are the measured poster colours, lifted a
   step or two where a raw sample was too dark to carry white text well.

     sun orange   #f7921e  logo sun disc  (samples #e08018 - #f0a820)
     ribbon       #b05c14  "1st May" ribbon, the star accents
     espresso     #3a2712  the "LABOUR" wordmark
     forest       #2e3f20  the "DAY" wordmark and the footer band
     cream        #fbefdf  the poster paper
     sunset gold  #fde29a  the sky behind the savanna
   ========================================================================== */

:root {
  /* Sun orange already matched the poster, so it stays as the primary accent
     and keeps the logo, the favicons and the theme-color metas in step. */
  --theme-color: #f7921e;
  --theme-color-rgb: 247, 146, 31;

  /* The poster never puts white type on the bright sun - it uses the deeper
     ribbon tone for that. Exposed here for solid fills that carry a label. */
  --ribbon-color: #b05c14;
  --ribbon-color-rgb: 176, 92, 20;
  --sunset-color: #fde29a;
  --sunset-color-rgb: 253, 226, 154;

  /* Was #223740, a cold slate with no counterpart on the poster. */
  --second-theme-color: #3a2712;
  --second-theme-color-rgb: 58, 39, 18;

  /* Was #465b2d. Pulled to the poster's own band green, which is deeper and
     less yellow; this also drives the 12%/14% tints behind section blocks. */
  --third-theme-color: #2e3f20;
  --third-theme-color-rgb: 46, 63, 32;

  /* Neutral near-black and cool grey traded for the poster's warm ink. */
  --title-color: #2a1c0c;
  --title-color-rgb: 42, 28, 12;
  --body-color: #5a4b3c;
  --body-color-rgb: 90, 75, 60;

  --bg-color-2: #3a2712;
  --bg-color-2-rgb: 58, 39, 18;
  --bg-color-3: #2e3f20;
  --bg-color-3-rgb: 46, 63, 32;
  --bg-color-4: #2a1c0c;
  --bg-color-4-rgb: 42, 28, 12;

  /* Light greys sit against cream throughout, so they carry the same warmth
     rather than going grey-on-beige. bg-color-5 is the footer body text. */
  --bg-color-5: #d8d2c2;
  --bg-color-5-rgb: 216, 210, 194;
  --bg-color-6: #d5cec1;
  --bg-color-6-rgb: 213, 206, 193;
  --bg-color-7: #ded6c8;
  --bg-color-7-rgb: 222, 214, 200;
  --bg-color-8: #fdf8f0;
  --bg-color-8-rgb: 253, 248, 240;
  --bg-color-9: #b05c14;
  --bg-color-9-rgb: 176, 92, 20;
  --bg-color-10: #dfd8ca;
  --bg-color-10-rgb: 223, 216, 202;
  --bg-color-11: #fbefdf;
  --bg-color-11-rgb: 251, 239, 223;

  --yellow-color: #f0b53c;
  --vs-border-color: #e4d9c8;
}

/* Solid buttons: white on the bright sun is 2.3:1, which is why the poster
   reserves the ribbon tone for filled shapes that carry type (4.8:1). Any
   button that already carries a bg-* utility keeps the colour it was given. */
.vs-btn:not([class*=bg-]) {
  background-color: var(--ribbon-color);
}

/* Kenyan Shilling amounts are longer than the template's "$450", so the
   price rows need a little more room before they wrap onto two lines. */
.tour-package-box .tour-package-footer .pricing-info {
  gap: 6px;
  font-size: 14px;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.tour-package-box .tour-package-footer .pricing-info .new-price {
  font-size: 19px;
  letter-spacing: 0.2px;
}

.tour-package-box .tour-package-footer .tour-duration span {
  white-space: nowrap;
}

@media (max-width: 1199px) {
  .tour-package-box .tour-package-footer {
    flex-wrap: wrap;
    row-gap: 8px;
  }
}

/* Homepage slider cards carry both the current and the struck-through price,
   and Kenyan place names run longer than the template's "Thailand, vietnam".
   Tighten the meta row so it does not break across three lines. */
.tour-package-box .pricing-container .price h6 {
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.tour-package-box .pricing-container .price del {
  white-space: nowrap;
}

.tour-package-box .tour-package-content .pricing-container {
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin: 22px 0;
}

.tour-package-box .tour-package-content .pricing-container .package-info {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 18px;
  row-gap: 6px;
  width: 100%;
  margin-right: 0;
}

.tour-package-box .tour-package-content .pricing-container .package-info span {
  gap: 8px;
  font-size: 14px;
  letter-spacing: 0.1px;
  white-space: nowrap;
}

.tour-package-box .tour-package-content .pricing-container .price-info {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding-left: 0;
  border-left: 0;
  border-top: 1px solid rgba(var(--black-color-rgb), 0.12);
  padding-top: 14px;
}

.tour-package-box .tour-package-content .pricing-container .price-info .price h6 {
  font-size: 26px;
}

/* Booking sidebar on the package detail page. */
.destination-cost-sidebar .price,
.trip-availability .price {
  white-space: nowrap;
}

/* The destination grid originally relied on each photo's intrinsic size to set
   the card height. Sizing the images from the card instead lets any photo sit
   in any slot without breaking the row rhythm. */
@media (min-width: 1200px) {
  .destination-box-2 .destination-thumb,
  .destination-box-2 .destination-thumb img {
    width: 100%;
  }

  .destination-box-2 .destination-thumb img {
    display: block;
    height: 342px;
    object-fit: cover;
  }
}

/* Activity cards: the template sized each card from its photo, so a swapped-in
   image of a different shape would break the row. Size from the card instead. */
@media (min-width: 992px) {
  .activities-box .activities-thumb,
  .activities-box .activities-thumb img {
    width: 100%;
  }

  .activities-box .activities-thumb img {
    display: block;
    height: 380px;
    object-fit: cover;
  }
}

/* Card captions sat directly on the photo and relied on the stock images all
   being dark at the bottom. A scrim keeps the text readable on any photo. */
.activities-box .activities-thumb,
.destination-box-2 .destination-thumb {
  position: relative;
}

.activities-box .activities-thumb::after,
.destination-box-2 .destination-thumb::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 58%;
  pointer-events: none;
  background: linear-gradient(to top, rgba(20, 20, 20, 0.78) 0%,
                                      rgba(20, 20, 20, 0.35) 45%,
                                      rgba(20, 20, 20, 0) 100%);
}

.activities-box .activities-content,
.destination-box-2 .destination-content {
  z-index: 2;
}

/* The hero art is a drawn savanna scene, so stretching it to the section box
   (the template's `background-size: 100% 100%`) distorts the trees on tall or
   ultrawide screens. Cover-crop from the horizon instead. */
@media (min-width: 1200px) {
  .hero-layout1 {
    background-size: cover;
    background-position: center bottom;
  }
}

/* ==========================================================================
   Jambo Trail Safaris photography
   The imported photos come in mixed shapes (720x480, 640x960, 500x500 ...),
   where the template assumed one size per slot. Every image slot is therefore
   sized from its card and cover-cropped, so any photo drops in cleanly.
   ========================================================================== */

.destination-box .destination-thumb img,
.tour-package-box .tour-package-thumb img,
.destination-gallery-box img,
.vs-services-box-style1 .services-thumb img,
.vs-blog-box .blog-thumb img,
.vs-blog .blog-img img,
.recent-post .media-img img,
.gallery-box .post-thumb img,
.instagram a img,
.sidebar-gallery .gallery-box img,
.about-thumb img,
.destination-single-img img {
  object-fit: cover;
  width: 100%;
}

/* Homepage: destination tiles and the package slider */
.destination-box .destination-thumb img {
  height: 100%;
}

.tour-package-box .tour-package-thumb img {
  height: 240px;
}

.tour-package-box.style-3 .tour-package-thumb img {
  height: 230px;
}

/* Homepage service tiles and the gallery mosaic */
.vs-services-box-style1 .services-thumb img {
  height: 100%;
}

.destination-gallery-box img {
  height: 100%;
  min-height: 240px;
}

/* Journal cards, list items and sidebar thumbnails */
.vs-blog-box .blog-thumb img {
  height: 250px;
}

.vs-blog .blog-img img {
  height: 420px;
}

@media (max-width: 767px) {
  .vs-blog .blog-img img {
    height: 260px;
  }
}

.recent-post .media-img img {
  height: 74px;
  width: 88px;
}

.gallery-box .post-thumb img,
.sidebar-gallery .gallery-box img,
.instagram a img {
  aspect-ratio: 1 / 1;
  height: auto;
}

/* Author box and comment avatars are round in the template */
.blog-author-box img,
.vs-comment-item .comment-avater img,
.comment-avater img {
  object-fit: cover;
  aspect-ratio: 1 / 1;
}

/* About page portrait and the package detail hero */
.about-thumb img {
  height: 480px;
  border-radius: 15px;
}

@media (max-width: 767px) {
  .about-thumb img {
    height: 320px;
  }
}

.destination-single-img img {
  height: 460px;
  border-radius: 15px;
}

@media (max-width: 767px) {
  .destination-single-img img {
    height: 280px;
  }
}

/* Journal body images sit two-up under the article */
.blog-single .row img {
  object-fit: cover;
  width: 100%;
  height: 280px;
}

/* ==========================================================================
   Logo
   The placeholder wordmark was a 230x66 SVG whose intrinsic size did the
   sizing for it. The real mark is lifted from the poster at 719x192, so the
   slots need an explicit width; 250px puts it back at ~67px tall, the
   footprint the header was built around. Slots that already cap the logo
   (#navbars, the mobile drawer) are more specific and keep their own limit.
   ========================================================================== */

img.logo,
.logo img,
.preloader-inner img {
  width: 250px;
  max-width: 100%;
  height: auto;
}

@media (max-width: 575px) {
  img.logo,
  .logo img {
    width: 190px;
  }
}

/* ==========================================================================
   Core business and competitive advantage
   The corporate profile lists these as icon-and-text, which the template had
   no card for - its services boxes are all photo-led. These two are the only
   new components; everything else reuses the template's own classes.
   ========================================================================== */

.jts-service-card {
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  border-radius: 15px;
  background: var(--white-color);
  border: 1px solid var(--vs-border-color);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.jts-service-card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--theme-color-rgb), 0.45);
  box-shadow: 0 18px 34px rgba(var(--second-theme-color-rgb), 0.12);
}

.jts-service-icon {
  display: grid;
  place-content: center;
  width: 58px;
  height: 58px;
  margin-bottom: 22px;
  border-radius: 50%;
  font-size: 22px;
  color: var(--white-color);
  background: var(--third-theme-color);
}

.jts-service-card:hover .jts-service-icon {
  background: var(--ribbon-color);
}

.jts-service-title {
  margin-bottom: 10px;
  font-size: 20px;
  line-height: 1.35;
}

.jts-service-title a {
  color: inherit;
}

.jts-service-title a:hover {
  color: var(--theme-color);
}

.jts-service-text {
  margin-bottom: 0;
  font-size: 15px;
}

.jts-advantage {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  padding: 18px 22px;
  border-radius: 12px;
  background: rgba(var(--third-theme-color-rgb), 0.08);
  font-weight: 600;
  color: var(--title-color);
}

.jts-advantage i {
  flex: 0 0 auto;
  font-size: 18px;
  color: var(--ribbon-color);
}

/* The team cards carry a short bio under the name, which the template's
   guide box was not sized for. */
.guide-box .guide-thumb img {
  height: 340px;
  object-fit: cover;
  object-position: center top;
}

@media (max-width: 991px) {
  .guide-box .guide-thumb img {
    height: 380px;
  }
}

/* The template defines --bg-color-11 but never shipped the matching utility
   class, so a section asking for the cream paper rendered white. */
.bg-color-11 {
  background-color: var(--bg-color-11);
}