/*
 * Autismmitra — shared mobile/responsive corrections.
 *
 * Every page carries its own inline <style> block written for desktop, so
 * this file is loaded AFTER them purely to correct layout that overflows on
 * phone-width screens. It deliberately uses !important: it has to beat rules
 * of equal specificity that appear earlier in each page's own <style>.
 *
 * Scoped entirely to max-width:640px — desktop rendering is untouched.
 */

@media (max-width: 640px) {

  /* ── Nav bars ──────────────────────────────────────────────────────────
     Most pages have brand + "← Back" + a section link in a fixed-height
     flex row. At 360px that overflows horizontally (measured up to +54px),
     which makes the whole page pan sideways. Let it wrap instead. */
  nav {
    flex-wrap: wrap !important;
    height: auto !important;
    min-height: 0 !important;
    row-gap: 8px;
    column-gap: 8px;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  .nav-brand {
    font-size: 1.2rem !important;
  }

  .nav-back,
  .back-btn {
    padding: 6px 13px !important;
    font-size: .8rem !important;
    white-space: nowrap;
  }

  /* chat.html groups the status dot, label and both links in one row */
  .nav-right {
    flex-wrap: wrap !important;
    justify-content: flex-end;
    gap: 8px !important;
  }

  /* ── Wide tables ───────────────────────────────────────────────────────
     cog-programme.html's weekly timetable is 694px wide (+334px overflow)
     and reflex-advice.html has a referral table. Make them scroll inside
     their own box rather than forcing the page to scroll sideways. */
  table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Global guard ──────────────────────────────────────────────────────
     Nothing should be able to force horizontal panning of the page. */
  html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Media and embeds should never exceed the viewport */
  img, svg, video, iframe {
    max-width: 100% !important;
    height: auto;
  }
}