/* Enhanced navigation styles */

/* Prevent horizontal scroll on mobile */
html, body {
    overflow-x: hidden;
    width: 100%;
}

/* Ensure all containers respect viewport width */
* {
    max-width: 100vw;
}

/* Active menu item styling */
nav .active-page,
#menuMenu li.active > a {
    background-color: #f3f4f6;
    font-weight: 600;
    position: relative;
}

/* Add indicator for active page */
nav .active-page::before,
#menuMenu li.active > a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 70%;
    background-color: #b71c1c;
    border-radius: 0 2px 2px 0;
}

/* Hover effect for menu items */
nav a:hover:not(.active-page),
#menuMenu a:hover {
    background-color: #f9fafb;
    transition: background-color 0.2s ease;
}

/* Breadcrumb styling */
#breadcrumb {
    padding: 0.5rem 0;
    font-size: 0.875rem;
    color: #6b7280;
}

#breadcrumb a {
    color: #1a237e;
    text-decoration: none;
    transition: color 0.2s ease;
}

#breadcrumb a:hover {
    color: #0d47a1;
    text-decoration: underline;
}

#breadcrumb .mx-2 {
    margin: 0 0.5rem;
    color: #9ca3af;
}

/* Submenu item styling */
.submenu-item {
    padding-left: 2rem;
}

.submenu-item a {
    font-size: 0.875rem;
    color: #4b5563;
}

.submenu-item a:hover {
    color: #1f2937;
}

/* Category headers */
nav span.font-bold {
    cursor: default;
    opacity: 0.9;
}

/* For old-style navigation */
#menuMenu .submenu_item {
    padding-left: 1.5rem;
    background-color: #fafafa;
    display: block !important; /* Keep submenus always visible */
}

#menuMenu .submenu_item a {
    font-size: 0.9em;
    padding: 0.4rem 1rem;
}

/* Remove onclick styling for category headers */
#menuMenu a[onclick*="submenu"] {
    cursor: default;
    pointer-events: none;
}

/* Style category headers that can't be clicked */
#menuMenu a[onclick*="submenu"] span {
    pointer-events: none;
}

/* Visual hierarchy for nested items */
.dropdown-menu li a {
    padding-left: 2.5rem;
    font-size: 0.9em;
}

/* Mobile responsive adjustments */
@media (max-width: 1024px) {
    nav .active-page::before,
    #menuMenu li.active > a::before {
        width: 3px;
    }
    
    #breadcrumb {
        padding: 0.75rem 0;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* Focus states for accessibility */
nav a:focus,
nav button:focus,
#menuMenu a:focus {
    outline: 2px solid #1a237e;
    outline-offset: 2px;
}

/* Smooth scrollbar for navigation */
nav::-webkit-scrollbar {
    width: 6px;
}

nav::-webkit-scrollbar-track {
    background: #f1f1f1;
}

nav::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

nav::-webkit-scrollbar-thumb:hover {
    background: #555;
}