/* ============================================================
   HOME 2 ONLY — index-video-banner-new.blade.php
   Header always uses the "scrolled" look (light gradient bg,
   colour logo, dark/green links) — including while sitting on
   top of the hero banner — so it never changes on scroll.

   Linked ONLY from index-video-banner-new.blade.php, AFTER
   front_page_video_banner_slider_header.css, so these plain
   `.nav ...` rules win via cascade order. The existing
   `.nav.scrolled ...` rules stay as-is and produce the same values.
============================================================ */

/* ── Bar ── */
.nav {
    background: linear-gradient(108deg, rgb(233 255 244 / 95%) 0%, rgba(255, 255, 255, 0.97) 42%, rgb(255 246 232) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    height: 80px;
    padding: 0 99px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.09);
}
.nav::after {
    opacity: 1;
}

/* ── Logo: always visible, colour variant ── */
.nav-logo {
    display: flex;
}
.nav-logo img.nav-logo-default {
    display: none;
}
.nav-logo img.nav-logo-scrolled {
    display: block;
}

/* ── Links ── */
.nav-links > li > a {
    color: #1a2537;
    text-shadow: none;
}
.nav-links > li > a::after {
    background: #1e6b36;
}
.nav-links > li > a:hover {
    color: #1e6b36;
    background: rgba(30, 107, 54, 0.06);
}
.nav-links > li > a.active {
    color: #1e6b36;
}
.nav-links > li > a .nav-icon {
    color: #1e6b36;
    opacity: 0.8;
    filter: none;
}
.nav-links > li > a svg:not(.nav-icon) {
    color: #1a2537;
    opacity: 0.45;
    filter: none;
}

/* ── Login button ── */
.btn-nav {
    background: #1e6b36;
    border-color: #1e6b36;
}
.btn-nav svg {
    color: #ffffff;
}
.btn-nav:hover {
    background: #fec129;
    border-color: #fec129;
    box-shadow: 0 4px 16px rgba(254, 193, 41, 0.4);
    transform: translateY(-2px);
}
.btn-nav:hover svg {
    color: #071b4d;
}

/* ── 360° globe hint ── */
.globe-hint {
    color: #4a5a70;
}

/* ── Hamburger ── */
.hamburger {
    background: rgba(30, 107, 54, 0.1);
    border-color: #1e6b36;
}
.hamburger:hover {
    background: rgba(30, 107, 54, 0.18);
}
.hamburger span {
    background: #1e6b36;
}

/* ── Responsive: mirror the .nav.scrolled breakpoint values ── */
@media (max-width: 1200px) {
    .nav {
        padding: 0 24px;
    }
}
@media (max-width: 480px) {
    .nav {
        padding: 0 24px;
        height: 64px;
    }
}