/* Final Navigation Refinements */

/* Improved desktop dropdown */
@media (min-width: 992px) {
    .dropdown-content {
        min-width: 240px; /* Wider dropdown for better readability */
        border-radius: 4px;
        box-shadow: 0 6px 12px rgba(0,0,0,0.1);
    }
    
    .dropdown-item {
        padding: 12px 15px;
    }
}

/* Enhanced mobile experience */
@media (max-width: 991px) {
    /* Visual categories for mobile navigation */
    .nav-item.dropdown > .nav-link {
        background: linear-gradient(to right, #f8f8f8, #ffffff);
        position: relative;
    }
    
    /* Indicate tappable areas */
    .nav-item.dropdown > .nav-link:after {
        content: "Tap to view";
        position: absolute;
        right: 40px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 12px;
        opacity: 0.5;
        font-weight: normal;
    }
    
    /* Hide "Tap to view" when dropdown is open */
    .nav-item.dropdown.show-dropdown > .nav-link:after {
        display: none;
    }
    
    /* Make it look like cards */
    .dropdown-item {
        margin: 5px 10px;
        border-radius: 4px;
        background: white;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    
    /* Add proper spacing to dropdown content */
    .dropdown-content {
        padding: 5px 0 10px 0;
    }
    
    /* Animation for smooth opening/closing */
    .nav-item.dropdown.closing .dropdown-content {
        animation: fadeOut 0.3s ease forwards;
    }
    
    @keyframes fadeOut {
        from {
            opacity: 1;
            transform: translateY(0);
        }
        to {
            opacity: 0;
            transform: translateY(-10px);
        }
    }
    
    /* Active state for current page */
    .dropdown-item.active {
        background-color: rgba(52, 152, 219, 0.1);
        border-left: 3px solid #3498db;
    }
    
    /* More obvious state for the current section */
    .nav-menu .nav-link.active {
        border-left: 4px solid #3498db;
    }
}