/* testosteroneinjections.com — phone layout (2026-10-29). Loaded after the theme styles; screens wider than 960px are not touched. */

/* ---- mobile menu (the theme switches to it at 960px); the sub-menu arrows exist only there */
#nav-wrap #nav .ti-subtoggle { display: none; }
@media only screen and (max-width: 960px) {
	#nav-wrap #nav .ti-subtoggle { display: block; }
	/* the logo block (z-index 100 in style.css) lay over the menu button (z-index 98): taps went to the logo link */
	#header #menu-icon { z-index: 1001; }
	#header.sm-rgt-mn .logo-wrap { z-index: 99; }
	/* sub-menus: opened with the arrow button added by ti-mobile.js; the item itself still opens its page */
	#nav-wrap #nav > li.ti-has-sub { position: relative; }
	#nav-wrap #nav > li.ti-has-sub > a { padding-right: 52px; }
	#nav-wrap #nav .ti-subtoggle { position: absolute; top: 0; right: 0; width: 48px; height: 44px; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; z-index: 2; }
	#nav-wrap #nav .ti-subtoggle:before { content: ""; position: absolute; top: 15px; left: 18px; width: 9px; height: 9px; border-right: 2px solid #777; border-bottom: 2px solid #777; transform: rotate(45deg); transition: transform .2s; }
	#nav-wrap #nav li.ti-open > .ti-subtoggle:before { top: 20px; transform: rotate(-135deg); }
	#nav-wrap #nav li.ti-open > ul { display: block !important; position: static !important; width: auto !important; margin: 0 0 6px !important; padding: 0 0 0 14px !important; box-shadow: none !important; border-top: 0 !important; background: transparent !important; visibility: visible !important; opacity: 1 !important; }
	#nav-wrap #nav li.ti-open > ul li a { padding-top: 9px; padding-bottom: 9px; font-size: 14px; }
}

/* ---- page layout on phones */
@media only screen and (max-width: 767px) {
	/* the theme fixes .container at 300px (<480) / 420px (480-767): use the whole screen width instead */
	.container { width: auto !important; max-width: 100% !important; padding-left: 15px; padding-right: 15px; }
	.container .container { padding-left: 0; padding-right: 0; }
	/* headings */
	h1, .h1 { font-size: 30px !important; line-height: 1.2 !important; letter-spacing: 0 !important; word-wrap: break-word; }
	h2 { font-size: 24px; line-height: 1.25; }
	h3 { font-size: 20px; line-height: 1.3; }
	/* breadcrumbs in one line (nested inline-block spans stacked as steps) */
	.breadcrumbs-w .container > span span { display: inline !important; width: auto !important; }
	.breadcrumbs-w .container > span > span > a { display: inline-block; }
	/* quotes */
	blockquote { padding-left: 44px !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
	blockquote em, blockquote p { padding-right: 0 !important; }
	/* text next to a floated image became a 60-130px column: the image goes above the text */
	img.alignleft, img.alignright, .wp-caption.alignleft, .wp-caption.alignright { float: none !important; display: block; margin: 0 auto 15px !important; }
	/* media never wider than the screen */
	img, iframe, video, embed, object { max-width: 100%; }
	img { height: auto; }
	table { max-width: 100%; }
	/* forms */
	.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 textarea, .wpcf7 select { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
	/* home slider: its navigation buttons lay over the "Welcome" heading */
	.ls-bottom-nav-wrapper, .ls-nav-prev, .ls-nav-next { display: none !important; }
	/* blog timeline: one full-width column */
	#tline-content { width: auto !important; margin-left: 0 !important; margin-right: 0 !important; background-image: none !important; }
	#tline-content .tline-box { float: none !important; width: auto !important; margin: 0 0 25px !important; }
	#tline-content .tline-row-l, #tline-content .tline-row-r { display: none !important; }
	#tline-content .tline-box img { width: 100% !important; height: auto !important; }
	.tline-topdate { margin-left: auto !important; margin-right: auto !important; }
}