/* ==========================================================================
   stormCARIB mobile-common.css
   Shared stylesheet for secondary pages (island reports, goes.htm,
   guide.htm, etc.) - a SINGLE responsive file per page, not two separate
   versions like the homepage. Load this AFTER styles.css.

   Same lighter-touch approach as the homepage: no Flexbox, no Grid, just
   fluid images, overflow-x:auto for tables that must stay tabular, and a
   media query that turns the header/sidebar layout tables into stacked
   blocks on narrow screens.
   ========================================================================== */

/* ---- fluid images: scale down instead of overflowing ---- */
img { max-width: 100%; height: auto; }

/* The logo sits in a rowspan table cell - table auto-layout can compute an
   ambiguous small width for that column before the image is measured.
   The general "img { max-width: 100% }" rule above still applies here too
   (setting width doesn't override a different property), so it has to be
   explicitly cancelled with max-width: none. */
img.site-logo {
  width: 216px;
  max-width: none;
  height: auto;
}

/* ---- wide/inline tables that must stay tabular: scroll instead of squish
   (use this on any wide fixed-layout table you don't want to reflow -
   most of the forwarded-email report tables are already width="100%" and
   don't need it, but add class="table-scroll" around any that do) ---- */
.table-scroll {
  overflow-x: auto;
}

@media (max-width: 700px) {

  /* Bump base type size - styles.css uses 10pt/8pt which reads small on
     an actual phone screen rather than a shrunk desktop view. */
  body, p, td, dd, dl, div, table, li, ul {
    font-size: 12pt;
  }
  p.small, div.small, font.small {
    font-size: 10pt;
  }

  /* Let the top nav wrap onto multiple lines instead of forcing one long
     unreadable line */
  .topnav {
    white-space: normal !important;
    display: block;
    text-align: center !important;
  }

  /* Turn the header and sidebar-ad/content layout tables into stacked
     blocks on narrow screens. Only applies to tables explicitly marked
     class="stack-mobile" - small decorative tables inside report content
     are untouched. */
  table.stack-mobile,
  table.stack-mobile > tbody,
  table.stack-mobile > tr,
  table.stack-mobile td {
    display: block !important;
    width: auto !important;
  }

  /* the logo/title header table: center everything once stacked */
  table.stack-mobile td[rowspan] {
    text-align: center;
  }

  /* smaller logo once stacked, matching the homepage treatment */
  img.site-logo {
    width: 150px;
  }
}