/* ==========================================================================
   GLOBAL RESPONSIVE OVERRIDES
   These styles ensure the entire site works on mobile/tablet while keeping
   desktop (>= 1024px) completely untouched.
   ========================================================================== */

@media (max-width: 1023px) {

    /* =========================================
       1. General Layout Resets (Grid & Flex)
       ========================================= */
    /* Global fix for horizontal overflow on mobile/tablet */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }
    
    /* Ensure all sections hide overflow to prevent absolute items from breaking width */
    section {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* Fix large hardcoded widths/heights in decorative or layout elements that break mobile view */
    [class*="w-[300px]"], [class*="w-[350px]"], [class*="w-[380px]"], [class*="w-[400px]"], [class*="w-[440px]"], [class*="w-[490px]"], [class*="w-[500px]"], [class*="w-[520px]"], [class*="w-[600px]"], [class*="w-[800px]"] {
        max-width: 100% !important;
    }

    /* Force grid containers to stack on mobile/tablet */
    .grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* Keep certain grids like icons or small features horizontal if needed, but mostly stack */
    .grid-cols-2, .grid-cols-3, .grid-cols-4, .grid-cols-5, .grid-cols-6 {
        grid-template-columns: 1fr !important;
    }

    /* Force row-flex containers to column flex */
    /* Only applying this generally to structural elements to prevent breaking icons/buttons */
    section > .flex, 
    main > .flex, 
    div > .flex.flex-row,
    .lg\:flex-row {
        flex-direction: column !important;
    }

    /* Reset width percentages used for desktop columns */
    .w-\[42\%\], .lg\:w-\[42\%\],
    .w-\[44\%\], .xl\:w-\[44\%\],
    .w-\[55\%\], .lg\:w-\[55\%\],
    .w-\[52\%\], .lg\:w-\[52\%\],
    .w-\[60\%\], .lg\:w-\[60\%\],
    .w-\[45\%\], .md\:w-\[45\%\],
    .w-\[40\%\], .lg\:w-\[40\%\] {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Reset fixed heights used for desktop hero sections */
    .min-h-\[680px\], .lg\:h-\[620px\], .h-\[680px\],
    .min-h-\[500px\], .min-h-\[600px\],
    .h-\[285px\] /* cards */ {
        height: auto !important;
        min-height: auto !important;
    }
    
    /* Give cards a sensible min-height on mobile */
    .group.relative.rounded-2xl {
        min-height: 320px !important;
    }

    /* =========================================
       2. Typography Scaling
       ========================================= */
    h1, .text-\[48px\], .text-\[44px\], .text-\[42px\], .text-\[36px\] {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }

    h2, .text-\[34px\], .text-\[32px\], .text-\[28px\] {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }
    
    h3, .text-\[24px\], .text-\[22px\], .text-\[20px\] {
        font-size: 20px !important;
    }

    /* =========================================
       3. Spacing Reductions (Paddings & Margins)
       ========================================= */
    /* Scale down large horizontal paddings */
    .pl-16, .pr-12, .pl-20, .pr-16, .px-12, .px-16, .px-20, .p-12, .p-16, .p-20 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Scale down large vertical paddings */
    .py-16, .py-20, .py-24, .py-32, .pb-32, .pb-36, .pt-16, .pt-24 {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    /* Scale down large margins */
    .mt-16, .mt-20, .mt-24, .mb-16, .mb-20, .mb-24 {
        margin-top: 2rem !important;
        margin-bottom: 2rem !important;
    }

    /* =========================================
       4. Header & Navigation Fixes
       ========================================= */
    header .flex {
        /* Ensure the header container itself stays row-based on mobile */
        flex-direction: row !important;
    }

    /* Fix fullscreen menu layout on mobile */
    #fullscreen-menu {
        flex-direction: column !important;
        overflow-y: auto !important;
    }
    
    #fullscreen-menu > div.w-full {
        padding: 1.5rem !important;
        height: auto !important;
        min-height: 100vh !important;
    }
    
    /* Hide the right-side preview image on mobile to save space */
    #menu-preview-bg {
        display: none !important;
    }

    /* Mobile sub-menus within the fullscreen menu should stack and indent */
    #fullscreen-menu .pl-6 {
        padding-left: 1rem !important;
        margin-top: 0.5rem !important;
    }
    
    /* Make menu text fit */
    .menu-nav-item {
        font-size: 16px !important;
        white-space: normal !important;
    }

    /* =========================================
       5. Decorative Elements & Backgrounds
       ========================================= */
    /* Hide decorative absolute elements that could cause overflow or clutter */
    .animate-float-slow,
    .animate-float-reverse,
    .animate-mesh-float,
    .animate-mesh-float-alt,
    .lg\:block,
    .spin-slow.hidden {
        display: none !important;
    }

    
    /* Keep specific icons visible but relative if they are part of content */
    .fa-flask, .fa-microscope, .fa-vial, .fa-dna, .fa-atom, .fa-pills, .fa-shield-halved {
        display: inline-block !important;
    }

    /* Ensure background images size properly */
    section.bg-cover {
        background-position: center !important;
        background-attachment: scroll !important;
    }

    /* =========================================
       6. Footer Specifics
       ========================================= */
    footer .grid {
        gap: 2.5rem !important;
        text-align: center !important;
    }
    
    footer .flex.items-start {
        flex-direction: row !important;
        justify-content: center !important;
    }
    
    footer .w-10 {
        /* Center the small underline in footer headings */
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    footer .flex.space-x-5 {
        justify-content: center !important;
    }
}

/* ==========================================================================
   TABLET SPECIFIC TWEAKS (768px to 1023px)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
    /* On tablet, allow 2 columns for grid instead of 1 */
    .grid.md\:grid-cols-2,
    .grid.lg\:grid-cols-3,
    .grid.lg\:grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    
    /* Footer can be 2 columns on tablet */
    footer .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        text-align: left !important;
    }
    footer .flex.items-start, footer .flex.space-x-5 {
        justify-content: flex-start !important;
    }
    footer .w-10 {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}