/* ==========================================================================
   Header, primary navigation and the Travel Solutions mega menu
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-med), box-shadow var(--t-med);
}
/* The blur lives on a pseudo-element: backdrop-filter on the header itself would become the
   containing block for the fixed mobile drawer and collapse it to the header height. */
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(1.5) blur(16px); backdrop-filter: saturate(1.5) blur(16px); transition: background var(--t-med); }
.site-header[data-scrolled] { border-bottom-color: var(--line); box-shadow: 0 10px 30px -18px rgba(14, 18, 53, .25); }
.site-header[data-scrolled]::before { background: rgba(255, 255, 255, .94); }
.header-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: var(--header-h); }
.brand { display: block; flex: none; border-radius: 8px; }
.brand img { height: 46px; width: auto; }

/* ---------- Mobile toggle ---------- */
.nav-toggle { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 12px; background: var(--mist); }
.nav-toggle-bars { position: relative; width: 20px; height: 14px; }
.nav-toggle-bars i { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: var(--ink); transition: transform var(--t-med) var(--ease), opacity var(--t-fast), top var(--t-med) var(--ease); }
.nav-toggle-bars i:nth-child(1) { top: 0; } .nav-toggle-bars i:nth-child(2) { top: 6px; } .nav-toggle-bars i:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] i:nth-child(1) { top: 6px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] i:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* ---------- Shared item styles ---------- */
.nav-link { position: relative; display: block; padding: .6rem .85rem; font-weight: 600; font-size: .9375rem; color: var(--ink); border-radius: 10px; transition: color var(--t-fast); }
.nav-link:hover { color: var(--indigo); }
.nav-link.is-active { color: var(--indigo); }
.nav-caret { display: grid; place-items: center; width: 1.75rem; height: 2.25rem; margin-left: -.35rem; color: var(--muted); border-radius: 8px; transition: color var(--t-fast); }
.nav-caret .icon { transition: transform var(--t-med) var(--ease); }
.nav-caret:hover { color: var(--indigo); }
.nav-caret[aria-expanded="true"] { color: var(--indigo); }
.nav-caret[aria-expanded="true"] .icon { transform: rotate(180deg); }

.mega-ico { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none; border-radius: 12px; color: #fff; transition: transform var(--t-med) var(--ease); }
.mega-link { display: flex; align-items: flex-start; gap: .85rem; padding: .7rem .75rem; border-radius: 14px; transition: background var(--t-fast); }
.mega-link:hover { background: var(--mist); }
.mega-link:hover .mega-ico { transform: translateY(-2px) rotate(-4deg); }
.mega-text { display: block; min-width: 0; }
.mega-text strong { display: block; font-size: .9375rem; line-height: 1.3; font-weight: 700; color: var(--ink); }
.mega-text small { display: block; margin-top: .15rem; font-size: .8125rem; line-height: 1.45; color: var(--muted); }
.mega-link:hover strong { color: var(--indigo); }

/* ==========================================================================
   Desktop
   ========================================================================== */
@media (min-width: 1100px) {
  .nav-toggle, .nav-scrim { display: none; }
  .primary-nav { display: flex; align-items: center; gap: 1.25rem; }
  .nav-list { display: flex; align-items: center; gap: .1rem; }
  .nav-item { position: static; }
  .has-dropdown { position: relative; }
  .nav-split { display: flex; align-items: center; border-radius: 10px; transition: background var(--t-fast); }
  .nav-item:hover > .nav-split, .nav-item.is-open > .nav-split { background: var(--mist); }
  .has-mega .nav-link, .has-dropdown .nav-link { padding-right: .35rem; }
  .nav-link::after { content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .2rem; height: 2px; border-radius: 2px; background: var(--grad-brand); transform: scaleX(0); transform-origin: left; transition: transform var(--t-med) var(--ease); }
  .nav-link.is-active::after { transform: scaleX(1); }
  .has-mega .nav-link::after, .has-dropdown .nav-link::after { right: .35rem; }
  .nav-cta { margin-left: .5rem; }

  /* Mega panel: aligned to the container, hover bridge via padding-top */
  .mega { position: absolute; left: 0; right: 0; top: 100%; padding-top: 10px; opacity: 0; visibility: hidden; transform: translateY(10px) scale(.992); transform-origin: 50% 0; pointer-events: none;
          transition: opacity .2s ease, transform .3s var(--ease), visibility 0s linear .3s; }
  .nav-item.is-open > .mega { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }
  .mega-inner { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-pop); overflow: hidden; }
  .mega-main { padding: 1.6rem 1.75rem 0; display: flex; flex-direction: column; }
  .mega-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem 1.25rem; }
  .mega-group-title { position: relative; padding: 0 .75rem .75rem; margin-bottom: .35rem; border-bottom: 1px solid var(--line); font: 650 .875rem/1.2 var(--font-display); letter-spacing: -.01em; color: var(--ink); }
  .mega-group-title::after { content: ""; position: absolute; left: .75rem; bottom: -1px; width: 2.25rem; height: 2px; border-radius: 2px; background: var(--grad-brand); }
  .mega-beyond { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1.1rem; margin: 1.25rem -1.75rem 0; padding: .95rem 1.75rem; background: var(--mist); border-top: 1px solid var(--line); font-size: .8125rem; color: var(--muted); }
  .mega-beyond-label { font-weight: 650; color: var(--ink-2); }
  .mega-beyond ul { display: flex; flex-wrap: wrap; gap: .35rem 1rem; }
  .mega-beyond li { display: inline-flex; align-items: center; gap: .4rem; }
  .mega-beyond li .icon { color: var(--cyan-700); }
  .mega-beyond-link { margin-left: auto; font-weight: 650; color: var(--indigo); }
  .mega-beyond-link:hover { text-decoration: underline; text-underline-offset: 3px; }

  .mega-feature { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 1.5rem 1.6rem 1.6rem; color: #d4dbff; background: var(--grad-ink); overflow: hidden; isolation: isolate; }
  .mega-feature::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("../images/backgrounds/meridian-dark.svg") 120% 0 / 150% auto no-repeat; opacity: .8; }
  .mega-globe { width: 16rem; margin: -.5rem -3rem .25rem auto; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .35)); animation: mega-float 7s ease-in-out infinite; }
  .mega-feature h3 { color: #fff; font-size: 1.2rem; max-width: 12ch; }
  .mega-feature p { margin: .6rem 0 1.15rem; font-size: .875rem; line-height: 1.55; }
  .mega-feature-link { display: inline-flex; align-items: center; gap: .4rem; margin-top: auto; padding-top: 1.1rem; font-size: .875rem; font-weight: 650; color: #fff; }
  .mega-feature-link .icon { transition: transform var(--t-med) var(--ease); }
  .mega-feature-link:hover .icon { transform: translateX(4px); }
  .mega-feature-link:hover { text-decoration: underline; text-underline-offset: 4px; }
  .mega-feature .btn { margin-top: .15rem; }

  /* Simple dropdown */
  .dropdown { position: absolute; left: -.5rem; top: 100%; width: 20rem; padding-top: 10px; opacity: 0; visibility: hidden; transform: translateY(10px); pointer-events: none; transition: opacity .2s ease, transform .3s var(--ease), visibility 0s linear .3s; }
  .nav-item.is-open > .dropdown { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }
  .dropdown ul { padding: .5rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-pop); }
}

