/* ===================================================================
   Mobile layer for islamalways.com and islamtomorrow.com

   These are 2000s Dreamweaver sites: nested layout tables with fixed
   pixel widths, no viewport tag, small type. This sheet adapts them
   for phones WITHOUT touching the original markup, so desktop is
   unchanged above 900px and nothing in the historic pages is rewritten.

   Design decisions:
   * Only top-level layout tables are linearised. Nested tables are left
     as tables - blindly stacking every table destroys data tables and
     image grids, which these sites use heavily.
   * Wide inner tables scroll horizontally in their own box instead,
     so nothing is clipped and the page itself never scrolls sideways.
   * CSS overrides the old width="750" HTML attributes, which is why
     width:auto is set rather than editing thousands of tags.
   =================================================================== */

/* Never let a phone render at 980px and zoom out. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media screen and (max-width: 900px) {

  html, body {
    margin: 0;
    padding: 0;
    max-width: 100%;
    overflow-x: hidden;          /* page never scrolls sideways */
  }

  body {
    padding: 10px;
    box-sizing: border-box;
    font-size: 17px;             /* these sites default to ~12px */
    line-height: 1.6;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Media must never exceed the screen. height:auto keeps aspect ratio
     when the markup also carries a fixed height attribute. */
  img, object, embed, video, iframe, canvas, svg {
    max-width: 100% !important;
    height: auto !important;
  }
  iframe, video, embed, object { width: 100% !important; }

  /* Kill the fixed pixel widths from width="..." attributes. */
  table, td, th, div, p, pre {
    max-width: 100% !important;
  }
  table { width: auto !important; }

  /* Linearise ONLY the outermost layout tables. */
  body > table,
  body > center > table,
  body > div > table {
    display: block !important;
    width: 100% !important;
  }
  body > table > tbody,
  body > center > table > tbody,
  body > div > table > tbody {
    display: block !important;
    width: 100% !important;
  }
  body > table > tbody > tr,
  body > center > table > tbody > tr,
  body > div > table > tbody > tr {
    display: block !important;
    width: 100% !important;
  }
  body > table > tbody > tr > td,
  body > center > table > tbody > tr > td,
  body > div > table > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    padding: 4px 0 !important;
  }

  /* Nested tables stay tables, but scroll if genuinely too wide. */
  table table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Readable type regardless of old font tags. */
  font[size], font { font-size: inherit !important; }
  td, th, p, li, div, span { font-size: inherit; }

  /* Touch targets: old sites pack links tightly. */
  a { padding: 2px 0; }
  a, a:link { word-break: break-word; }

  /* Old sites often set a fixed body background image that tiles badly. */
  body { background-attachment: scroll !important; }

  /* Forms shouldn't overflow. */
  input, select, textarea {
    max-width: 100% !important;
    box-sizing: border-box;
    font-size: 16px;             /* <16px makes iOS zoom on focus */
  }

  /* Marquees and spacer gifs from this era. */
  marquee { max-width: 100% !important; }
  img[width="1"], img[height="1"] { display: none !important; }
}

@media screen and (max-width: 480px) {
  body { padding: 8px; font-size: 17px; }
  /* Deeply nested layout tables also stack on small phones. */
  body table table > tbody > tr > td { display: block !important; width: 100% !important; }
}