/* ==========================================================================
   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. Form
     controls (select/option/input/button) have their own browser-native
     default font size and don't inherit this from body/p/etc, so they
     need to be listed explicitly too, or dropdown text and button
     labels stay small while everything else around them is bumped up.
     !important here since form controls can be stubborn about font-size
     depending on the browser/OS. */
  body, p, td, dd, dl, div, table, li, ul, select, option, input, button, textarea {
    font-size: 12pt !important;
  }
  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;
  }
}