/*
 * mobile.css — ArcheryProTools global mobile UX layer
 * Imported at the END of design-system.css so these rules
 * always win over base declarations on small viewports.
 *
 * Coverage:
 *  1. Root overflow fix (prevents horizontal scroll bleed)
 *  2. Smooth viewport scroll with safe-area insets
 *  3. Touch target enforcement (44×44 minimum)
 *  4. iOS input zoom prevention (font-size ≥ 16 px on inputs)
 *  5. Table horizontal scroll wrappers
 *  6. Card grid → single column collapse
 *  7. Sticky header height + safe area
 *  8. Sticky bottom CTA bar
 *  9. Improved tap feedback (active states)
 * 10. Typography legibility improvements
 * 11. Hamburger nav — full-width dropdown
 * 12. Footer stack on mobile
 * 13. Reduced-motion safety
 */

/* ─────────────────────────────────────────────────────────────
   1. Overflow / scroll foundation
───────────────────────────────────────────────────────────── */

html,
body {
  overflow-x: hidden;
  width: 100%;
}

/* Ensure images / embeds never break layout */
img,
video,
iframe,
svg {
  max-width: 100%;
  height: auto;
}

/* ─────────────────────────────────────────────────────────────
   2. Safe-area insets (iOS notch / dynamic island)
───────────────────────────────────────────────────────────── */

