/* Responsive Layout Fixes - Clean and balanced approach */

/* Mobile First - Default mobile styles */
@media (max-width: 639px) {
    /* Ensure mobile layout is preserved */
    .flex.flex-col {
        flex-direction: column !important;
    }
    
    .text-center {
        text-align: center !important;
    }
    
    .grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
    
    /* Hide desktop menu on mobile */
    .navbar-menu {
        display: none !important;
    }
    
    /* Show mobile menu button on mobile */
    #mobile-menu-btn {
        display: block !important;
    }
    
    /* Ensure mobile menu is hidden by default but can be shown */
    #mobile-menu {
        display: none !important;
    }
    
    /* Allow mobile menu to be shown when needed */
    #mobile-menu.show {
        display: block !important;
    }
    
    /* Hide desktop dropdowns on mobile */
    .navbar-menu .group .absolute {
        display: none !important;
    }
    
    /* Force hidden md:flex to be hidden on mobile */
    .hidden.md\\:flex {
        display: none !important;
    }
    
    /* More aggressive approach for navbar */
    .navbar-container .hidden.md\\:flex {
        display: none !important;
    }
    
    /* Force all desktop menu elements to be hidden on mobile */
    .navbar-container div[class*="hidden md:flex"] {
        display: none !important;
    }
    
    /* Target the specific navbar menu container */
    .navbar-container > div:last-child {
        display: none !important;
    }
    
    /* Show mobile button */
    .navbar-container button.md\\:hidden {
        display: block !important;
    }
    
    /* Additional aggressive rules for navbar */
    nav .navbar-container > div:nth-child(2) {
        display: none !important;
    }
    
    nav .navbar-container > div:last-child {
        display: block !important;
    }
    
    /* Force mobile layout for navbar */
    .navbar-container {
        justify-content: space-between !important;
    }
}

/* Small screens (640px+) */
@media (min-width: 640px) {
    [class*="sm:grid-cols-2"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    
    [class*="sm:grid-cols-3"] {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    
    [class*="sm:flex-row"] {
        flex-direction: row !important;
    }
    
    [class*="sm:text-left"] {
        text-align: left !important;
    }
    
    /* Navbar behavior for small screens */
    .navbar-menu {
        display: none !important;
    }
    
    #mobile-menu-btn {
        display: block !important;
    }
    
    #mobile-menu {
        display: none !important;
    }
    
    /* Allow mobile menu to be shown when needed */
    #mobile-menu.show {
        display: block !important;
    }
    
    /* Force hidden md:flex to be hidden on small screens too */
    .hidden.md\\:flex {
        display: none !important;
    }
    
    /* More aggressive approach for navbar on small screens */
    .navbar-container .hidden.md\\:flex {
        display: none !important;
    }
    
    /* Force all desktop menu elements to be hidden on small screens */
    .navbar-container div[class*="hidden md:flex"] {
        display: none !important;
    }
    
    /* Target the specific navbar menu container */
    .navbar-container > div:last-child {
        display: none !important;
    }
    
    /* Show mobile button */
    .navbar-container button.md\\:hidden {
        display: block !important;
    }
}

/* Medium screens (768px+) */
@media (min-width: 768px) {
    /* Force flex-row only when md: class is present */
    .flex.flex-col.md\\:flex-row {
        flex-direction: row !important;
        display: flex !important;
    }
    
    /* Force text-left only when md: class is present */
    .text-center.md\\:text-left {
        text-align: left !important;
    }
    
    /* Force grid layouts only when md: class is present */
    [class*="md:grid-cols-2"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    
    [class*="md:grid-cols-3"] {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    
    [class*="md:grid-cols-4"] {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
    
    /* Force widths only when md: class is present */
    [class*="md:w-96"] {
        width: 24rem !important;
    }
    
    [class*="md:w-80"] {
        width: 20rem !important;
    }
    
    /* Force gaps only when md: class is present */
    [class*="md:gap-20"] {
        gap: 5rem !important;
    }
    
    [class*="md:gap-10"] {
        gap: 2.5rem !important;
    }
    
    /* Show desktop menu on medium screens and up */
    .navbar-menu {
        display: flex !important;
    }
    
    /* Hide mobile menu button on medium screens and up */
    #mobile-menu-btn {
        display: none !important;
    }
    
    #mobile-menu {
        display: none !important;
    }
    
    /* Show desktop dropdowns on medium screens and up */
    .navbar-menu .group .absolute {
        display: block !important;
    }
    
    /* Force hidden md:flex to be flex on medium screens and up */
    .hidden.md\\:flex {
        display: flex !important;
    }
    
    /* Show desktop menu on medium screens and up */
    .navbar-container .hidden.md\\:flex {
        display: flex !important;
    }
    
    /* Show all desktop menu elements on medium screens and up */
    .navbar-container div[class*="hidden md:flex"] {
        display: flex !important;
    }
    
    /* Show the specific navbar menu container */
    .navbar-container > div:last-child {
        display: flex !important;
    }
    
    /* Hide mobile button on medium screens and up */
    .navbar-container button.md\\:hidden {
        display: none !important;
    }
}

/* Large screens (1024px+) */
@media (min-width: 1024px) {
    [class*="lg:grid-cols-2"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    
    [class*="lg:grid-cols-3"] {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    
    [class*="lg:grid-cols-4"] {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
    
    [class*="lg:flex-row"] {
        flex-direction: row !important;
    }
    
    [class*="lg:text-left"] {
        text-align: left !important;
    }
}

/* Extra large screens (1280px+) */
@media (min-width: 1280px) {
    [class*="xl:grid-cols-2"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    
    [class*="xl:grid-cols-3"] {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    
    [class*="xl:grid-cols-4"] {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
    
    [class*="xl:flex-row"] {
        flex-direction: row !important;
    }
    
    [class*="xl:text-left"] {
        text-align: left !important;
    }
}