/* ========================================
   NAVBAR - VistaFly

   The glass treatment below is the original and is
   deliberate. Do not replace the white translucent
   gradient, the backdrop blur, or the ::after light
   sweep with a flat scrim — that is what gives the
   bar its glass look over the hero video.

   Only three things differ from the original file:
     - .logo-crop-container / .logo-crop-img are now
       .nav-logo / .nav-logo img (markup rename)
     - .nav-center-container.active is now .is-open
       (global.js drives this class)
     - the mobile breakpoint moved 1100 -> 1180 to fit
       six nav items instead of five
   ======================================== */

/* ---- Skip link ---- */
.skip-to-content {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip-to-content:focus {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: auto;
    margin: 0;
    padding: 12px 24px;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
    background: var(--accent);
    color: var(--dark);
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: 8px;
    z-index: 10000;
    text-decoration: none;
}


/* ============================================================
   CORE BAR — glass
   ============================================================ */
#navbar {
    position: fixed;
    top: 0;
    width: 100%;
    height: var(--nav-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5%;
    z-index: 1000;
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.04) 80%,
        rgba(255, 255, 255, 0) 100%);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 1 !important;
    visibility: visible !important;
}

/* ---- Scrolled ---- */
#navbar.scrolled {
    height: var(--nav-height-scrolled);
    background: rgba(15, 15, 15, 0.95);
    backdrop-filter: blur(20px) saturate(200%);
    -webkit-backdrop-filter: blur(20px) saturate(200%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ---- Light reflection sweep ---- */
#navbar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.03) 0%,
        transparent 50%,
        rgba(255, 255, 255, 0.03) 100%);
    pointer-events: none;
    transition: opacity 0.6s ease;
}

#navbar.scrolled::after {
    opacity: 0.5;
}


/* ============================================================
   LOGO
   ============================================================ */
/* Height is the only dial, because the file is already cropped to the
   artwork.

   That was not always true. The original GIF was a 1600x1280 canvas
   with the wordmark stranded in a middle band — 72% of its height was
   transparent padding, so `height: 62px` drew a ~17px wordmark and
   45px of air. This rule used to compensate with a clipping box and
   four offsets derived from the measured bounding box.

   vistafly-logo.webp is that bounding box, baked in: 356x96, 3.7:1,
   no padding. The offsets are gone with it, and the file went 7.6 MB
   -> 1.2 MB in the same pass, since 98% of what it stored was empty
   pixels. Re-crop with the recipe in images/README-video.md if the
   source art is ever redrawn. */
.nav-logo {
    height: 50px;

    /* Never let the bar squeeze the wordmark. #navbar is flex, so
       .nav-logo defaults to flex-shrink: 1 — once the links and the
       Book Now button want more room than the viewport has, the logo
       box narrows and crops the wordmark mid-word. flex-shrink: 0
       makes the other items give way instead. */
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    z-index: 1001;
    text-decoration: none;
    transition: all 0.8s cubic-bezier(0.32, 0.72, 0, 1);
    filter: brightness(1.05);
}

#navbar.scrolled .nav-logo {
    height: 44px;
    filter: brightness(1.1) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
}

/* No max-width here. With height pinned to the box, a max-width
   smaller than the natural width does not scale the image down —
   it crops it. Height alone drives the size; the file is already
   cropped to the artwork so there is nothing to constrain. */
.nav-logo img {
    display: block;
    height: 100%;
    width: auto;
}

/* display: contents, not block. It removes picture's own box so the img
   becomes .nav-logo's flex item directly, which is what lets the img be
   taller than its container below: align-items: center then overflows it
   symmetrically for free. A block picture would have been the thing the
   percentage resolved against, and the overflow would have started from
   its box instead. Source selection is HTML, not layout, so the
   <source media> switch is unaffected. */
.nav-logo picture {
    display: contents;
}

/* The animated file still spends a fifth of its width and nearly half
   its height on glow even after the crop, so at a given height it draws
   a smaller drone than the flat file does. These heights buy back what
   the bar allows: 80px with no block padding at this width, so 78 clears
   it, and 68 clears the 70px scrolled bar. The outer band of the file is
   near-invisible glow — border alpha peaks around 8/255, about seven
   levels against the bar and only at the prop tips — so a box running
   almost the full bar height reads as air, not as a crowded logo.

   Scoped to no-preference so the reduced-motion path keeps the 50/44
   above: that file is still 3.7:1, so at 78px it would run 289px — wider
   than it has ever been, and into the links. */
@media (min-width: 1181px) and (prefers-reduced-motion: no-preference) {
    .nav-logo {
        height: 78px;
    }

    #navbar.scrolled .nav-logo {
        height: 68px;
    }

    /* Deliberately taller than its own box, so the halo is not squared
       off against one. The glow is transparent padding about 0.64 of the
       drone's height above it, and the bar has only 40px above its
       centreline — so any drone past ~118px wide needs vertical room the
       bar does not own. Overflow is the honest way to get it: #navbar
       sets no overflow, so the halo spills over the hero below and runs
       off the top of the viewport, where the screen edge takes it
       instead of a rectangle sitting in the middle of the design.

       130% puts the drone at 160px against 123px boxed. pointer-events
       keeps the hit target the anchor's own bar-height box, so the spill
       stays decorative and does not swallow clicks meant for the hero. */
    .nav-logo img {
        height: 130%;
        pointer-events: none;
    }
}


/* ============================================================
   LINKS
   ============================================================ */
.nav-center-container {
    flex: 1;
    display: flex;
    justify-content: center;
}

.nav-links {
    display: flex;
    gap: 3rem;
    letter-spacing: 1.5px;
}