/* Compact desktops: the featured panel becomes a slim bar so the mega menu stays short */
@media (min-width: 1100px) and (max-width: 1279.98px) {
  .mega-inner { grid-template-columns: 1fr; }
  .mega-feature { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .15rem 1.5rem; padding: 1.1rem 1.75rem; }
  .mega-feature::before { background-position: 100% 30%; background-size: 60% auto; }
  .mega-globe { display: none; }
  .mega-feature h3 { grid-column: 1; max-width: none; font-size: 1.05rem; }
  .mega-feature p { grid-column: 1; margin: 0; }
  .mega-feature .btn { grid-column: 2; grid-row: 1 / 3; margin: 0; }
  .mega-feature-link { grid-column: 3; grid-row: 1 / 3; margin: 0; padding: 0; }
}
@keyframes mega-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ==========================================================================
   Mobile and tablet drawer
   ========================================================================== */
@media (max-width: 1099.98px) {
  .brand img { height: 40px; }
  .primary-nav { position: fixed; z-index: 90; inset: var(--header-h) 0 0 0; display: flex; flex-direction: column; gap: 1rem; padding: 1rem var(--gutter) 2rem; background: #fff; overflow-y: auto; overscroll-behavior: contain;
                 opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .25s ease, transform .35s var(--ease), visibility 0s linear .35s; }
  [data-nav-open] .primary-nav { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav-scrim { display: none; }
  .nav-list { display: grid; }
  .nav-item { border-bottom: 1px solid var(--line); }
  .nav-split { display: flex; align-items: center; justify-content: space-between; }
  .nav-link { flex: 1; padding: 1rem .25rem; font-size: 1.0625rem; }
  .nav-caret { width: 2.75rem; height: 2.75rem; margin: 0; background: var(--mist); border-radius: 12px; }
  .nav-cta { align-self: stretch; min-height: 3.25rem; margin-top: .5rem; }

  .mega, .dropdown { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-med) var(--ease); }
  .nav-item.is-open > .mega, .nav-item.is-open > .dropdown { grid-template-rows: 1fr; }
  .mega-inner, .dropdown ul { overflow: hidden; min-height: 0; }
  .mega-main, .mega-cols { display: block; }
  .mega-group { padding-bottom: .5rem; }
  .mega-group-title { padding: .85rem .25rem .35rem; font: 650 .8125rem var(--font-display); color: var(--muted); }
  .mega-link { padding: .6rem .25rem; gap: .75rem; }
  .mega-ico { width: 2.25rem; height: 2.25rem; border-radius: 11px; }
  .mega-text small { display: none; }
  .mega-beyond, .mega-feature { display: none; }
  .dropdown .mega-text small { display: block; }
  .dropdown ul { padding-bottom: .5rem; }
  body:has([data-nav-open]) { overflow: hidden; }
}