/* mobile.css - Mobile overrides (append this last) */

@media (max-width: 767px) {
  body {
    padding: 1rem;
    font-size: 1.1rem;      /* Easier reading on small screens */
    line-height: 1.7;
    margin: 0 auto;
  }

  /* Prevent horizontal scrolling - common on old/simple layouts */
  body, table, div, td, th, pre {
    max-width: 100% !important;
    overflow-x: auto;
    word-wrap: break-word;
    white-space: normal;
  }

  img, video, iframe {
    max-width: 100% !important;
    height: auto;
    display: block;
  }

  /* Bigger tap targets */
  a {
    padding: 0.75rem 0.5rem;
    display: inline-block;
  }

  /* If your themes use fixed widths, override them here */
  /* Example common overrides - adjust based on what you see */
  .content, .main, center, table {
    width: 100% !important;
    max-width: none !important;
  }
}

/* Optional: Hide overly complex elements on mobile if desired */
@media (max-width: 767px) {
  .desktop-heavy {
    display: none;
  }
}