/**
 * Blokaro — Global Mobile & Responsive Optimisations
 * Loaded via includes/nav.php on every page.
 *
 * BREAKPOINT STANDARD:
 *   --bp-sm: 480px   (small phones)
 *   --bp-md: 720px   (large phones / small tablets)
 *   --bp-lg: 960px   (tablets / small desktop)
 *   --bp-xl: 1200px  (desktop)
 *
 * PHILOSOPHY:
 *   - Fluid typography & spacing (clamp + rem)
 *   - Touch targets >= 44px on mobile
 *   - Tables become card layouts or scroll horizontally
 *   - Hero sections scale gracefully
 *   - Reduce padding/gaps proportionally on small screens
 *   - Respect reduced motion preferences
 */

/* ── 1. ROOT TYPOGRAPHY SCALE ───────────────────────────────────────────── */
@media (max-width: 720px) {
  html { font-size: 15px; } /* Reduce base font 1px on small screens */
}
@media (max-width: 480px) {
  html { font-size: 14.5px; }
}

/* ── 2. UNIVERSAL TOUCH TARGETS ─────────────────────────────────────────── */
@media (max-width: 720px) and (pointer: coarse) {
  /* Buttons & links should be at least 44x44px tappable */
  button, .btn, a.btn, .nav-link, .filter-pill,
  .helpful-btn, .share-btn, .toc-btn, .action-btn,
  .plan-cta, .read-btn, .btn-primary, .btn-ghost,
  .btn-auth, .btn-submit, .btn-gate-primary, .btn-gate-ghost,
  .filter-option, .page-btn, .view-toggle,
  .nav-tools-item, .toc-list a, .nav-mobile a,
  .nav-mobile-toggle {
    min-height: 44px;
  }

  /* Small icon-only buttons */
  .btn-remove, .nav-mobile-toggle {
    min-width: 44px;
    min-height: 44px;
  }

  /* Pagination buttons */
  .page-btn { min-width: 44px; min-height: 44px; }

  /* Spacing between adjacent tap targets */
  .nav-mobile a + a { margin-top: 2px; }
  .filter-bar > * + * { margin-left: 0; }
  .filter-bar { gap: 0.4rem; }
}

/* ── 3. RESPONSIVE TABLES ───────────────────────────────────────────────── */
/* Wrap tables that don't already have a wrapper */
@media (max-width: 720px) {
  /* Allow horizontal scroll on data tables */
  .data-table, .source-table, .sector-table, .levels-table,
  .watchlist-table, .markets-table, table.data, table.markets {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    max-width: 100%;
  }

  /* Add scroll indicator hint */
  .data-table::after, .markets-table::after {
    content: '';
    display: block;
    height: 1px;
  }
}

