/*
 * Header: charcoal phone/email/social utility bar + compact white main
 * row (logo, nav, "Appointment" CTA). The live header markup is
 * .main-header.style-two (not .style-one) — rules are written against
 * both so nothing silently fails to match again if the theme option
 * ever switches variants.
 */

.main-header .header-top,
.main-header.style-two .header-top {
	background: var(--nji-charcoal);
	padding: 10px 24px;
}

.main-header .header-top .top-inner,
.main-header.style-two .header-top .top-inner {
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.main-header .header-top .top-left,
.main-header.style-two .header-top .top-left {
	display: flex;
	align-items: center;
	float: none;
}

.main-header .header-top .top-left ul,
.main-header.style-two .header-top .top-left ul,
.main-header .header-top .top-right .social-links,
.main-header.style-two .header-top .top-right .social-links,
.main-header .header-top ul,
.main-header.style-two .header-top ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-header .header-top .top-left ul,
.main-header.style-two .header-top .top-left ul {
	display: flex;
	align-items: center;
	gap: 24px;
}

.main-header .header-top .top-left ul li,
.main-header.style-two .header-top .top-left ul li {
	display: flex;
	align-items: center;
	margin-right: 0;
	padding-right: 24px;
	border-right: 1px solid rgba(255, 255, 255, 0.22);
}

.main-header .header-top .top-left ul li:last-child,
.main-header.style-two .header-top .top-left ul li:last-child {
	padding-right: 0;
	border-right: none;
}

.main-header .header-top .top-left ul li:before,
.main-header.style-two .header-top .top-left ul li:before {
	display: none;
}

.main-header .header-top .top-left ul li i {
	margin-right: 10px;
	font-size: 15px;
}

.main-header .header-top .top-left ul li,
.main-header .header-top .top-left ul li a {
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: 0.2px;
}

.main-header .header-top .top-right,
.main-header.style-two .header-top .top-right {
	display: flex;
	align-items: center;
	gap: 20px;
	float: none;
}

.main-header .header-top .top-right .search-box-outer,
.main-header.style-two .header-top .top-right .search-box-outer {
	display: flex;
	align-items: center;
	margin-right: 0;
	padding-right: 20px;
	border-right: 1px solid rgba(255, 255, 255, 0.22);
}

.main-header .header-top .top-right .search-box-outer:before,
.main-header.style-two .header-top .top-right .search-box-outer:before {
	display: none;
}

.main-header .header-top .top-right .search-box-outer .search-toggler {
	font-size: 15px;
}

.main-header .header-top .top-right .social-links,
.main-header.style-two .header-top .top-right .social-links {
	display: flex;
	align-items: center;
	gap: 18px;
}

.main-header .header-top .top-right .social-links li a {
	font-size: 14px;
	transition: color var(--nji-transition), transform var(--nji-transition);
}

.main-header .header-top .top-right .social-links li a:hover {
	transform: translateY(-1px);
}

.main-header .header-top .top-right .social-links li,
.main-header.style-two .header-top .top-right .social-links li {
	display: flex;
	align-items: center;
	margin-right: 0;
}

.main-header .header-top .top-left ul li i,
.main-header .header-top .top-right .social-links li a,
.main-header .header-top .top-right .search-box-outer .search-toggler,
.main-header.style-two .header-top .top-right .social-links li a,
.main-header.style-two .header-top .top-right .search-box-outer .search-toggler {
	color: #fff;
}

.main-header .header-top .top-right .social-links li a:hover,
.main-header .header-top .top-right .search-box-outer .search-toggler:hover,
.main-header.style-two .header-top .top-right .social-links li a:hover,
.main-header.style-two .header-top .top-right .search-box-outer .search-toggler:hover {
	color: var(--nji-red-light);
}

/* ---------- Compact single-row header shell ---------- */

.main-header.style-two .header-upper,
.main-header .header-upper {
	background: #fff;
}

.main-header.style-two .header-upper .auto-container,
.main-header .header-upper .auto-container {
	padding-left: 40px;
	padding-right: 40px;
}

.main-header.style-two .outer-box,
.main-header .header-upper .outer-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 86px;
	border-bottom: 1px solid var(--nji-grey-100);
}

