/**
 * FINAL Horizontal Menu Styles - Maximum Specificity
 * =====================================================
 * ⚠️ ВНИМАНИЕ: КРИТИЧЕСКИ ВАЖНЫЙ ФАЙЛ!
 * 
 * ЭТОТ ФАЙЛ ДОЛЖЕН ЗАГРУЖАТЬСЯ ПОСЛЕДНИМ!
 * См. документацию: /docs/HORIZONTAL-MENU-IMPLEMENTATION.md
 * 
 * НЕ ИЗМЕНЯТЬ:
 * - Специфичность селекторов (body .navigation-section ...)
 * - !important флаги
 * - display: flex для .dropdown-inner
 * - width: 100vw для горизонтального меню
 * 
 * Этот файл переопределяет конфликтующие стили из:
 * - responsive.css (max-width: 300px для dropdown-menu)
 * - custom.css (вертикальная ориентация меню)
 * - Bootstrap стили по умолчанию
 */

/* Reset conflicting styles from responsive.css and custom.css */
@media (min-width: 992px) {
    .navigation-section .dropdown-menu:not(.horizontal-menu) {
        /* Regular dropdowns stay as they are */
    }
    
    /* Force horizontal menu to be truly horizontal */
    body .navigation-section .dropdown-menu.horizontal-menu {
        /* Critical: Remove all Bootstrap and custom styles */
        position: fixed !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        
        /* Position below navigation */
        margin: 0 !important;
        padding: 0 !important;
        
        /* Background */
        background: #10BCC8 !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
        
        /* Initial hidden state */
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        
        /* High z-index but not extreme */
        z-index: 9999 !important;
        
        /* Disable Bootstrap transforms */
        transform: none !important;
        
        /* Height */
        height: auto !important;
        min-height: 60px !important;
    }
    
    /* Show states with maximum specificity */
    body .navigation-section .nav-item.has-submenu:hover > .dropdown-menu.horizontal-menu,
    body .navigation-section .nav-item.dropdown:hover > .dropdown-menu.horizontal-menu,
    body .navigation-section .dropdown-menu.horizontal-menu.horizontal-active,
    body .navigation-section .dropdown-menu.horizontal-menu.show {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Inner container - FORCE horizontal layout */
    body .navigation-section .dropdown-menu.horizontal-menu .dropdown-inner {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        
        /* Center content */
        max-width: 1140px !important;
        width: auto !important;
        margin: 0 auto !important;
        padding: 15px !important;
        
        /* Ensure single row */
        height: auto !important;
        min-height: 60px !important;
        
        /* No vertical stacking */
        flex-basis: auto !important;
    }
    
    /* Force items to be inline */
    body .navigation-section .dropdown-menu.horizontal-menu .dropdown-item {
        /* Reset all display properties */
        display: inline-block !important;
        flex: 0 0 auto !important;
        float: none !important;
        
        /* Size and spacing */
        width: auto !important;
        max-width: none !important;
        min-width: auto !important;
        height: auto !important;
        line-height: normal !important;
        
        /* Padding */
        padding: 12px 25px !important;
        margin: 0 !important;
        
        /* Colors */
        color: #fff !important;
        background: transparent !important;
        
        /* Text */
        font-size: 15px !important;
        font-weight: 400 !important;
        white-space: nowrap !important;
        text-align: center !important;
        text-decoration: none !important;
        
        /* Border separator */
        border: none !important;
        border-right: 1px solid rgba(255,255,255,0.2) !important;
        border-left: none !important;
        border-top: none !important;
        border-bottom: none !important;
        border-radius: 0 !important;
        
        /* Transition */
        transition: all 0.3s ease !important;
        
        /* Ensure inline */
        vertical-align: middle !important;
    }
    
    /* Remove last border */
    body .navigation-section .dropdown-menu.horizontal-menu .dropdown-item:last-child {
        border-right: none !important;
    }
    
    /* Hover state */
    body .navigation-section .dropdown-menu.horizontal-menu .dropdown-item:hover,
    body .navigation-section .dropdown-menu.horizontal-menu .dropdown-item:focus {
        background-color: rgba(255,255,255,0.15) !important;
        color: #fff !important;
        text-decoration: none !important;
        transform: translateY(-1px) !important;
    }
    
    /* Position the dropdown correctly */
    body .navigation-section {
        position: relative !important;
    }
    
    body .navigation-section .nav-item.has-submenu,
    body .navigation-section .nav-item.dropdown {
        position: static !important;
    }
}

/* Override any max-width constraints */
@media (min-width: 992px) {
    body .dropdown-menu.horizontal-menu {
        max-width: 100vw !important;
    }
}

/* Force Bootstrap to not interfere */
.navigation-section .dropdown-menu.horizontal-menu[style] {
    /* Let our styles take precedence */
}

/* Ensure the dropdown spans full width */
html body .navigation-section .dropdown-menu.horizontal-menu {
    left: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: translateX(0) !important;
}

/* Mobile styles */
@media (max-width: 991px) {
    body .navigation-section .dropdown-menu.horizontal-menu {
        position: relative !important;
        width: 100% !important;
        display: none !important;
    }
    
    body .navigation-section .dropdown-menu.horizontal-menu.show {
        display: block !important;
    }
    
    body .navigation-section .dropdown-menu.horizontal-menu .dropdown-inner {
        flex-direction: column !important;
    }
    
    body .navigation-section .dropdown-menu.horizontal-menu .dropdown-item {
        display: block !important;
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
        padding: 12px 40px !important;
    }
}