/* ==========================================================================
   Public header — the data-filled drop-downs (Shared/Views/partials/
   front-header-dynamic.php): Tour Packages, Hotels, Amusement Parks drawn as
   titled blocks with a View All, as the legacy bestbus.in header had them.
   The plain drop-downs (Verticals, Tours By) keep style.css's .mega look.
   ========================================================================== */

/* eight top items share the bar: tighter than the six the bar was drawn for.
   The logo and the Call/WhatsApp buttons never give up width to the menu —
   with eight items at ~1366px the flex row used to squeeze the logo to 0px
   and push WhatsApp off the right edge. The menu is what compacts instead,
   in tiers, and the header row gets more width than the page container so
   the item icons can stay on common laptop screens. */
@media (min-width: 992px) {
  .bb-header > .container:has(.bb-nav--menu) { max-width: min(100%, 1480px); }
  .bb-header__inner:has(.bb-nav--menu) { gap: 14px; }
  .bb-header__inner:has(.bb-nav--menu) > .bb-logo,
  .bb-header__inner:has(.bb-nav--menu) > .d-flex { flex-shrink: 0; }
  /* the menu takes exactly the room left between logo and buttons (its hidden
     drop-down panels would otherwise inflate its flex size) and centres in it */
  .bb-header__inner:has(.bb-nav--menu) > nav { flex: 1 1 0; min-width: 0; display: flex; justify-content: center; }
  .bb-header__inner:has(.bb-nav--menu) > nav > .bb-nav--menu { margin: 0; }
  .bb-nav--menu { gap: 2px; }
  .bb-nav--menu .bb-nav__link { padding: 9px 7px; gap: 6px; font-size: 0.88rem; }
}
/* up to 1600px: Call shows its icon only, menu items a little tighter */
@media (min-width: 992px) and (max-width: 1599.98px) {
  .bb-header__inner:has(.bb-nav--menu) { gap: 14px; }
  .bb-header__inner:has(.bb-nav--menu) .bb-call__text { display: none; }
  .bb-header__inner:has(.bb-nav--menu) .bb-call { padding: 8px; }
  .bb-nav--menu { gap: 0; }
  .bb-nav--menu .bb-nav__link { padding: 8px 8px; gap: 5px; font-size: 0.85rem; }
}
/* below 1360px: the item icons go too */
@media (min-width: 992px) and (max-width: 1359.98px) {
  .bb-nav--menu .bb-nav__link { padding: 8px 6px; font-size: 0.84rem; }
  .bb-nav--menu .bb-nav__link > .bi:first-child { display: none; }
}

/* the WhatsApp button beside Call */
.bb-wa-btn {
  align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: #25d366; color: #fff; font-size: 1.2rem;
  box-shadow: 0 8px 18px -10px rgba(37, 211, 102, 0.9);
  transition: transform var(--dur-1, .15s), box-shadow var(--dur-1, .15s);
}
.bb-wa-btn:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(37, 211, 102, 1); }

/* a block drop-down spans the header's container, not its button */
.bb-nav__item--blocks { position: static; }
.bb-nav__item--blocks.is-open::after { display: none; }
.bb-nav__item--mega.bb-nav__item--blocks .mega.mega--blocks {
  left: 0; right: 0; width: auto;
  padding: 22px 24px 24px;
  border-radius: 16px;
  display: block;
  max-height: calc(100vh - var(--header-h, 76px) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mega--blocks::before { top: -16px; height: 16px; }

.mega-blocks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 22px 26px;
}
.mega-blocks[style*="--mb-cols"] { grid-template-columns: repeat(var(--mb-cols), minmax(0, 1fr)); gap: 22px 40px; }
.mega-block { display: flex; flex-direction: column; min-width: 0; }
.mega-block__title {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 10px; padding-bottom: 8px;
  border-bottom: 2px solid #e3ecf8;
  position: relative;
  font: 750 0.95rem/1.3 var(--font-display, inherit);
  color: #0a58ca;
}
.mega-block__title::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 44px; height: 2px; background: #0a58ca;
}
.mega-block__title .bi { font-size: 1rem; color: #0a58ca; flex: none; }
.mega-block__list { list-style: none; margin: 0 0 12px; padding: 0; }
.mega-block__list li + li { margin-top: 2px; border-top: 1px solid #f0f3f8; }
.mega-block__list a {
  display: flex; align-items: baseline; gap: 7px;
  padding: 4px 4px; border-radius: 6px;
  font: 500 0.86rem/1.35 var(--font-body, inherit);
  color: var(--bb-ink-2, #2b3a4a);
  transition: color .15s, background .15s, transform .15s;
}
.mega-block__list a .bi { font-size: 0.8rem; color: #16a34a; flex: none; transform: translateY(1px); }
.mega-block__list a:hover { color: #0a58ca; background: #f1f6fd; transform: translateX(2px); }
.mega-block__all {
  margin-top: auto; align-self: center;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 16px; border-radius: 6px;
  background: #0a58ca; color: #fff;
  font: 650 0.8rem var(--font-display, inherit);
  transition: background .15s;
}
.mega-block__all:hover { background: #084298; color: #fff; }

/* the drawer: each block a small titled list inside its group */
.bb-drawer__block { padding: 8px 0 10px; }
.bb-drawer__block + .bb-drawer__block { border-top: 1px dashed var(--bb-line-soft, #e5e9f0); }
.bb-drawer__sub .bb-drawer__block-title {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0 6px;
  font: 750 0.86rem var(--font-display, inherit); color: #0a58ca;
}
.bb-drawer__sub .bb-drawer__block a { font-size: 0.86rem; }
.bb-drawer__sub .bb-drawer__block a .bi-arrow-right-circle-fill { font-size: 0.78rem; color: #16a34a; }
.bb-drawer__sub .bb-drawer__block .bb-drawer__block-all { font-weight: 700; color: #0a58ca; }

/* 992–1199: the narrowest desktop bar — smaller logo and labels so the eight items stay on one line */
/* 992–1279px: eight items cannot fit legibly, so the bar works like the
   phone header — logo, Call, WhatsApp and the menu button opening the drawer */
@media (min-width: 992px) and (max-width: 1279.98px) {
  .bb-header__inner:has(.bb-nav--menu) > nav { display: none; }
  .bb-header__inner:has(.bb-nav--menu) { justify-content: space-between; }
  .bb-header__inner:has(.bb-nav--menu) .bb-burger { display: inline-flex !important; }
  .bb-header__inner:has(.bb-nav--menu) .bb-call__text { display: block; }
  .bb-header__inner:has(.bb-nav--menu) .bb-call { padding: revert-layer; }
}
}