/* Navigation menu styles */
#mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
    background-color: white;
    border-top: 1px solid rgb(229 231 235);
    position: relative;
    z-index: 50;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

#mobile-menu:not(.hidden) {
    max-height: 600px;
}

/* Better spacing for tablet menu items */
@media (min-width: 640px) and (max-width: 1023px) {
    #mobile-menu .space-y-1 > * {
        padding: 0.875rem 1.25rem;
    }
    
    #mobile-menu {
        max-height: 700px;
    }
}

/* Mobile-specific improvements */
@media (max-width: 639px) {
    #mobile-menu {
        max-height: 500px;
    }
    
    #mobile-menu .space-y-1 > * {
        font-size: 0.9375rem;
    }
}

/* Smooth caret rotation */
#mobile-menu-caret {
    transition: transform 0.2s ease-in-out;
}

/* Ensure touch targets meet accessibility requirements */
#mobile-menu-button,
#mobile-menu a,
#mobile-menu button {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(249, 115, 22, 0.1);
}

/* Improve focus states for keyboard navigation */
#mobile-menu a:focus,
#mobile-menu button:focus {
    outline: 2px solid rgb(249, 115, 22);
    outline-offset: 2px;
}

/* Better visual feedback for active states */
#mobile-menu a:active,
#mobile-menu button:active {
    transform: scale(0.98);
}

/* User menu dropdown (desktop) */
#user-menu-dropdown {
    animation: fadeIn 0.15s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Smooth caret rotation for user menu */
#user-menu-caret {
    transition: transform 0.2s ease-in-out;
}

/* Ensure touch targets meet accessibility requirements for user menu */
#user-menu-button,
#user-menu-dropdown a,
#user-menu-dropdown button {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(249, 115, 22, 0.1);
}

/* Improve focus states for keyboard navigation */
#user-menu-dropdown a:focus,
#user-menu-dropdown button:focus {
    outline: 2px solid rgb(249, 115, 22);
    outline-offset: -2px;
}

/* Better visual feedback for active states */
#user-menu-dropdown a:active,
#user-menu-dropdown button:active {
    transform: scale(0.98);
}