/*
 * Midtown Dental responsive navigation refresh
 * Draft-only until explicitly published.
 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@600&display=swap');

/* Retire legacy floating/sticky contact controls site-wide. */
.calling-tab,
.calling-tab-sticky-button,
.sticky-button,
.sticky-button-referral {
	display: none !important;
}

/* Desktop utility/header bar: reduce dead vertical space while preserving
 * logo and contact-content scale.
 */
@media (min-width: 1025px) {
	#header-padding {
		padding-top: 0 !important;
		padding-bottom: 2px !important;
	}

	#header-width {
		width: 100% !important;
		max-width: none !important;
	}

	#header-padding #header-width > .sc_content_container > .vc_row {
		align-items: flex-start !important;
	}

	#header-padding #header-width > .sc_content_container > .vc_row > .wpb_column:first-child > .vc_column-inner {
		padding-left: 0 !important;
		padding-top: 0 !important;
	}

	#header-padding #main-logo,
	#header-padding #main-logo img.logo_image {
		margin-top: 0 !important;
		margin-left: 0 !important;
	}

	#header-color {
		align-self: center !important;
		padding-top: 0 !important;
	}

	#header-color .sc_item_button .sc_button {
		padding-top: 0.63em !important;
		padding-bottom: 0.63em !important;
		padding-left: 1.27em !important;
		padding-right: 1.27em !important;
		margin-right: 24px !important;
		font-size: 1.04em !important;
	}
}

/* Desktop: keep the live theme's native layout behavior.
 * Only apply the new visual treatment.
 */
@media (min-width: 768px) {
	#main-header-menu .sc_content_container > .vc_row > .wpb_column:first-child {
		width: 100% !important;
	}

	#main-header-menu .sc_content_container > .vc_row > .wpb_column:last-child {
		display: none !important;
	}

	#main-header-menu .sc_layouts_menu_nav > li > a {
		padding-left: 0.95em !important;
		padding-right: 0.95em !important;
	}

	#main-header-menu #menu-item-1590,
	#main-header-menu #menu-item-1590 > a,
	#main-header-menu #menu-item-1494,
	#main-header-menu #menu-item-1494 > a,
	#main-header-menu #menu-item-1784,
	#main-header-menu #menu-item-1784 > a,
	#main-header-menu #menu-item-4224,
	#main-header-menu #menu-item-4224 > a {
		background: #477fb8 !important;
	}

	#main-header-menu #menu-item-1590 > a,
	#main-header-menu #menu-item-1494 > a,
	#main-header-menu #menu-item-1784 > a,
	#main-header-menu #menu-item-4224 > a {
		box-shadow: 0 -13px 0 #477fb8, 0 10px 0 #477fb8 !important;
	}

	#main-header-menu #menu-item-1590 > a:hover,
	#main-header-menu #menu-item-1494 > a:hover,
	#main-header-menu #menu-item-1784 > a:hover,
	#main-header-menu #menu-item-4224 > a:hover {
		background: #3f73aa !important;
		box-shadow: 0 -13px 0 #3f73aa, 0 10px 0 #3f73aa !important;
	}

	#main-header-menu #menu-item-1492,
	#main-header-menu #menu-item-1492 > a {
		background: #e95b5d !important;
		color: #fff !important;
		border-radius: 0 !important;
	}

	#main-header-menu #menu-item-1492 > a {
		box-shadow: 0 -13px 0 #e95b5d, 0 10px 0 #e95b5d !important;
	}

	#main-header-menu #menu-item-1492 > a:hover,
	#main-header-menu #menu-item-1492.current-menu-item > a {
		background: #d94f52 !important;
		box-shadow: 0 -13px 0 #d94f52, 0 10px 0 #d94f52 !important;
		color: #fff !important;
	}
}

/* Wide desktop: expand only the intrinsic-width TRX menu chain.
 * Item widths are distributed deterministically in midtown-nav-refresh.js.
 */
@media (min-width: 1200px) {
	#main-header-menu .sc_layouts_item,
	#main-header-menu .sc_layouts_menu,
	#main-header-menu .sc_layouts_menu_nav {
		width: 100% !important;
		max-width: none !important;
	}

	#main-header-menu .sc_layouts_item,
	#main-header-menu .sc_layouts_menu {
		display: block !important;
	}

	#main-header-menu .sc_layouts_menu_nav {
		margin-left: 0 !important;
	}

	#main-header-menu .sc_layouts_menu_nav > li:not(.menu-collapse) > a {
		white-space: nowrap !important;
		text-align: center !important;
		box-sizing: border-box !important;
	}
}

