/*
 * Retrofit responsive behaviour onto the Google Sites layout.
 *
 * The captured layout hard-codes 718px on every wrapper and lays its columns
 * out with tables (`sites-layout-hbox` / `sites-layout-tile`), plus a 150px
 * sidebar cell. On a phone that overflows and the page gets clipped, which is
 * why adding a viewport meta tag on its own achieved nothing - the tag tells
 * the browser to use the device width, and the layout then refuses to fit in it.
 *
 * Everything here is inside a max-width query, so the desktop layout is
 * untouched. Loaded last, after the Google Sites stylesheets, so these win
 * without needing !important on every line - though the fixed widths are set
 * inline in places, which is what the !important flags below are for.
 */

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

  /* The fixed-width chain, from the outermost wrapper down to the content. */
  #sites-chrome-everything,
  #sites-chrome-page-wrapper,
  #sites-chrome-page-wrapper-inside,
  #sites-chrome-header-wrapper,
  #sites-chrome-header,
  #sites-chrome-main-wrapper,
  #sites-chrome-main,
  #sites-canvas,
  #sites-canvas-main,
  #sites-canvas-main-content {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Google Sites builds columns from tables. Turn them into stacked blocks so
     a 150px sidebar beside 364px of text becomes two full-width rows. */
  table.sites-layout-hbox,
  table.sites-layout-hbox > tbody,
  table.sites-layout-hbox > tbody > tr,
  #sites-chrome-main,
  #sites-chrome-main > tbody,
  #sites-chrome-main > tbody > tr,
  #sites-chrome-header,
  #sites-chrome-header > tbody,
  #sites-chrome-header > tbody > tr {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
  }

  td.sites-layout-tile,
  #sites-chrome-sidebar-left,
  #sites-chrome-sidebar-right,
  #sites-chrome-main td {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Images are sized in pixels throughout the content. */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Anything genuinely un-shrinkable scrolls in place rather than pushing the
     whole page sideways. */
  #sites-canvas-main-content {
    overflow-x: auto;
  }

  body {
    padding: 0 12px;
  }

  /* The site title is set large enough to overflow a narrow screen. */
  #sites-chrome-header-wrapper h2,
  #sites-chrome-header-wrapper .sites-header-title,
  #sites-chrome-header-wrapper a {
    font-size: 1.15rem !important;
    line-height: 1.3 !important;
    word-break: break-word;
  }

  /* The sidebar thumbnails become a wrappable row instead of a tall column. */
  #sites-chrome-sidebar-left table,
  #sites-chrome-sidebar-left tbody,
  #sites-chrome-sidebar-left tr {
    display: block !important;
    width: auto !important;
  }
}