/* =========================================
   MOBILE OPTIMIZATION PATCHES
   Last Updated: 2026-03-31
   Purpose: Fix mobile display issues across all pages
   ========================================= */

/* ---- Universal Mobile Fixes ---- */

/* Prevent horizontal scroll on all pages */
html, body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

/* Ensure images don't overflow */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Fix viewport issues on iOS */
@supports (-webkit-touch-callout: none) {
  .min-h-screen {
    min-height: -webkit-fill-available;
  }
}

/* ---- Small Phones (320px - 480px) ---- */
@media (max-width: 480px) {
  /* Typography adjustments */
  :root {
    --font-base: 0.9375rem; /* 15px instead of 16px */
  }
  
  h1 { font-size: 1.75rem !important; }
  h2 { font-size: 1.5rem !important; }
  h3 { font-size: 1.25rem !important; }
  
  /* Reduce padding/margins */
  .container {
    padding-left: var(--space-3) !important;
    padding-right: var(--space-3) !important;
  }
  
  section {
    padding-top: var(--space-8) !important;
    padding-bottom: var(--space-8) !important;
  }
  
  /* Stack grids vertically */
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr !important;
  }
  
  /* Full-width buttons */
  .btn {
    width: 100%;
    justify-content: center;
  }
  
  /* Navigation fixes */
  .navbar {
    padding: var(--space-2) var(--space-3);
  }
  
  .nav-links {
    gap: var(--space-2);
  }
  
  .nav-links a {
    font-size: var(--font-sm);
    padding: var(--space-2);
  }
  
  /* Card layouts */
  .card, .tool-card, .feature-card {
    padding: var(--space-4) !important;
  }
  
  /* Forms */
  input, textarea, select {
    font-size: 16px !important; /* Prevents zoom on iOS */
  }
  
  /* Tables */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  
  /* Modals/Popups */
  .modal, .popup {
    width: 95% !important;
    margin: var(--space-2);
  }
}

/* ---- Phones (481px - 767px) ---- */
@media (min-width: 481px) and (max-width: 767px) {
  .grid-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ---- Tablets (768px - 1024px) ---- */
@media (min-width: 768px) and (max-width: 1024px) {
  .container {
    max-width: 100% !important;
    padding: 0 var(--space-6);
  }
  
  .grid-4 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ---- Page-Specific Mobile Fixes ---- */

/* Dashboard Sidebar */
@media (max-width: 767px) {
  .dashboard-grid {
    grid-template-columns: 1fr !important;
  }
  
  .sidebar {
    position: static !important;
    order: -1;
  }
  
  .sidebar-menu {
    display: flex;
    overflow-x: auto;
    gap: var(--space-2);
    padding-bottom: var(--space-2);
  }
  
  .sidebar-item {
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* Extension Browser Cards */
@media (max-width: 767px) {
  .browsers-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-4) !important;
  }
  
  .extension-mockup {
    transform: scale(0.85);
    margin: var(--space-4) auto !important;
  }
}

/* Mobile App Phone Mockup */
@media (max-width: 767px) {
  .hero-grid {
    grid-template-columns: 1fr !important;
    text-align: center;
  }
  
  .phone-mockup {
    order: -1;
    margin-bottom: var(--space-6);
  }
  
  .phone-frame {
    width: 220px !important;
    height: 440px !important;
  }
  
  .app-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .app-btn {
    width: 100%;
    max-width: 280px;
  }
}

/* Newsletter Form */
@media (max-width: 767px) {
  .frequency-selector {
    grid-template-columns: 1fr !important;
  }
  
  .stats-bar {
    flex-direction: column;
    gap: var(--space-4);
  }
  
  .subscribe-container {
    padding: var(--space-4) !important;
  }
}

/* Footer Columns */
@media (max-width: 767px) {
  .footer-cols {
    grid-template-columns: 1fr !important;
    gap: var(--space-6);
  }
  
  .footer-col {
    text-align: center;
  }
  
  .footer-col ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
  }
  
  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* Tool Cards Grid */
@media (max-width: 640px) {
  .tools-grid {
    grid-template-columns: 1fr !important;
  }
  
  .filter-btn {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-sm);
  }
}

/* Hero Sections */
@media (max-width: 767px) {
  .section-title {
    font-size: clamp(1.75rem, 5vw, 2.5rem) !important;
  }
  
  .section-desc {
    font-size: var(--font-base) !important;
  }
  
  .hero-section {
    padding: var(--space-10) 0 !important;
  }
}

/* Analytics Cards */
@media (max-width: 640px) {
  .analytics-grid {
    grid-template-columns: 1fr !important;
  }
  
  .stat-number {
    font-size: 2rem !important;
  }
}

/* Comparison Table */
@media (max-width: 767px) {
  .comparison-table {
    font-size: var(--font-sm);
  }
  
  .comparison-table th,
  .comparison-table td {
    padding: var(--space-2);
  }
}

/* Export/Import Cards */
@media (max-width: 640px) {
  .export-import-section {
    grid-template-columns: 1fr !important;
  }
  
  .io-card {
    padding: var(--space-4) !important;
  }
}

/* Collaboration Features */
@media (max-width: 767px) {
  .collaboration-features {
    grid-template-columns: 1fr !important;
  }
}

/* Testimonial Cards */
@media (max-width: 640px) {
  .testimonials-grid {
    grid-template-columns: 1fr !important;
  }
}

/* FAQ Items */
@media (max-width: 767px) {
  .faq-item {
    padding: var(--space-4) !important;
  }
}

/* Changelog Timeline */
@media (max-width: 640px) {
  .timeline::before {
    left: 20px !important;
  }
  
  .timeline-item {
    padding-left: 50px !important;
  }
}

/* Innovation Feature Cards */
@media (max-width: 767px) {
  .innovation-grid {
    grid-template-columns: 1fr !important;
  }
  
  .feature-badge {
    font-size: var(--font-xs);
    padding: var(--space-1) var(--space-2);
  }
}

/* Advanced Features */
@media (max-width: 640px) {
  .advanced-card {
    padding: var(--space-4) !important;
  }
  
  .keyboard-shortcuts kbd {
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-xs);
  }
  
  .heatmap-cell {
    width: 12px !important;
    height: 12px !important;
  }
}

