/* ==============================================
   Pynfinity PWA & Mobile Optimizations
   WebView-safe CSS, touch UX, safe-area, and
   page-specific mobile layout fixes.
   ============================================== */

/* --- Global WebView / PWA Fixes --- */
html, body {
    overscroll-behavior: none;             /* Prevent rubber-band bounce in WebView */
    -webkit-overflow-scrolling: touch;     /* Smooth momentum scroll on iOS */
    -webkit-tap-highlight-color: transparent; /* Remove blue tap flash */
}

/* Remove 300ms tap delay on all interactive elements */
a, button, input, select, textarea, [role="button"] {
    touch-action: manipulation;
}

/* Safe area insets for notch/status bar (when viewport-fit=cover) */
body {
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* Prevent text selection on nav elements for app-like feel */
.easy_mobile_nav,
.mobile-top-header,
.premium-navbar {
    -webkit-user-select: none;
    user-select: none;
}

/* Ensure minimum 44x44px touch targets (WCAG 2.1) */
.mobile_nav_item,
.action-btn,
.float-btn,
.header-btn {
    min-width: 44px;
    min-height: 44px;
}


/* --- Mobile Layout: Body Content Clearance --- */
@media (max-width: 991px) {
    /* Clear space for fixed bottom nav (easy_mobile_nav ~80px) */
    body {
        padding-bottom: 100px;
    }

    /* Move FABs above bottom nav */
    .fab-container {
        bottom: 110px !important;
    }

    .feedback-fab {
        bottom: 170px !important;
    }

    /* Premium FAB also needs clearance */
    #premiumFab,
    .fab-premium {
        bottom: 240px !important;
    }
}


/* --- Home Page Mobile Fixes --- */
@media (max-width: 576px) {
    /* Hero Section: Reduce oversized typography */
    .hero-section h1 {
        font-size: 1.8em !important;
        line-height: 1.2;
    }

    .hero-section .sub-headline {
        font-size: 0.95em !important;
        line-height: 1.4;
    }

    .hero-section .cta-button {
        padding: 10px 22px !important;
        font-size: 1em !important;
        margin: 5px !important;
    }

    .hero-section .proof {
        font-size: 0.8em;
    }

    /* Glass cards: Allow wrapping on mobile instead of nowrap overflow */
    .glass-container {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    .glass-card {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Hide QR code download card on mobile (user is already on mobile / in-app) */
    .glass-card[data-mobile-hide="qr"] {
        display: none !important;
    }

    /* Hero slider: Reduce height for small screens */
    .hero-slider-container {
        height: 220px !important;
    }

    .hero-slide {
        width: 85% !important;
    }

    /* Section titles: Scale down */
    .section-title {
        font-size: 1.6rem !important;
    }

    /* Word of the day container: Full width */
    .word_container,
    #wordperday {
        min-width: auto !important;
        width: 100% !important;
    }
}


/* --- Apps Page Mobile Fixes --- */
@media (max-width: 400px) {
    /* Stack app cards to single column on very small screens */
    .app-item.col-sm-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Filter bar: Stack vertically */
    .d-flex.justify-content-between.flex-wrap {
        flex-direction: column !important;
        gap: 10px !important;
    }
}


/* --- Pebbles Page Mobile Fixes --- */
@media (max-width: 768px) {
    /* Bookshelf: Better touch scroll UX */
    .bookshelf {
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .book-spine {
        scroll-snap-align: center;
    }

    /* Shelf scroll buttons: Larger touch targets */
    .shelf-scroll-btn {
        min-width: 44px;
        min-height: 44px;
        font-size: 1.2rem;
    }
}


/* --- Terminal Section Mobile Fixes --- */
@media (max-width: 576px) {
    .terminal-wrapper {
        border-radius: 8px;
        margin: 0 -10px; /* Full-bleed effect on mobile */
    }

    .terminal-pane {
        font-size: 0.8rem;
        padding: 12px;
    }
}


/* --- Tech Grid Mobile Fixes --- */
@media (max-width: 576px) {
    .tech-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1rem !important;
        padding: 1rem !important;
    }

    .tech-card img {
        width: 40px;
        height: 40px;
    }

    .tech-card h3 {
        font-size: 0.8rem;
    }

    .tech-desc-area {
        min-height: 60px;
        padding: 1rem;
        font-size: 0.95rem;
    }
}


/* --- Dashboard Modal Mobile Fixes --- */
@media (max-width: 576px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px;
    }

    .stat-value {
        font-size: 1.2rem;
    }

    .copy-box {
        flex-direction: column;
    }

    .copy-box input {
        text-align: center;
        margin-bottom: 5px;
    }
}


/* --- Standalone PWA Status Bar --- */
@media (display-mode: standalone) {
    /* Extra top padding when running as installed PWA */
    .mobile-top-header {
        padding-top: calc(20px + env(safe-area-inset-top)) !important;
    }

    .premium-navbar {
        padding-top: env(safe-area-inset-top);
    }
}

/* --- Bottom Nav Safe Area --- */
.easy_mobile_nav {
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
}


/* --- Smooth Transitions for App Feel --- */
.mobile_nav_item,
.action-btn,
.cta-button,
.glass-card,
.tech-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

/* Active press states for app-like feel */
.mobile_nav_item:active,
.action-btn:active,
.cta-button:active {
    transform: scale(0.95) !important;
}


/* --- Image Lazy Load Placeholder --- */
img[loading="lazy"] {
    background: linear-gradient(135deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

img[loading="lazy"][src] {
    animation: none;
    background: none;
}


/* --- Orientation Lock Hint (landscape on phone) --- */
@media (max-width: 768px) and (orientation: landscape) {
    body::after {
        content: '📱 Rotate for best experience';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background: #363062;
        color: white;
        text-align: center;
        padding: 8px;
        font-size: 0.8rem;
        z-index: 9999;
        animation: fadeOut 5s forwards;
    }

    @keyframes fadeOut {
        0%, 70% { opacity: 1; }
        100% { opacity: 0; pointer-events: none; }
    }
}