/* Secondary Navigation Styles */
#secondary-nav {
    background-color: #004070;
    /* Deep Blue */
    color: white;
    position: relative;
    z-index: 100;
}

.sec-nav-container {
    display: flex;
    justify-content: center;
}

.sec-menu {
    display: flex;
    width: 100%;
    justify-content: space-between;
    /* Spread items evenly */
    padding: 0;
    margin: 0;
}

.sec-menu>li {
    position: relative;
    flex: 1;
    text-align: center;
}

.sec-menu>li>a {
    display: block;
    padding: 1rem 0.5rem;
    color: white;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    transition: background-color 0.3s;
}

.sec-menu>li:hover>a {
    background-color: #003355;
    /* Darker blue on hover */
}

/* Dropdown Styles */
.dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    /* Full width of the parent li */
    background-color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 0.5rem 0;
    text-align: left;
    min-width: 200px;
    /* Ensure minimum width */
}

/* Center the dropdown relative to the item if needed, 
   but for full width bars, usually simple absolute is fine. 
   Let's make it left aligned to the item but ensure it doesn't overflow. */
.sec-menu>li:hover .dropdown {
    display: block;
}

.dropdown li a {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--color-primary-text);
    font-size: 0.9rem;
    text-transform: none;
    /* Normal case for dropdown items */
    border-bottom: 1px solid #f3f4f6;
}

.dropdown li a:hover {
    background-color: #f9fafb;
    color: var(--color-accent);
}

/* Responsive */
@media (max-width: 768px) {
    .sec-menu {
        flex-direction: column;
    }

    .dropdown {
        position: static;
        box-shadow: none;
        background-color: #003355;
    }

    .dropdown li a {
        color: white;
        padding-left: 2rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .dropdown li a:hover {
        background-color: rgba(255, 255, 255, 0.1);
        color: white;
    }
}

/* Sticky Navigation Styles */
#secondary-nav.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

/* Placeholder to prevent content jump when nav becomes fixed */
.secondary-nav-placeholder {
    display: none;
    height: 50px;
    /* Match nav height */
}

.secondary-nav-placeholder.active {
    display: block;
}