.nav-links a {
    position: relative;
    color: var(--white);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: color 0.3s ease;
    padding: 0.5rem 0;
    display: inline-block;
    white-space: nowrap;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--accent);
    transition: width 0.3s ease, opacity 0.3s ease;
    opacity: 0;
}

.nav-links a:hover {
    color: var(--accent);
}

.nav-links a:hover::after {
    width: 100%;
    opacity: 1;
}

.nav-links a.active {
    color: var(--accent);
}

.nav-links a.active::after {
    width: 100%;
    opacity: 1;
}


/* ============================================================
   RIGHT SIDE
   ============================================================ */
.nav-right {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.cta-button {
    position: relative;
    padding: 0.7rem 1.8rem;
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    color: var(--black);
    border: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    overflow: hidden;
    cursor: pointer;
    white-space: nowrap;
    z-index: 1;
    box-shadow:
        0 0 8px rgba(255, 255, 255, 0.3),
        0 0 15px rgba(255, 255, 255, 0.2);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.cta-button::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.3), transparent 70%);
    transform: rotate(30deg);
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: -1;
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow:
        0 0 25px rgba(193, 129, 0, 0.6),
        0 0 40px rgba(212, 126, 22, 0.3);
}

.cta-button:hover::before {
    transform: rotate(30deg) translate(20%, 20%);
}


/* ============================================================
   MOBILE BOOK NOW
   ============================================================ */
.mobile-book-now {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 90%;
    margin: 20px auto 0;
    padding: 12px 24px;
    background: var(--accent);
    color: var(--black);
    border: none;
    border-radius: 30px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.mobile-book-now:hover {
    background: var(--white);
    transform: translateY(-2px);
}


/* ============================================================
   HAMBURGER
   ============================================================ */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1002;
    flex-direction: column;
    justify-content: space-between;
    height: 24px;
    width: 30px;
}

.hamburger-line {
    display: block;
    height: 2px;
    width: 100%;
    background-color: var(--white);
    transition: all 0.3s ease;
    transform-origin: center;
}

.nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}


/* ============================================================
   DESKTOP LINK STATES
   ============================================================ */
@media (min-width: 1181px) {
    #navbar .nav-links a {
        color: rgba(255, 255, 255, 0.85);
        transition: color 0.3s ease;
    }

    #navbar .nav-links a:hover,
    #navbar .nav-links a.active {
        color: var(--accent);
    }

    #navbar.scrolled .nav-links a {
        color: var(--white);
    }

    #navbar.scrolled .nav-links a:hover,
    #navbar.scrolled .nav-links a.active {
        color: var(--accent);
    }
}


/* ============================================================
   MOBILE
   Breakpoint raised from the original 1100 to fit six items.
   ============================================================ */
@media (max-width: 1180px) {
    #navbar {
        padding: 0.8rem 5%;
    }

    .nav-toggle {
        display: flex;
        /* The bar is transparent at the top of the page, so on a bright
           frame of the hero video three white hairlines vanish against
           the sky — the menu looks absent rather than subtle. A shadow
           keeps them readable over any footage without putting a plate
           behind the control or touching the glass treatment. */
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.75));
    }

    /* Same problem, same fix, for the logo sitting over bright sky. */
    .nav-logo {
        /* The wordmark is 3.7x as wide as it is tall, so 50px would run
           185px — over half a 360px viewport, crowding the hamburger. */
        height: 40px;
        filter: brightness(1.05) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
    }

    .nav-center-container {
        position: fixed;
        top: var(--nav-height);
        left: 0;
        width: 100%;
        /* dvh, not vh: on phones 100vh includes the retracting browser
           chrome, so the panel runs taller than the visible area and its
           last links sit under the URL bar. vh stays as the fallback. */
        height: calc(100vh - var(--nav-height));
        height: calc(100dvh - var(--nav-height));
        background: rgba(18, 18, 18, 0.98);
        flex-direction: column;
        justify-content: flex-start;
        padding: 2rem 5%;
        gap: 1.5rem;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        z-index: 1000;
        overflow-y: auto;
    }

    #navbar.scrolled .nav-center-container {
        top: var(--nav-height-scrolled);
        height: calc(100vh - var(--nav-height-scrolled));
        height: calc(100dvh - var(--nav-height-scrolled));
    }

    .nav-center-container.is-open {
        opacity: 1;
        visibility: visible;
    }

    .nav-links {
        flex-direction: column;
        gap: 1.5rem;
        width: 100%;
    }

    .nav-links a {
        padding: 12px 0;
        width: 100%;
        text-align: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        color: var(--white) !important;
    }

    .nav-links a.active {
        color: var(--accent) !important;
    }

    .nav-right .cta-button {
        display: none;
    }

    .mobile-book-now {
        display: flex;
    }
}


/* Same trade as the desktop block, but the ceiling is much lower here:
   #navbar picks up 0.8rem of block padding at this width and box-sizing
   is border-box, so 80px of bar is only 54.4px of content box (44.4px
   once .scrolled takes it to 70px). 54px is the most that fits; the 78px
   used above would not.

   Has to sit after the max-width block rather than beside the desktop
   one — media queries add no specificity, so between two .nav-logo rules
   it is source order that decides.

   #navbar.scrolled .nav-logo is untouched: at (1,2,0) it already outranks
   every .nav-logo rule here, and its 44px is the most the scrolled
   content box holds anyway. */
@media (max-width: 1180px) and (prefers-reduced-motion: no-preference) {
    .nav-logo {
        height: 54px;
    }

    /* Same overflow as desktop. Nothing is trimmed at all here: the
       0.8rem of block padding leaves the spill 4.7px clear of the top of
       the bar, so the halo ends where it fades rather than where the
       screen does. */
    .nav-logo img {
        height: 130%;
        pointer-events: none;
    }
}