/* ============================================================
   Responsive layer for the Desmond Stephan static site.
   Loaded after the template CSS. Desktop ( >820px ) is untouched:
   every rule below lives inside the max-width:820px media query
   (except a few harmless base rules).
   ============================================================ */

img { max-width: 100%; height: auto; }
#m-bar, #m-quick, .m-caret { display: none; }
* { box-sizing: border-box; }

@media (max-width: 820px) {

  /* ---------- undo the fixed 800px absolute-centered shell ---------- */
  html, body { overflow-x: hidden; height: auto !important; min-height: 0 !important; }
  #wrapper {
    position: static !important; width: auto !important; max-width: 100% !important;
    margin: 0 !important; left: auto !important; top: auto !important;
  }
  body { font-size: 15px; background: #ffffff !important; }

  /* ---------- sticky bar + hamburger ---------- */
  #m-bar {
    display: flex; align-items: center; justify-content: flex-end;
    position: sticky; top: 0; z-index: 1000; background: #013a5c; height: 46px; padding: 0 10px;
  }
  #m-toggle {
    background: none; border: 1px solid #4f8db3; color: #fff;
    font-size: 22px; line-height: 1; padding: 4px 12px; border-radius: 4px;
  }

  /* ---------- logo banner scales (logo-bg.png is 800x127) ---------- */
  #header {
    float: none !important; clear: none !important;
    width: auto !important; max-width: 100% !important;
    height: 0 !important; padding-bottom: 15.875% !important;
    background-size: contain !important; background-position: center !important;
  }
  #top-nav { display: none !important; }

  /* ---------- slide-down menu panel ---------- */
  #navigation { display: none !important; width: auto !important; height: auto !important; background: #013a5c !important; }
  body.nav-open #navigation { display: block !important; }
  #m-quick { display: block; list-style: none; margin: 0; padding: 0; }
  #m-quick li { border-bottom: 1px solid #0a4f78; }
  #m-quick a { display: block; color: #fff; padding: 13px 16px; font-size: 16px; font-weight: bold; text-decoration: none; }

  #imap { position: static !important; width: auto !important; height: auto !important; background: none !important; display: block !important; }
  #imap li { position: relative !important; left: auto !important; top: auto !important; width: auto !important; height: auto !important;
             float: none !important; display: block !important; background: none !important; border-bottom: 1px solid #0a4f78; }
  #imap a { position: static !important; display: block !important; width: auto !important; height: auto !important;
            text-indent: 0 !important; overflow: visible !important; background: none !important; color: #fff !important;
            padding: 13px 16px !important; font: bold 16px/1.25 Verdana, Arial, sans-serif !important; text-decoration: none !important; }
  #imap li ul { display: none !important; position: static !important; width: auto !important; background: #02496f !important; margin: 0 !important; padding: 0 !important; }
  #imap li.open > ul { display: block !important; }
  #imap li li a { padding-left: 32px !important; font-size: 15px !important; font-weight: normal !important; color: #d8ecf7 !important; }
  #imap li li li a { padding-left: 48px !important; }
  .m-caret { display: block; position: absolute; top: 0; right: 0; width: 52px; height: 46px;
             background: none; border: none; border-left: 1px solid #0a4f78; color: #fff; font-size: 22px; line-height: 46px; text-align: center; }
  #imap li li .m-caret { height: 44px; line-height: 44px; }

  /* ================= CONTENT (covers all 3 templates) ================= */

  /* outer wrappers: drop fixed width, black bg, repeating bg */
  #content, #subcontent, #swirlcontent {
    width: auto !important; max-width: 100% !important; float: none !important; clear: both !important;
    background: #fff !important; padding: 0 !important; margin: 0 !important;
  }
  /* inner page area: full width, white, NO gear watermark, no forced height */
  #col1, #col2, #subpage, #swirlpage {
    width: auto !important; max-width: 100% !important; float: none !important; clear: both !important;
    margin: 0 !important; padding: 16px !important; background: #fff !important;
    min-height: 0 !important; height: auto !important; display: block !important;
    color: #222 !important;
  }
  #col2 { border-top: 3px solid #00a3e4; }

  /* leftover empty search boxes (search feature was removed) */
  #search, #subpage-search, #swirlpage-search { display: none !important; }

  /* readable typography */
  #col1, #col1 p, #col1 li, #col1 td,
  #subpage, #subpage p, #subpage li,
  #swirlpage, #swirlpage p, #swirlpage li { font-size: 15px !important; line-height: 1.55 !important; }
  #col1 h1, #subpage h1, #swirlpage h1 { font-size: 22px !important; line-height: 1.25 !important; margin: 4px 0 10px !important; }
  #col1 h2, #subpage h2, #swirlpage h2,
  #col1 h3, #subpage h3 { font-size: 17px !important; line-height: 1.3 !important; }

  /* images stack & center instead of floating into the text */
  #col1 img, #col2 img, #subpage img, #swirlpage img, img.product-photo {
    float: none !important; clear: none !important; display: block !important;
    width: auto !important; max-width: 100% !important; height: auto !important;
    margin: 0 auto 14px auto !important;
  }

  /* product spec tables: full width, readable, horizontal-scroll safety */
  .table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 12px 0 16px; }
  table.product-info {
    float: none !important; clear: both !important; width: 100% !important;
    margin: 0 !important; border-collapse: collapse !important;
  }
  table.product-info th, table.product-info td {
    padding: 8px !important; font-size: 13px !important; line-height: 1.3 !important;
  }
  table.product-info th { background: #00a3e4 !important; color: #fff !important; }
  table.product-info tr:nth-child(even) td { background: #f2f8fb !important; }

  /* footer: force a solid dark band (old markup floats its children,
     which collapsed the background into fragments on small screens) */
  #footer {
    display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important;
    float: none !important; clear: both !important; overflow: hidden !important;
    background: #012a40 !important; padding: 16px !important; margin: 0 !important;
    line-height: 1.7 !important; font-size: 13px !important; text-align: center !important;
  }
  #footer p { margin: 0 !important; padding: 0 !important; float: none !important; width: auto !important; background: none !important; }
  #footer code { display: none !important; }
  #footer, #footer p, #footer td { color: #ffffff !important; }
  #footer a { color: #8ad4f5 !important; }
  /* "Dayton Ohio Web Design" credit bar (the div right after the footer) */
  #footer + div {
    float: none !important; clear: both !important; width: 100% !important; height: auto !important;
    box-sizing: border-box !important; padding: 12px 16px !important; text-align: center !important;
  }
}