/* ── 4. CONTAINER PADDING ───────────────────────────────────────────────── */
@media (max-width: 720px) {
  .container, .layout, .content, .doc-layout, .article-layout,
  .report-layout, .news-layout, .enc-layout, .contact-layout,
  .portal-content, .featured-section, .cmp-wrap {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Reduce vertical hero padding */
  .hero, .page-hero, .enc-hero, .news-header, .grave-hero {
    padding-top: 2.5rem !important;
    padding-bottom: 1.5rem !important;
  }
}

@media (max-width: 480px) {
  .container, .layout, .content, .doc-layout, .article-layout,
  .report-layout, .news-layout, .enc-layout, .contact-layout {
    padding-left: 0.875rem !important;
    padding-right: 0.875rem !important;
  }
}

/* ── 5. HERO TYPOGRAPHY ─────────────────────────────────────────────────── */
@media (max-width: 720px) {
  /* Cap large heroes — even with clamp, some are still too big on small screens */
  .hero h1, .hero-headline, .page-hero h1, .enc-hero h1, .news-header h1 {
    font-size: clamp(1.75rem, 7vw, 2.25rem) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em;
  }

  .hero-sub, .page-hero p, .lead, .section-sub, .hero-eyebrow {
    font-size: 0.95rem !important;
    line-height: 1.65 !important;
  }

  /* Heros should use less screen real estate on mobile */
  .hero { padding-top: 2rem !important; padding-bottom: 1.5rem !important; }
  .hero-stats, .global-stats { gap: 1.25rem !important; }
  .hero-actions { gap: 0.75rem !important; }

  /* Homepage global stats should wrap better */
  .global-stats {
    gap: 1rem 1.5rem !important;
    padding: 1rem 0 !important;
  }
  .global-stat-value { font-size: 0.875rem !important; }
}

/* ── 6. GRIDS COLLAPSE ─────────────────────────────────────────────────── */
@media (max-width: 720px) {
  /* Force single-column on common grid layouts */
  .pillars, .principles, .structure-grid, .source-card,
  .inside-grid, .pricing-grid, .rights-grid, .criteria-cards,
  .severity-grid, .pillars-grid, .featured-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Two-column grids → single */
  .contact-layout, .doc-layout, .article-layout, .news-layout,
  .enc-layout, .report-layout, .portal-content {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* TOC sidebars should hide on mobile (they're sticky and take space) */
  .doc-toc, .report-toc, .news-sidebar > .toc,
  aside.toc, aside.doc-toc, aside.report-toc {
    display: none !important;
  }
}

/* Two-col grids stay two on tablets */
@media (max-width: 960px) and (min-width: 721px) {
  .pillars, .pricing-grid, .structure-grid, .inside-grid,
  .rights-grid, .criteria-cards, .severity-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── 7. CARD GRIDS ──────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  /* News / encyclopedia card grids → 1 column */
  .news-grid, .enc-grid:not(.list-view), .dead-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
}
@media (max-width: 480px) {
  .news-grid, .enc-grid:not(.list-view) {
    gap: 0.75rem !important;
  }
}

/* ── 8. FORMS ───────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  /* Two-column form grids → single */
  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Inputs should be readable on mobile (16px+ prevents iOS zoom on focus) */
  input[type="text"], input[type="email"], input[type="password"],
  input[type="search"], input[type="number"], input[type="tel"],
  input[type="url"], textarea, select {
    font-size: 16px !important;
  }

  /* Form padding */
  .contact-form-wrap, .auth-card {
    padding: 1.5rem !important;
  }

  .form-submit {
    flex-direction: column;
    align-items: stretch !important;
  }
  .form-submit .btn-submit {
    width: 100%;
    justify-content: center;
  }
  .form-submit .form-privacy {
    text-align: center;
    margin-top: 0.5rem;
  }
}

/* ── 9. MARKETS TABLE (homepage) ────────────────────────────────────────── */
@media (max-width: 720px) {
  /* Hide low-priority columns on small screens */
  .markets-table th:nth-child(n+5),
  .markets-table td:nth-child(n+5),
  .coin-table th:nth-child(n+5),
  .coin-table td:nth-child(n+5) {
    display: none;
  }
  /* Reduce padding to fit content */
  .markets-table th, .markets-table td,
  .coin-table th, .coin-table td {
    padding: 0.7rem 0.5rem !important;
    font-size: 0.82rem !important;
  }
  .markets-table th:first-child,
  .markets-table td:first-child,
  .coin-table th:first-child,
  .coin-table td:first-child {
    padding-left: 0.75rem !important;
  }
  /* Sparkline column might need to go */
  .coin-table .sparkline-cell { display: none; }
}

@media (max-width: 480px) {
  /* On very small screens, hide the rank column too */
  .markets-table th:nth-child(1),
  .markets-table td:nth-child(1),
  .coin-table th:nth-child(1),
  .coin-table td:nth-child(1) {
    display: none;
  }
}

/* ── 10. COIN PAGE LAYOUT ──────────────────────────────────────────────── */
@media (max-width: 720px) {
  .coin-hero {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 1rem !important;
  }
  .coin-hero-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .coin-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .sub-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
  }
  .sub-nav::-webkit-scrollbar { display: none; }
  .sub-nav a, .sub-nav button {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/* ── 11. ENCYCLOPEDIA ENTRY ────────────────────────────────────────────── */
@media (max-width: 720px) {
  .entry-hero {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .entry-content-wrap {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  .hero-stats, .hs-row {
    font-size: 0.85rem;
  }
  .tab-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tab-nav::-webkit-scrollbar { display: none; }
  .tab-btn { flex-shrink: 0; white-space: nowrap; }
}

/* ── 12. INTELLIGENCE / REPORTS ────────────────────────────────────────── */
@media (max-width: 720px) {
  .pricing-grid {
    grid-template-columns: 1fr !important;
    gap: 0.875rem !important;
  }
  .plan-card { max-width: 100%; }
  .plan-badge { top: -1px; }

  .sample-body {
    grid-template-columns: 1fr !important;
  }
  .sample-section {
    border-right: none !important;
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.06));
  }
  .sample-section:last-child { border-bottom: none; }

  .sample-gate {
    flex-direction: column;
    text-align: center;
  }

  .hero-stats { flex-direction: column; gap: 1.25rem !important; }

  .highlights-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 480px) {
  .highlights-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── 13. NEWS ARTICLE PAGE ─────────────────────────────────────────────── */
@media (max-width: 720px) {
  .featured-grid { grid-template-columns: 1fr !important; }
  .featured-side { flex-direction: column !important; }
  .featured-side .thumb { width: 100% !important; aspect-ratio: 16/9; }

  .article-byline {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0.5rem !important;
  }
  .byline-coins { margin-left: 0 !important; }
  .source-link-box {
    flex-direction: column;
    align-items: stretch !important;
    text-align: center;
  }
  .source-link-box .read-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── 14. PORTFOLIO / WATCHLIST ─────────────────────────────────────────── */
@media (max-width: 720px) {
  .portfolio-summary, .summary-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }
  .add-bar { flex-direction: column; }
  .add-search-wrap { max-width: 100% !important; }
}

@media (max-width: 480px) {
  .portfolio-summary, .summary-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── 15. PAGINATION ────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .pagination, .enc-pagination {
    gap: 0.3rem !important;
  }
  .page-btn {
    font-size: 0.8rem !important;
    padding: 0.4rem 0.5rem !important;
  }
  /* Show only ←, current, → on very small screens */
}
@media (max-width: 480px) {
  /* Hide non-current page buttons except prev/next */
  .pagination .page-btn:not(.active):not(.disabled):not(:first-child):not(:last-child) {
    display: none;
  }
}

/* ── 16. FILTER BARS ───────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .filter-bar {
    flex-wrap: wrap;
    gap: 0.4rem !important;
  }
  .filter-sep { display: none !important; }
  .news-search-wrap { max-width: 100% !important; flex: 1 1 100% !important; order: 99; }
}

/* ── 17. FOOTER ────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  footer, .site-footer {
    padding: 1.5rem 1rem !important;
  }
  footer .footer-inner {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem !important;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start !important;
    text-align: left !important;
  }
  .footer-links {
    flex-wrap: wrap;
    gap: 0.75rem 1rem !important;
  }
}

@media (max-width: 480px) {
  footer .footer-inner {
    grid-template-columns: 1fr !important;
  }
}

/* ── 18. SCROLLBAR THINNING ON MOBILE ───────────────────────────────────── */
@media (max-width: 720px) {
  ::-webkit-scrollbar { width: 4px; height: 4px; }
}

/* ── 19. REDUCED MOTION ─────────────────────────────────────────────────── */
@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;
  }
  /* Stop the live ticker animation entirely */
  .ticker-track { animation: none !important; }
}

/* ── 20. TICKER ON MOBILE ──────────────────────────────────────────────── */
@media (max-width: 720px) {
  .ticker-strip { height: 32px; }
  .ticker-item {
    font-size: 0.75rem !important;
    padding: 0 0.875rem !important;
  }
  .ticker-track { animation-duration: 50s !important; }
}

/* ── 21. HORIZONTAL SCROLL PREVENTION ──────────────────────────────────── */
html, body {
  overflow-x: hidden;
}
@media (max-width: 720px) {
  /* Belt-and-braces: prevent any element from creating horizontal scroll */
  body {
    max-width: 100vw;
    overflow-x: hidden;
  }
  /* Most common culprit: long unbreakable text */
  .hash-display, code, .mono, .coin-id {
    word-break: break-all;
  }
}

/* ── 22. FOCUS WITHIN PROMINENCE ───────────────────────────────────────── */
@media (max-width: 720px) {
  /* Make focused inputs more obvious on mobile (without zoom) */
  input:focus, textarea:focus, select:focus {
    box-shadow: 0 0 0 3px rgba(201,168,76,0.15) !important;
  }
}

/* ── 23. ANIMATIONS RESPECT BATTERY ────────────────────────────────────── */
@media (max-width: 720px) {
  /* Disable parallax-style background animations on mobile */
  body::before, body::after {
    animation: none !important;
  }
}

/* ── 24. PRINT STYLES ──────────────────────────────────────────────────── */
@media print {
  #site-nav, .ticker-strip, footer, .site-footer,
  .nav-search-wrap, .nav-tools-menu, .skip-link,
  .filter-bar, .pagination, .toc-actions,
  .sample-gate, .report-gate, .helpful-bar,
  .share-bar, .source-link-box {
    display: none !important;
  }
  body { background: white !important; color: black !important; }
  .article-body, .report-body, p, h1, h2, h3 { color: black !important; }
  a { color: #c9a84c !important; text-decoration: underline !important; }
}