/*
 * feetmd.com layout fixes, loaded after the theme's stylesheets on every page.
 * The theme (DeepSea / thmpltfrmwrk) is left untouched; everything here overrides it.
 */

/* -----------------------------------------------------------------------------
 * Header, 1200px and wider.
 * The theme's overlapping width rules let the menu wrap and broke the phone number
 * onto two lines, which pushed "Our Locations" under the banner (the banner is pulled
 * up 103px beneath the header). These sizes keep everything on one line.
 * -------------------------------------------------------------------------- */
#header .toprightcol .tel,
#header .toprightcol p {
	padding-right: 0;
}
#header .toprightcol a.tel {
	white-space: nowrap;
}
#header #mainmenu > li > a {
	white-space: nowrap;
}

@media (max-width: 1799px) {
	#header #mainmenu > li > a { font-size: 18px; padding-left: 8px; padding-right: 8px; }
}
@media (max-width: 1599px) {
	#header .toprightcol .tel { font-size: 22px; }
	#header #mainmenu > li > a { font-size: 17px; padding-left: 6px; padding-right: 6px; }
	#header #mainmenu .hide-menu { display: none; } /* "Patient Information" -> "Information" */
}
@media (max-width: 1399px) {
	#header .toprightcol .tel { font-size: 21px; }
	#header #mainmenu > li > a { font-size: 16px; padding-left: 5px; padding-right: 5px; }
}
@media (max-width: 1299px) {
	#header #menu-item-464 { display: none; } /* "Home": the logo links home */
}
/* The theme drops the first/last item's outer padding; keep that at every width. */
#header #mainmenu > li:first-child > a { padding-left: 0; }
#header #mainmenu > li:last-child > a { padding-right: 0; }

/* -----------------------------------------------------------------------------
 * 992px-1199px (small laptops, tablets held sideways): the full menu would need
 * 13px text to fit, so use the theme's phone/tablet header with its menu button.
 * -------------------------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1199px) {
	#header { display: none !important; }
	#mobile_header { display: block !important; }
}

/* -----------------------------------------------------------------------------
 * Smooth scrolling. Backgrounds fixed to the window ("parallax") make the browser
 * repaint them on every scroll frame, and phones ignore or mis-scale them. Let the
 * homepage's before/after and highlights backgrounds scroll with the page.
 * -------------------------------------------------------------------------- */
#bagallery,
#highlights::before {
	background-attachment: scroll !important;
}

/* -----------------------------------------------------------------------------
 * Homepage slider captions on phones. The caption sat inside two nested
 * containers with 25px side padding each (178px of a 375px screen), and the award
 * slide's inline 38px text and 17% indent left room for about one word per line.
 * -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	#graphic .caption-wrapper > .container {
		width: auto;
		margin-left: 0;
		margin-right: 0;
		padding-left: 15px;
		padding-right: 15px;
	}
	#graphic .caption-box-wrapper {
		width: auto;
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
	}
	#graphic .caption-box > div[style*="margin-left"] { margin-left: 0 !important; }
	#graphic .caption-box .title.small[style] { font-size: 20px !important; letter-spacing: 1px; }
}

/* -----------------------------------------------------------------------------
 * Click-to-play video placeholder (see site-fixes.js): the thumbnail fills the
 * same 16:9 box the YouTube player used, with a play button on top.
 * -------------------------------------------------------------------------- */
.yt-facade {
	display: block;
	padding: 0;
	border: 0;
	background: #000;
	cursor: pointer;
	overflow: hidden;
}
.yt-facade img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.yt-facade-play {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 68px;
	height: 48px;
	margin: -24px 0 0 -34px;
	border-radius: 12px;
	background: rgba(33, 33, 33, 0.85);
	transition: background 0.2s;
}
.yt-facade-play::after {
	content: "";
	position: absolute;
	left: 27px;
	top: 14px;
	border-style: solid;
	border-width: 10px 0 10px 17px;
	border-color: transparent transparent transparent #fff;
}
.yt-facade:hover .yt-facade-play,
.yt-facade:focus .yt-facade-play {
	background: #f00;
}