/* Logo: the source file is a compact square-ish badge (Canada flag +
   wordmark), so it's sized by height to stay proportional and fit the
   compact header without distortion — forcing a wide fixed width would
   stretch it, since the art itself isn't a wide horizontal lockup. */
.main-header.style-two .logo-box .logo,
.main-header .logo-box .logo {
	padding: 0;
	display: flex;
	align-items: center;
}

.main-header.style-two .logo-box .logo img,
.main-header .logo-box .logo img {
	height: 58px;
	width: auto;
	max-width: none;
}

/* Nav + CTA cluster sits together on the right; kill the parent theme's
   huge per-item vertical padding (43px/41px) that was driving the whole
   header's excess height, and center everything via the flex parent
   instead. */
.main-header.style-two .menu-area,
.main-header .menu-area {
	display: flex;
	align-items: center;
}

.main-header.style-two .main-menu .navigation > li {
	padding: 0;
	margin: 0 18px;
}

.main-menu .navigation > li > a,
.main-menu .navigation > li > a:hover,
.main-menu .navigation > li > a:focus {
	color: var(--nji-charcoal);
	font-family: var(--nji-font-heading);
	font-size: 16px;
	font-weight: 600;
	padding: 6px 0;
	position: relative;
	text-decoration: none !important;
}

.main-header.style-two .main-menu .navigation > li > a {
	color: var(--nji-charcoal);
}

.main-menu .navigation > li:hover > a,
.main-menu .navigation > li.current > a {
	color: var(--nji-red);
}

/* Red underline on hover and on the active/current page's menu item */
.main-menu .navigation > li > a:after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 100%;
	height: 2px;
	background: var(--nji-red);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--nji-transition);
}

.main-menu .navigation > li:hover > a:after,
.main-menu .navigation > li.current > a:after,
.main-menu .navigation > li.current-menu-item > a:after {
	transform: scaleX(1);
}

.main-header.style-two .menu-right-content {
	margin: 0 0 0 32px;
}

.main-header.style-two .menu-right-content .theme-btn-two,
.main-header .menu-right-content .theme-btn-two {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 160px;
	height: 50px;
	padding: 0 26px;
	border-radius: var(--nji-radius-sm);
}

/* Book Appointment CTA: animated gradient fill + a moving shimmer sweep */
.main-header .theme-btn-two,
.main-header.style-two .theme-btn-two {
	background: linear-gradient(120deg, var(--nji-red-light) 0%, var(--nji-red) 35%, var(--nji-red-dark) 70%, var(--nji-red) 100%);
	background-size: 300% 300%;
	animation: njiGradientShift 3s ease infinite;
	position: relative;
	overflow: hidden;
	border: none;
	z-index: 1;
}

.main-header .theme-btn-two:before {
	content: '';
	position: absolute;
	top: 0;
	left: -60%;
	width: 40%;
	height: 100%;
	background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.45) 50%, transparent 100%);
	transform: skewX(-20deg);
	animation: njiShimmerSweep 2.6s ease-in-out infinite;
	z-index: 2;
	pointer-events: none;
}

.main-header .theme-btn-two span,
.main-header .theme-btn-two i {
	position: relative;
	z-index: 3;
}

.main-header .theme-btn-two:after {
	display: none;
}

.main-header .theme-btn-two:hover,
.main-header.style-two .theme-btn-two:hover {
	color: #fff;
	box-shadow: 0 10px 26px rgba(236, 28, 36, 0.5);
	transform: translateY(-2px);
}

