/* mobile.css — responsive overrides for grandcanyonhelicopters.org
   Loaded last, on top of the legacy fixed-width (960px) stylesheets.
   All rules are scoped to small screens, so desktop layout is unchanged. */

@media (max-width: 768px) {

  /* Never let anything force horizontal scrolling */
  html, body { max-width: 100%; overflow-x: hidden; }
  body { margin: 8px 0; font-size: 15px; }

  /* Legacy 2-column shell -> single fluid column */
  #wrapper { width: auto !important; max-width: 100% !important; margin: 0 !important; }
  #page,
  #sidebar { width: auto !important; float: none !important; margin: 10px !important; padding-left: 0; padding-right: 0; }

  /* Boxes that were given fixed / percentage widths */
  #page .section,
  #page .section-banner,
  #page .copybox,
  #page .between,
  #sidebar .section,
  #sidebar .section2-banner { width: auto !important; box-sizing: border-box; }

  /* Media: fit the screen, stack instead of float */
  img { max-width: 100% !important; height: auto !important; }
  #page .section img,
  #sidebar .section img { width: auto !important; max-width: 100% !important; height: auto !important;
                          float: none !important; display: block; margin: 0 auto 10px auto !important; }
  iframe, video, embed, object { max-width: 100% !important; }

  /* Copy column that sat next to the image */
  #page .section .copy { width: 100% !important; float: none !important; }

  /* Catch one-off pages that float/size elements with inline styles or align="" */
  #page [style*="float:left"], #page [style*="float: left"],
  #page [style*="float:right"], #page [style*="float: right"] { float: none !important; width: auto !important; }
  #page img[align="left"], #page img[align="right"] { float: none !important; display: block;
                                                      margin: 0 auto 10px auto !important; }
  #page div[class*="section"] img { max-width: 100% !important; height: auto !important; }

  /* Legacy fixed-width tables (e.g. the 720px legal/FAQ pages) */
  table[width] { width: 100% !important; }
  table, td, th { max-width: 100% !important; }
  td[width], th[width] { width: auto !important; }
  table[width="720"] td { display: block; width: auto !important; height: auto !important; }

  /* Roomier tap targets for the nav / footer links */
  #nav { font-size: 16px; }
  #page #nav a,
  #footer a { display: inline-block; padding: 8px 6px; }

  /* Buttons full-width & easy to tap */
  #page .section button,
  #sidebar .section button,
  .detailsbutton,
  .detailsbutton2 { width: auto !important; min-height: 44px; }

  /* Modal/lightbox popups that used fixed positioning + widths */
  .white_content { width: 86% !important; max-width: 320px; left: 7% !important; margin: 0 !important; }
}