/* Vista Destination - shared header refinement, September 2026. Loaded last, after vista-flight.css. */
/* WHY: every page except home and flights had three stacked bands - the compliance strip, a second navy utility bar, and the nav row. Everything in that middle bar already appeared elsewhere on the same page: Privacy and Disclaimer in the footer, the email address in the footer, the phone number in the footer and behind the call button. It was duplicated content at 10.5px uppercase on a second navy gradient sitting under the first. That markup has been removed from layouts/header.php. */
/* The nav row also overlapped: .vd-header-inner is a four column grid and the nav was wider than its track, so at 1536px it sat 7px over the wordmark and 6px over the call button. Slimming the nav to fit its track fixes it without touching the grid. Separate file because vista-flight.css is also loaded by search, results and checkout, and already declares .vd-header-inner seven times and .vd-vista-nav gap four times, each with !important. The !important flags below match the weight of what they override; they are not preference. */

/* 1. Nav container. Was a near-white pill on a white header - a 0.8px #e8eef7 border that read as a stray outline. Removing it also returns 16px padding and 42px of gap to the row. */
.vd-pro-header-inner > .vd-nav { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; gap: 2px !important; min-width: 0; }

/* 2. Links. */
.vd-pro-header-inner > .vd-nav > a, .vd-pro-header-inner > .vd-nav .vd-nav-dropdown > a { padding: 8px 9px !important; border-radius: 9px !important; font-size: 14.5px !important; font-weight: 600 !important; color: #3f4a5a !important; white-space: nowrap; transition: color .15s ease, background-color .15s ease; }
.vd-pro-header-inner > .vd-nav > a:hover, .vd-pro-header-inner > .vd-nav .vd-nav-dropdown > a:hover { color: #0f172a !important; background: rgba(15,23,42,.05) !important; }

/* 3. The Flights link carries a standing emphasis in the markup. It was a filled pale-blue chip with a #d9e9ff border that read as a hover state left switched on. Weight and full-strength ink say "this one matters" without competing with the green call button or pretending to be the page you are on. */
.vd-pro-header-inner > .vd-nav > a.vd-nav-flight-pill { border: 0 !important; background: none !important; color: #0f172a !important; font-weight: 700 !important; }

/* 4. Current page. The nav had no active state, so every page looked like every other page. The marker is set by the small script at the end of layouts/header.php and matched here; with no script the nav simply renders without it. A rule under the label, not a filled chip, so it reads as position rather than as something to click. */
.vd-pro-header-inner > .vd-nav .vd-nav-current { position: relative; color: #0f172a !important; font-weight: 700 !important; }
.vd-pro-header-inner > .vd-nav .vd-nav-current::after { content: ""; position: absolute; left: 9px; right: 9px; bottom: 3px; height: 2px; border-radius: 2px; background: #1d4ed8; }

/* 4. Header shell. Sticky, hairline instead of a drop shadow. The compliance strip scrolls away above it, which is how the home page already behaves. */
.vd-vista-header, .vd-pro-header { position: sticky !important; top: 0; z-index: 60; background: rgba(255,255,255,.93) !important; -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid rgba(15,23,42,.07) !important; box-shadow: none !important; }
.vd-pro-header-inner .vd-nav-dropdown-menu { z-index: 70; }

/* 5. Narrow desktop. The drawer only takes over at 1100px, so between about 1100 and 1160 the full nav still has to fit a shell of roughly 1068px. Without this step the overlap returns in that band. */
@media (max-width: 1240px) {
    .vd-pro-header-inner > .vd-nav > a, .vd-pro-header-inner > .vd-nav .vd-nav-dropdown > a { padding: 8px 7px !important; font-size: 13.5px !important; }
    .vd-pro-header-inner > .vd-nav .vd-nav-current::after { left: 7px; right: 7px; }
}