@keyframes njiGradientShift {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

@keyframes njiShimmerSweep {
	0% { left: -60%; }
	100% { left: 140%; }
}

/* Sticky header: white, not solid red. Reuses the same class names as
   the main header (it's a JS-cloned duplicate), so it inherits all the
   compact sizing rules above automatically. */
.sticky-header {
	background: #fff;
	box-shadow: 0 4px 24px rgba(28, 29, 32, 0.1);
}

.sticky-header .main-menu .navigation > li > a {
	color: var(--nji-charcoal) !important;
}

.sticky-header .main-menu .navigation > li:hover > a,
.sticky-header .main-menu .navigation > li.current > a {
	color: #fff !important;
}

/* Mobile nav toggler bars read as charcoal on the white nav row */
.mobile-nav-toggler .icon-bar {
	background: var(--nji-charcoal);
}

.mobile-menu .menu-backdrop {
	background: rgba(28, 29, 32, 0.85);
}

.mobile-menu .nav-logo {
	padding: 30px 0;
}

/* ---------- Responsive: tablet 70-80px / mobile 64-72px ---------- */

@media only screen and (max-width: 991px) {
	.main-header.style-two .outer-box,
	.main-header .header-upper .outer-box {
		min-height: 76px;
	}

	.main-header.style-two .header-upper .auto-container,
	.main-header .header-upper .auto-container {
		padding-left: 24px;
		padding-right: 24px;
	}

	.main-header.style-two .logo-box .logo img,
	.main-header .logo-box .logo img {
		height: 46px;
	}

	/* The parent theme's own toggler had a large fixed top-margin sized
	   for the old tall header; the flex-centered outer-box handles
	   vertical centering now, so that offset just needs zeroing out. */
	.menu-area .mobile-nav-toggler,
	.main-header.style-two .menu-area .mobile-nav-toggler {
		margin-top: 0;
		padding: 8px;
	}

	.main-header.style-two .menu-right-content {
		margin: 0 0 0 16px;
	}

	.main-header.style-two .menu-right-content .theme-btn-two,
	.main-header .menu-right-content .theme-btn-two {
		min-width: 0;
		height: 44px;
		padding: 0 18px;
		font-size: 14px;
	}
}

@media only screen and (max-width: 767px) {
	.main-header.style-two .outer-box,
	.main-header .header-upper .outer-box {
		min-height: 68px;
	}

	.main-header.style-two .header-upper .auto-container,
	.main-header .header-upper .auto-container {
		padding-left: 16px;
		padding-right: 16px;
	}

	.main-header.style-two .logo-box .logo,
	.main-header .logo-box .logo {
		display: flex;
		align-items: center;
	}

	.main-header.style-two .logo-box .logo img,
	.main-header .logo-box .logo img {
		height: 40px;
	}

	/* Toggler: a clean circular tap target instead of three bare bars
	   floating in space, matching the site's icon-badge language. */
	.mobile-nav-toggler {
		display: flex !important;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: var(--nji-grey-50);
		margin: 0 !important;
		padding: 0 !important;
	}

	.mobile-nav-toggler .icon-bar {
		width: 18px;
		height: 2px;
		border-radius: 1px;
	}

	/* Utility bar: the phone number and 4 social icons no longer fit on
	   one row at phone widths without wrapping awkwardly. Drop the bare
	   "Call us:" label text (a stray text node next to the icon, so it's
	   collapsed via font-size rather than a class) and hide the social
	   icons — they're secondary and already available in the footer —
	   leaving a single clean centered tap-to-call row. */
	.main-header .header-top,
	.main-header.style-two .header-top {
		padding: 8px 16px;
	}

	.main-header .header-top .top-inner,
	.main-header.style-two .header-top .top-inner {
		justify-content: center;
	}

	.main-header .header-top .top-left ul li,
	.main-header.style-two .header-top .top-left ul li {
		font-size: 0;
		border-right: none;
		padding-right: 0;
	}

	.main-header .header-top .top-left ul li i,
	.main-header .header-top .top-left ul li a {
		font-size: 13.5px;
	}

	.main-header .header-top .top-left ul li i {
		margin-right: 8px;
	}

	.main-header .header-top .top-right,
	.main-header.style-two .header-top .top-right {
		display: none;
	}
}