/* Responsive Design & Performance Optimizations */

/* ============================================
   BASE RESPONSIVE SETTINGS
   ============================================ */

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ============================================
   SMOOTH SCROLLING FIXES
   ============================================ */

/* Fix scroll lag on iOS */
@supports (-webkit-overflow-scrolling: touch) {
    body {
        -webkit-overflow-scrolling: touch;
    }
}

/* Hardware acceleration for smooth scrolling */
.scroll-container,
main,
section {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: scroll-position;
}

/* ============================================
   MOBILE OPTIMIZATIONS
   ============================================ */

@media (max-width: 768px) {
    /* Reduce padding on mobile */
    .max-w-7xl {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Optimize font sizes */
    h1 {
        font-size: 2rem !important;
        line-height: 1.2;
    }
    
    h2 {
        font-size: 1.75rem !important;
    }
    
    h3 {
        font-size: 1.5rem !important;
    }
    
    /* Optimize images */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Stack elements vertically */
    .grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Full width buttons on mobile */
    button,
    .btn {
        width: 100%;
        min-height: 44px; /* iOS tap target size */
    }
    
    /* Optimize cards */
    article {
        margin-bottom: 1.5rem;
    }
    
    /* Reduce animations on mobile */
    .fade-in,
    .slide-in-left,
    .slide-in-right {
        transition-duration: 0.3s;
    }
}

/* ============================================
   TABLET OPTIMIZATIONS
   ============================================ */

@media (min-width: 769px) and (max-width: 1024px) {
    .max-w-7xl {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================ */

.touch-device a,
.touch-device button {
    min-height: 44px;
    min-width: 44px;
    padding: 12px;
}

.touch-device .reaction-btn {
    padding: 0.75rem 1.25rem;
}

/* Touch feedback */
.touch-active {
    opacity: 0.7;
    transform: scale(0.98);
    transition: all 0.1s ease;
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* Reduce animations on low-end devices */
.low-end-device *,
.reduce-animations * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
}

.low-end-device .parallax-img,
.reduce-animations .parallax-img {
    transform: none !important;
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .parallax-img {
        transform: none !important;
    }
}

/* ============================================
   SCROLL PERFORMANCE
   ============================================ */

/* Use GPU acceleration for scroll elements */
.scroll-element,
.scroll-container {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: scroll-position;
    contain: layout style paint;
}

/* Optimize fixed elements */
nav,
.sticky,
.fixed,
.reading-progress,
.streak-badge,
.points-display {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform, opacity;
}

/* Optimize scroll containers */
main,
section,
#posts-container,
#featured-posts {
    contain: layout style;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* Prevent scroll jank */
body {
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
}

/* ============================================
   IMAGE OPTIMIZATION
   ============================================ */

img {
    max-width: 100%;
    height: auto;
    display: block;
}

img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s;
}

img[loading="lazy"].loaded {
    opacity: 1;
}

/* Responsive images */
img[srcset] {
    width: 100%;
    height: auto;
}

/* ============================================
   LAYOUT OPTIMIZATIONS
   ============================================ */

/* Prevent layout shift */
article img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* Container queries (when supported) */
@container (max-width: 600px) {
    .post-card {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   FONT OPTIMIZATION
   ============================================ */

/* Optimize font loading */
@font-face {
    font-display: swap;
}

/* ============================================
   INTERACTIVE ELEMENTS
   ============================================ */

/* Larger tap targets on mobile */
@media (max-width: 768px) {
    a,
    button,
    input[type="button"],
    input[type="submit"],
    .icon-button {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 16px;
        -webkit-tap-highlight-color: rgba(59, 130, 246, 0.2);
    }
    
    /* Increase spacing between interactive elements */
    .reactions-bar {
        gap: 0.75rem;
        flex-wrap: wrap;
    }
    
    .reaction-btn {
        padding: 0.75rem 1.25rem;
        min-height: 44px;
        flex: 1 1 auto;
    }
    
    /* Optimize form inputs */
    input,
    textarea,
    select {
        font-size: 16px; /* Prevents zoom on iOS */
        min-height: 44px;
        padding: 12px;
    }
    
    /* Better spacing for mobile */
    .flex {
        gap: 0.75rem;
    }
}

/* ============================================
   NAVIGATION OPTIMIZATIONS
   ============================================ */

/* Mobile menu performance */
#mobile-menu {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
}

/* ============================================
   CONTENT OPTIMIZATIONS
   ============================================ */

/* Optimize prose content */
.prose {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.prose img {
    max-width: 100%;
    height: auto;
}

/* ============================================
   AD SENSE OPTIMIZATIONS
   ============================================ */

/* Ensure ads don't break layout */
.adsbygoogle {
    display: block;
    max-width: 100%;
    overflow: hidden;
}

/* ============================================
   SPECIFIC DEVICE FIXES
   ============================================ */

/* iOS Safari fixes */
@supports (-webkit-touch-callout: none) {
    body {
        -webkit-tap-highlight-color: transparent;
    }
    
    a,
    button {
        -webkit-tap-highlight-color: rgba(59, 130, 246, 0.2);
    }
}

/* Android Chrome fixes */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    select,
    textarea,
    input[type="text"],
    input[type="password"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="date"],
    input[type="month"],
    input[type="time"],
    input[type="week"],
    input[type="number"],
    input[type="email"],
    input[type="url"],
    input[type="search"],
    input[type="tel"],
    input[type="color"] {
        font-size: 16px; /* Prevents zoom on focus */
    }
}

/* ============================================
   VIEWPORT FIXES
   ============================================ */

/* Prevent horizontal scroll */
html,
body {
    overflow-x: hidden;
    width: 100%;
}

/* Fix viewport on mobile */
@viewport {
    width: device-width;
    initial-scale: 1;
    maximum-scale: 5;
    user-scalable: yes;
}

/* ============================================
   PERFORMANCE MONITORING
   ============================================ */

/* Loading states */
.loading {
    pointer-events: none;
    opacity: 0.6;
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    * {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    a,
    a:visited {
        text-decoration: underline;
    }
    
    img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }
    
    .no-print {
        display: none !important;
    }
}