/* Navbar Specific Styles */
/* This file contains all navbar-related CSS to prevent conflicts with other components */

/* Main navbar container - transitions removed for performance */
#main-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
}

/* Navbar logo specific styles - transitions removed for performance */
#navbar-logo {
    opacity: 1 !important; /* Ensure logo is always visible */
}

/* Desktop dropdown positioning fixes */
.navbar-dropdown {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    z-index: 9999 !important;
    transform-origin: top !important;
    will-change: transform, opacity;
}

/* Ensure dropdowns stay in place when scrolling */
#services-dropdown-container,
#locations-dropdown-container {
    position: relative;
}

/* Dropdown visibility states - animations removed for performance */
.navbar-dropdown {
    opacity: 0;
    visibility: hidden;
}

.navbar-dropdown.visible {
    opacity: 1;
    visibility: visible;
}

/* Mobile menu button styles */
#mobile-menu-btn {
    min-height: 48px;
    min-width: 48px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    border: none;
}

#mobile-menu-btn:focus {
    outline: none;
    box-shadow: none;
}

#mobile-menu-btn:focus-visible {
    outline: none;
    box-shadow: none;
}

/* Active state scaling removed for performance */

#mobile-menu-btn i {
    pointer-events: none;
    user-select: none;
}

/* Mobile menu styles - transitions removed for performance */
#mobile-menu.translate-x-full {
    transform: translateX(100%);
}

#mobile-menu.translate-x-0 {
    transform: translateX(0);
}

/* Mobile menu overlay - transitions removed for performance */

/* Mobile dropdown - enhanced animations */
.mobile-dropdown {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-dropdown.open {
    max-height: 400px; /* Optimized for mobile content */
    opacity: 1;
    transform: translateY(0);
}

/* Chevron rotation for mobile dropdowns */
#mobile-services-btn #mobile-services-icon,
#mobile-locations-btn #mobile-locations-icon {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: rotate(0deg);
}

/* Rotate icon when parent button's sibling dropdown is open */
#mobile-services-dropdown.open ~ * #mobile-services-icon,
button:has(+ #mobile-services-dropdown.open) #mobile-services-icon {
    transform: rotate(180deg) !important;
}

/* Alternative: Add rotation class to button when dropdown opens */
.mobile-dropdown-active #mobile-services-icon {
    transform: rotate(180deg) !important;
}

/* Better touch targets for mobile */
@media (max-width: 1023px) {
    .mobile-dropdown button {
        min-height: 48px;
        touch-action: manipulation;
    }
    
    .mobile-dropdown a {
        min-height: 44px;
        touch-action: manipulation;
    }
}

/* Ensure proper touch targets on mobile */
@media (max-width: 1023px) {
    #mobile-menu-btn {
        min-height: 44px;
        min-width: 44px;
    }
}

.navbar-normal {
    height: 5rem; /* 80px */
    background-color: white;
}

/* Chevron icon - transitions removed for performance */
.chevron-rotate {
    transform: rotate(180deg);
}

.chevron-normal {
    transform: rotate(0deg);
}

/* Remove focus outlines for navbar items */
#main-navbar a:focus,
#main-navbar button:focus,
#main-navbar a:focus-visible,
#main-navbar button:focus-visible,
#main-navbar a:active,
#main-navbar button:active,
#main-navbar *:focus,
#main-navbar *:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Remove focus outlines for dropdown items */
.navbar-dropdown a:focus,
.navbar-dropdown button:focus,
.navbar-dropdown a:focus-visible,
.navbar-dropdown button:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Remove focus outlines for mobile menu items */
#mobile-menu a:focus,
#mobile-menu button:focus,
#mobile-menu a:focus-visible,
#mobile-menu button:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Global focus outline removal for navbar */
#main-navbar * {
    outline: none !important;
}

#main-navbar *:focus,
#main-navbar *:focus-visible,
#main-navbar *:active {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    #main-navbar {
        border-bottom: 2px solid #000;
    }
    
    .navbar-dropdown {
        border: 2px solid #000;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    #main-navbar,
    .navbar-dropdown,
    .mobile-dropdown,
    #mobile-menu,
    #mobile-menu-overlay {
        transition: none;
    }
    
    .chevron-rotate,
    .chevron-normal {
        transition: none;
    }
}