/* Site-wide responsive overrides for the legacy table-based layout.
   Linked on every page alongside the viewport meta tag. Does not
   require changing each page's HTML structure. */

* {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
}

table {
  max-width: 100%;
}

/* Below this width, collapse table-based layouts (used for the
   sidebar/content split and most page bodies) into a single stacked
   column instead of forcing horizontal scroll. */
@media screen and (max-width: 760px) {
  table, tbody, tr, td {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }

  table[width], td[width] {
    width: 100% !important;
  }

  td {
    border-right: none !important;
  }

  body {
    background-attachment: scroll !important;
  }

  /* Top nav: stack instead of a horizontal row of flyouts, which
     don't work well on touch/narrow screens regardless of JS support */
  nav.top-menu ul {
    flex-direction: column;
  }

  nav.top-menu li {
    position: static;
  }

  nav.top-menu .submenu {
    position: static;
    display: none;
  }

  nav.top-menu li.open > .submenu {
    display: block;
  }

  /* Indent nested levels so the mobile accordion reads as a tree,
     same idea as the sidebar tree's indentation. */
  nav.top-menu .submenu .submenu {
    padding-left: 16px;
  }

  #sidebar-menu,
  #hcfog-menu {
    width: 100% !important;
  }

  /* Fixed-width legacy graphics (banner images, button GIFs) should
     scale rather than force the viewport wide */
  img[width] {
    width: auto !important;
  }
}

/* Base font bump — the old inline styles used fixed 8-9pt fonts,
   which read as tiny on phone screens. This raises the floor without
   fighting every inline font-size in the page content. */
@media screen and (max-width: 760px) {
  body, td, p, li, a {
    font-size: 15px !important;
  }
}