/* ==========================================================
   mobile.css (SITE-WIDE - SAFE FOR INDEX)
   Purpose:
   - Do NOT change index.html mobile layout (body#page1) because
     index-only.css already controls it.
   - Apply mobile fixes to ALL OTHER pages.
   - Requires every page to include:
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   ========================================================== */

/* ----------------------------------------------------------
   INDEX (page1) - intentionally minimal
   We avoid overriding index-only.css.
   ---------------------------------------------------------- */
@media screen and (max-width: 1024px) {
  body#page1 html, body#page1 body {
    overflow-x: hidden;
  }

  /* If you ever see a horizontal scroll bar on iPhone,
     this is a safe guard without altering layout */
  body#page1 .main {
    max-width: 1024px;
  }
}

/* ----------------------------------------------------------
   ALL OTHER PAGES (NOT index)
   ---------------------------------------------------------- */
@media screen and (max-width: 1024px) {

  body:not(#page1) html,
  body:not(#page1) body {
    width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Break fixed wrapper but keep centered */
  body:not(#page1) .main {
    width: 100% !important;
    max-width: 1024px !important;
    margin: 0 auto !important;
    overflow: visible !important;
  }

  /* Stop container clipping */
  body:not(#page1) div.container,
  body:not(#page1) .container {
    overflow: visible !important;
    width: 100% !important;
  }

  /* Remove forced heights that clip nav/content */
  body:not(#page1) #header,
  body:not(#page1) #content,
  body:not(#page1) #footer,
  body:not(#page1) .maxheight {
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
  }

  /* Reduce heavy desktop padding */
  body:not(#page1) #header .indent { padding: 12px 10px 0 10px !important; }
  body:not(#page1) #content .indent-main { padding: 0 10px 13px 10px !important; }
  body:not(#page1) #footer .bg-bot { margin: 0 10px !important; }

  /* Stack template columns */
  body:not(#page1) .col-1,
  body:not(#page1) .col-2,
  body:not(#page1) .col-3,
  body:not(#page1) .col-4,
  body:not(#page1) .col-5,
  body:not(#page1) .col-6 {
    float: none !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }

  /* Make media responsive */
  body:not(#page1) img,
  body:not(#page1) object,
  body:not(#page1) iframe,
  body:not(#page1) video {
    max-width: 100% !important;
    height: auto !important;
  }

  /* ----------------------------------------------------------
     LEFT NAV VISIBILITY FIX (prevents “Contact Us” being cut off)
     Many pages use 234px left panel — center it and prevent clipping.
     ---------------------------------------------------------- */
  body:not(#page1) #header .col-1 {
    width: 234px !important;
    margin: 0 auto !important;
    overflow: visible !important;
    height: auto !important;
  }

  /* If the page uses green menu rows (.auto-style3) */
  body:not(#page1) #header p.auto-style3 {
    width: 234px !important;
  }

  /* Right header content follows below menu */
  body:not(#page1) #header .col-2 {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 10px 0 0 0 !important;
    box-sizing: border-box !important;
  }

  /* Remove divider backgrounds that assume fixed desktop x-positions */
  body:not(#page1) #content .bg,
  body:not(#page1) #content .bg1 {
    background: none !important;
  }

  /* ----------------------------------------------------------
     SECOND NAV (ul.ul) - reduce “giant text” on mobile
     ---------------------------------------------------------- */
  body:not(#page1) .ul li a {
    font-size: 1.15em !important;
    line-height: 1.8em !important;
  }

  /* Often right-aligned on desktop; better left on mobile */
  body:not(#page1) #content .indent-col {
    text-align: left !important;
  }

  /* ----------------------------------------------------------
     TABLE FIX (Services schedule and other pages)
     Turns wide tables into stacked blocks on mobile.
     ---------------------------------------------------------- */
  body:not(#page1) #content table {
    width: 100% !important;
    max-width: 100% !important;
  }

  body:not(#page1) #content table,
  body:not(#page1) #content thead,
  body:not(#page1) #content tbody,
  body:not(#page1) #content tr,
  body:not(#page1) #content th,
  body:not(#page1) #content td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  body:not(#page1) #content thead {
    display: none !important;
  }

  body:not(#page1) #content tr {
    margin: 0 0 12px 0 !important;
    padding: 10px !important;
    background: rgba(0,0,0,0.10) !important;
  }

  body:not(#page1) #content td,
  body:not(#page1) #content th {
    padding: 6px 0 !important;
    text-align: left !important;
    white-space: normal !important;
  }

  /* Footer cleanup */
  body:not(#page1) #footer .icon { display: none !important; }
  body:not(#page1) #footer span {
    float: none !important;
    display: block !important;
    margin-top: 6px !important;
  }
}