/* Wide-desktop sticky state: add the compact Midtown flower mark only
 * after the main navigation reaches the top of the viewport. The mark is
 * decorative and its reserved width is calculated from the actual nav height
 * so the 4x source remains proportional.
 */
@media (min-width: 1200px) {
	#main-header-menu.bf-nav-sticky {
		background-image: url("https://midtowndental.ca/wp-content/uploads/2026/10/Midtown-Dental-Sticky-Nav-Half-Flower.png") !important;
		background-repeat: no-repeat !important;
		background-position: 15px center !important;
		background-size: auto 100% !important;
	}

	#main-header-menu.bf-nav-sticky .sc_content {
		padding-left: var(--bf-sticky-flower-width, 0px) !important;
		box-sizing: border-box !important;
	}
}

/* Tablet / compact-desktop handoff: switch to the established mobile
 * header before ThemeREX enters its unstable overflow/collapse band.
 */
@media (max-width: 1024px) {
	#header-padding,
	#main-header-menu {
		display: none !important;
	}

	.mobile-header {
		display: flex !important;
	}

	/* WPBakery hides these columns in its md range; keep the established
	 * mobile header visible through the earlier 1024px handoff.
	 */
	.mobile-header > .wpb_column {
		display: block !important;
	}
}

/* Mobile header + bottom CTA bar. */
@media (max-width: 1024px) {
	body.bf-nav-refresh {
		padding-top: var(--bf-mobile-header-height, 54px);
		padding-bottom: calc(54px + env(safe-area-inset-bottom, 0px));
	}

	.mobile-header {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		height: 54px !important;
		min-height: 54px !important;
		z-index: 100001 !important;
		margin: 0 !important;
		background: #fff !important;
		border: 0 !important;
		box-shadow: none !important;
	}

	.mobile-header > .wpb_column {
		height: 54px !important;
		min-height: 54px !important;
	}

	.mobile-header > .wpb_column > .vc_column-inner,
	.mobile-header > .wpb_column > .vc_column-inner > .wpb_wrapper {
		height: 54px !important;
		min-height: 54px !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		box-sizing: border-box;
	}

	#mobile-logo {
		width: calc(100% - 44px) !important;
		margin-left: 0 !important;
		padding-left: 0 !important;
	}

	#mobile-logo > .vc_column-inner {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	#mobile-logo > .vc_column-inner > .wpb_wrapper {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
	}

	#mobile-logo .sc_layouts_item {
		display: flex !important;
		align-items: center !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	#mobile-logo .sc_layouts_logo {
		display: flex !important;
		align-items: center !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	#mobile-logo .sc_layouts_logo img {
		display: block !important;
		width: auto !important;
		height: auto !important;
		max-height: 48px !important;
		margin: 0 !important;
	}

	.mobile-header > .wpb_column:last-child {
		position: absolute !important;
		top: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 44px !important;
		margin-left: 0 !important;
	}

	.mobile-header > .wpb_column:last-child > .vc_column-inner,
	.mobile-header > .wpb_column:last-child .wpb_wrapper,
	.mobile-header > .wpb_column:last-child .sc_layouts_item,
	.mobile-header > .wpb_column:last-child .sc_layouts_menu_mobile_button,
	.mobile-header > .wpb_column:last-child .sc_layouts_item_link {
		height: 54px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		margin: 0 !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	#midtown-mobile-cta-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: var(--bf-preview-banner-height, 0px);
		z-index: 100000;
		display: flex;
		align-items: stretch;
		height: calc(54px + env(safe-area-inset-bottom, 0px));
		padding-bottom: env(safe-area-inset-bottom, 0px);
		background: #BBDAF7;
		border-top: 0;
		box-sizing: border-box;
	}

	#midtown-mobile-cta-bar a {
		flex: 1 1 0;
		min-width: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 6px;
		border-right: 1px solid rgba(0, 0, 0, 0.30);
		color: #245D98;
		background: #BBDAF7;
		font-family: 'Noto Sans', sans-serif;
		font-size: 13px;
		font-weight: 600;
		line-height: 1.1;
		text-align: center;
		text-decoration: none;
		white-space: nowrap;
		box-sizing: border-box;
	}

	#midtown-mobile-cta-bar a:last-child {
		border-right: 0;
	}

	#midtown-mobile-cta-bar a.bf-mobile-cta-emergency {
		color: #fff;
			background: #DC5959;
	}

	#midtown-mobile-cta-bar a:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: -3px;
	}
}

@media (min-width: 1025px) {
	#midtown-mobile-cta-bar {
		display: none !important;
	}
}