/* mobile.css - responsive overlay for sewerpipe-lining.com (added 2026-09-07)
   Desktop layout untouched above 920px. Below that, the fixed 880px layout goes fluid and stacks. */
html { -webkit-text-size-adjust: 100%; }
img, iframe, video, object, embed { max-width: 100%; }

@media (max-width: 920px) {
  #wrapper { width: auto; max-width: 880px; margin: 10px; padding: 10px; box-sizing: border-box; height: auto; }

  /* menu: 5 tabs wrap into a flexible row */
  #menu { width: 100%; height: auto; float: none; display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
  #menu > div { width: auto; flex: 1 1 auto; height: auto; line-height: 34px; margin-right: 0; padding: 0 10px; box-sizing: border-box; }
  #menu a { display: block; }

  /* top band: logo, estimate button, icons, caption stack and center */
  #top { width: 100%; height: auto; float: none; overflow: hidden; text-align: center; }
  #logo, #free_estimate, #icons, #caption { float: none; width: auto; height: auto; margin: 8px auto; }
  #logo img { max-width: 207px; height: auto; }
  #free_estimate img { max-width: 100%; height: auto; }
  #caption { font-size: 18px; line-height: 24px; }

  /* main columns become one column */
  #content, #content_dynamic, #home_content, #footer, #content_sub { width: 100%; float: none; }
  #content_left, #content_right { width: 100%; float: none; }
  #header { width: 100%; height: auto; float: none; }

  /* slideshow scales with width, keeps its 552x230 proportions */
  /* !important needed here because slider.css is linked after mobile.css */
  #scroller, #slideshow, .pics { width: 100% !important; height: auto !important; }
  #slideshow, .pics { aspect-ratio: 552 / 230; position: relative; overflow: hidden; }
  .pics p { width: 100% !important; height: auto !important; }
  .pics img { width: 100% !important; height: auto !important; }
  .snav, .snav a span#prev, .snav a span#next { display: none !important; }
  #scroller .overtext, #scroller .overtext .otitle, #scroller .overtext .odes { width: 100% !important; }

  /* header name/image tiles */
  .name_image { width: 100%; height: auto; }
  .name_green, .name_blue, .name_orange, .image { width: 50%; height: auto; font-size: 20px; box-sizing: border-box; }
  .image img { width: 100%; height: auto; }
  .round-arrow { display: none; }

  /* right sidebar */
  #flag_home, #video_home, .service_head, .sidebar, .sidebar .links { width: 100%; float: none; margin: 0; box-sizing: border-box; }
  #flag_home { font-size: 18px; }
  .sidebar { font-size: 13px; }
  .sidebar table { width: 100% !important; }

  /* inner-page 2-up image columns stack */
  /* !important because some pages (contact.php) set width inline */
  #sub_image_box { width: 100% !important; height: auto; }
  .sub_image_single_outer, .sub_image_single, .sub_image_heading1, .sub_image_heading2, .sub_image_heading3 { width: 100% !important; float: none !important; }
  .sub_image_single_space { display: none; }

  /* forms */
  .textbox, .textarea { width: 100%; max-width: 300px; box-sizing: border-box; }

  /* footer */
  #footer { height: auto; padding: 10px 0; }
  #footer ul { display: block; height: auto; }
  #footer ul li { display: inline-block; padding: 4px 7px; }

  table { max-width: 100%; }
  h1 { font-size: 22px; }
}

@media (max-width: 480px) {
  .name_green, .name_blue, .name_orange, .image { width: 100%; }
  #menu > div { flex: 1 1 45%; }
}

/* click-to-call links keep the surrounding text style */
a.c2c { color: inherit; text-decoration: inherit; }