/*!
 * mobile.css — shared responsive fixes, loaded on every page.
 *
 * Each page carries its own inline <style>, so this file only holds
 * corrections that apply site-wide. Keep it small and defensive.
 */

/* ---- nothing should ever force horizontal scrolling ---- */
html, body { max-width: 100%; }
img, video, iframe, table { max-width: 100%; }
img { height: auto; }

/* Long words / URLs in prose used to push layouts wide on narrow screens. */
p, li, h1, h2, h3, h4, td, .guide-card a { overflow-wrap: break-word; }

/* Guide screenshots: inline max-width in px must not beat the viewport. */
.guide-image { max-width: 100% !important; height: auto; }

/* Wide content scrolls inside its own box rather than the page. */
.guide-card pre, .guide-card table { overflow-x: auto; }

@media (max-width: 980px) {
  /*
   * Some pages (e.g. /docs/) ship the desktop navbar with no hamburger and
   * no collapse rules, so the links ran ~344px off-screen. Letting the bar
   * wrap keeps every link reachable instead of hiding them with no way back.
   * Pages that DO have a hamburger set .nav-links{display:none} at this
   * width, so these rules are inert there.
   */
  .nav-inner { flex-wrap: wrap; row-gap: 10px; }
  .nav-links { flex-wrap: wrap; gap: 18px; }
}

@media (max-width: 600px) {
  /* Roomier tap targets without disturbing the flow. */
  .nav-links a,
  .toc a,
  .footer-col a { padding-top: 6px; padding-bottom: 6px; }

  /* Keep the language selector compact beside the brand on small screens. */
  .i18n-lead { gap: 10px; }

  /* Screenshot galleries: one comfortable column instead of cramped tiles. */
  .video-guides-grid { grid-template-columns: 1fr; }
}

/* Respect users who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
  .marquee, .marquee * { animation: none !important; }
}