/* === RESPONSIVE OVERRIDES === v10 ===
 * Layered on top of styles.css, homepage.css, internal.css, nivo-slider.css.
 * Below ~960px the fixed-width desktop layout collapses to a fluid single
 * column. Original desktop CSS is untouched.
 */

/* --- Base: utilities used at all widths --- */
img {
	max-width: 100%;
	height: auto;
}

/* Hamburger button (hidden on desktop, shown below). The icon is an SVG
 * with three paths whose stroke-dasharray + stroke-dashoffset values
 * transition between the hamburger and X states. Technique adapted from
 * Mikael Ainalem's CodePen. */
#mobileNavToggle {
	display: none;
	background: none;
	border: 0;
	padding: 0;
	width: 44px;
	height: 44px;
	cursor: pointer;
	font: inherit;
	color: #093e65;
	line-height: 0;
}
#mobileNavToggle .hamburger .line {
	fill: none;
	stroke: currentColor;
	stroke-width: 5.5;
	stroke-linecap: round;
	-webkit-transition: stroke-dasharray 400ms cubic-bezier(0.4, 0, 0.2, 1),
	                    stroke-dashoffset 400ms cubic-bezier(0.4, 0, 0.2, 1);
	        transition: stroke-dasharray 400ms cubic-bezier(0.4, 0, 0.2, 1),
	                    stroke-dashoffset 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
#mobileNavToggle .hamburger .line1,
#mobileNavToggle .hamburger .line3 {
	stroke-dasharray: 60 207;
	stroke-dashoffset: 0;
}
#mobileNavToggle .hamburger .line2 {
	stroke-dasharray: 60 60;
	stroke-dashoffset: 0;
}
#mobileNavToggle .label {
	display: none;
}

/* Open state — bars 1 and 3 slide along their paths to draw the diagonals,
 * line 2 becomes invisible by dashing its visible portion to nothing. Keyed
 * off aria-expanded on the button itself since the button lives in the
 * header, not inside #navRow where .nav-open is toggled. */
#mobileNavToggle[aria-expanded="true"] .hamburger .line1,
#mobileNavToggle[aria-expanded="true"] .hamburger .line3 {
	stroke-dasharray: 90 207;
	stroke-dashoffset: -134;
}
#mobileNavToggle[aria-expanded="true"] .hamburger .line2 {
	stroke-dasharray: 1 60;
	stroke-dashoffset: -30;
}

/* Phone link inside header: keep visual identical to the original span */
#siteHeader .tel a.value {
	color: inherit;
	text-decoration: none;
}

