/* Navigation Styles for The Jobs Jungle */

/* Make navigation fixed and white on scroll */
#topnav.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff !important;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: background 0.2s, box-shadow 0.2s;
}

/* Ensure mobile navigation has proper z-index */
@media (max-width: 768px) {
    #topnav {
        z-index: 1001;
    }
    
    #navigation {
        z-index: 1002;
    }
}

body {
    padding-top: 56px;
    /* Adjust for fixed nav height */
}

@media (max-width: 991px) {
    body {
        padding-top: 0;
    }
}

/* Desktop styles (769px and above) */
@media (min-width: 769px) {
    /* Dropdown hover functionality - Desktop only */
    .dropdown:hover .dropdown-menu {
        display: block;
    }
    
    /* Ensure dropdown menus are properly positioned - Desktop only */
    .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 200px;
    }
}

/* Common dropdown styles */
.dropdown-menu {
    margin-top: 0;
    border: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.dropdown-item {
    padding: 8px 20px;
    color: #333;
    transition: background-color 0.2s;
    display: block;
    text-decoration: none;
    cursor: pointer;
}

.dropdown-item:hover {
    background-color: #f8f9fa;
    color: #17607d;
    text-decoration: none;
}

.dropdown-item:focus {
    background-color: #f8f9fa;
    color: #17607d;
    text-decoration: none;
    outline: none;
}

.dropdown-toggle::after {
    margin-left: 5px;
}

/* Navigation menu styling */
.navigation-menu {
    gap: 0.2rem;
}

.navigation-menu .nav-link {
    cursor: pointer;
}

/* Mobile responsive adjustments (768px and below) */
@media (max-width: 768px) {
    /* Ensure navigation container is properly styled for mobile */
    #navigation {
        background: #fff;
        border-top: 1px solid #eee;
        max-height: 80vh;
        overflow-y: auto;
    }

    /* Mobile dropdown behavior */
    .dropdown-menu {
        position: static !important;
        box-shadow: none;
        border-radius: 0;
        border: none;
        background: transparent;
        padding: 0;
        margin: 0;
        width: 100%;
        display: none;
        float: none;
        clear: both;
    }

    /* Show dropdown when it has the 'show' class */
    .dropdown-menu.show {
        display: block !important;
    }

    .dropdown-item {
        padding: 12px 30px;
        display: block;
        width: 100%;
        text-decoration: none;
        color: #333 !important;
        background-color: transparent;
        border: none;
        text-align: left;
        cursor: pointer;
        border-bottom: 1px solid #f0f0f0;
        font-size: 14px;
        position: relative;
        z-index: 1;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .dropdown-item:hover,
    .dropdown-item:focus {
        background-color: #f8f9fa !important;
        color: #17607d !important;
        text-decoration: none;
    }

    /* Ensure dropdown items are clickable on mobile */
    .dropdown-item:active {
        background-color: #e9ecef !important;
        color: #17607d !important;
    }

    /* Disable hover effects on mobile - let Bootstrap handle dropdowns */
    .dropdown:hover .dropdown-menu {
        display: none;
    }

    /* Style the dropdown toggle for mobile */
    .dropdown-toggle {
        cursor: pointer;
        user-select: none;
        position: relative;
        z-index: 1;
        padding: 12px 20px !important;
        margin: 0;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* Ensure proper spacing in mobile navigation */
    .navigation-menu {
        gap: 0;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    .navigation-menu .nav-link {
        padding: 12px 20px;
        border-bottom: 1px solid #f0f0f0;
        margin: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* Ensure dropdowns are properly positioned */
    .dropdown {
        position: relative;
        margin: 0;
        width: 100%;
    }

    /* Make sure the dropdown menu is visible when expanded */
    .dropdown.show .dropdown-menu {
        display: block !important;
    }

    /* Additional mobile dropdown fixes */
    .dropdown-toggle[aria-expanded="true"] + .dropdown-menu {
        display: block !important;
    }

    /* Ensure touch targets are large enough but not too large */
    .dropdown-toggle,
    .dropdown-item {
        min-height: 44px;
        display: flex;
        align-items: center;
        margin: 0;
    }

    /* Remove any extra spacing between dropdown items */
    .dropdown-item:last-child {
        border-bottom: none;
    }

    /* Ensure no gaps between navigation items */
    .navigation-menu li {
        margin: 0;
        padding: 0;
        width: 100%;
    }

    /* Remove any default list styling */
    .navigation-menu {
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    /* Fix for overlapping dropdowns */
    .dropdown-menu {
        position: static !important;
        transform: none !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        float: none !important;
        clear: both !important;
    }

    /* Ensure dropdown items are properly indented */
    .dropdown-item {
        padding-left: 40px;
    }

    /* Add visual indicator for dropdown items */
    .dropdown-item::before {
        content: "•";
        margin-right: 8px;
        color: #17607d;
    }
}