/* Ultimate Mobile Viewport Fix for High-Resolution Tall Screens */
/* Specifically targets Poco X3 NFC and similar devices */

/* Force proper document flow for all mobile devices */
@media (max-width: 768px) {
    /* Critical viewport resets */
    html, body {
        position: static !important;
        height: auto !important;
        min-height: 100vh !important;
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Prevent any fixed positioning conflicts */
    body {
        transform: none !important;
        will-change: auto !important;
    }
    
    /* Ensure all content is visible and scrollable */
    main, .main-content, #app, #root {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        min-height: auto !important;
    }
    
    /* Critical section visibility fixes */
    section {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        overflow: visible !important;
        z-index: auto !important;
        margin: 0 !important;
        padding: 80px 0 60px 0 !important;
    }
    
    /* Force visibility for specific sections */
    #home, #about, #skills, #projects, #education, #interests, #contact {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        min-height: auto !important;
    }
    
    /* Hero section specific positioning */
    #home.hero {
        padding-top: 140px !important;
        padding-bottom: 80px !important;
        min-height: calc(100vh - 80px) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    /* Header must not interfere with content */
    .glass-header, header, .header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 60px !important;
        z-index: 1000 !important;
        transform: translateZ(0) !important;
        will-change: transform !important;
    }
    
    /* Container proper spacing */
    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 20px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
        position: relative !important;
    }
    
    /* Text and content visibility */
    h1, h2, h3, h4, h5, h6, p, span, div, a, li, 
    .hero-content, .about-content, .skills-content, 
    .projects-content, .education-content, .interests-content, 
    .contact-content {
        position: relative !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        width: auto !important;
        height: auto !important;
    }
    
    /* Inline elements should remain inline */
    span, a, strong, em, small {
        display: inline !important;
    }
    
    /* Flex containers */
    .hero-container, .about-container, .skills-container,
    .projects-container, .education-container, .interests-container,
    .contact-container {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        position: relative !important;
    }
    
    /* Grid containers */
    .skills-grid, .projects-grid, .interests-grid {
        display: grid !important;
        width: 100% !important;
        position: relative !important;
    }
    
    /* Project carousel specific fixes */
    .projects-carousel {
        display: flex !important;
        width: 100% !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    .projects-page {
        width: 100% !important;
        flex-shrink: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 15px !important;
        padding: 0 15px !important;
    }
    
    /* Menu positioning */
    .menu-items {
        position: fixed !important;
        top: 60px !important;
        right: -100% !important;
        width: 280px !important;
        height: calc(100vh - 60px) !important;
        z-index: 999 !important;
        overflow-y: auto !important;
        transform: translateZ(0) !important;
    }
    
    .menu-items.active {
        right: 0 !important;
    }
    
    /* Prevent horizontal overflow */
    * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Image responsiveness */
    img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }
    
    /* Form elements */
    input, textarea, select, button {
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: block !important;
        width: 100% !important;
    }
    
    /* Button specific */
    button, .btn, .button {
        display: inline-block !important;
        width: auto !important;
        max-width: 100% !important;
    }
    
    /* Remove any conflicting transforms or positions */
    [style*="transform"], [style*="position: absolute"], [style*="position: fixed"] {
        transform: none !important;
        position: relative !important;
    }
    
    /* Exception for header and menu */
    .glass-header, .menu-items, .menu-btn {
        position: fixed !important;
    }
    
    /* Smooth scrolling */
    html {
        scroll-behavior: smooth !important;
    }
    
    /* Touch improvements */
    body {
        -webkit-overflow-scrolling: touch !important;
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
    }
}

/* Additional fixes for very tall screens (Poco X3 NFC type) */
@media (max-width: 500px) and (min-height: 800px) {
    /* More generous spacing for tall screens */
    section {
        padding: 100px 0 80px 0 !important;
    }
    
    #home.hero {
        padding-top: 160px !important;
        padding-bottom: 100px !important;
    }
    
    .container {
        padding: 0 25px !important;
    }
    
    /* Ensure sections have enough height */
    #about, #skills, #projects, #education, #interests, #contact {
        min-height: 50vh !important;
    }
}

/* Debug outline for testing (comment out in production) */
/*
@media (max-width: 768px) {
    section {
        outline: 2px solid red !important;
    }
    
    .container {
        outline: 1px solid blue !important;
    }
    
    .glass-header {
        outline: 2px solid green !important;
    }
}
*/