/* ============================================================
   AllONDECK HUB, mobile.css
   Global responsive layer loaded on every page (after each page's
   own styles). Goal: native-app feel on phones and tablets without
   changing the desktop layout. All aggressive rules are gated behind
   max-width media queries; the few global rules are universally safe.
   ============================================================ */

/* ---- Universally safe (all screen sizes) ------------------ */
*, *::before, *::after { box-sizing: border-box; }

/* Media never overflows its container, and keeps aspect ratio.
   No !important, so an inline width/height (logos, icons) still wins. */
img, video, iframe, canvas, svg, audio {
  max-width: 100%;
}
img, video {
  height: auto;
}

/* Stop the whole page from scrolling sideways on phones.
   overflow-x: clip (not hidden) prevents sideways scroll WITHOUT turning
   the body into a scroll container, so position: sticky navs keep working. */
html, body {
  max-width: 100%;
  overflow-x: clip;
}

/* Momentum + smooth scrolling for a native feel. */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  -webkit-overflow-scrolling: touch;
}

/* ============================================================
   TABLET and below (<= 1024px)
   ============================================================ */
@media (max-width: 1024px) {
  /* Wide data tables scroll inside themselves instead of the page. */
  table { max-width: 100%; }
}

/* ============================================================
   PHONES and small tablets (<= 768px)
   ============================================================ */
@media (max-width: 768px) {

  /* Comfortable base rhythm. */
  body { font-size: 16px; line-height: 1.55; }

  /* Inputs at 16px stop iOS from auto-zooming the page on focus. */
  input, select, textarea {
    font-size: 16px !important;
    max-width: 100%;
  }

  /* Tap-friendly controls: 44px is the native minimum target. */
  button, .btn, a.btn, input[type="submit"], input[type="button"],
  input[type="text"], input[type="email"], input[type="password"],
  input[type="tel"], input[type="number"], input[type="date"],
  select, textarea {
    min-height: 44px;
  }
  button, .btn, a.btn { touch-action: manipulation; }

  /* Let any fixed multi-column grid collapse gracefully. */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* Wide tables become horizontally scrollable cards. */
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Make fixed-pixel containers fluid. These attribute selectors override
     inline width:NNNpx / min-width:NNNpx that would otherwise overflow.
     Only large values (>= 340px) are targeted, so small chips/buttons keep
     their size. The same match also neutralizes large min-widths. */
  [style*="width:340px"],[style*="width:360px"],[style*="width:375px"],
  [style*="width:380px"],[style*="width:400px"],[style*="width:414px"],
  [style*="width:420px"],[style*="width:440px"],[style*="width:460px"],
  [style*="width:480px"],[style*="width:500px"],[style*="width:520px"],
  [style*="width:540px"],[style*="width:560px"],[style*="width:580px"],
  [style*="width:600px"],[style*="width:620px"],[style*="width:640px"],
  [style*="width:660px"],[style*="width:680px"],[style*="width:700px"],
  [style*="width:720px"],[style*="width:740px"],[style*="width:760px"],
  [style*="width:768px"],[style*="width:780px"],[style*="width:800px"],
  [style*="width:820px"],[style*="width:840px"],[style*="width:860px"],
  [style*="width:880px"],[style*="width:900px"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  [style*="min-width:340px"],[style*="min-width:360px"],[style*="min-width:375px"],
  [style*="min-width:380px"],[style*="min-width:400px"],[style*="min-width:414px"],
  [style*="min-width:420px"],[style*="min-width:440px"],[style*="min-width:460px"],
  [style*="min-width:480px"],[style*="min-width:500px"],[style*="min-width:520px"],
  [style*="min-width:540px"],[style*="min-width:560px"],[style*="min-width:580px"],
  [style*="min-width:600px"],[style*="min-width:620px"],[style*="min-width:640px"],
  [style*="min-width:660px"],[style*="min-width:680px"],[style*="min-width:700px"],
  [style*="min-width:720px"],[style*="min-width:740px"],[style*="min-width:760px"],
  [style*="min-width:768px"],[style*="min-width:780px"],[style*="min-width:800px"],
  [style*="min-width:820px"],[style*="min-width:840px"],[style*="min-width:860px"],
  [style*="min-width:880px"],[style*="min-width:900px"] {
    min-width: 0 !important;
  }

  /* Common layout containers go single-column / full width. */
  .container, .wrap, .wrapper, .content, main, section, .card, .grid, .row {
    max-width: 100% !important;
  }

  /* Generic flex rows wrap instead of squishing or overflowing. */
  [style*="display:flex"], [style*="display: flex"] { flex-wrap: wrap; }
}

/* ============================================================
   SMALL PHONES (<= 480px)
   ============================================================ */
@media (max-width: 480px) {
  body { font-size: 15.5px; }

  /* Tame oversized headings so they never overflow narrow screens. */
  h1 { font-size: clamp(1.4rem, 7vw, 2rem) !important; line-height: 1.2; }
  h2 { font-size: clamp(1.2rem, 6vw, 1.6rem) !important; line-height: 1.25; }

  /* Trim very large inline paddings that waste space on tiny screens. */
  [style*="padding:2.5rem"], [style*="padding: 2.5rem"],
  [style*="padding:3rem"],   [style*="padding: 3rem"],
  [style*="padding:4rem"],   [style*="padding: 4rem"] {
    padding: 1.25rem !important;
  }

  /* Long words / links never push the layout wider than the screen. */
  p, a, span, div, li, h1, h2, h3, h4 { overflow-wrap: break-word; word-break: break-word; }
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}