/* Mobile Menu Enhancements */

/* Better touch targets - WCAG compliant */
#mobile-menu nav a:not(#mobile-menu nav > div a) {
    display: block;
    padding: 1rem 0;
    min-height: 48px;
    border-bottom: 1px solid #e2e8f0;
    transition: all 0.2s ease;
    font-size: 1rem;
    line-height: 1.5;
}

/* Add border to first navigation link */
#mobile-menu nav > a:first-of-type {
    border-top: 1px solid #e2e8f0;
}

/* Hover and focus states for navigation links */
#mobile-menu nav > a:hover,
#mobile-menu nav > a:focus {
    background-color: #f8fafc;
    padding-left: 0.75rem;
    outline: none;
}

/* Active page indicator - IMPORTANT: Higher specificity */
nav#mobile-menu nav > a.text-larkin-blue,
#mobile-menu nav > a.text-larkin-blue {
    font-weight: 600;
    border-left: 4px solid #2563eb;
    padding-left: 1rem !important;
    background-color: #eff6ff;
}

/* Clean spacing for contact button - no border line */
#mobile-menu nav > div {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    padding-bottom: 2rem;
    display: flex;
    justify-content: center;
}

/* Email button styling - override the nav link styles */
#mobile-menu nav > div a {
    border-bottom: none !important;
    border-top: none !important;
    padding: 0.75rem 1rem !important;
    min-height: 48px;
    display: inline-flex !important;
    max-width: max-content;
    width: auto !important;
}

#mobile-menu nav > div a:hover {
    background-color: transparent !important;
    padding-left: 1rem !important;
}

/* Smooth animations */
#mobile-menu {
    transition: opacity 0.3s ease-in-out;
}

#mobile-menu .bg-opacity-50 {
    transition: opacity 0.3s ease-in-out;
}

/* Close button enhancement */
#mobile-menu-close {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    transition: background-color 0.2s ease;
}

#mobile-menu-close:hover {
    background-color: #f1f5f9;
}

/* Focus visible for accessibility */
#mobile-menu a:focus-visible,
#mobile-menu button:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* Prevent text selection on taps */
#mobile-menu {
    -webkit-user-select: none;
    user-select: none;
}

/* Better tap highlighting */
#mobile-menu a {
    -webkit-tap-highlight-color: rgba(37, 99, 235, 0.1);
}