/*
 * Responsive overrides for the legacy medicom.css theme.
 * Everything here lives inside @media blocks only, so screens >= 992px
 * (desktop) render exactly like the original — nothing outside a media
 * query should ever be added to this file.
 */

/* ===== Tablet and below (<992px) ===== */
@media (max-width: 991px) {
	/* medicom.css hard-locks these to 1190px, which is the main reason
	   the old site never reflows and instead relies on the zoomed-out
	   viewport hack. */
	#wrapper,
	.medicom-header {
		min-width: 0;
	}

	.container {
		width: 100%;
	}

	/* Same story as the navbar: this bootstrap.css has its .col-md-*
	   float/width rules sitting outside any "@media (min-width:992px)"
	   wrapper, so the grid never stacks below desktop — e.g. the footer's
	   col-md-3/col-md-6/col-md-3 stayed side-by-side on phones and
	   overlapped. Force the stock <992px stacked behavior back. */
	.col-md-1,
	.col-md-2,
	.col-md-3,
	.col-md-4,
	.col-md-5,
	.col-md-6,
	.col-md-7,
	.col-md-8,
	.col-md-9,
	.col-md-10,
	.col-md-11,
	.col-md-12 {
		float: none;
		width: 100%;
	}

	/* Safety net: Facebook's Like Box SDK re-asserts a ~300px min-width
	   on its iframe via inline style through its own JS, which no page CSS
	   can override. Contain it locally instead of letting it push the
	   whole document into horizontal scroll. */
	body {
		overflow-x: hidden;
	}
	.fb-like-box {
		overflow: hidden;
	}

	/* main banner slider: fixed 1142px box -> fluid */
	.tp-banner,
	.tp-banner-in {
		width: 100%;
	}
	.tp-banner-container,
	.tp-banner-container-in {
		height: auto;
		padding: 10px 0;
	}

	/* logo: HTML has width="241" height="85" attributes, override both */
	.navbar-brand img {
		width: auto;
		height: auto;
		max-width: 180px;
	}

	/* product / service cards: 200px thumb + 215px padding no longer fits
	   inside a 48%-width column once the column itself is under ~450px */
	.blog2-item {
		width: 100%;
		min-height: 0;
	}

	/* video section: iframe was absolutely positioned at left:30px to sit
	   beside a list indented with margin-left:650px - stack them instead */
	.ytplayer {
		position: static;
		top: auto;
		left: auto;
		width: 100%;
		max-width: 640px;
		margin: 0 auto 15px;
	}
	.ytplayer iframe {
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
	}
	.vtab,
	.resp-tabs-container .vtab {
		margin-left: 0;
		height: auto;
		max-height: 350px;
	}

	/* Facebook SDK's like-box widget renders at a fixed pixel width that
	   ignores its container once the footer column narrows */
	.fb-like-box,
	.fb-like-box iframe {
		max-width: 100%;
	}
}

