/* ==========================================================================
   Responsive layer for the legacy Aquiworx (GRDM2) template.

   templatemo_style.css is a fixed 960px float layout from ~2010. Rather than
   rewrite it, this sheet is loaded last and relaxes the fixed widths and floats
   below 980px so the pages reflow on tablets and phones. Load order matters:
   this must come after templatemo_style.css.
   ========================================================================== */

/* Fluid images everywhere, at any width. */
#templatemo_wrapper img,
#templatemo_main img,
#templatemo_footer img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 980px) {
  html {
    -webkit-text-size-adjust: 100%;
  }

  body {
    overflow-x: hidden;
  }

  /* Outer shells: let them fill the viewport instead of locking to 960/930px. */
  #templatemo_wrapper,
  #templatemo_main,
  #templatmeo_header,
  #templatemo_middle,
  #templatemo_middle_sub,
  #templatemo_footer_wrapper,
  #templatemo_footer,
  #templatemo_copyright {
    width: auto;
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }

  /* The template pins fixed heights on the header and content bands and hides
     the overflow. Once anything reflows onto an extra line that clips the text
     and lets the wrapped menu overlap the page title, so let them grow. */
  #templatmeo_header,
  #templatemo_menu,
  #templatemo_middle,
  #templatemo_middle_sub {
    height: auto;
    overflow: visible;
  }

  #templatemo_middle {
    min-height: 0;
    padding-bottom: 30px;
    background-size: cover;
  }

  #templatemo_middle_sub {
    padding-bottom: 20px;
  }

  /* Header: title and menu stack instead of sitting side by side. */
  #site_title,
  #templatemo_menu {
    float: none;
    width: auto;
    text-align: center;
  }

  /* The logo is a background image, so this box must keep its own height. */
  #site_title {
    height: 60px;
  }

  #site_title h1,
  #site_title h1 a {
    width: auto;
    margin: 0 auto;
  }

  #templatemo_menu ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    padding: 0;
    margin: 10px 0 0;
  }

  #templatemo_menu ul li {
    float: none;
  }

  #templatemo_menu ul li a {
    float: none;
    display: block;
    width: auto;
    min-width: 110px;
    padding: 10px 14px;
  }

  /* Content columns: every float becomes a stacked full-width block. */
  #mid_left,
  #mid_slider,
  #mid_slider span,
  #slider1,
  #contact_form,
  #gallery,
  #templatemo_main .col_w600,
  #templatemo_main .col_w450,
  #templatemo_main .col_w300,
  #templatemo_main .col_w200,
  [class*="col_w"],
  [class*="col_allw"],
  .contentdiv,
  .float_l,
  .float_r,
  .image_fl,
  .image_fr,
  .image_frame {
    float: none;
    width: auto;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .image_frame img,
  .image_frame span {
    width: auto;
    max-width: 100%;
  }

  /* Forms need to be reachable with a thumb. */
  #contact_form form .input_field,
  #contact_form form textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 16px; /* stops iOS Safari zooming on focus */
  }

  #contact_form form label {
    width: auto;
    display: block;
  }

  /* Gallery thumbnails wrap rather than overflow. */
  #gallery ul {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    width: auto;
    padding: 0;
  }

  #gallery ul li,
  #gallery ul .rm_col {
    float: none;
    width: auto;
    margin: 0;
  }

  #gallery ul li span {
    width: auto;
  }
}

@media (max-width: 600px) {
  #templatemo_menu ul li a {
    min-width: 0;
    flex: 1 1 auto;
  }

  /* The slider is decorative; its fixed height crops badly on small screens. */
  #slider1,
  #mid_slider {
    height: auto;
  }
}