/* === TABLET / MOBILE: <= 960px === */
@media (max-width: 960px) {

	*, *:before, *:after {
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		        box-sizing: border-box;
	}

	/* Containers — make everything fluid */
	.centreColumn,
	#siteMap,
	#copyrightRunner,
	#navRow,
	#horizontalNav {
		width: auto;
		max-width: 100%;
		padding-left: 16px;
		padding-right: 16px;
	}

	/* Stop overflow:hidden from clipping content that now wraps */
	.centreColumn {
		overflow: visible;
		padding: 0;
	}

	body {
		/* Original tiled bg can stay; ensure no horizontal scroll */
		overflow-x: hidden;
	}

	/* ===== HEADER ===== */
	#siteHeader {
		height: auto;
		padding: 14px 64px 14px 16px;
		text-align: left;
	}
	#siteHeader h1,
	#siteHeader h2,
	#siteHeader .tel {
		position: static;
		width: auto;
		height: auto;
		bottom: auto;
		left: auto;
		right: auto;
		text-align: left;
	}
	#siteHeader h1,
	#siteHeader h2 {
		display: block;
	}
	#siteHeader .tel {
		display: inline-block;
		vertical-align: middle;
		margin-right: 12px;
	}
	#siteHeader h1 {
		font-size: 32px;
		line-height: 1.1;
		margin-bottom: 4px;
	}
	#siteHeader h2 {
		font-size: 13px;
		line-height: 1.3;
		margin-bottom: 4px;
	}
	#siteHeader .tel {
		font-size: 20px;
	}
	#siteHeader .tel .value {
		display: inline-block;
		vertical-align: middle;
		padding-left: 30px;
		background: none;
		position: relative;
	}
	#siteHeader .tel .value:before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		width: 24px;
		height: 16px;
		margin-top: -8px;
		background: url(../../images/icon_sprite.png) 3px 4px no-repeat;
	}
	#bookOnlineHeader {
		position: static;
		display: inline-block;
		vertical-align: middle;
		margin: 8px 0 0;
		padding: 8px 18px;
	}

	/* ===== NAV ===== */
	#mobileNavToggle {
		display: block;
		position: absolute;
		bottom: -20px;
		right: 10px;
		-webkit-transform: translateY(-50%);
		    -ms-transform: translateY(-50%);
		        transform: translateY(-50%);
	}
	#navRow {
		margin: 0 auto;
		overflow: visible;
		position: relative;
	}
	#horizontalNav {
		display: none;
		float: none;
		width: 100%;
		margin: 0;
	}
	#horizontalNav li {
		float: none;
		display: block;
		padding: 12px 0;
		border-right: 0;
		border-bottom: 1px solid #eaeaea;
		text-align: center;
	}
	#horizontalNav li:first-child {
		padding-left: 0;
	}
	#horizontalNav li:last-child {
		border-bottom: 0;
	}
	#horizontalNav .navHeader {
		font-size: 17px;
	}
	#horizontalNav .navSub {
		font-size: 14px;
	}
	#navEffect {
		display: none !important;
	}
	#iconLinks {
		margin: 8px 0 0;
		text-align: center;
		display: none; /* contact + home already reachable via nav / footer */
	}
	#iconLinks a {
		float: none;
		display: inline-block;
		margin: 0 12px;
	}

	/* ===== HOMEPAGE: section padding =====
	 * Internal pages get their side padding via #internalRight. The home
	 * page wraps content directly inside .centreColumn so add equivalent
	 * padding to each home section. The carousel stays edge-to-edge as a
	 * hero. #middleMenu gets its own padding in the section below. */
	#qualifications,
	.homePageMiddle {
		padding-left: 16px;
		padding-right: 16px;
	}

	/* ===== HOMEPAGE: qualifications ===== */
	#qualificationHeadings {
		float: none;
		width: auto;
		border-right: 0;
		margin: 16px 0;
	}
	#qualifications h1 {
		margin: 7px 0;
	}
	#findOutMore {
		float: none;
		margin: 8px 0 16px;
	}

	/* ===== HOMEPAGE: middle menu (3-up panels) ===== */
	#middleMenu {
		background: transparent;
		padding: 0 16px;
	}
	#middleMenu .panel,
	#middleMenu .lastPanel {
		float: none;
		width: 100%;
		min-height: 90px;
		height: auto;
		margin: 0 0 12px 0;
		background-color: #0c5082;
		background-image: none;
		border-radius: 6px;
		padding: 16px 16px 16px 75px;
		position: relative;
	}
	.panel .message {
		position: static;
		width: auto;
	}
	.panel .icon {
		left: 16px;
	}
	#middleMenu .panel,
	#sidebar .panel {
		padding-left: 80px;
	}
	.panel .effect {
		display: none !important;
	}

	/* ===== HOMEPAGE: conditions + about ===== */
	#conditions,
	#conditionsHeader,
	#conditionsList {
		display:none;
	}
	#aboutSurgery {
		margin: 0;
		padding-bottom: 12px;
	}

	/* ===== HOMEPAGE: carousel =====
	   On mobile we bypass Nivo entirely (it writes the first image's
	   natural pixel dimensions inline and breaks responsive sizing). The
	   JS in footer.php runs a simple cross-fade cycle instead, and these
	   rules wire up the stacking. The CSS must use !important to win
	   against any inline styles browser-side. */
	#carouselWrapper {
		background: none;
	}
	#carousel,
	#carousel.nivoSlider {
		width: 100% !important;
		max-width: 942px;
		aspect-ratio: 942 / 343;
		height: auto !important;
		margin: 0px auto;
		position: relative;
	}
	#carousel img,
	#carousel.nivoSlider img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: auto;
	}
	.nivo-prevNav,
	.nivo-nextNav {
		display: none !important;
	}

	/* ===== INTERNAL PAGES: sidebar + right column =====
	 * On mobile the sidebar collapses to just its header; the imagery,
	 * blurb and refer/appointment panels are redundant with the rest of
	 * the page so #sidebarContent is hidden. */
	#sidebar {
		width: 100%;
		float: none;
		margin-bottom: 20px;
	}
	#sidebarContent {
		display: none;
	}
	#sidebarHeader {
		width: 100%;
		height: auto;
		margin: 0;
		padding-bottom: 14px;
		border-radius: 0;
	}
	#sidebarHeader h2,
	#sidebarHeader h3 {
		height: auto;
		padding-left: 18px
	}
	#internalRight {
		margin-left: 0;
		padding: 0 16px 8px 16px;
	}
	#internalRight h1 {
		font-size: 22px;
	}
	.internalCopy {
		width: auto;
	}

	/* ===== INTERNAL: blue right info pane (locations etc.) ===== */
	.blueRight {
		float: none;
		width: auto;
		margin-left: 0;
		margin-bottom: 20px;
	}
	.mapRight {
		float: none;
		margin-left: 0;
		margin-bottom: 20px;
	}
	.mapCopy p {
		margin-right: 0;
	}

	/* ===== PATIENT / REFERRAL panels ===== */
	.bluePanel,
	#surgeryList,
	#fastFootFactList {
		width: auto;
		max-width: 100%;
	}
	#surgeryList ul,
	#fastFootFactList ul {
		float: none;
		width: auto;
		margin: 0;
	}

	/* ===== CONTACT FORM ===== */
	#formContainer {
		overflow: visible;
	}
	#left_contactInputs,
	#right_contactInputs {
		float: none;
		width: 100%;
		margin: 0;
	}
	#formContainer .inputWrapper input,
	#formContainer .inputWrapper textarea,
	#formContainer .filled input,
	#formContainer .filled textarea {
		width: 100%;
		max-width: 100%;
	}
	#formContainer .inputWrapper textarea {
		height: 160px;
	}
	#sendEnquiry {
		float: none;
		width: 100%;
		max-width: 280px;
		display: block;
		margin: 16px auto 0;
		text-indent: 0;
		background: #0c5082;
		color: #fff;
		font-family: "WhitneyBlackSCRegular", Arial, sans-serif;
		font-size: 16px;
		text-transform: uppercase;
		height: 46px;
		line-height: 46px;
		border-radius: 4px;
	}
	#sendEnquiry:hover,
	#sendEnquiry:active {
		background: #093e65;
	}
	.referralForm textarea {
		width: 100%;
	}
	.smallLeft,
	.smallRight {
		width: 100%;
		float: none;
		margin-right: 0;
	}

	/* ===== CONTACT PAGE: sub-blocks ===== */
	#contactSubs .subItem {
		float: none;
		width: 100%;
		padding: 16px 0;
		border-bottom: 1px solid #d3ebf5;
	}
	#contactSubs .subItem:last-child {
		border-bottom: 0;
	}

	/* ===== CONDITIONS PAGE (interactive foot diagram) ===== */
	/* The hover-and-click foot diagram doesn't translate to touch.
	   Hide the diagram + tooltip and let users see the condition copy.   */
	#categoryList {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}
	#categoryList li {
		float: none;
		width: calc(50% - 5px);
		height: auto;
		margin: 0;
		padding: 12px;
	}
	#categoryList img {
		max-width: 80%;
	}
	#stepList,
	#footViews,
	#conditionTooltip,
	#conditionHover {
		display: none !important;
	}
	#conditionInfo .condition {
		display: block !important;
		padding: 16px 0;
		border-bottom: 1px solid #e2e2e2;
	}
	#conditionInfo .closeCondition {
		display: none;
	}

	/* ===== SITEMAP ===== */
	#siteMap {
		padding: 16px;
	}
	#siteMap .column {
		float: none;
		width: 100%;
		height: auto;
		margin-bottom: 16px;
	}
	#siteMap .columnHeader {
		width: 100%;
		background-repeat: no-repeat;
	}
	#siteMap h4 {
		margin-left: 0;
		padding-left: 63px;
		padding-right: 16px;
	}
	.siteMapLeftList,
	.siteMapRightList {
		position: static;
		margin: 8px 0 0 0;
		padding-left: 50px;
	}

	/* ===== FOOTER ===== */
	#footer {
		padding: 20px 16px;
	}
	#infoContainer {
		padding: 0;
	}
	#contactFooter,
	#consultingFooter {
		float: none;
		width: 100%;
		padding-left: 0;
		margin-left: 0;
		border-right: 0;
		margin-bottom: 20px;
	}
	#footer .footerColumn {
		float: none;
		margin: 0 0 16px 0;
		width: 100%;
	}
	#copyrightRunner {
		width: auto;
	}
	#copyrightInfo {
		margin-right: 0;
		text-align: center;
	}

	/* ===== INTERNAL FOOTER (prev/next) ===== */
	#previousPage,
	#nextPage {
		width: 50%;
	}
	#previousPage {
		padding-right: 8px;
	}
	#nextPage {
		padding-left: 8px;
	}

	/* ===== POPUP BANNER ===== */
	#popupBanner {
		padding: 12px 0;
	}
	#popupBanner h1 {
		font-size: 22px;
	}
}

/* === PHONE: <= 600px === */
@media (max-width: 600px) {
	#siteHeader h1 {
		font-size: 32px;
	}
	#siteHeader h2 {
		font-size: 12px;
	}
	#siteHeader .tel {
		font-size: 20px;
	}
	#conditionsList ul li {
		float: none;
		width: 100%;
	}
	#categoryList li {
		width: 100%;
	}
	#horizontalNav .navHeader {
		font-size: 16px;
	}
	#horizontalNav .navSub {
		font-size: 13px;
	}
	#internalRight h1 {
		font-size: 20px;
	}
	#contactSubs h3,
	.blueRight h4,
	.bluePanel h2 {
		font-size: 20px;
	}
}