/* ==========================================================
   mobile.css  -  loaded ONLY on screens up to 1024px wide
   (phones + tablets). Desktop is not affected.
   Uses !important because script-aashray.js sets inline sizes.
   ========================================================== */

/* ---- 1. Allow the page to scroll and stop it being forced wide ---- */
html { height: auto !important; overflow-x: hidden !important; overflow-y: auto !important; }
body { height: auto !important; overflow: visible !important; }
#siteContainer { width: 100% !important; overflow: visible !important; }

/* ---- 2. Logo ---- */
header .logo { margin: 14px 0 0 16px; }
header .logo img { max-width: 55vw; height: auto; }

/* ---- 3. Home page text panel: becomes a normal block under the background ---- */
#contentBar.homePage {
  position: relative !important;
  left: 0 !important;
  width: auto !important;
  height: auto !important;
  margin: 46vh 0 0 0;            /* leaves the top of the screen free to show the background */
}
#contentBar.homePage .background {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}
#contentBar.homePage .mainContent {
  position: relative !important;
  height: auto !important;
  padding: 22px 18px 150px 18px !important;   /* bottom padding keeps text clear of the menu */
  font-size: 14px;
  line-height: 1.55 !important;
}
.mainContent h1 { font-size: 22px; }
.mainContent h2 { font-size: 16px; line-height: 1.5; }
.mainContent h3 { font-size: 14px; }

/* ---- 4. Bottom menu: 3 columns x 2 rows instead of one overflowing row ---- */
#mainMenuHolder { left: 0 !important; width: 100% !important; height: auto !important; padding: 0 !important; }
#mainMenu { position: relative !important; left: 0 !important; bottom: auto !important; width: 100% !important; padding: 0 !important; }
#mainMenu:after { content: ""; display: block; clear: both; }
#mainMenu li { float: left; width: 33.333% !important; box-sizing: border-box; padding: 0 !important; text-align: center; }
#mainMenu li a { float: none !important; display: block; padding: 12px 4px !important; font-size: 12px !important; letter-spacing: 0 !important; white-space: normal; }

/* Sub-menus open just above the menu, full width */
#mainMenuHolder .subMenu { bottom: 100% !important; left: 0 !important; width: 100% !important; box-sizing: border-box; }
#mainMenuHolder .subMenu li a { margin: 0 !important; padding: 12px 16px !important; }

/* ---- 5. Footer: hide the copyright line that doesn't fit ---- */
#footer ul.right { display: none; }

/* ---- 6. Never show the video on phones/tablets (also set in index.php script) ---- */
.bgVideo { display: none !important; }