/* ===== TOP MENU BAR ===== */
.top-menu-bar {
    background: var(--primary-navy);
    color: var(--white);
    padding: 0.5rem 0;
    font-size: 0.875rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
}

.top-menu-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    /* Forced single row */
    gap: 1rem;
    white-space: nowrap;
    /* Prevent text wrapping */
}

.top-menu-left,
.top-menu-right {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    flex-wrap: nowrap;
}

.top-menu-left span,
.top-menu-left a {
    color: rgba(255, 255, 255, 0.9);
    transition: color var(--transition-fast);
    font-size: 0.875rem;
}

.top-menu-left a:hover {
    color: var(--white);
}

.top-menu-right a {
    color: rgba(255, 255, 255, 0.9);
    transition: all var(--transition-fast);
    font-size: 0.875rem;
}

.top-menu-right a:hover {
    color: var(--accent-red);
}

.top-menu-right .fab {
    font-size: 1rem;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    transition: all var(--transition-fast);
}

.top-menu-right .fab:hover {
    background: var(--accent-red);
    color: var(--white);
    transform: translateY(-2px);
}

.apply-now-btn {
    background: #d93939 !important;
    color: #ffffff !important;
    padding: 0.5rem 1.25rem !important;
    border-radius: 0.5rem !important;
    font-weight: 600 !important;
    transition: all 0.15s ease-in-out !important;
    display: inline-block !important;
}

.apply-now-btn:hover {
    background: #b82e2e !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(217, 57, 57, 0.3) !important;
}

.top-menu-left i,
.top-menu-right i {
    margin-right: 0.35rem;
}

/* ===== MAIN NAVIGATION BAR ===== */
.main-nav-bar {
    position: fixed;
    top: 50px;
    /* Increased spacing */
    /* Height of top menu bar */
    left: 0;
    right: 0;
    background: var(--white);
    box-shadow: var(--shadow-md);
    z-index: 999;
    /* Lower than top bar but higher than content */
    transition: all var(--transition-base);
}

.main-nav-bar.scrolled {
    box-shadow: var(--shadow-lg);
}

.main-nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
}

.main-nav-menu {
    display: flex;
    list-style: none;
    gap: 0.25rem;
    align-items: center;
}

/* Mobile Responsive for Dual Menu */
@media (max-width: 768px) {
    .top-menu-bar {
        font-size: 0.75rem;
        padding: 0.35rem 0;
    }

    .top-menu-container {
        gap: 0.5rem;
    }

    .top-menu-left,
    .top-menu-right {
        gap: 0.75rem;
        font-size: 0.75rem;
    }

    .top-menu-left span:last-child {
        display: none;
        /* Hide location on mobile */
    }

    .apply-now-btn {
        padding: 0.35rem 0.75rem !important;
        font-size: 0.75rem !important;
    }

    .main-nav-bar {
        top: 35px;
        /* Adjusted top menu bar height on mobile */
    }

    .hero {
        margin-top: 105px !important;
        /* Adjust for mobile menu bars */
    }

    .main-nav-menu {
        position: fixed;
        top: 105px;
        /* Below both menu bars on mobile */
        left: -100%;
        width: 100%;
        height: calc(100vh - 105px);
        background: var(--white);
        flex-direction: column;
        padding: var(--spacing-lg);
        transition: left var(--transition-base);
        box-shadow: var(--shadow-xl);
        overflow-y: auto;
    }

    .main-nav-menu.active {
        left: 0;
    }
}