.apt-site-header .apt-inner {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

.apt-site-footer .apt-footer-grid,
.apt-site-footer .apt-footer-note {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

.apt-mobile-sticky {
  padding-bottom: calc(0.65rem + env(safe-area-inset-bottom, 0px));
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* ─────────────────────────────────────────────────────────────
   3. Universal touch target — 44 × 44 px on coarse pointers
───────────────────────────────────────────────────────────── */

@media (pointer: coarse) {
  /* Interactive elements */
  button,
  [role="button"],
  .btn,
  .cta-btn,
  .cta-link,
  .cl,
  .contact-link,
  .about-btn,
  .header-cta,
  summary,
  .apt-site-header .apt-nav a,
  .apt-site-header .apt-cta,
  .apt-site-footer .apt-footer-button {
    min-height: 44px !important;
  }

  /* Inline links in content — don't force height but add padding */
  article a,
  main a,
  .apt-governor-links a,
  .apt-governor-cta a {
    padding-block: 0.2rem;
  }

  /* Form controls */
  input,
  select,
  textarea {
    min-height: 48px !important;
    font-size: 16px !important; /* prevents iOS double-tap zoom */
    padding: 0.7rem 0.75rem !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   4. iOS input zoom fix (unconditional for all phones)
───────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  input,
  select,
  textarea {
    font-size: 16px; /* must be ≥ 16 px to block iOS zoom */
  }
}

/* ─────────────────────────────────────────────────────────────
   5. Tables — horizontal scroll wrapper
───────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  /* Content-governor injected tables */
  .apt-governor-depth table,
  .apt-governor-sources table,
  .apt-governor-keyword table,
  .apt-governor-keyword-cluster table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    border-radius: 10px;
    border: 1px solid #d5dde3;
  }

  /* Generic tables inside main content */
  main table,
  article table,
  .about-section table,
  .data-table,
  .tools-table,
  .standards-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table-wrap,
  .tools-table-wrap {
    border-radius: 10px;
    overflow: hidden;
  }
}

/* ─────────────────────────────────────────────────────────────
   6. Card grids → single column collapse
───────────────────────────────────────────────────────────── */

@media (max-width: 560px) {
  .card-grid,
  .mission-grid,
  .sources-grid,
  .aud-grid,
  .audience-grid,
  .cards,
  .about-grid,
  .hero-stats {
    grid-template-columns: 1fr !important;
  }

  /* Calculator result/formula layout */
  .calc-result-grid,
  .result-cards,
  .formula-row {
    grid-template-columns: 1fr !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   7. Hero stats: horizontal scroll on very small screens
───────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .hero-stats {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0.75rem;
    padding-bottom: 0.4rem;
    /* Let them scroll rather than stack so hero stays compact */
    grid-template-columns: none !important;
  }

  .hero-stat {
    flex: 0 0 140px;
    min-width: 130px;
  }
}

/* ─────────────────────────────────────────────────────────────
   8. Sticky mobile bottom CTA
───────────────────────────────────────────────────────────── */

.apt-mobile-sticky {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(247,246,243,0) 0%, rgba(247,246,243,0.97) 35%);
  pointer-events: none;
}

.apt-mobile-sticky a,
.apt-mobile-sticky button {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0.6rem 1.3rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(15,118,110,0.25);
  background: linear-gradient(120deg, #185b82, #0f766e);
  color: #fff;
  border: none;
  cursor: pointer;
}

@media (min-width: 900px) {
  .apt-mobile-sticky {
    display: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   9. Tap feedback — active state highlight
───────────────────────────────────────────────────────────── */

@media (pointer: coarse) {
  button:active,
  .btn:active,
  .cta-btn:active,
  .apt-site-header .apt-nav a:active {
    opacity: 0.75;
    transform: scale(0.97);
  }

  .feat-card:active,
  .mission-card:active,
  .aud-card:active {
    transform: scale(0.98);
    box-shadow: none;
  }
}

/* ─────────────────────────────────────────────────────────────
   10. Typography — legibility on small screens
───────────────────────────────────────────────────────────── */

@media (max-width: 560px) {
  /* Slightly tighten headings */
  h1 { font-size: clamp(1.55rem, 6vw, 2rem) !important; line-height: 1.18 !important; }
  h2 { font-size: clamp(1.1rem, 4.5vw, 1.5rem) !important; }
  h3 { font-size: clamp(0.95rem, 3.5vw, 1.15rem) !important; }

  /* Comfortable reading line-height */
  p, li { line-height: 1.65; }

  /* Smaller muted text minimum */
  .muted, .lead, small { font-size: 0.88rem; }
}

/* ─────────────────────────────────────────────────────────────
   11. Navigation — full-width hamburger dropdown
───────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  .apt-site-header .apt-inner {
    min-height: 58px;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
  }

  /* Open nav panel */
  .apt-site-header.is-menu-open .apt-nav {
    border: 1px solid #d8d2c8;
    border-radius: 14px;
    margin: 0.3rem 0 0.5rem;
    background: #fff;
    padding: 0.5rem;
    box-shadow: 0 8px 24px rgba(15,35,65,0.1);
  }

  .apt-site-header.is-menu-open .apt-nav a {
    border-radius: 10px;
    padding: 0.55rem 0.75rem;
    width: 100%;
  }

  .apt-site-header.is-menu-open .apt-nav a:hover,
  .apt-site-header.is-menu-open .apt-nav a.is-active {
    background: #f0f6fc;
    text-decoration: none;
  }

  .apt-site-header.is-menu-open .apt-nav .apt-cta {
    margin-top: 0.35rem;
    justify-content: center;
    border-radius: 10px !important;
    width: 100%;
  }
}

/* ─────────────────────────────────────────────────────────────
   12. Footer — single-column stack + padding
───────────────────────────────────────────────────────────── */

@media (max-width: 700px) {
  .apt-site-footer .apt-footer-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .apt-site-footer {
    padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
  }
}

/* ─────────────────────────────────────────────────────────────
   13. General page padding on very small screens
───────────────────────────────────────────────────────────── */

@media (max-width: 420px) {
  .page-wrap {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }

  .about-section,
  .about-hero,
  .about-cta {
    padding: 1.25rem 1rem;
  }

  .apt-governor-depth,
  .apt-governor-sources,
  .apt-governor-faq,
  .apt-governor-links,
  .apt-governor-cta,
  .apt-governor-keyword,
  .apt-governor-keyword-cluster {
    padding: 0.85rem 0.75rem;
  }

  /* FAQ accordion items */
  .faq-item summary,
  .apt-governor-faq details summary {
    font-size: 0.9rem;
    padding: 0.85rem 1rem;
  }
}

/* ─────────────────────────────────────────────────────────────
   14. Calculator-specific: input grid + result card
───────────────────────────────────────────────────────────── */

@media (max-width: 560px) {
  /* Input rows go to 1 column */
  .inputs {
    grid-template-columns: 1fr !important;
  }

  /* Formula equation wrapping */
  .formula-equation {
    font-size: 1.2rem !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Result block */
  .result {
    font-size: 1rem;
    padding: 0.75rem;
  }

  /* Tabs / category pills */
  .filter-pills,
  .category-pills,
  .calc-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    padding-bottom: 0.25rem;
  }

  /* Chip/tag overflow in tools hub */
  .chip {
    white-space: nowrap;
  }
}

/* ─────────────────────────────────────────────────────────────
   15. Blog content readability
───────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  main {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  article {
    padding: 1rem 0.95rem;
    border-radius: 12px;
  }

  /* Long words in blog copy */
  article p,
  article li {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Code blocks */
  code,
  pre {
    overflow-x: auto;
    display: block;
    white-space: pre;
    font-size: 0.82rem;
  }
}

/* ─────────────────────────────────────────────────────────────
   16. Reduced motion — always last, always wins
───────────────────────────────────────────────────────────── */

@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;
  }
}