cfc/web/css/mobile.css

/* ===== Mobile Experience Upgrade ===== */
/* Import this file in all articles: <link rel="stylesheet" href="../css/mobile.css"> */

/* === Base Mobile Reset === */
@media (max-width: 768px) {
  :root {
    --mobile-padding: 1rem;
    --mobile-radius: 12px;
    --touch-target: 44px; /* Apple HIG minimum */
  }
  
  /* Improve text readability */
  body {
    font-size: 16px; /* Prevent iOS zoom */
    line-height: 1.7;
    -webkit-text-size-adjust: 100%;
  }
  
  /* Hero optimizations */
  .hero {
    padding: 5rem var(--mobile-padding) 2.5rem !important;
    min-height: auto !important;
  }
  
  .hero h1 {
    font-size: 1.75rem !important;
    line-height: 1.3 !important;
  }
  
  .hero p {
    font-size: 0.95rem !important;
  }
  
  .hero-stats {
    flex-direction: column;
    gap: 0.75rem !important;
  }
  
  .hero-stat {
    min-width: 100% !important;
    padding: 0.75rem !important;
  }
  
  .hero-stat .num {
    font-size: 1.5rem !important;
  }
  
  /* Section padding */
  section {
    padding: 2rem var(--mobile-padding) !important;
  }
  
  /* Card optimizations */
  .info-card,
  .card {
    padding: 1.25rem !important;
    border-radius: var(--mobile-radius) !important;
    margin-bottom: 1rem !important;
  }
  
  .info-card h2,
  .card h3 {
    font-size: 1.25rem !important;
  }
  
  /* Grid → Single column */
  .grid-2,
  .grid-3,
  .infographic,
  .pathway-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  /* Table horizontal scroll */
  .data-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1rem calc(-1 * var(--mobile-padding)) !important;
    padding: 0 var(--mobile-padding);
  }
  
  .data-table {
    min-width: 600px; /* Force scroll on narrow screens */
    font-size: 0.85rem !important;
  }
  
  .data-table th,
  .data-table td {
    padding: 0.6rem 0.75rem !important;
    white-space: nowrap;
  }
  
  /* Screenshot responsive */
  .screenshot-block {
    margin: 1rem calc(-1 * var(--mobile-padding)) !important;
    border-radius: 0 !important;
  }
  
  .screenshot-block img {
    max-width: 100%;
    height: auto;
  }
  
  /* Evidence links */
  .evidence-link {
    padding: 1rem !important;
    flex-direction: column;
    gap: 0.75rem !important;
  }
  
  .evidence-link .link-icon {
    font-size: 1.25rem !important;
  }
  
  /* Highlight boxes */
  .highlight-box {
    padding: 1rem 1.25rem !important;
    margin: 1rem 0 !important;
  }
  
  /* TOC navigation */
  .toc-inner {
    padding: 0.5rem var(--mobile-padding) !important;
    gap: 0.5rem !important;
  }
  
  .toc-inner a {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.8rem !important;
    white-space: nowrap;
  }
  
  /* Reference list */
  .ref-list {
    padding-left: 1.25rem !important;
  }
  
  .ref-list li {
    font-size: 0.85rem !important;
    line-height: 1.6 !important;
  }
  
  /* Section nav */
  .section-nav {
    gap: 0.5rem !important;
  }
  
  .section-nav a {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.8rem !important;
  }
  
  /* Footer */
  .footer-inner {
    flex-direction: column;
    gap: 2rem !important;
  }
  
  .footer-links {
    flex-direction: column;
    gap: 1.5rem !important;
  }
  
  /* Pathway cards */
  .pathway-card {
    border-top-width: 3px !important;
    padding: 1.25rem !important;
  }
  
  .pathway-card h4 {
    font-size: 0.95rem !important;
  }
  
  /* Warning boxes */
  .warning {
    padding: 0.875rem 1rem !important;
    font-size: 0.875rem !important;
  }
  
  /* Infographic items */
  .info-item {
    padding: 1.25rem !important;
  }
  
  .info-item .icon {
    font-size: 1.75rem !important;
  }
  
  .info-item h4 {
    font-size: 0.9rem !important;
  }
  
  .info-item p {
    font-size: 0.82rem !important;
  }
}

/* === Small phones (≤480px) === */
@media (max-width: 480px) {
  .hero h1 {
    font-size: 1.5rem !important;
  }
  
  .hero-stat .num {
    font-size: 1.25rem !important;
  }
  
  .info-card h2,
  .card h3 {
    font-size: 1.15rem !important;
  }
  
  .data-table {
    min-width: 500px;
  }
}

/* === Touch target sizing === */
@media (hover: none) and (pointer: coarse) {
  a, button, .toc-inner a, .section-nav a {
    min-height: var(--touch-target);
    min-width: var(--touch-target);
  }
  
  /* Increase tap area for links in text */
  p a {
    padding: 0.125rem 0;
    border-bottom: 1px solid currentColor;
  }
}

/* === Safe area for notched phones === */
@supports (padding: env(safe-area-inset-bottom)) {
  .site-footer {
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
  }
}