/* =============================================================
   Responsive navigation + mobile reading view
   Only affects screens 800px and narrower - desktop is untouched.
   ============================================================= */

/* Mobile menu toggle button: hidden on desktop by default */
.mobile-nav-toggle {
	display: none;
	position: absolute;
	top: 22px;
	right: 0;
	width: 40px;
	height: 34px;
	padding: 0;
	background: transparent;
	border: 1px solid rgba(0,0,0,0.2);
	border-radius: 3px;
	cursor: pointer;
	z-index: 200;
}
.mobile-nav-toggle span {
	display: block;
	width: 22px;
	height: 2px;
	margin: 5px auto;
	background: #333;
}
.mobile-nav-toggle .screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px,1px,1px,1px);
}

@media (max-width: 800px) {

	/* ---------- Header / layout fluidity ---------- */
	#wrapper { width: 100%; margin: 0 auto; }
	#container { width: 94%; max-width: 100%; margin: 0 auto; }
	#top { position: relative; width: 100%; padding: 15px 0 15px 0; }
	#logo { float: none; }
	#slideshow, #slider { width: 100% !important; height: auto !important; }

	/* ---------- Remove contact address / phone block from header ---------- */
	.information { display: none !important; }

	/* ---------- Hamburger + dropdown nav ---------- */
	.mobile-nav-toggle { display: block; }

	#topnav {
		width: 100%;
		margin-bottom: 0;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.3s ease;
	}
	#topnav.mobile-nav-open {
		max-height: 2000px; /* generous cap so long menus aren't clipped */
	}
	#topnav .jqueryslidemenu {
		float: none !important;
		width: 100%;
	}
	#topnav .jqueryslidemenu ul {
		width: 100%;
	}
	.jqueryslidemenu ul li {
		display: block;
		float: none;
		width: 100%;
	}
	.jqueryslidemenu ul li a {
		display: block;
		width: 100%;
		box-sizing: border-box;
		padding: 12px 15px;
		border-bottom: 1px solid rgba(0,0,0,0.08);
	}
	.jqueryslidemenu ul li ul {
		position: static !important;
		visibility: visible !important;
		display: none;
		width: 100% !important;
		padding: 0 !important;
	}
	.jqueryslidemenu ul li.submenu-open > ul {
		display: block;
	}
	.jqueryslidemenu ul li ul li a {
		width: 100%;
		padding-left: 30px;
	}
	.jqueryslidemenu ul li ul li ul li a {
		padding-left: 45px;
	}
	.jqueryslidemenu a span.downarrowclass,
	.jqueryslidemenu a span.rightarrowclass {
		float: right;
		margin-top: 3px;
	}

	/* ---------- Remove page headers ----------
	   This now hides id="header" everywhere, including the
	   homepage hero/slider (previously only the inner-page
	   title banner was hidden - widened per your latest request). */
	#header { display: none !important; }

	/* ---------- Remove partner logos strip (footer.php) ---------- */
	#partnerlogos { display: none !important; }

	/* ---------- Remove sidebars, make main content full-width ---------- */
	#sidebar { display: none !important; }

	#main-content { margin: 0 !important; padding-top: 40px !important; }
	#main-content, #content {
		float: none !important;
	}
	#content,
	#content.positionright,
	#content.full {
		width: 100% !important;
		max-width: 100%;
		margin: 0 !important;
		box-sizing: border-box;
		padding: 10px !important;
	}

	/* Keep any embedded images/media from overflowing the
	   narrower column now that the fixed desktop widths are gone */
	#content img,
	#content .wp-caption,
	#content iframe,
	#content embed,
	#content object,
	#content table {
		max-width: 100% !important;
		height: auto !important;
	}

	/* Slightly larger base text for easier mobile reading
	   (the theme's default body font-size is quite small) */
	#content { font-size: 15px; line-height: 24px; }
	#content h1 { font-size: 26px; line-height: 30px; }
	#content h2 { font-size: 22px; line-height: 27px; }
	#content h3 { font-size: 19px; line-height: 24px; }
}