/* Mobile Responsive Utilities */
@media (max-width: 640px) {

    /* Prevent horizontal scroll */
    /* Prevent horizontal scroll - Fix for sticky scroll */
    /* Fix for sticky scroll logic on mobile */
    html {
        overflow: visible !important;
        height: auto !important;
    }

    body {
        overflow-x: clip !important;
        /* Allow vertical scroll, clip horizontal */
        overflow-y: visible !important;
        position: static !important;
        height: auto !important;
    }

    /* Ensure specific sticky parents are visible */
    #hero-section,
    main {
        overflow: visible !important;
        clip-path: none !important;
        contain: none !important;
        transform: none !important;
        /* Transforms can break fixed/sticky context */
    }

    /* Override the google translate fix if it interferes, but normally relative is fine.
       The key is overflow-x: clip. */
    body {
        position: relative;
    }

    /* Ensure parent containers don't break sticky */
    main,
    #hero-section {
        overflow: visible !important;
        contain: none !important;
        /* Ensure no containment breaks sticky */
    }

    /* Reduce section padding on mobile */
    section {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Ensure cards don't overflow */
    .card,
    .glass-card,
    .feature-card {
        max-width: 100%;
    }

    /* Touch-friendly buttons */
    button,
    .shiny-button,
    a[role="button"] {
        min-height: 44px;
        min-width: 44px;
    }

    /* Improve text readability */
    p,
    li {
        line-height: 1.6;
    }

    /* Navbar alignment and scaling */
    #logo-img-desktop {
        height: 2.2rem !important;
    }

    .theme-switch {
        transform: scale(0.75);
        transform-origin: right center;
    }

    .shiny-button.nav-btn {
        padding: 0.5rem 1rem !important;
        font-size: 0.75rem !important;
        border-radius: 0.75rem !important;
    }

    .flex.items-center.gap-3.sm\:gap-6 {
        gap: 0.5rem !important;
    }

    .nav-header .px-6 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Shift feature stack left */
    #feature-stack {
        transform: translateX(-40px);
        /* Increased shift to 40px total */
    }

    /* Move language button right - Reset for stacked layout */
    #lang-menu-btn {
        margin-left: 0 !important;
        width: 100%;
        justify-content: center;
    }

    /* Footer Mobile Layout Fixes */
    .footer-bottom-container {
        flex-direction: column !important;
        gap: 2rem !important;
        text-align: center !important;
    }

    .footer-lang-social-container {
        flex-direction: column !important;
        width: 100%;
        gap: 1.5rem !important;
    }

    .footer-social-icons {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 1rem !important;
        width: 100%;
    }

    /* Override Tailwind space-x-6 vertical margins if wrapping */
    .footer-social-icons>* {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Fix Close Button Visibility */
    #close-mobile-menu {
        z-index: 10000 !important;
        position: absolute !important;
        top: 1.5rem !important;
        right: 1.5rem !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        pointer-events: auto !important;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        width: 40px;
        height: 40px;
        backdrop-filter: blur(10px);
    }
}

/* Tablet optimizations */
@media (min-width: 768px) and (max-width: 1023px) {

    /* Adjust container padding */
    .container,
    .max-w-7xl {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    #logo-img-desktop {
        height: 3rem !important;
    }

    .theme-switch {
        transform: scale(0.85);
        transform-origin: right center;
    }

    .shiny-button.nav-btn {
        padding: 0.5rem 1.2rem !important;
        font-size: 0.8rem !important;
    }
}

/* For very small devices */
@media (max-width: 375px) {
    h1 {
        font-size: 2rem !important;
    }

    h2 {
        font-size: 1.5rem !important;
    }

    /* Further reduce padding */
    .p-8 {
        padding: 1.5rem !important;
    }

    .p-6 {
        padding: 1rem !important;
    }
}

/* Touch device improvements */
@media (hover: none) and (pointer: coarse) {

    /* Larger tap targets */
    a,
    button,
    input,
    select {
        min-height: 44px;
    }

    /* Remove hover effects on touch devices */
    .hover\:scale-105:hover {
        transform: scale(1);
    }
}

/* Hero Section Responsiveness for Mobile & iPad */
@media (max-width: 1024px) {
    #hero-content {
        align-items: center !important;
        justify-content: center !important;
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    #hero-content>div {
        align-items: center !important;
        text-align: center !important;
        transform: translateY(-115px) !important;
        /* Moved DOWN by 20px from -135px */
        margin-left: 0 !important;
        margin-top: 0 !important;
        max-width: 100% !important;
        z-index: 30 !important;
    }

    #scroll-explore {
        display: flex !important;
        top: auto !important;
        bottom: 20% !important;
        /* Centered vertically in the lower area */
        left: 50% !important;
        transform: translateX(-50%) !important;
        /* Centered horizontally */
        z-index: 10 !important;
    }

    #scroll-indicator {
        display: none !important;
        /* Remove duplicate graphic */
    }

    #hero-content .flex-col.sm\:flex-row {
        justify-content: center !important;
        width: 100% !important;
        display: flex !important;
        position: absolute !important;
        bottom: -250px !important;
        /* Moved down 75px from -175px */
        left: 0 !important;
        right: 0 !important;
        margin-top: 0 !important;
        z-index: 35 !important;
        padding-bottom: env(safe-area-inset-bottom);
    }

    #hero-content .shiny-button {
        padding: 0.85rem 2.5rem !important;
        width: auto !important;
    }

    #hero-canvas-wrapper {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        top: 15% !important;
        /* Adjust if needed to fit text */
    }
}

/* Specific Adjustments for iPad Pro, Air, and Tablets */
@media (min-width: 768px) and (max-width: 1024px) {
    #hero-content>div {
        transform: translateY(-365px) !important;
        /* Moved UP by 250px relative to base (-115px) */
    }

    #hero-content .flex-col.sm\:flex-row {
        bottom: -695px !important;
        /* Moved DOWN by additional 5px (total -695px) */
    }

    #scroll-explore {
        bottom: calc(20% - 40px) !important;
        /* Moved down additional 15px (total 40px from 20%) */
    }
}