/* ===== Phone (<768px) ===== */
@media (max-width: 767px) {
	/* Bootstrap's own navbar collapse kicks in here; the theme never
	   shipped a toggle button, so give the added .navbar-toggle its
	   usual look (bootstrap.css already styles it, this just centers it
	   vertically against the taller custom header). */
	.navbar-header {
		float: none;
	}
	.navbar-toggle {
		margin-top: 18px;
	}
	/* matched to bootstrap.css's ".navbar-default .navbar-toggle" specificity,
	   otherwise its #dddddd border / #cccccc bars win regardless of load order */
	.navbar-default .navbar-toggle {
		border-color: #369F30;
		background-color: #ffffff;
	}
	.navbar-default .navbar-toggle:hover,
	.navbar-default .navbar-toggle:focus {
		background-color: #369F30;
	}
	.navbar-default .navbar-toggle:hover .icon-bar,
	.navbar-default .navbar-toggle:focus .icon-bar {
		background-color: #ffffff;
	}
	.navbar-default .navbar-toggle .icon-bar {
		background-color: #369F30;
	}
	.navbar-collapse {
		border-top: 1px solid #eee;
	}

	/* This theme's bundled bootstrap.css was hand-edited: the stock
	   ".collapse{display:none}" was changed to "display:block" and the
	   desktop ".navbar-nav{float:left}" rules lost their
	   "@media (min-width:768px)" wrapper, so the menu was always shown
	   open and horizontal, with no way to actually collapse it. Restore
	   the stock collapsed-menu behavior here. */
	.navbar-collapse.collapse {
		display: none;
	}
	.navbar-collapse.collapse.in {
		display: block;
	}
	.navbar-nav {
		float: none;
		margin: 7.5px -15px;
	}
	.navbar-nav > li {
		float: none;
	}

	/* The base (unwrapped) ".navbar-collapse{float:right}" rule in
	   bootstrap.css is what parks the whole open menu as a shrink-wrapped
	   box on the right, cutting it down to its widest label's content
	   width instead of spanning the phone screen. Stretch it back out. */
	.navbar-collapse {
		float: none;
		width: 100%;
	}
	.navbar-nav,
	.navbar-nav > li {
		width: 100%;
	}
	.navbar-nav > li {
		border-bottom: 1px solid #eee;
	}
	.navbar-nav > li:last-child {
		border-bottom: 0;
	}
	.navbar-nav > li > a {
		display: block;
		width: 100%;
	}

	/* Text color/uppercase and the 19px/20px/24px padding both come from
	   ".navbar-default .navbar-nav > li > a" and
	   ".navbar-default .navbar-collapse.medical-nav li a" in bootstrap.css
	   — matched here to the more specific of the two so the override
	   actually wins regardless of load order. */
	.navbar-default .navbar-collapse.medical-nav li a {
		padding: 13px 20px;
		color: #333333;
		text-transform: none;
		font-weight: 600;
	}
	.navbar-default .navbar-collapse.medical-nav li a:hover,
	.navbar-default .navbar-collapse.medical-nav li a:focus,
	.navbar-default .navbar-collapse.medical-nav li.open > a {
		background-color: #f4f9f3;
		color: #333333;
	}
	/* bootstrap.css's ".navbar-default .navbar-nav > .active/.open > a:hover"
	   rules force white text at (0,4,1)/(0,4,3) specificity depending on
	   state, which can still edge out the rule above in some of these
	   combinations. Text should just stay the same color as normal,
	   never flip to white/unreadable, so pin it down directly. */
	.navbar-nav > li > a:hover,
	.navbar-nav > li > a:focus,
	.navbar-nav .dropdown-menu > li > a:hover,
	.navbar-nav .dropdown-menu > li > a:focus {
		color: #333333 !important;
	}

	/* The "+" icon was styled for a desktop mega-menu variant (stacked
	   above the label, hidden until :hover — meaningless on touch).
	   Matched to that rule's specificity so it actually wins: put it
	   inline before the label instead. */
	.navbar-default .navbar-collapse.medical-nav li a i {
		display: inline-block;
		visibility: visible;
		width: auto;
		height: auto;
		margin: 0 8px 0 0;
		color: #369F30;
		font-size: 12px;
	}

	/* "Products & Services" submenu: always shown, no tap-to-open needed.
	   bootstrap.css already has the static/stacked layout for
	   ".navbar-nav .open .dropdown-menu" at this breakpoint — reuse the
	   same layout unconditionally instead of gating it behind .open. */
	.navbar-nav .dropdown-menu {
		position: static;
		float: none;
		width: 100%;
		margin-top: 0;
		background-color: transparent;
		border: 0;
		box-shadow: none;
		display: block;
	}
	/* matched to bootstrap.css's ".navbar-default .navbar-collapse.medical-nav
	   li ul li a" (padding:11px 0) so the indent actually applies */
	.navbar-default .navbar-collapse.medical-nav li ul li a {
		padding: 10px 20px 10px 38px;
	}

	.appointment-sec .lead {
		font-size: 16px;
	}

	/* product cards: drop the side-by-side thumb + text layout */
	.blog2-thumbnail {
		float: none;
		width: 100%;
		text-align: center;
		margin-bottom: 10px;
	}
	.blog2-thumbnail img {
		display: inline-block;
	}
	.blog2-content {
		padding-left: 0;
		min-height: 0;
	}

	/* video list rows: 120px thumb + 250px title no longer fits a phone
	   width once container padding is subtracted */
	.ytvideo .ytthumb {
		float: none;
	}
	.ytvideo .yttitle {
		float: none;
		width: 100%;
		margin-left: 0;
		margin-top: 8px;
	}

	.footer-widget {
		margin-bottom: 20px;
	}
}