/* Minimal Megamenu CSS - Only styles that cannot be converted to Tailwind */

/* Navigation Base Styles - Reset for Magento */
.navigation ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Responsive Grid Adjustments for Mega Menu */
@media (max-width: 1024px) {
    .mega-menu {
        min-width: 500px !important;
        max-width: 700px !important;
    }
    
    /* Reduce columns only for 4+ column layouts on tablets */
    .mega-menu [style*="grid-template-columns: repeat(4"],
    .mega-menu [style*="grid-template-columns: repeat(5"],
    .mega-menu [style*="grid-template-columns: repeat(6"] {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    
    /* Adjust standard dropdown grid on tablets */
    .standard-dropdown [style*="min-width: 650px"],
    .standard-dropdown [style*="min-width: 750px"],
    .standard-dropdown [style*="min-width: 850px"] {
        min-width: 500px !important;
    }
}

/* Fix Tailwind CSS conflicts - Ensure navigation visibility is properly handled */
.navigation.hidden {
    display: none;
}

/* CRITICAL: Force desktop navigation visibility on large screens */
@media (min-width: 1024px) {
    /* FORCE HIDE mobile menu on desktop - target ALL possible mobile menu selectors */
    .navigation.lg\:hidden,
    nav.lg\:hidden,
    .lg\:hidden,
    nav[class*="lg:hidden"],
    button[class*="lg:hidden"],
    [data-role="mobile-menu"],
    .mobile-menu,
    button[data-action="toggle-nav"],
    .nav-toggle,
    .menu-icon,
    /* Target Hyva mobile menu specifically */
    nav[x-data*="initMenuMobile"],
    nav[class*="navigation"][class*="lg:hidden"],
    .header-content nav.lg\:hidden {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        left: -9999px !important;
    }
    
    /* Show desktop navigation */
    .navigation.hidden.lg\:flex {
        display: flex !important;
    }
    
    .navigation.hidden.lg\:block {
        display: block !important;
    }
    
    /* Ensure desktop navigation wrapper is visible */
    .desktop-navigation {
        display: flex !important;
    }
    
    /* Force visibility of the desktop menu container */
    #topmenu_desktop,
    [data-role="desktop-menu"] {
        display: block !important;
    }
}

/* CRITICAL: Mobile layout - use default Hyva theme behavior */
@media (max-width: 1023px) {
    /* Hide desktop navigation completely */
    .navigation.hidden.lg\:flex,
    .navigation.hidden.lg\:block,
    .desktop-navigation {
        display: none !important;
    }
    
    /* IMPORTANT: Allow mobile menu to work - remove our aggressive hiding */
    .navigation.lg\:hidden,
    nav.lg\:hidden,
    nav[x-data*="initMenuMobile"],
    nav[class*="navigation"][class*="lg:hidden"] {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        left: auto !important;
    }
    
    /* Reset desktop-specific overrides but ensure proper mobile icon positioning */
    .header-content .container,
    header .container {
        /* Let Hyva handle the flex layout naturally */
        order: initial !important;
        flex: initial !important;
        justify-content: initial !important;
        align-items: initial !important;
        width: initial !important;
        margin: initial !important;
        padding: initial !important;
        text-align: initial !important;
        align-self: initial !important;
        flex-direction: initial !important;
        gap: initial !important;
        position: initial !important;
    }
    
    /* Ensure icons container (order-3) stays on the right side */
    .header-content .flex.items-center.gap-2,
    .header-content .order-3,
    header .flex.items-center.gap-2,
    header .order-3 {
        /* Keep icons on the right side in mobile */
        order: 3 !important;
        margin-left: auto !important;
    }
    
    /* Logo positioning */
    .header-content .logo,
    header .logo {
        /* Reset logo positioning */
        order: initial !important;
        flex: initial !important;
        margin: initial !important;
        text-align: initial !important;
        width: initial !important;
    }
    
    /* Burger menu positioning - should be on the left */
    .navigation.lg\:hidden,
    nav.lg\:hidden,
    nav[x-data*="initMenuMobile"] {
        /* Keep burger menu on the left */
        order: 2 !important;
    }
}

/* Animation Enhancement */
.navigation [aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.navigation .level0 > a svg {
    transition: transform 0.2s ease;
}

/* Responsive adjustments for small screens */
@media (max-width: 1024px) {
    .mega-menu {
        max-width: 90vw !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    
    .standard-dropdown {
        max-width: 80vw !important;
    }
}

@media (max-width: 768px) {
    .mega-menu {
        min-width: 95vw !important;
        max-width: 95vw !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin-left: 0 !important;
    }
    
    .standard-dropdown {
        min-width: 90vw !important;
        max-width: 90vw !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    
    .image-only-subcategories,
    .image-only-subcategories-std {
        border-left: none;
        border-top: 1px solid #e5e7eb;
        padding-left: 0;
        padding-top: 1rem;
        margin-top: 1rem;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    
    .image-only-subcategories-std {
        gap: 0.5rem;
    }
    
    .image-only-category,
    .image-only-category-std {
        flex: 1;
        min-width: 120px;
    }
}

/* Ensure Alpine.js transitions work properly */
[x-cloak] {
    display: none !important;
}

/* Ensure proper spacing with Tailwind utilities - DESKTOP ONLY */
@media (min-width: 1024px) {
    .navigation .gap-x-7 > li:not(:last-child) {
        margin-right: 1.75rem;
    }

    .navigation .py-4 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
}

/* Fix flex layout issues - ONLY on desktop */
@media (min-width: 1024px) {
    .navigation .flex {
        display: flex !important;
    }

    .navigation .flex-wrap {
        flex-wrap: wrap !important;
    }

    .navigation .justify-start {
        justify-content: flex-start !important;
    }
}

/* CRITICAL: Fix header layout positioning and navigation visibility */
@media (min-width: 1024px) {
    /* Ensure proper header flex layout: Logo | Navigation | Icons */
    .header-content .container,
    header .container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        max-width: none !important;
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
    
    /* Force desktop navigation to be visible and properly positioned */
    .navigation.hidden.lg\:flex,
    .desktop-navigation {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 20 !important;
        order: 2 !important;
        flex: 1 !important;
        justify-content: center !important;
        margin: 0 2rem !important;
    }
    
    /* Override any potential Tailwind classes */
    .navigation:not(.mobile-only) {
        display: flex !important;
    }
    
    /* Force the nav element to be visible */
    .desktop-navigation nav {
        display: block !important;
    }
    
    /* Force the ul to be visible */
    .desktop-navigation ul.level0 {
        display: flex !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Ensure logo stays on the left (order-1 or default) */
    .header-content .logo,
    header .logo {
        order: 1 !important;
        flex-shrink: 0 !important;
        margin-right: 1rem !important;
    }
    
    /* Ensure icons stay on the right (order-3) */
    .header-content .flex.items-center.gap-2,
    .header-content .order-3,
    header .flex.items-center.gap-2,
    header .order-3 {
        order: 3 !important;
        flex-shrink: 0 !important;
        margin-left: 1rem !important;
    }
    
    /* Remove any conflicting margin/padding from navigation */
    .desktop-navigation .lg\:px-8 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .mega-menu,
    .standard-dropdown {
        border: 2px solid #000000;
    }
    
    .navigation a:hover {
        background-color: #000000;
        color: #ffffff;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .navigation a,
    .navigation svg,
    .mega-menu,
    .standard-dropdown,
    .navigation .level0 > a::after,
    .mega-menu .space-y-2 > a::before {
        transition: none;
    }
}

/* Print Styles */
@media print {
    .mega-menu,
    .standard-dropdown {
        display: none;
    }
    
    .navigation .level0 > a::after {
        display: none;
    }
}