/**
 * Android-specific optimizations for DASPR website
 * These styles will only apply to Android devices
 */

/* Add touch feedback styles */
.touch-feedback {
    opacity: 0.8 !important;
    background-color: rgba(0, 0, 0, 0.05) !important;
    transition: all 0.1s ease-out !important;
}

/* Special button touch feedback */
.app-store-btn.touch-feedback,
.learn-more-btn.touch-feedback {
    opacity: 0.9 !important;
    transform: scale(0.98) !important;
}

/* Android device class (added via JS) */
.android-device {
    /* Fix font rendering on some Android devices */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: always;
}

/* Better tap highlights */
.android-device button,
.android-device .app-store-btn,
.android-device .learn-more-btn,
.android-device nav ul li a {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Smoother animations */
.android-device .feature-card,
.android-device .app-store-btn,
.android-device .learn-more-btn {
    /* Use hardware acceleration for animations */
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Fix button rendering on older versions */
.android-device .app-store-btn img {
    image-rendering: -webkit-optimize-contrast;
}

/* Fix scrolling performance */
.android-device .comparison-table,
.android-device .features-grid,
.android-device .science-list {
    /* Avoid repaints during scrolling */
    transform: translateZ(0);
    will-change: transform;
}

/* Improve form input appearance on Android */
.android-device input,
.android-device textarea,
.android-device select {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 4px;
    font-size: 16px; /* Prevent zoom on focus */
}

/* Fix for browser chrome overlap at bottom */
.android-device .cta {
    padding-bottom: 60px;
}

/* Fix for some Android browsers' rendering issues with borders */
.android-device .feature-card,
.android-device .comparison-table,
.android-device nav ul li a {
    border-style: solid;
    border-width: 0;
}

/* Pixel-specific optimizations */
@media screen and (max-width: 480px) and (-webkit-min-device-pixel-ratio: 2.625) {
    /* Pixel devices have a 2.625 pixel ratio */
    button,
    .app-store-btn,
    .learn-more-btn,
    nav ul li a {
        min-height: 54px; /* Slightly larger for Pixel devices */
        font-size: 16px; /* Ensure text is readable */
    }
    
    /* Slightly larger spacing for better touch */
    .container {
        padding: 0 12px;
    }
    
    /* Adjust font rendering for Pixel screens */
    body {
        letter-spacing: 0.01em;
    }
    
    /* Ensure text-image content displays properly */
    .difference-content, 
    .feature-content,
    .science-content, 
    .daily-content, 
    .privacy-content {
        flex-direction: column !important;
        gap: 50px !important;
    }
    
    /* Add more breathing room */
    .difference-text, .feature-text, .science-text, .daily-text, .privacy-text {
        margin-bottom: 20px;
    }
    
    /* Make images stand out better */
    .difference-image img, .feature-image img, .science-image img, .daily-image img, .privacy-image img {
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
    }
}

/* Fix for Chrome mobile bottom navigation bar */
@media screen and (display-mode: standalone) {
    /* When website is added to home screen */
    body {
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
}

/* Improve accessibility - fix high contrast mode */
@media (forced-colors: active) {
    .logo img,
    .phone-mockup,
    .feature-icon img {
        forced-color-adjust: none;
    }
}