/* ============================================================
   VoxSports — mobile layer
   ------------------------------------------------------------
   Linked after each page's inline <style>, so equal-specificity
   rules here win. Selectors are deliberately one step more
   specific than the inline ones (e.g. `header nav` vs `nav`)
   where an override is required — no !important needed.
   ============================================================ */

/* ------------------------------------------------------------
   0. PRE-EXISTING DEFECT (all viewports, not mobile-only)
   `.bookie-card` is an <a> that never sets `color`, and neither
   does `.bookie-name`, so bookmaker names fell through to the
   browser's default link blue/purple inside a dark palette.
   Re-anchor them to the design tokens.
   ------------------------------------------------------------ */
.bookie-card { color: var(--text, #e8eef4); }
.bookie-card .bookie-name { color: var(--text, #e8eef4); }

/* ------------------------------------------------------------
   1. MOBILE NAVIGATION
   Every page carried `nav{display:none}` below its breakpoint
   with nothing in its place, so phones got zero navigation —
   all 6 links, including News, were unreachable.
   Restored as a swipeable row under the logo: no JS, no markup
   change, so pipeline-generated pages inherit it automatically.
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  header .header-inner {
    flex-wrap: wrap;
    height: auto;
    min-height: 0;
    padding: 8px 16px 0;
  }

  header .logo {
    font-size: 22px;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  header nav {
    display: flex;
    order: 3;
    width: 100%;
    margin: 6px -16px 0;
    padding: 0 16px 6px;
    gap: 8px;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  header nav::-webkit-scrollbar { display: none; }

  header nav a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 0 8px;
    white-space: nowrap;
    font-size: 15px;
    scroll-snap-align: start;
  }

  header nav .nav-cta { padding: 0 16px; min-height: 44px; }

  /* Sticky header is ~92px tall on mobile; keep in-page anchors
     (the guide's TOC links) from landing underneath it. */
  html { scroll-padding-top: 104px; }
}

/* ------------------------------------------------------------
   2. STOP THE FORCED ZOOM-OUT
   Content wider than the screen makes mobile browsers shrink the
   whole page. Measured before the fix at a 320px device width:
     /guides/sports-betting-strategy/  430px  -> 74% zoom
     /cookie-policy/                   433px
     /methodology/                     371px
     /tools/value-bet-calculator/      370px
     /news/skiron-…                    363px
     /  (homepage)                     354px
   Cause is min-width:auto on grid/flex children, which refuse to
   shrink below their content's intrinsic width.
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .article-wrap > *,
  .page-wrap > *,
  main, aside, .sidebar,
  .bookies-grid > *, .bookie-cards > *,
  .pred-grid > *, .guides-grid > *, .why-grid > *,
  .stat-grid > *, .result-grid > *, .edu-grid > *,
  .footer-top > *, .related-links > * {
    min-width: 0;
  }

  /* Long unbroken strings (URLs, emails) are the other classic
     source of overflow on narrow screens. */
  .article-body, .page-wrap, .footer-inner { overflow-wrap: break-word; }
}

/* ------------------------------------------------------------
   3. TABLES
   4 pages carry data tables with no scroll container; the cookie
   table alone is 409px. Turn each table into its own horizontal
   scroller rather than letting it widen the document.
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  table th, table td { word-break: normal; overflow-wrap: break-word; }
}

/* ------------------------------------------------------------
   4. BOOKMAKER CARDS
   A 5-across flex row (rank · logo · info · rating · button)
   cannot fit 320px, so it pushed the page to 330–346px.
   Re-flow to three rows and make the CTA a full-width target.
   ------------------------------------------------------------ */
@media (max-width: 640px) {
  .bookie-card {
    flex-wrap: wrap;
    row-gap: 12px;
    padding: 14px 16px;
  }
  .bookie-rank { order: 1; }
  .bookie-logo { order: 2; }
  .bookie-rating, .bookie-tag { order: 3; margin-left: auto; }
  .bookie-info { order: 4; flex: 1 1 100%; min-width: 0; }
  .bookie-btn {
    order: 5;
    flex: 1 1 100%;
    text-align: center;
    padding: 12px 18px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* ------------------------------------------------------------
   5. TAP TARGETS
   Measured 7–30 controls per page under the 44px iOS minimum;
   the calculator's format toggles were 26px tall.
   Inline links inside prose are deliberately left alone —
   WCAG 2.5.8 exempts them, and padding them would break text flow.
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  .sport-pill, .sidebar-link, .social-btn, .ql-item, .section-link,
  .contact-card-link, .org-link, .btn,
  .footer-links-col a, .footer-legal a, .footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .fmt-btn {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 13px;
  }

  /* Breadcrumbs are navigation, not prose — size them like controls */
  .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
  .breadcrumb a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 2px;
  }

  /* Column lists: give each row breathing space instead of 8px gaps */
  .footer-links-col { gap: 2px; }
  .footer-legal { gap: 8px 18px; }

  /* Pills sit in scrollable rows — keep them from squashing */
  .sport-pill { padding: 8px 16px; }
}

/* ------------------------------------------------------------
   6. MINIMUM READABLE TYPE
   Micro-labels rendered at 10–11px. Lifted to 12px, which keeps
   the uppercase-label look while clearing the legibility floor.
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  .odd-label, .result-label, .callout-label, .formula-label,
  .correction-label, .bookie-tag, .pred-league, .pred-vs,
  .tag, .footer-col-title, .article-tag, .s-stat-label {
    font-size: 12px;
  }
  .footer-disclaimer { font-size: 12.5px; line-height: 1.65; }
}

/* ------------------------------------------------------------
   7. 404 PAGE
   Shipped with no media query at all.
   ------------------------------------------------------------ */
@media (max-width: 600px) {
  .btn-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .btn-row .btn { justify-content: center; width: 100%; }
  .ql-row { flex-wrap: wrap; gap: 8px; justify-content: center; }
  .err-code { font-size: 96px; line-height: 1; }
  .err-title { font-size: 30px; }
}

/* ------------------------------------------------------------
   8. FORM CONTROLS
   Inputs already sit at >=16px, which is what stops iOS from
   auto-zooming on focus. Pinned here so a future restyle keeps it.
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  input, select, textarea { font-size: 16px; max-width: 100%; }
}

/* ------------------------------------------------------------
   9. 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;
  }
}