/* ==========================================================================
   Mobile responsiveness fixes  (static Mobiom rebuild)
   Loaded AFTER site.css so these rules win.
   Root cause fixed: the hero banner <img class="banner-img"> used
   min-width:100%; max-width:300% and overflowed, stretching the mobile
   layout viewport well beyond device-width. We contain overflow and keep
   all media inside the viewport.
   ========================================================================== */

html, body { overflow-x: hidden !important; max-width: 100%; }

img, svg, video, iframe { max-width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   Large monitors (> 1280px): the hero banner image is only 1920px wide, and
   the theme's "fill" rule lives inside @media (max-width:1280px), so on wide
   screens the image stopped at 1920px and the cream container background
   (#fff9e0) showed on the right. Make the hero image fill the full width.
   -------------------------------------------------------------------------- */
@media screen and (min-width: 1281px) {
	.banner-con-top-1 { background: #17124d; }
	/* home hero: image scales to full width, keeps its aspect ratio */
	#bannertopone .carousel-item .banner-img {
		width: 100% !important;
		min-width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		display: block;
	}
	/* interior sub-page header banners: cover the full width (fixed height) */
	#bannersubpage .carousel-item .banner-img,
	.subpagebanner .banner-inn-con .banner-img {
		width: 100% !important;
		min-width: 100% !important;
		max-width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		object-position: center !important;
	}
}

/* Hero / sub-page banner image must never exceed the viewport on tablets & phones */
@media screen and (max-width: 991px) {
	#bannertopone .carousel-item .banner-img,
	#bannersubpage .carousel-item .banner-img {
		position: absolute;
		left: 0;
		right: 0;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		height: 100%;
		object-fit: cover;
	}
	.subpagebanner .banner-inn-con .banner-img {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
	}
	/* wide screenshot / table blocks stay inside the screen */
	table { display: block; overflow-x: auto; }
}

/* --------------------------------------------------------------------------
   Mobile slide-in menu drawer (theme's .nav-slider lacked top/left/height,
   so the opened menu had no anchor). Make it a proper full-height drawer.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1080px) {
	.nav-slider {
		top: 0 !important;
		left: 0 !important;
		height: 100% !important;
		width: 280px !important;
		max-width: 82% !important;
		overflow-y: auto !important;
		padding-top: 90px !important;
		box-shadow: 2px 0 18px rgba(0,0,0,0.35);
	}
	.nav-slider .menu-top-con { display: block !important; width: 100%; }
	.nav-slider .menu-top-con > li { display: block; width: 100%; border-bottom: 1px solid rgba(255,255,255,0.08); }
	.nav-slider .menu-top-con li a { color: #fff !important; display: block; }
	.nav-slider .sub-menu { position: static !important; display: block !important; background: transparent !important; box-shadow: none !important; padding-left: 12px; }
	.nav-slider .sub-menu li a { color: rgba(255,255,255,0.75) !important; font-size: 13px; }
	/* hamburger sits above the drawer */
	.navbar-toggler { position: relative; z-index: 250; }
}