/* Match the homepage's local brand header styling on non-index pages. */
.header__logo {
  align-items: center;
  display: flex;
  gap: 10px;
  height: 56px;
  max-width: none;
  text-decoration: none;
  width: auto;
}

/* Logo renders at 96px but only occupies 56px of header height — the extra hangs below the bar like a badge, so header size, menu and alignment are unaffected. */
.header__logo img {
  border-radius: 8px;
  display: block;
  flex-shrink: 0;
  height: 96px;
  margin: -20px 0;
  object-fit: contain;
  width: 96px;
}

.header-mobile__logo {
  align-items: center;
  display: flex;
  gap: 10px;
  max-width: none;
  text-decoration: none;
  width: auto;
}

.header-mobile__logo img {
  border-radius: 8px;
  display: block;
  flex-shrink: 0;
  height: 80px;
  margin: -18px 0;
  object-fit: contain;
  width: 80px;
}

/* Slimmer mobile header bar. */
.header-mobile__wrap {
  padding: 8px 20px;
}

.header__logo .brand-name,
.header-mobile__logo .brand-name {
  color: var(--color-text-base, #303030);
  font-family: var(--font-second, inherit);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.25;
  max-width: none;
  white-space: normal;
  word-spacing: 0.08em;
}

/* Desktop: brand name stays on one clean line and takes the space it needs. */
.header__logo .brand-name {
  white-space: nowrap;
}

/* Menu items like "Day Trips" / "About Us" must never break onto two lines. */
.nav__link,
.nav-mobile__title {
  white-space: nowrap;
}

/* Mega menu cards: every picture gets a uniform vertical (portrait) shape. */
.menu-content .menu-content__img img,
.menu-content__img img {
  aspect-ratio: 3 / 4;
  height: auto;
  object-fit: cover;
  border-radius: 12px;
}

/* Mobile: allow a tidy two-line wrap so the WhatsApp button is not pushed out. */
.header-mobile__logo .brand-name {
  max-width: 210px;
}

/* Tap-to-open for the price/currency toggle (design shows it on hover only,
   which touch devices cannot trigger). */
.toggle.is-open .toggle__wrap {
  opacity: 1;
  visibility: visible;
}

/* Footer awards strip: the replacement marks (USTOA, APTA, TCAA) have very
   different proportions from the logos they stand in for. Size the anchors as
   well as the images, otherwise a wide mark overflows its fixed-width slot and
   collides with its neighbour. */
.awards-list__item--certificate,
.awards-list__item--height {
  width: auto;
  flex: 0 0 auto;
}

.awards-list__item img[srcset*="ustoa-gold"],
.awards-list__item img[srcset*="apta-gold"],
.awards-list__item img[srcset*="tcaa-gold"] {
  height: auto;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.awards-list__item--certificate img[srcset*="ustoa-gold"] { max-height: 34px; max-width: 140px; }
.awards-list__item img[srcset*="apta-gold"]              { max-height: 58px; max-width: 128px; }
.awards-list__item--height img[srcset*="tcaa-gold"]      { max-height: 52px; max-width: 108px; }

/* Tanzania Tourism banner, shown above the credentials strip in the footer.
   The artwork is very wide (4.5:1); on narrow screens it is centre-cropped so
   the wordmark stays legible instead of shrinking to nothing. The surrounding
   colour matches the artwork's own background so the crop is invisible. */
.tz-banner {
  background-color: #0d4369;
  padding: 0;
  width: 100%;
}

.tz-banner img {
  display: block;
  height: auto;
  margin: 0 auto;
  max-width: 1366px;
  width: 100%;
}

/* Deliberately not cropped on small screens: cropping cuts the wordmark and the
   "Welcome to Tanzania" line. The artwork keeps its own proportions and the
   surrounding colour matches it, so it reads as a full-width band at any size. */


/* Climbing Kilimanjaro "Why You Can Trust Us" banner: the TCAA and APTA marks
   that replaced the World Travel Awards badges are landscape (500x247 and
   600x267), where the badges were portrait. The stock --small slot is 142px
   wide by 162px tall, which would render them barely 70px high and stranded at
   the top of the box, so they get a wider slot and are centred against the
   taller Uhuru Torch badge standing beside them. */
.awards-banner__item--cert {
  align-items: center;
  max-width: 168px;
  min-height: 162px;
}

.awards-banner__item--cert img {
  height: auto;
  max-width: 100%;
  width: 100%;
}

/* Stacked layout: the slot no longer sits beside a tall badge, so the portrait
   min-height would only add dead space beneath a wide, short mark. */
@media (max-width: 991px) {
  .awards-banner__item--cert {
    margin: 14px 0;
    max-width: 190px;
    min-height: 0;
  }
}

/* The plain TripAdvisor logo replaces the old "#1 RANKED" and "Travellers'
   Choice" badges. Those were wide, roughly square artworks; this one is a
   circle, so the slots that used object-fit:cover would crop its edges. Switch
   them to contain and let the circle keep its own proportions. */
.tripadvisor-pin__img img {
  height: 72px;
  object-fit: contain;
  width: 72px;
}

.card-achievement__icon--trip picture img,
.card-achievement.tooltip .card-achievement__icon--trip picture img {
  object-fit: contain;
}

/* Comment avatars: the brand logo replaces the old mark here, so make it fill
   the 50px circular slot instead of sitting at its natural size. */
.comment-item .comment-item__preview img,
.comment-item .comment-item__preview svg {
  height: 100%;
  object-fit: cover;
  width: 100%;
}