/* Modern breadcrumb component — used standalone on light page headers
   (page.html, plan-your-trip.html) and as an overlay inside dark hero
   banners via the .-overlay modifier (contact.html, etc). */

.breadcrumbs {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(5, 7, 60, 0.05);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}

.breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #717171;
  text-decoration: none;
  transition: color 0.2s ease;
}

a.breadcrumbs__item:hover {
  color: var(--color-accent-1, #EB662B);
}

.breadcrumbs__item i {
  font-size: 12px;
  opacity: 0.85;
}

.breadcrumbs__item.-current {
  color: var(--color-dark-1, #05073C);
  font-weight: 600;
}

.breadcrumbs__sep {
  display: inline-flex;
  align-items: center;
  color: #C6C6D2;
  font-size: 9px;
}

/* Overlay variant — sits on top of a dark hero / pageHeader image */
.breadcrumbs.-overlay {
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.breadcrumbs.-overlay .breadcrumbs__item {
  color: rgba(255, 255, 255, 0.85);
}

.breadcrumbs.-overlay a.breadcrumbs__item:hover {
  color: #fff;
}

.breadcrumbs.-overlay .breadcrumbs__item.-current {
  color: #fff;
}

.breadcrumbs.-overlay .breadcrumbs__sep {
  color: rgba(255, 255, 255, 0.55);
}

.hero__content .breadcrumbs,
.pageHeader__content .breadcrumbs {
  margin-bottom: 16px;
}

@media (max-width: 767px) {
  .breadcrumbs {
    font-size: 13px;
    padding: 8px 14px;
    gap: 6px;
  }
}

/* Compact hero/pageHeader banner modifier — the default .hero.-type-1.-min-2
   and .pageHeader.-type-1 padding (190px/200px) is far too tall once a
   breadcrumb + title + text are stacked inside it. margin-top is zeroed out
   because body already reserves space for the fixed header
   (body:not(.trip-page) { padding-top: 80px }) — the theme's own 88px
   margin-top on top of that was a redundant double gap. Shared by any page
   whose banner should look like the contact page (contact.html,
   blog-category.html, blog-detail.html). */
.hero.-type-1.-compact,
.pageHeader.-type-1.-compact {
  margin-top: 0;
  padding-top: 70px;
  padding-bottom: 70px;
}

/* hero__bg / pageHeader__bg has no left/right at desktop widths in the base
   theme (they're commented out or offset), so it shrink-wraps to the
   image's intrinsic width instead of stretching edge-to-edge. Force
   full-bleed at every breakpoint. */
.hero.-type-1.-compact .hero__bg,
.pageHeader.-type-1.-compact .pageHeader__bg {
  left: 0;
  right: 0;
}

.hero.-type-1.-compact .hero__title,
.pageHeader.-type-1.-compact .pageHeader__title {
  font-size: 46px;
}

.hero.-type-1.-compact .hero__text,
.pageHeader.-type-1.-compact .pageHeader__text {
  font-size: 16px;
  margin-top: 8px;
}

@media (max-width: 767px) {
  .hero.-type-1.-compact,
  .pageHeader.-type-1.-compact {
    margin-top: 0;
    padding-top: 90px;
    padding-bottom: 40px;
  }

  .hero.-type-1.-compact .hero__title,
  .pageHeader.-type-1.-compact .pageHeader__title {
    font-size: 30px;
  }
}

/* -lg — a taller banner on top of -compact (still no redundant margin,
   still full-bleed image), currently used on blog-detail.html only. */
.hero.-type-1.-compact.-lg,
.pageHeader.-type-1.-compact.-lg {
  padding-top: 140px;
  padding-bottom: 130px;
}

.hero.-type-1.-compact.-lg .hero__title,
.pageHeader.-type-1.-compact.-lg .pageHeader__title {
  font-size: 58px;
}

.hero.-type-1.-compact.-lg .hero__text,
.pageHeader.-type-1.-compact.-lg .pageHeader__text {
  font-size: 18px;
}

@media (max-width: 767px) {
  .hero.-type-1.-compact.-lg,
  .pageHeader.-type-1.-compact.-lg {
    padding-top: 120px;
    padding-bottom: 70px;
  }

  .hero.-type-1.-compact.-lg .hero__title,
  .pageHeader.-type-1.-compact.-lg .pageHeader__title {
    font-size: 36px;
  }
}