/* Phone and tablet layout for the static Marr Constructions copy.
   Desktop (806 px site, any screen 820 px and wider) is untouched: every rule sits inside the
   media query, and .mobile-call is hidden there. */
.mobile-call { display: none; }

@media (max-width: 819px) {
  html, body { overflow-x: hidden; }
  body { background: #2a2a2d; -webkit-text-size-adjust: 100%; }
  #bg_bottom, #bg_y, #bg_top { display: block; }
  #bg_y { background: #2a2a2d; }
  #container { width: auto; }

  /* Banner: logo_top.png (806 x 144) scaled to the screen */
  #bg_top { background-size: 100% auto; }
  #banner { width: 100%; height: calc(100vw * 144 / 806); }

  .mobile-call { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 10px 12px 12px; }
  .mobile-call a, .mobile-call a:visited {
    flex: 1 1 150px; text-align: center; padding: 11px 8px; border-radius: 6px;
    background: #a6ce39; color: #141414; font: bold 16px/1.2 Arial, Helvetica, sans-serif; text-decoration: none;
  }

  /* Slideshow: 806 x 425 scaled to the screen width (the script writes fixed pixel sizes inline) */
  #frame { width: 100%; height: auto; aspect-ratio: 806 / 425; overflow: hidden; }
  #frame div { width: 100% !important; height: 100% !important; }
  #frame img { width: 100%; height: auto; display: block; }

  /* Menu: the six tabs wrap into pills; drop-downs open under their tab on tap */
  #menu { width: auto; height: auto; margin: 0; padding: 8px; border: 0; background: #d4d4d5; }
  #menu ul.nav { float: none; white-space: normal !important; display: flex !important; flex-wrap: wrap; justify-content: center; gap: 6px; }
  #menu ul.nav > li { width: auto !important; float: none; position: relative; border-radius: 14px; }
  .nav .top { padding: 9px 12px; font-size: 15px; border-left: 0; border-radius: 14px; }
  .nav > li.selected { background: #a6ce39; }
  .nav li ul { left: 0; top: 100%; z-index: 200; }
  .nav ul li { width: 180px; }
  .nav ul a { padding: 10px 8px; font-size: 15px; color: #141414; }

  /* Page body: one column, Latest News after the content */
  #header { display: flex; flex-direction: column; }
  #header > * { order: 0; }
  #header > #content { order: 1; margin: 6px 0 20px; }
  #header > #column_right { order: 2; float: none; width: auto; margin: 0 12px 20px; clear: none; }
  #header .div6 { margin-bottom: 0; }
  .box { background: #fff; border-radius: 6px; overflow: hidden; }
  .box .top { background: #ddd; }
  .box .middle { border: 0; }
  .box .bottom { display: none; }
  #latestnews img { max-width: 100%; height: auto !important; }

  #content h1, .heading { font-size: 20px; }
  #content .top h1, .heading { padding: 10px 12px 4px; }
  #content .top .center table h1 { padding: 0; }
  #content .middle { padding: 4px 12px 1px; overflow-wrap: anywhere; }
  #content .middle span[style*="font-size"] { font-size: 16px !important; }
  #content .middle img { max-width: 100%; height: auto; }
  #content .middle iframe { float: none !important; display: block; width: 100%; }
  #content .middle table { max-width: 100%; }

  /* Gallery: the 3-across thumbnail table becomes a two-column grid */
  #content .middle > table[width="100%"] { display: block; width: 100%; }
  #content .middle > table[width="100%"] > tbody { display: flex; flex-wrap: wrap; width: 100%; }
  #content .middle > table[width="100%"] > tbody > tr { display: contents; }
  #content .middle > table[width="100%"] > tbody > tr > td { display: block; width: 50% !important; box-sizing: border-box; padding: 4px 4px 12px !important; margin: 0 !important; }
  #content .middle > table[width="100%"] > tbody > tr > td:empty { display: none; }
  #content .middle > table[width="100%"] img { width: 150px; max-width: 100%; }

  /* Contact form: full-width fields, 16px so iOS does not zoom on focus; the Continue button is a real tap target */
  #contact table[width="100%"] td { font-size: 15px; }
  #contact input[type="text"] { width: 100%; box-sizing: border-box; font-size: 16px; padding: 8px; }
  #contact textarea { width: 100% !important; box-sizing: border-box; font-size: 16px; padding: 8px; }
  #contact .buttons a.button { display: block; margin: 0; padding: 0; background: #a6ce39; border-radius: 6px; text-align: center; cursor: pointer; }
  #contact .buttons a.button span { background: none; padding: 13px; font-size: 17px; font-weight: bold; color: #141414; }

  /* Footer: links and copyright on the dark page, then the logo strip (footer.png, 806 x 230) scaled below */
  #bg_bottom { background-size: 100% auto; }
  #footer { width: auto; padding: 8px 12px calc(100vw * 230 / 806 + 8px); text-align: center; color: #ddd; }
  #footer a, #footer a:visited { color: #fff; }
  #footermenu { margin: 0; padding-bottom: 12px; line-height: 2.6; }
  #footermenu a, #footermenu a:visited { display: inline-block; margin: 2px; padding: 0 10px; font-size: 14px; letter-spacing: 0; border: 1px solid #555; border-radius: 14px; line-height: 30px; }
  #footer small { font-size: 13px; }
}