/* ================================================================
   Tusk Travel shared header
   Replace this file together with includes/header.php and header.js.
   ================================================================ */

.tt-header {
  position: sticky;
  z-index: 100;
  top: 0;
  border-bottom: 1px solid rgba(18, 63, 70, .1);
  background: rgba(255, 253, 249, .98);
  transition: box-shadow .22s ease;
}

.tt-header.is-scrolled { box-shadow: 0 12px 34px rgba(23, 33, 40, .09); }

.tt-header-top {
  color: rgba(255, 255, 255, .82);
  background: #0b3339;
  font-size: .8rem;
}

.tt-header-top__inner {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
}

.tt-header-top__trust,
.tt-header-top__contact { display: flex; align-items: center; gap: 25px; }
.tt-header-top__trust span + span { position: relative; }
.tt-header-top__trust span + span::before { position: absolute; top: 50%; left: -13px; width: 3px; height: 3px; border-radius: 50%; content: ""; background: #edbe68; }
.tt-header-top__contact a { color: #fff; font-weight: 700; }
.tt-header-top__contact strong { color: #f4c56f; }

.tt-header-main {
  display: flex;
  height: 78px;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.tt-header-logo { flex: 0 0 auto; }
.tt-header-logo img { width: 178px; height: auto; }

.tt-desktop-nav {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.tt-nav-group { display: flex; height: 100%; align-items: center; }

.tt-desktop-nav__link {
  position: relative;
  display: inline-flex;
  height: 100%;
  align-items: center;
  gap: 7px;
  border: 0;
  padding: 0 12px;
  color: #243138;
  background: transparent;
  font-size: .92rem;
  font-weight: 700;
}

.tt-desktop-nav__link::after {
  position: absolute;
  right: 12px;
  bottom: 15px;
  left: 12px;
  height: 2px;
  content: "";
  transform: scaleX(0);
  transform-origin: center;
  background: var(--tt-coral);
  transition: transform .2s ease;
}

.tt-desktop-nav__link:hover::after,
.tt-nav-group.is-open > .tt-desktop-nav__link::after { transform: scaleX(1); }

.tt-nav-chevron { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; }
.tt-nav-group:hover .tt-nav-chevron,
.tt-nav-group.is-open .tt-nav-chevron { transform: translateY(2px) rotate(225deg); }

.tt-mega-menu {
  position: fixed;
  z-index: 105;
  top: 112px;
  right: 0;
  left: 0;
  visibility: hidden;
  border-top: 1px solid var(--tt-line);
  opacity: 0;
  background: #fffdf9;
  box-shadow: 0 30px 60px rgba(8, 39, 44, .16);
  transform: translateY(8px);
  transition: visibility .2s ease, opacity .2s ease, transform .2s ease;
  pointer-events: none;
}

.tt-nav-group:hover .tt-mega-menu,
.tt-nav-group.is-open .tt-mega-menu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.tt-mega-menu__inner {
  display: grid;
  gap: 30px;
  padding-block: 30px 34px;
}

.tt-mega-menu__inner--india,
.tt-mega-menu__inner--combined { grid-template-columns: .94fr 1fr 1fr 1.02fr; }

.tt-mega-menu__intro {
  padding: 5px 28px 5px 0;
  border-right: 1px solid var(--tt-line);
}
.tt-mega-menu__intro > span { color: var(--tt-coral); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .11em; }
.tt-mega-menu__intro h2 { max-width: 245px; margin: 9px 0 10px; color: #153a40; font-size: 1.62rem; line-height: 1.16; }
.tt-mega-menu__intro p { max-width: 265px; margin-bottom: 18px; color: var(--tt-muted); font-size: .88rem; line-height: 1.6; }
.tt-mega-menu__all { display: inline-flex; align-items: center; gap: 8px; color: var(--tt-teal); font-size: .82rem; font-weight: 800; }
.tt-mega-menu__all span { color: var(--tt-coral); transition: transform .18s ease; }
.tt-mega-menu__all:hover span { transform: translateX(3px); }

.tt-mega-menu__section { align-self: start; }
.tt-mega-menu__section-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.tt-mega-menu__section-head strong { color: var(--tt-teal); font-family: var(--font-serif), serif; font-size: 1.02rem; }
.tt-mega-menu__number { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; color: var(--tt-coral); background: #f7ebe7; font-size: .59rem; font-weight: 850; }
.tt-mega-menu__links { display: grid; gap: 2px; }
.tt-mega-menu__links a { position: relative; border-radius: 8px; padding: 7px 25px 7px 10px; color: #3f4d53; font-size: .86rem; line-height: 1.4; transition: color .18s ease, background .18s ease, padding .18s ease; }
.tt-mega-menu__links a::after { position: absolute; top: 50%; right: 10px; color: var(--tt-coral); content: "→"; opacity: 0; transform: translate(-4px, -50%); transition: opacity .18s ease, transform .18s ease; }
.tt-mega-menu__links a:hover { padding-left: 13px; color: var(--tt-teal); background: #f5f0e9; }
.tt-mega-menu__links a:hover::after { opacity: 1; transform: translate(0, -50%); }

.tt-mega-feature {
  position: relative;
  overflow: hidden;
  display: flex;
  min-height: 205px;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 19px;
  padding: 23px;
  color: #fff;
  background: linear-gradient(145deg, #0d434b, #082b30);
  box-shadow: 0 14px 30px rgba(12, 48, 54, .18);
}

.tt-mega-feature::before { position: absolute; top: -55px; right: -40px; width: 155px; height: 155px; border: 1px solid rgba(244, 197, 111, .24); border-radius: 50%; content: ""; }
.tt-mega-feature::after { position: absolute; top: -25px; right: -10px; width: 85px; height: 85px; border-radius: 50%; content: ""; background: rgba(244, 197, 111, .08); }
.tt-mega-feature small { position: relative; z-index: 1; margin-bottom: auto; color: #f4c56f; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; }
.tt-mega-feature strong { position: relative; z-index: 1; margin-bottom: 7px; font-family: var(--font-serif), serif; font-size: 1.3rem; line-height: 1.2; }
.tt-mega-feature span { position: relative; z-index: 1; color: rgba(255, 255, 255, .78); font-size: .78rem; line-height: 1.52; }
.tt-mega-feature b { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; margin-top: 16px; color: #f4c56f; font-size: .8rem; }
.tt-mega-feature b i { font-style: normal; transition: transform .18s ease; }
.tt-mega-feature:hover b i { transform: translateX(4px); }
.tt-mega-feature--india { background: linear-gradient(145deg, #76553d, #3f2c21); }

.tt-route-list { display: grid; align-content: start; gap: 3px; }
.tt-route-list > strong { margin-bottom: 8px; color: var(--tt-teal); font-family: var(--font-serif), serif; font-size: 1rem; }
.tt-route-list a { display: grid; grid-template-columns: 49px 1fr auto; align-items: center; gap: 8px; border-radius: 10px; padding: 8px 9px; transition: background .18s ease, transform .18s ease; }
.tt-route-list a:hover { background: #f5f0e9; transform: translateX(2px); }
.tt-route-list a span { color: var(--tt-coral); font-size: .68rem; font-weight: 850; text-transform: uppercase; }
.tt-route-list a b { color: #3f4d53; font-size: .82rem; font-weight: 650; }
.tt-route-list a i { color: var(--tt-coral); font-size: .74rem; font-style: normal; opacity: 0; transition: opacity .18s ease, transform .18s ease; }
.tt-route-list a:hover i { opacity: 1; transform: translateX(2px); }

.tt-mega-menu__inner--asia { grid-template-columns: .72fr 2.28fr; }
.tt-asia-menu { display: grid; align-content: start; gap: 16px; }
.tt-asia-menu__primary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.tt-asia-menu__primary a { display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto auto; column-gap: 10px; border: 1px solid #e6ddd3; border-radius: 13px; padding: 11px 12px; background: #fff; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.tt-asia-menu__primary a:hover { border-color: #bfcfcd; box-shadow: 0 8px 18px rgba(11, 51, 57, .08); transform: translateY(-2px); }
.tt-asia-menu__primary a > span { display: grid; grid-row: 1 / span 2; width: 36px; height: 36px; place-items: center; align-self: center; border-radius: 50%; color: var(--tt-coral); background: #f7ebe7; font-size: .66rem; font-weight: 850; letter-spacing: .04em; }
.tt-asia-menu__primary b { color: var(--tt-teal); font-family: var(--font-serif), serif; font-size: .93rem; }
.tt-asia-menu__primary small { color: var(--tt-muted); font-size: .72rem; }
.tt-asia-menu__more { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; border-top: 1px solid var(--tt-line); padding-top: 13px; }
.tt-asia-menu__more > span { margin-right: 5px; color: var(--tt-muted); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.tt-asia-menu__more a { border-radius: 999px; padding: 6px 9px; color: #3f4d53; background: #f5f0e9; font-size: .74rem; font-weight: 700; }
.tt-asia-menu__more a:hover { color: #fff; background: var(--tt-teal); }

.tt-header-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 9px; }
.tt-header-search-button { display: grid; width: 43px; height: 43px; place-items: center; border: 1px solid var(--tt-line); border-radius: 50%; color: var(--tt-teal); background: #fff; transition: border-color .18s ease, background .18s ease; }
.tt-header-search-button:hover { border-color: #b9c9c7; background: #f3f7f6; }
.tt-header-search-button svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.tt-header-plan-button { display: inline-flex; min-height: 45px; align-items: center; border-radius: 999px; padding: 9px 20px; color: #fff; background: var(--tt-coral); font-size: .9rem; font-weight: 800; box-shadow: 0 9px 20px rgba(215, 101, 77, .2); transition: background .18s ease, transform .18s ease; }
.tt-header-plan-button:hover { background: #c95640; transform: translateY(-1px); }
.tt-mobile-menu-button { display: none; width: 43px; height: 43px; border: 0; border-radius: 50%; background: #f4efe8; }
.tt-mobile-menu-button span { display: block; width: 21px; height: 2px; margin: 4px auto; background: var(--tt-ink); }

.tt-menu-backdrop,
.tt-mobile-drawer { display: none; }

/* Search panel */
.tt-header-search { position: fixed; z-index: 210; inset: 0; display: grid; place-items: start center; padding: 9vh 20px 20px; }
.tt-header-search__backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(5, 28, 33, .82); backdrop-filter: blur(7px); }
.tt-header-search__panel { position: relative; width: min(720px, 100%); border-radius: 22px; padding: 31px; background: #fffdf9; box-shadow: 0 30px 70px rgba(0, 0, 0, .25); }
.tt-header-search__head { display: flex; align-items: center; justify-content: space-between; }
.tt-header-search__head span { color: var(--tt-coral); font-size: .7rem; font-weight: 850; text-transform: uppercase; letter-spacing: .1em; }
.tt-header-search__head button { display: grid; width: 38px; height: 38px; place-items: center; border: 0; border-radius: 50%; color: var(--tt-ink); background: var(--tt-soft); font-size: 1.6rem; }
.tt-header-search h2 { margin: 12px 0 7px; font-size: clamp(2rem, 5vw, 3.2rem); }
.tt-header-search__panel > p { margin-bottom: 24px; color: var(--tt-muted); }
.tt-header-search form { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.tt-header-search__field { display: flex; min-width: 0; align-items: center; gap: 10px; border: 1px solid #d8cec3; border-radius: 999px; padding: 0 17px; background: #fff; }
.tt-header-search__field:focus-within { border-color: var(--tt-teal); box-shadow: 0 0 0 3px rgba(18, 63, 70, .09); }
.tt-header-search__field svg { width: 19px; flex: 0 0 auto; fill: none; stroke: var(--tt-teal); stroke-width: 1.8; }
.tt-header-search__field input { width: 100%; min-width: 0; min-height: 54px; border: 0; outline: 0; background: transparent; }
.tt-header-search__suggestions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 19px; }
.tt-header-search__suggestions > span { width: 100%; margin-bottom: 2px; color: var(--tt-muted); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.tt-header-search__suggestions a { border: 1px solid var(--tt-line); border-radius: 999px; padding: 8px 12px; color: #3f4d53; background: #fff; font-size: .82rem; }
.tt-header-search__suggestions a:hover { color: var(--tt-teal); border-color: #b8c8c6; }

@media (max-width: 1130px) {
  .tt-desktop-nav { display: none; }
  .tt-mobile-menu-button { display: block; }
  .tt-header-main { height: 72px; }
  .tt-header-logo img { width: 166px; }

  .tt-menu-backdrop { position: fixed; z-index: 180; inset: 0; display: block; visibility: hidden; opacity: 0; background: rgba(5, 28, 33, .62); transition: visibility .25s ease, opacity .25s ease; }
  .tt-menu-backdrop.is-open { visibility: visible; opacity: 1; }

  .tt-mobile-drawer { position: fixed; z-index: 190; top: 0; right: 0; bottom: 0; display: flex; width: min(420px, 92vw); flex-direction: column; overflow-y: auto; transform: translateX(105%); background: #fffdf9; box-shadow: -20px 0 50px rgba(8, 39, 44, .18); transition: transform .28s ease; }
  .tt-mobile-drawer.is-open { transform: translateX(0); }
  .tt-mobile-drawer__head { display: flex; min-height: 82px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--tt-line); padding: 15px 20px; }
  .tt-mobile-drawer__head img { width: 158px; height: auto; }
  .tt-mobile-drawer__head button { display: grid; width: 40px; height: 40px; place-items: center; border: 0; border-radius: 50%; color: var(--tt-ink); background: var(--tt-soft); font-size: 1.8rem; }
  .tt-mobile-drawer__body { flex: 1; padding: 16px 20px; }
  .tt-mobile-nav-link,
  .tt-mobile-nav-group > button { display: flex; width: 100%; min-height: 53px; align-items: center; justify-content: space-between; border: 0; border-bottom: 1px solid var(--tt-line); padding: 10px 3px; color: var(--tt-ink); background: transparent; text-align: left; font-family: var(--font-serif), serif; font-size: 1.12rem; font-weight: 600; }
  .tt-mobile-nav-group > button span { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; color: var(--tt-teal); background: #edf3f2; font-family: var(--font-sans), sans-serif; font-size: 1rem; transition: transform .2s ease; }
  .tt-mobile-nav-group.is-open > button span { transform: rotate(45deg); }
  .tt-mobile-nav-panel { display: grid; border-bottom: 1px solid var(--tt-line); padding: 7px 0 12px 14px; }
  .tt-mobile-nav-panel a { position: relative; padding: 10px 8px 10px 15px; color: var(--tt-muted); font-size: .96rem; line-height: 1.45; }
  .tt-mobile-nav-panel a::before { position: absolute; top: 50%; left: 0; width: 5px; height: 5px; border-radius: 50%; content: ""; background: var(--tt-coral); }
  .tt-mobile-nav-panel .tt-mobile-nav-panel__featured { margin: 5px 0 6px; border-radius: 9px; padding: 10px 12px; color: var(--tt-teal); background: #edf3f2; font-weight: 800; }
  .tt-mobile-nav-panel .tt-mobile-nav-panel__featured::before { display: none; }
  .tt-mobile-drawer__footer { border-top: 1px solid var(--tt-line); padding: 20px; background: #f5f0e9; }
  .tt-mobile-drawer__footer p { display: grid; gap: 3px; margin-bottom: 14px; }
  .tt-mobile-drawer__footer p strong { color: var(--tt-teal); font-family: var(--font-serif), serif; }
  .tt-mobile-drawer__footer p span { color: var(--tt-muted); font-size: .88rem; }
  .tt-mobile-drawer__footer > .tt-button { width: 100%; }
  .tt-mobile-drawer__footer > div { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; color: var(--tt-muted); font-size: .78rem; }
}

@media (max-width: 760px) {
  .tt-header-top__inner { min-height: 31px; justify-content: center; }
  .tt-header-top__trust { display: none; }
  .tt-header-top__contact { width: 100%; justify-content: space-between; gap: 12px; }
  .tt-header-top__contact > span { display: none; }
  .tt-header-top__contact a { font-size: .76rem; }
  .tt-header-top__contact strong { font-size: .76rem; }
  .tt-header-main { height: 67px; gap: 10px; }
  .tt-header-logo img { width: 145px; }
  .tt-header-plan-button { display: none; }
  .tt-header-actions { gap: 5px; }
  .tt-header-search-button,
  .tt-mobile-menu-button { width: 40px; height: 40px; }

  .tt-header-search { align-items: end; padding: 0; }
  .tt-header-search__panel { width: 100%; max-height: 92vh; overflow-y: auto; border-radius: 22px 22px 0 0; padding: 24px 18px 28px; }
  .tt-header-search h2 { font-size: 2.25rem; }
  .tt-header-search form { grid-template-columns: 1fr; }
  .tt-header-search form .tt-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .tt-header *,
  .tt-mobile-drawer,
  .tt-menu-backdrop,
  .tt-mega-menu { scroll-behavior: auto!important; transition: none!important; }
}
