/* ==========================================================================
   COMPREHENSIVE CROSS-DEVICE RESPONSIVE SYSTEM — 2026-08-24
   Covers: 320px (small phone) → 480px → 640px → 768px → 1024px → 1400px+
   ========================================================================== */

/* ── Global Touch & Mobile Foundations ─────────────────────────────────── */

/* Remove iOS tap flash */
* { -webkit-tap-highlight-color: transparent; }

/* Smooth momentum scrolling on iOS */
main, .container, .tab-bar, .table-scroll-wrapper {
  -webkit-overflow-scrolling: touch;
}

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

/* All images responsive by default */
img, video, canvas {
  max-width: 100%;
  height: auto;
}

/* ── Pre / Code blocks ─────────────────────────────────────────────────── */
pre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  white-space: pre;
  scrollbar-width: thin;
  box-sizing: border-box;
}
code {
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}
pre code {
  word-break: normal;
  overflow-wrap: normal;
  white-space: pre;
}

/* ── Table Scroll Wrapper ──────────────────────────────────────────────── */
.table-scroll-wrapper,
.table-responsive,
.table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: var(--brand-primary) var(--bg-surface-alt);
}
.table-scroll-wrapper::-webkit-scrollbar { height: 6px; }
.table-scroll-wrapper::-webkit-scrollbar-track { background: var(--bg-surface-alt); border-radius: 3px; }
.table-scroll-wrapper::-webkit-scrollbar-thumb { background: var(--brand-primary); border-radius: 3px; }

/* iFrame responsive container */
.iframe-wrap {
  position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden;
}
.iframe-wrap iframe {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;
}
iframe { max-width: 100%; }

/* Focus visibility for accessibility */
:focus-visible {
  outline: 3px solid var(--brand-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── 480px — Tablet Portrait / Large Phone Landscape ─────────────────── */
@media (max-width: 480px) {
  h1 { font-size: 1.75rem !important; line-height: 1.2 !important; }
  h2 { font-size: 1.5rem !important; }
  h3 { font-size: 1.2rem !important; }
  p, li { font-size: 0.9rem !important; }

  .container {
    padding-left: 0.875rem !important;
    padding-right: 0.875rem !important;
  }

  .grid, .grid-2, .grid-3, .grid-4,
  .feature-grid, .cheat-sheet-grid, .cards-grid, .stats-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .hero, .hero-section {
    padding: 1.5rem 0 !important;
    text-align: center !important;
  }

  .hero-cta-group, .cta-group {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
    width: 100% !important;
  }

  .btn, .btn-primary, .btn-secondary {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 0.875rem 1rem !important;
    font-size: 0.95rem !important;
  }

  .card { padding: 1rem !important; }

  /* Tabs: horizontal scroll instead of wrap */
  .tab-bar, .tabs, .tab-list, [role="tablist"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
  }
  .tab-bar::-webkit-scrollbar,
  [role="tablist"]::-webkit-scrollbar { display: none; }

  .footer-inner, .footer-grid {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 1.5rem !important;
  }

  .social-pillar { display: none !important; }

  .search-box, .search-container {
    width: 95vw !important;
    max-width: 95vw !important;
  }
}

/* ── 640px — Small Tablet / Large Phone ─────────────────────────────── */
@media (max-width: 640px) {
  .grid-2 { grid-template-columns: 1fr !important; }

  .section, section { padding: 2rem 0 !important; }

  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    max-width: 100%;
  }

  .steps, .timeline { flex-direction: column !important; }

  .qa-card, .question-card { padding: 1rem !important; }
}

/* ── 768px augmentation — iOS input zoom prevention ─────────────────── */
@media (max-width: 768px) {
  /* Prevent iOS zoom on input focus (font-size must be >= 16px) */
  input[type="text"],
  input[type="email"],
  input[type="search"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="url"],
  textarea,
  select {
    font-size: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Enforce scroll on article code blocks */
  article pre, .blog-content pre, .guide-article pre,
  .content-body pre, .qa-answer pre {
    overflow-x: auto !important;
    max-width: 100% !important;
    font-size: 0.8rem !important;
  }

  /* Content images */
  .blog-content img, .guide-article img, article img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: var(--radius-md) !important;
  }

  /* Table containers */
  .table-wrap, .table-container, .data-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }
}

/* ── 1024px — Tablet Landscape / Small Laptop ─────────────────────── */
@media (max-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-4, .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .content-with-sidebar, .page-with-sidebar { flex-direction: column !important; }
}

/* ── 1200px — Desktop ────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .grid-4 { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ── Landscape phones (short viewport height) ────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
  .hero, .hero-section {
    min-height: unset !important;
    padding: 1rem 0 !important;
  }
  html { scroll-padding-top: 1rem; }
}

/* ── Print styles ────────────────────────────────────────────────────── */
@media print {
  .site-header, .site-footer, .social-pillar,
  .back-to-top, #cookie-consent-banner, .ad-wrapper,
  .mobile-toggle, .nav, .search-overlay { display: none !important; }

  body { font-size: 12pt; color: #000 !important; background: #fff !important; }
  a { color: #000; text-decoration: underline; }
  .container { max-width: 100%; padding: 0; }
  h1 { font-size: 24pt; }
  h2 { font-size: 18pt; }
  h3 { font-size: 14pt; }
  pre, code { background: #f5f5f5 !important; }
}

/* ── Absolute safety-net: prevent horizontal overflow everywhere ──────── */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}
body > * {
  max-width: 100vw;
  box-sizing: border-box;
}