/* =====================================================================
   All About Cosmetic Surgery - mobile layer
   ---------------------------------------------------------------------
   Loaded after every other style sheet (see views/global/header.php).
   Everything that changes the layout sits inside the max-width: 979px
   media query, so the desktop design (960px) is left exactly as it was.
   Companion script: /extras/scripts/mobile.js
   ===================================================================== */

/* Mobile-only elements are hidden on desktop */
.mf-bar, .mf-subtoggle, .primary_navigation .mf-only, .primary_navigation li.mf-only, .mf-banner { display: none; }


@media screen and (max-width: 979px) {

	/* ---------- Page frame ---------- */
	html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
	body { min-width: 0; overflow-x: hidden; }

	.section,
	.article,
	.breadcrumbs,
	.directory,
	.primary_navigation { width: auto !important; max-width: 100%; box-sizing: border-box; }

	.section { padding: 0; }

	/* ---------- Logo ---------- */
	.section.logo img { max-width: 72%; height: auto; margin: 16px 0 4px; }

	/* ---------- Primary navigation: compact bar + slide-down menu ---------- */
	.primary_navigation {
		height: auto !important; margin: 10px 0 12px !important; padding: 0;
		background: linear-gradient(#77777d 0%, #55555a 48%, #343437 50%, #343437 100%) !important;
		position: -webkit-sticky; position: sticky; top: 0; z-index: 1000;
		box-shadow: 0 1px 3px rgba(0,0,0,.25);
	}
	.mf-bar { display: flex; align-items: center; height: 44px; }
	.mf-home {
		display: block; width: 72px; height: 44px; flex: 0 0 auto;
		background: url(/images/navigation_menu_home.png) -9px 0 no-repeat;
		background-size: 104px 88px;
	}
	.mf-home:active { background-position: -9px -44px; }
	.mf-call {
		margin-left: auto; color: #fff; font: 15px "Trebuchet MS", Arial, Helvetica, sans-serif;
		text-shadow: 1px 1px 2px #000; padding: 0 14px; line-height: 44px; white-space: nowrap;
	}
	.mf-toggle {
		display: flex; align-items: center; gap: 9px; height: 44px; padding: 0 16px;
		background: transparent; border: 0; border-left: 1px solid rgba(255,255,255,.14);
		color: #fff; font: 14px "Trebuchet MS", Arial, Helvetica, sans-serif; text-shadow: 1px 1px 2px #000;
		cursor: pointer; -webkit-appearance: none; appearance: none;
	}
	.mf-burger, .mf-burger:before, .mf-burger:after {
		display: block; width: 18px; height: 2px; background: #fff; border-radius: 1px; position: relative;
		transition: transform .2s ease, background-color .2s ease;
	}
	.mf-burger:before, .mf-burger:after { content: ""; position: absolute; left: 0; }
	.mf-burger:before { top: -6px; }
	.mf-burger:after  { top: 6px; }
	.mf-open .mf-burger { background: transparent; }
	.mf-open .mf-burger:before { transform: translateY(6px) rotate(45deg); }
	.mf-open .mf-burger:after  { transform: translateY(-6px) rotate(-45deg); }

	.primary_navigation ul { display: none; border-top: 1px solid rgba(255,255,255,.08); max-height: calc(100vh - 44px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
	.primary_navigation.mf-open ul { display: block; }
	.primary_navigation li { display: block; float: none; position: relative; border-top: 1px solid rgba(255,255,255,.07); margin: 0; font-size: 1em; line-height: normal; }
	.primary_navigation li.mf-only { display: block; }
	.primary_navigation li:first-child { display: none; } /* home icon lives in the bar */
	.primary_navigation li a {
		float: none !important; display: block !important; height: auto !important; width: auto !important;
		padding: 13px 18px !important; background: none !important; font-size: 15px;
	}
	.primary_navigation li a.home,
	.primary_navigation li a.contact { display: none !important; }
	.primary_navigation li a.active,
	.primary_navigation li:hover a.active {
		background: linear-gradient(#90baf0 0%, #5f89bf 48%, #2e588e 50%, #234d83 100%) !important;
	}

	.mf-subtoggle {
		display: block; position: absolute; top: 0; right: 0; width: 56px; height: 45px;
		border: 0; border-left: 1px solid rgba(255,255,255,.1); background: transparent; cursor: pointer;
		-webkit-appearance: none; appearance: none;
	}
	.mf-subtoggle:after {
		content: ""; position: absolute; left: 23px; top: 16px; width: 8px; height: 8px;
		border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s ease;
	}
	.mf-sub-open > .mf-subtoggle:after { transform: translateY(4px) rotate(-135deg); }

	.primary_navigation li .procedures {
		display: none; position: static !important; left: auto !important; width: auto !important;
		padding: 4px 0 12px 0 !important; opacity: 1 !important; overflow: visible;
		background: #2a2a2d !important;
	}
	.primary_navigation li.mf-sub-open .procedures { display: block; }
	.primary_navigation li .procedures div { float: none; margin: 0 !important; padding: 6px 0 2px; }
	.primary_navigation li .procedures h3 { font-size: 13px; letter-spacing: .04em; padding: 6px 18px 2px; margin: 0; }
	.primary_navigation li .procedures a { padding: 9px 18px 9px 30px !important; font-size: 14px; line-height: 1.3; }
	.primary_navigation .procedures a.mf-only { display: block !important; padding-left: 18px !important; color: #809ec4; }

	/* ---------- Secondary navigation (tab strip, swipe sideways) ---------- */
	.secondary_navigation {
		height: auto; display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch;
		white-space: nowrap; scrollbar-width: none; background-size: auto 100%;
	}
	.secondary_navigation::-webkit-scrollbar { display: none; }
	.secondary_navigation a { float: none; flex: 0 0 auto; height: auto; padding: 13px 16px 11px; line-height: 1; font-size: 13px; }
	.secondary_navigation a[class^="section_title"] { min-width: 60px; padding: 0; }
	.secondary_navigation span { display: none; }

	/* ---------- Breadcrumbs ---------- */
	.breadcrumbs { height: 33px; white-space: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
	.breadcrumbs::-webkit-scrollbar { display: none; }
	.breadcrumbs div.social { display: none; }

	/* ---------- Article: single column ---------- */
	.article {
		border-width: 0 0 1px 0 !important; margin-top: 0 !important;
		padding: 0 18px !important; overflow: hidden;
	}
	.article * { max-width: 100%; }
	.article div, .article table, .article td, .article img, .article iframe, .article input, .article textarea, .article select { box-sizing: border-box; }
	.article .navBlocks a, .article .topNavigation a { max-width: none; }
	.article .navBlocks, .article .pageNavigation, .article .ask_a_question, .article .ask_a_question .ask { max-width: none !important; }

	.article div,
	.article table, .article tbody, .article thead, .article tr, .article td, .article th,
	.article ul, .article ol, .article p,
	.article h1, .article h2, .article h3, .article h4, .article h5 {
		float: none !important; width: auto !important; height: auto !important;
		margin-left: 0 !important; margin-right: 0 !important;
	}
	.article div { padding-left: 0 !important; padding-right: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; min-height: 0 !important; }

	/* Top-level blocks of an article become stacked "sections" */
	.article > div { padding-top: 30px !important; padding-bottom: 24px !important; }
	.article > div + div { border-top: 1px solid #efefef; }

	/* Absolutely positioned desktop pieces flow normally */
	.article div, .article p, .article h1, .article h2, .article img, .article .fadein { position: static !important; top: auto !important; left: auto !important; }
	.article .navBlocks { position: relative !important; }
	.article img.top_line, .article img.middle_line, .article img.bottom_line { display: none !important; }

	/* Cross-fading picture sets (3D imaging etc.) */
	.article .slideshow, .article .fadein1 { position: relative !important; width: 100% !important; height: auto !important; margin: 0 0 20px !important; }
	.article .slideshow img, .article .fadein1 img { position: absolute !important; top: 0 !important; left: 0 !important; width: 100%; height: auto; }
	.article .slideshow img:first-child, .article .fadein1 img:first-child { position: relative !important; }

	/* Tables become stacked blocks */
	.article table, .article tbody, .article tr, .article td, .article th { display: block; }
	.article td, .article th { padding: 8px 0 !important; text-align: left; }
	.article tr:has(> td.proc) { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

	/* Media */
	.article img, .article object, .article embed, .article iframe, .article video { max-width: 100% !important; height: auto; }
	.article iframe { width: 100% !important; aspect-ratio: 16 / 9; }
	.article img { display: inline-block; }

	/* ---------- Typography for small screens ---------- */
	.article h1, .article .s1 h1, .article .segment_1 h1 { font-size: 32px !important; line-height: 1.15 !important; padding: 0 !important; margin-top: 0 !important; margin-bottom: 14px !important; text-align: left; }
	.article h1 em { font-size: 17px !important; }
	.article h2, .left h2, .right h2 { font-size: 22px !important; line-height: 1.25 !important; margin-top: 8px !important; margin-bottom: 12px !important; text-align: left; }
	.article h3 { font-size: 17px !important; line-height: 1.3 !important; }
	.article p, .article li, .article td { font-size: 15px !important; line-height: 1.6 !important; text-align: left; }
	.article .subtitle { text-align: left !important; font-size: 17px !important; line-height: 1.45 !important; padding: 0 !important; margin-bottom: 18px !important; }
	.article p a, .article li a { font-size: inherit !important; }
	.article td.proc li { margin-bottom: 0 !important; padding-top: 5px !important; padding-bottom: 5px !important; }
	.article a.more, .article a.goto, .article a.return { display: inline-block; padding-top: 6px; padding-bottom: 6px; }

	/* ---------- Background photographs promoted to inline banners (mobile.js) ---------- */
	.mf-promoted { background-image: none !important; }
	.article .mf-cover, .article > .mf-cover { max-width: none !important;
		background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important;
		margin-left: -18px !important; margin-right: -18px !important;
		padding: 32px 18px 24px !important;
	}
	.article .mf-cover div { background-image: none; }
	.article div.mf-banner { width: var(--mf-w, 100%) !important; }
	.mf-banner {
		display: block; margin: 0 auto 20px !important; background-repeat: no-repeat;
		border-radius: 2px; max-width: 100%;
	}

	/* ---------- Procedure pages: icon navigation ---------- */
	/* Row of section tiles that sits across the top of each procedure page */
	.article .navBlocks {
		position: relative !important; top: auto !important; display: flex; flex-wrap: nowrap;
		overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
		margin: 0 -18px !important; padding: 0 !important; border-bottom: 1px solid #e0e0e0;
		scrollbar-width: none;
	}
	.article .navBlocks::-webkit-scrollbar { display: none; }
	.article .navBlocks a { float: none; flex: 0 0 auto; scroll-snap-align: start; }
	.article > .navBlocks + div { border-top: 0; }

	/* Grid of image tiles on procedure home pages */
	.article .topNavigation {
		display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
		margin: 26px 0 6px !important;
	}
	.article .topNavigation a { float: none; margin: 0 !important; }
	.article .topNavigation a.clear { clear: none; }

	/* Previous / next page links */
	.article .pageNavigation { height: auto; padding: 10px 0 14px !important; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin: 0 -18px; }
	.article .pageNavigation a { float: none !important; }

	/* Recovery summary icons */
	.article .summary { margin-top: 20px !important; display: flex; flex-wrap: wrap; gap: 0 16px; }
	.summary p { width: auto !important; min-width: 135px; }

	/* ---------- "Questions? Just ask." strip ---------- */
	.ask_a_question .ask { box-sizing: border-box; }
	.article .ask_a_question { margin: 0 -18px !important; }
	.ask_a_question .ask { padding: 14px 16px 2px !important; }
	.ask_a_question .ask p { font-size: 14px !important; line-height: 1.6 !important; text-align: center; }
	.ask_a_question .ask p img { display: block; margin: 0 auto 4px; padding: 0; }
	.ask_a_question .ask a { display: inline-block; padding: 4px 0; }

	/* ---------- Galleries ---------- */
	.case, .wide, .normal, table.list_normal { width: auto !important; padding-left: 0 !important; padding-right: 0 !important; }
	.case { display: flex; flex-wrap: wrap; gap: 8px; }
	.case .cell { flex: 1 1 140px; height: auto !important; }
	table.list_normal td.cell_margin { width: 44px !important; min-height: 44px; padding: 12px 0 !important; text-align: center; }
	table.list_normal td.cell_photo img { padding: 0 !important; margin: 4px 0; }
	.article td.cell_photo a { display: block; margin: 0 0 10px; }
	.article td.cell_photo img.mf-large { display: block; width: 100%; height: auto; border-radius: 2px; }

	/* ---------- Video blocks ---------- */
	div.video a { float: none; margin: 16px auto; }

	/* ---------- Directory (site map above the footer) ---------- */
	.directory { padding: 12px 8px !important; }
	.directory_column { width: calc(50% - 20px) !important; margin: 10px !important; }
	.directory_column:nth-child(odd) { clear: left; }
	.directory_column p { font-size: 13px; }
	.directory_column a { height: auto; padding: 5px 0; font-size: 14px; line-height: 1.35; }

	/* ---------- Footer ---------- */
	.footer p { margin: 12px 16px; font-size: 12px; }
	.footer a { padding: 0 2px; display: inline-block; }

	/* Forms that may appear in page content */
	.article input[type="text"], .article input[type="email"], .article input[type="tel"], .article textarea, .article select {
		width: 100% !important; font-size: 16px !important; position: static !important;
	}
}

/* Phones: slightly tighter */
@media screen and (max-width: 480px) {
	.mf-call { font-size: 14px; padding: 0 10px; }
	.article h1, .article .s1 h1, .article .segment_1 h1 { font-size: 28px !important; }
	.directory_column { width: calc(50% - 16px) !important; margin: 8px !important; }
}

/* Tablets: keep a comfortable reading width */
@media screen and (min-width: 600px) and (max-width: 979px) {
	.section { max-width: 760px; margin-left: auto; margin-right: auto; }
	.primary_navigation { max-width: 760px; margin-left: auto !important; margin-right: auto !important; }
}