/* ---- Touch Interaction Improvements ---- */

/* Remove tap highlight on mobile */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Better touch feedback */
@media (hover: none) and (pointer: coarse) {
  .btn:active,
  .card:active,
  .tool-card:active {
    transform: scale(0.98);
    opacity: 0.9;
  }
  
  /* Disable hover effects on touch devices */
  .btn:hover,
  .card:hover {
    transform: none;
  }
}

/* ---- Performance Optimizations for Mobile ---- */

/* Reduce animations on low-end devices */
@media (max-width: 767px) {
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation: none !important;
      transition: none !important;
    }
  }
  
  /* Simplify complex gradients */
  .gradient-bg {
    background: var(--primary) !important;
  }
}

/* ---- Accessibility on Mobile ---- */

/* Larger touch targets for accessibility */
@media (max-width: 767px) {
  button, 
  [role="button"],
  a.btn {
    min-height: 48px;
    min-width: 48px;
  }
  
  /* Focus indicators */
  :focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
  }
  
  /* Skip to content link */
  .skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary);
    color: white;
    padding: var(--space-2) var(--space-4);
    z-index: 100;
    transition: top 0.3s;
  }
  
  .skip-link:focus {
    top: 0;
  }
}

/* ---- Orientation Changes ---- */

@media (orientation: landscape) and (max-height: 500px) {
  .navbar {
    position: static;
  }
  
  .hero-section {
    padding: var(--space-6) 0;
  }
  
  /* Hide non-essential elements in landscape */
  .footer {
    display: none;
  }
}

/* ---- Print Styles for Mobile ---- */

@media print and (max-width: 767px) {
  body {
    font-size: 12pt;
  }
  
  .no-print {
    display: none !important;
  }
}

/* ---- Dark Mode Specific Mobile Fixes ---- */

@media (max-width: 767px) {
  [data-theme="dark"] .card,
  [data-theme="dark"] .tool-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  }
}

/* ---- High DPI Screens ---- */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* ---- Foldable Devices ---- */

@media (spanning: single-fold-vertical) {
  .container {
    padding-left: env(fold-left);
    padding-right: env(fold-right);
  }
}

/* ---- Safe Area Insets (iPhone X+) ---- */

@supports (padding: max(0px)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  .navbar {
    padding-top: max(var(--space-2), env(safe-area-inset-top));
  }
}