/* Navigation Dropdown Fix - Improved version with consistent z-index and minimal !important */

/* Base navigation structure */
.navbar {
    position: relative;
    z-index: var(--z-sticky, 200);
}

.navbar-menu {
    position: relative;
    z-index: calc(var(--z-sticky, 200) + 1);
}

/* Dropdown menu base styles */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: var(--z-dropdown, 100);
    background-color: #fff;
    min-width: 250px;
    max-width: 300px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    border: 1px solid #e0e4e8;
    margin-top: 5px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

/* Show dropdown on hover with animation */
.has-dropdown:hover .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Ensure dropdown parent has proper positioning */
.has-dropdown {
    position: relative;
}

/* Dropdown menu items styling */
.dropdown-menu li {
    display: block;
    margin: 0;
}

.dropdown-menu a {
    display: block;
    padding: 0.75rem 1rem;
    color: #1a3a4a;
    text-decoration: none;
    transition: all 0.2s ease;
    border-bottom: 1px solid #f0f4f8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-menu li:last-child a {
    border-bottom: none;
}

.dropdown-menu a:hover {
    background-color: #f8f9fa;
    color: #c9a961;
    padding-left: 1.25rem;
}

/* Dark mode support for dropdown */
[data-theme="dark"] .dropdown-menu {
    background-color: #2c2c2c;
    border-color: #404040;
}

[data-theme="dark"] .dropdown-menu a {
    color: #ecf0f1;
    border-bottom-color: #404040;
}

[data-theme="dark"] .dropdown-menu a:hover {
    background-color: #404040;
    color: #c9a961;
}

/* Ensure content below navbar doesn't overlap */
main {
    position: relative;
    z-index: var(--z-base, 1);
    padding-top: 2rem;
}

/* Sticky navigation specific z-index */
.navbar.sticky {
    z-index: var(--z-sticky, 200);
}

.navbar.sticky .dropdown-menu {
    z-index: var(--z-sticky-dropdown, 300);
}

/* Mobile dropdown adjustments */
@media (max-width: 767px) {
    .dropdown-menu {
        position: static;
        width: 100%;
        margin-top: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        background-color: #f8f9fa;
    }
    
    .navbar-menu.active .dropdown-menu {
        display: block;
    }
    
    .has-dropdown.active .dropdown-menu {
        display: block;
    }
    
    [data-theme="dark"] .dropdown-menu {
        background-color: #3a3a3a;
    }
}

/* Prevent dropdown from being cut off at screen edges */
.dropdown-menu {
    right: auto;
}

/* If dropdown would go off right edge, align it to the right */
.has-dropdown:last-child .dropdown-menu,
.has-dropdown:nth-last-child(2) .dropdown-menu {
    left: auto;
    right: 0;
}

/* Add invisible expanded hit area for better UX */
.has-dropdown::after {
    content: '';
    position: absolute;
    top: 0;
    left: -10px;
    right: -10px;
    bottom: -10px;
    z-index: -1;
}

/* Dropdown arrow/caret indicator */
.has-dropdown > a::after {
    content: ' ▾';
    font-size: 0.8em;
    opacity: 0.7;
    margin-left: 4px;
}