/* ==========================================================================
   NoviTrip Top Navigation Menu (Unified across all pages)
   Exact match to reference design:
   - Pill-shaped items (border-radius: 9999px)
   - Active state: light blue background (#e8f0fe) with vibrant blue text & icon (#1a73e8)
   - Inactive state: clean dark slate (#1e293b) with smooth hover pill
   ========================================================================== */

/* Main nav container list/wrapper */
.desktop-main-nav,
.header-top-row .main-nav,
.modern-header .main-nav,
.site-header .main-nav,
.site-header .desktop-main-nav,
.wb-site-header .main-nav,
.wb-site-header .desktop-main-nav {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 0 0 16px !important;
    padding: 0 !important;
    list-style: none !important;
    flex-wrap: nowrap !important;
    z-index: 10 !important;
}

/* Individual nav item links */
.desktop-main-nav .desktop-nav-link,
.desktop-main-nav .nav-link,
.main-nav .nav-link,
.main-nav .desktop-nav-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 15px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 0.88rem !important; /* ~14px */
    font-weight: 500 !important;
    color: #1e293b !important;
    text-decoration: none !important;
    border-radius: 9999px !important; /* Pill shape */
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
    white-space: nowrap !important;
    background: transparent !important;
    border: none !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
    cursor: pointer !important;
}

/* Icons inside nav links */
.desktop-main-nav .desktop-nav-link i,
.desktop-main-nav .nav-link i,
.main-nav .nav-link i,
.main-nav .desktop-nav-link i {
    font-size: 0.95rem !important;
    color: #1e293b !important;
    transition: color 0.18s ease, transform 0.18s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Inactive Hover State */
.desktop-main-nav .desktop-nav-link:hover,
.desktop-main-nav .nav-link:hover,
.main-nav .nav-link:hover,
.main-nav .desktop-nav-link:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

.desktop-main-nav .desktop-nav-link:hover i,
.desktop-main-nav .nav-link:hover i,
.main-nav .nav-link:hover i,
.main-nav .desktop-nav-link:hover i {
    color: #0f172a !important;
}

/* Active State: Pill with soft blue background + vibrant blue text & icon (matches reference) */
.desktop-main-nav .desktop-nav-link.active,
.desktop-main-nav .nav-link.active,
.main-nav .nav-link.active,
.main-nav .desktop-nav-link.active {
    background: #e8f0fe !important;
    color: #1a73e8 !important;
    font-weight: 600 !important;
}

.desktop-main-nav .desktop-nav-link.active i,
.desktop-main-nav .nav-link.active i,
.main-nav .nav-link.active i,
.main-nav .desktop-nav-link.active i {
    color: #1a73e8 !important;
}

/* Responsive adjustments for mid-size desktop (1100px - 1320px) */
@media (max-width: 1320px) {
    .desktop-nav-secondary {
        display: none !important;
    }
    .desktop-main-nav,
    .header-top-row .main-nav,
    .modern-header .main-nav {
        gap: 3px !important;
        margin-left: 10px !important;
    }
    .desktop-main-nav .desktop-nav-link,
    .main-nav .nav-link {
        padding: 6px 11px !important;
        font-size: 0.82rem !important;
        gap: 6px !important;
    }
}

@media (max-width: 1100px) {
    .desktop-main-nav .desktop-nav-link,
    .main-nav .nav-link {
        padding: 5px 9px !important;
        font-size: 0.78rem !important;
        gap: 5px !important;
    }
    .desktop-main-nav .desktop-nav-link i,
    .main-nav .nav-link i {
        font-size: 0.84rem !important;
    }
}

/* On mobile / small tablet (<= 991px), hide desktop nav in favor of burger menu */
@media (max-width: 991px) {
    .desktop-main-nav,
    .header-top-row .main-nav,
    .modern-header .main-nav,
    .site-header .desktop-main-nav {
        display: none !important;
    }
}