/**
 * Site Header.
 *
 * @package DrSanhithaPurushotham
 */


/* ==================================================
   HEADER FOUNDATION
================================================== */

.doctor-header {
	position: sticky;
	top: 0;
	z-index: 9999;
	width: 100%;
	background: #07182f;
	transition:
		box-shadow 200ms ease,
		background-color 200ms ease;
}


.doctor-header.is-scrolled {
	box-shadow:
		0 12px 35px
		rgba(0, 8, 20, 0.32);
}


.doctor-header__main {
	position: relative;
	min-height: 102px;
	background:
		linear-gradient(
			105deg,
			#06172d 0%,
			#081b34 52%,
			#06172d 100%
		);
}


.doctor-header__container {
	position: relative;

	display: flex;

	width:
		min(
			calc(100% - 80px),
			1360px
		);

	min-height: 102px;

	margin-inline: auto;

	align-items: center;
	justify-content: space-between;

	gap: 32px;
}


/* ==================================================
   GOLD LINE
================================================== */

.doctor-header__gold-line {
	width: 100%;
	height: 6px;

	background:
		linear-gradient(
			90deg,
			#b48943 0%,
			#e1c178 45%,
			#c99e56 100%
		);
}


/* ==================================================
   WORDPRESS ADMIN BAR
================================================== */

.admin-bar .doctor-header {
	top: 32px;
}


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

	.admin-bar .doctor-header {
		top: 46px;
	}
}


/* ==================================================
   BRANDING
================================================== */

.doctor-header__branding {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
}


/* ==================================================
   LOGO
================================================== */

.doctor-header__logo {
	display: flex;

	width: 220px;
	height: 94px;

	flex: 0 0 220px;

	align-items: center;
	justify-content: flex-start;

	overflow: visible;
}


.doctor-header__logo .custom-logo-link {
	display: flex;

	width: 100%;
	height: 100%;

	align-items: center;
	justify-content: flex-start;

	overflow: visible;
}


.doctor-header__logo .custom-logo {
	display: block;

	width: 195px;
	max-width: none;

	height: auto;
	max-height: 90px;

	object-fit: contain;
	object-position: left center;

	transform: scale(1.08);
	transform-origin: left center;
}


.doctor-header__logo-fallback {
	color: #d5ae65;

	font-family:
		"Cormorant Garamond",
		Georgia,
		serif;

	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;

	text-decoration: none;
}


/* ==================================================
   DESKTOP NAVIGATION
================================================== */

.doctor-navigation {
	flex: 0 0 auto;
	margin-left: auto;
}


.doctor-navigation__menu {
	display: flex;

	margin: 0;
	padding: 0;

	align-items: center;

	gap:
		clamp(
			24px,
			2vw,
			38px
		);

	list-style: none;
}


.doctor-navigation__menu > li {
	margin: 0;
	padding: 0;
}


/* ==================================================
   STANDARD NAVIGATION LINKS
================================================== */

.doctor-navigation__menu > li > a,
.doctor-navigation__services-trigger > a {
	position: relative;

	display: inline-flex;

	min-height: 60px;

	padding:
		18px
		0;

	align-items: center;

	color: #f5f1ed;

	font-family:
		"Montserrat",
		Arial,
		Helvetica,
		sans-serif;

	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;

	white-space: nowrap;

	text-decoration: none;

	transition:
		color 200ms ease;
}


/* underline */

.doctor-navigation__menu > li > a::after,
.doctor-navigation__services-trigger > a::after {
	position: absolute;

	right: 0;
	bottom: 9px;
	left: 0;

	height: 2px;

	background: #d1aa61;

	content: "";

	transform: scaleX(0);
	transform-origin: right center;

	transition:
		transform 200ms ease;
}


.doctor-navigation__menu > li > a:hover,
.doctor-navigation__menu > li > a:focus-visible,
.doctor-navigation__services-trigger > a:hover,
.doctor-navigation__services-trigger > a:focus-visible,
.doctor-navigation__menu > .current-menu-item > a,
.doctor-navigation__menu > .current-menu-ancestor
.doctor-navigation__services-trigger > a {
	color: #dfbd78;
}


.doctor-navigation__menu > li > a:hover::after,
.doctor-navigation__menu > li > a:focus-visible::after,
.doctor-navigation__services-trigger > a:hover::after,
.doctor-navigation__services-trigger > a:focus-visible::after,
.doctor-navigation__menu > .current-menu-item > a::after,
.doctor-navigation__menu > .current-menu-ancestor
.doctor-navigation__services-trigger > a::after {
	transform: scaleX(1);
	transform-origin: left center;
}


/* ==================================================
   SERVICES MENU TRIGGER
================================================== */

.doctor-navigation__services-item {
	position: static;
}


.doctor-navigation__services-trigger {
	display: flex;

	min-height: 72px;

	align-items: center;

	gap: 5px;
}


.doctor-navigation__services-toggle {
	display: flex;

	width: 27px;
	height: 44px;

	margin-left: -3px;
	padding: 0;

	flex: 0 0 27px;

	align-items: center;
	justify-content: center;

	border: 0;

	background: transparent;

	color: #d1aa61;

	cursor: pointer;
}


.doctor-navigation__services-toggle svg {
	display: block;

	width: 15px;
	height: 15px;

	transition:
		transform 220ms ease;
}


.doctor-navigation__services-item:hover
.doctor-navigation__services-toggle svg,
.doctor-navigation__services-item:focus-within
.doctor-navigation__services-toggle svg,
.doctor-navigation__services-item.is-open
.doctor-navigation__services-toggle svg {
	transform: rotate(180deg);
}


/* ==================================================
   SERVICES MEGA MENU
================================================== */

.doctor-mega-menu {
	position: absolute;

	/*
	 * Slight overlap removes the hover dead-zone
	 * between Services and the mega menu.
	 */
	top: calc(100% - 3px);

	right: 0;
	left: 0;

	z-index: 1005;

	padding-top: 0;

	opacity: 0;
	visibility: hidden;

	pointer-events: none;

	transform:
		translateY(7px);

	transition:
		opacity 180ms ease,
		visibility 180ms ease,
		transform 220ms ease;
}


/*
 * Invisible hover bridge extending upward.
 */
.doctor-mega-menu::before {
	position: absolute;

	top: -32px;
	right: 0;
	left: 0;

	height: 35px;

	content: "";

	background: transparent;
}


/* open mega menu */

.doctor-navigation__services-item:hover
.doctor-mega-menu,
.doctor-navigation__services-item:focus-within
.doctor-mega-menu,
.doctor-navigation__services-item.is-open
.doctor-mega-menu {
	opacity: 1;
	visibility: visible;

	pointer-events: auto;

	transform: translateY(0);
}


/* ==================================================
   MEGA MENU INNER
================================================== */

.doctor-mega-menu__inner {
	overflow: hidden;

	border:
		1px solid
		rgba(208, 164, 82, 0.42);

	border-top:
		4px solid
		#c99a48;

	border-radius:
		0
		0
		20px
		20px;

	background:
		linear-gradient(
			145deg,
			#fffdf9 0%,
			#f8f1e8 100%
		);

	box-shadow:
		0
		26px
		65px
		rgba(0, 10, 24, 0.31);
}


/* ==================================================
   MEGA MENU HEADER
================================================== */

.doctor-mega-menu__heading {
	display: flex;

	padding:
		23px
		28px
		20px;

	align-items: flex-end;
	justify-content: space-between;

	gap: 24px;

	border-bottom:
		1px solid
		rgba(201, 148, 59, 0.20);
}


.doctor-mega-menu__eyebrow {
	display: block;

	margin-bottom: 5px;

	color: #008f98;

	font-family:
		"Montserrat",
		Arial,
		sans-serif;

	font-size: 10px;
	font-weight: 700;

	letter-spacing: 2px;

	text-transform: uppercase;
}


.doctor-mega-menu__heading h2 {
	margin: 0;

	color: #08213e;

	font-family:
		"Cormorant Garamond",
		Georgia,
		serif;

	font-size: 31px;
	font-weight: 700;
	line-height: 1.05;
}


/* ==================================================
   VIEW ALL SERVICES
================================================== */

.doctor-mega-menu__all {
	display: inline-flex;

	align-items: center;

	gap: 7px;

	color: #9f6d20;

	font-family:
		"Montserrat",
		Arial,
		sans-serif;

	font-size: 12px;
	font-weight: 700;

	text-decoration: none;
}


.doctor-mega-menu__all svg {
	width: 18px;
	height: 18px;

	transition:
		transform 200ms ease;
}


.doctor-mega-menu__all:hover svg,
.doctor-mega-menu__all:focus-visible svg {
	transform:
		translateX(3px);
}


/* ==================================================
   MEGA MENU GRID
================================================== */

.doctor-mega-menu__grid {
	display: grid;

	padding:
		20px
		24px
		24px;

	grid-template-columns:
		repeat(
			4,
			minmax(0, 1fr)
		);

	gap: 12px;
}


/* ==================================================
   SERVICE CARD
================================================== */

.doctor-mega-menu__service {
	min-width: 0;
}


.doctor-mega-menu__service > a {
	display: grid;

	min-height: 88px;

	padding: 9px;

	grid-template-columns:
		92px
		minmax(0, 1fr);

	gap: 13px;

	align-items: center;

	overflow: hidden;

	border:
		1px solid
		rgba(8, 33, 62, 0.08);

	border-radius: 12px;

	background:
		rgba(255, 255, 255, 0.74);

	color: #08213e;

	text-decoration: none;

	transition:
		border-color 220ms ease,
		background-color 220ms ease,
		box-shadow 220ms ease,
		transform 220ms ease;
}


.doctor-mega-menu__service > a:hover,
.doctor-mega-menu__service > a:focus-visible {
	border-color:
		rgba(0, 143, 152, 0.42);

	background: #ffffff;

	box-shadow:
		0
		9px
		22px
		rgba(13, 40, 54, 0.075);

	transform:
		translateY(-2px);
}


/* ==================================================
   MEGA MENU SERVICE IMAGE
================================================== */

.doctor-mega-menu__image {
	display: block;

	width: 92px;
	height: 68px;

	overflow: hidden;

	border-radius: 9px;

	background: #e7efed;
}


.doctor-mega-menu__image-file {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center;
}


.doctor-mega-menu__image-placeholder {
	display: flex;

	width: 100%;
	height: 100%;

	align-items: center;
	justify-content: center;

	background:
		linear-gradient(
			135deg,
			#e8f3f2,
			#f7efe3
		);

	color: #008f98;
}


.doctor-mega-menu__image-placeholder svg {
	width: 40px;
	height: 40px;
}


/* ==================================================
   SERVICE CARD COPY
================================================== */

.doctor-mega-menu__service-copy {
	display: flex;

	min-width: 0;

	align-items: center;
	justify-content: space-between;

	gap: 8px;
}


.doctor-mega-menu__service-copy strong {
	display: block;

	min-width: 0;

	color: #08213e;

	font-family:
		"Cormorant Garamond",
		Georgia,
		serif;

	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
}


/* ==================================================
   SERVICE CARD ARROW
================================================== */

.doctor-mega-menu__arrow {
	display: flex;

	width: 28px;
	height: 28px;

	flex: 0 0 28px;

	align-items: center;
	justify-content: center;

	border:
		1px solid
		rgba(201, 148, 59, 0.60);

	border-radius: 50%;

	color: #a97220;

	transition:
		background-color 220ms ease,
		border-color 220ms ease,
		color 220ms ease;
}


.doctor-mega-menu__arrow svg {
	width: 13px;
	height: 13px;
}


.doctor-mega-menu__service > a:hover
.doctor-mega-menu__arrow,
.doctor-mega-menu__service > a:focus-visible
.doctor-mega-menu__arrow {
	border-color: #008f98;

	background: #008f98;

	color: #ffffff;
}


/* ==================================================
   MEGA MENU FOOTER
================================================== */

.doctor-mega-menu__footer {
	display: flex;

	min-height: 54px;

	padding:
		10px
		28px;

	align-items: center;

	gap: 10px;

	border-top:
		1px solid
		rgba(201, 148, 59, 0.20);

	background:
		rgba(247, 240, 231, 0.64);

	color: #405067;

	font-family:
		"Montserrat",
		Arial,
		sans-serif;

	font-size: 11px;
}


.doctor-mega-menu__footer-icon {
	display: flex;

	width: 29px;
	height: 29px;

	flex: 0 0 29px;

	align-items: center;
	justify-content: center;

	color: #bf8b36;
}


.doctor-mega-menu__footer-icon svg {
	width: 28px;
	height: 28px;
}


/* ==================================================
   BOOK APPOINTMENT CTA
================================================== */

.doctor-navigation__appointment {
	flex: 0 0 auto;
}


.doctor-navigation__appointment > a {
	display: inline-flex !important;

	min-height: 50px !important;

	padding:
		0
		8px
		0
		20px !important;

	align-items: center;
	justify-content: center;

	gap: 13px;

	border:
		1px solid
		rgba(222, 185, 112, 0.92);

	border-radius: 999px;

	background:
		linear-gradient(
			135deg,
			rgba(223, 189, 120, 0.14),
			rgba(223, 189, 120, 0.045)
		);

	color:
		#f0d69f !important;

	font-family:
		"Montserrat",
		Arial,
		sans-serif;

	font-size: 13px !important;
	font-weight: 700 !important;

	line-height: 1;

	letter-spacing: 0.1px;

	box-shadow:
		inset
		0
		0
		0
		1px
		rgba(255, 255, 255, 0.025),

		0
		8px
		22px
		rgba(0, 0, 0, 0.14);

	transition:
		background 220ms ease,
		border-color 220ms ease,
		color 220ms ease,
		transform 220ms ease,
		box-shadow 220ms ease !important;
}


.doctor-navigation__appointment > a::after {
	display: none !important;
}


/* round arrow */

.doctor-navigation__appointment > a svg {
	display: block;

	width: 34px;
	height: 34px;

	padding: 9px;

	flex: 0 0 34px;

	border-radius: 50%;

	background: #d1a353;

	color: #071a31;

	transition:
		background-color 220ms ease,
		color 220ms ease,
		transform 220ms ease;
}


@media (hover: hover) and (pointer: fine) {

	.doctor-navigation__appointment > a:hover,
	.doctor-navigation__appointment > a:focus-visible {
		border-color: #dfbd78;

		background:
			linear-gradient(
				135deg,
				#d3a653,
				#bd882e
			);

		color:
			#071a31 !important;

		box-shadow:
			0
			11px
			27px
			rgba(0, 0, 0, 0.20);

		transform:
			translateY(-2px);
	}


	.doctor-navigation__appointment > a:hover svg,
	.doctor-navigation__appointment > a:focus-visible svg {
		background: #071a31;

		color: #e5bd6d;

		transform:
			translateX(2px);
	}
}


/* ==================================================
   MOBILE MENU BUTTON
================================================== */

.doctor-header__toggle {
	display: none;

	width: 46px;
	height: 46px;

	padding: 9px;

	border:
		1px solid
		rgba(209, 170, 97, 0.75);

	border-radius: 6px;

	background: transparent;

	color: #ffffff;

	cursor: pointer;
}


.doctor-header__toggle >
span:not(.screen-reader-text) {
	display: block;

	width: 100%;
	height: 2px;

	margin: 6px 0;

	background: currentColor;

	transition:
		transform 200ms ease,
		opacity 200ms ease;
}


.doctor-header__toggle[aria-expanded="true"]
> span:nth-of-type(2) {
	transform:
		translateY(8px)
		rotate(45deg);
}


.doctor-header__toggle[aria-expanded="true"]
> span:nth-of-type(3) {
	opacity: 0;
}


.doctor-header__toggle[aria-expanded="true"]
> span:nth-of-type(4) {
	transform:
		translateY(-8px)
		rotate(-45deg);
}


/* ==================================================
   MEDIUM DESKTOP
================================================== */

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

	.doctor-header__container {
		width:
			calc(100% - 54px);

		gap: 24px;
	}


	.doctor-header__logo {
		width: 185px;
		height: 90px;

		flex-basis: 185px;
	}


	.doctor-header__logo .custom-logo {
		width: 170px;
		max-width: none;

		max-height: 84px;

		transform: scale(1.06);
	}


	.doctor-navigation__menu {
		gap: 24px;
	}


	.doctor-navigation__menu > li > a,
	.doctor-navigation__services-trigger > a {
		font-size: 15px;
	}


	.doctor-navigation__appointment > a {
		padding:
			0
			7px
			0
			17px !important;

		font-size: 12px !important;
	}
}


/* ==================================================
   SMALL DESKTOP
================================================== */

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

	.doctor-header__container {
		width:
			calc(100% - 42px);
	}


	.doctor-header__logo {
		width: 155px;
		flex-basis: 155px;
	}


	.doctor-header__logo .custom-logo {
		width: 145px;
		max-height: 78px;
	}


	.doctor-navigation__menu {
		gap: 18px;
	}


	.doctor-navigation__menu > li > a,
	.doctor-navigation__services-trigger > a {
		font-size: 14px;
	}


	.doctor-mega-menu__grid {
		grid-template-columns:
			repeat(
				3,
				minmax(0, 1fr)
			);
	}
}


/* ==================================================
   TABLET / MOBILE NAVIGATION
================================================== */

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

	.doctor-header__main,
	.doctor-header__container {
		min-height: 90px;
	}


	.doctor-header__container {
		width:
			calc(100% - 40px);
	}


	/* logo */

	.doctor-header__logo {
		width: 145px;
		height: 76px;

		flex-basis: 145px;
	}


	.doctor-header__logo .custom-logo {
		width: 132px;
		max-width: none;

		max-height: 72px;

		transform: none;
	}


	/* hamburger */

	.doctor-header__toggle {
		display: block;

		flex: 0 0 auto;

		margin-left: auto;
	}


	/* navigation panel */

	.doctor-navigation {
		position: absolute;

		top: 100%;

		right: 0;
		left: 0;

		display: none;

		margin: 0;

		border-top:
			1px solid
			rgba(255, 255, 255, 0.10);

		background:
			#071a31;

		box-shadow:
			0
			18px
			35px
			rgba(0, 0, 0, 0.30);
	}


	.doctor-navigation.is-open {
		display: block;
	}


	.doctor-navigation__menu {
		display: block;

		width:
			calc(100% - 40px);

		margin-inline: auto;

		padding:
			12px
			0
			20px;
	}


	.doctor-navigation__menu > li {
		border-bottom:
			1px solid
			rgba(255, 255, 255, 0.08);
	}


	.doctor-navigation__menu > li > a,
	.doctor-navigation__services-trigger > a {
		display: flex;

		width: 100%;

		min-height: 0;

		padding:
			15px
			4px;

		font-size: 15px;
	}


	.doctor-navigation__menu > li > a::after,
	.doctor-navigation__services-trigger > a::after {
		display: none;
	}


	/* services trigger */

	.doctor-navigation__services-trigger {
		display: flex;

		width: 100%;

		min-height: 0;
	}


	.doctor-navigation__services-trigger > a {
		flex: 1;
	}


	.doctor-navigation__services-toggle {
		width: 46px;
		height: 49px;

		flex: 0 0 46px;

		color: #d5aa59;
	}


	/* ==================================================
	   MOBILE MEGA MENU
	================================================== */

	.doctor-mega-menu {
		position: static;

		display: none;

		padding: 0;

		opacity: 1;
		visibility: visible;

		pointer-events: auto;

		transform: none;

		transition: none;
	}


	.doctor-mega-menu::before {
		display: none;
	}


	/*
	 * Prevent desktop :hover from forcing the
	 * mega menu open on touch/tablet.
	 */
	.doctor-navigation__services-item:hover
	.doctor-mega-menu,
	.doctor-navigation__services-item:focus-within
	.doctor-mega-menu {
		display: none;
	}


	.doctor-navigation__services-item.is-open
	.doctor-mega-menu {
		display: block;
	}


	.doctor-mega-menu__inner {
		margin:
			0
			0
			14px;

		border:
			1px solid
			rgba(209, 170, 97, 0.20);

		border-radius: 11px;

		background: #0a213c;

		box-shadow: none;
	}


	/* mega heading */

	.doctor-mega-menu__heading {
		padding:
			16px
			16px
			13px;

		border-bottom:
			1px solid
			rgba(255, 255, 255, 0.08);
	}


	.doctor-mega-menu__eyebrow {
		color: #d1aa61;
	}


	.doctor-mega-menu__heading h2 {
		color: #ffffff;

		font-size: 24px;
	}


	.doctor-mega-menu__all {
		color: #e2bb72;

		font-size: 11px;
	}


	/* mega grid */

	.doctor-mega-menu__grid {
		padding: 12px;

		grid-template-columns:
			repeat(
				2,
				minmax(0, 1fr)
			);

		gap: 8px;
	}


	.doctor-mega-menu__service > a {
		grid-template-columns:
			72px
			minmax(0, 1fr);

		min-height: 76px;

		border-color:
			rgba(255, 255, 255, 0.08);

		background:
			rgba(255, 255, 255, 0.035);
	}


	.doctor-mega-menu__image {
		width: 72px;
		height: 56px;
	}


	.doctor-mega-menu__service-copy strong {
		color: #f7f2e9;

		font-size: 14px;
	}


	.doctor-mega-menu__footer {
		border-color:
			rgba(255, 255, 255, 0.08);

		background:
			rgba(255, 255, 255, 0.025);

		color:
			rgba(255, 255, 255, 0.72);
	}


	/* appointment CTA */

	.doctor-navigation__appointment {
		padding:
			14px
			0
			3px;

		border-bottom: 0 !important;
	}


	.doctor-navigation__appointment > a {
		display: flex !important;

		width: 100% !important;

		min-height: 50px !important;

		padding:
			0
			8px
			0
			18px !important;

		justify-content: space-between;

		border-radius: 10px;
	}


	.doctor-navigation__appointment > a svg {
		width: 34px;
		height: 34px;

		flex-basis: 34px;
	}
}


/* ==================================================
   MOBILE
================================================== */

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

	.doctor-header__main,
	.doctor-header__container {
		min-height: 82px;
	}


	.doctor-header__container {
		width:
			calc(100% - 28px);
	}


	/* logo */

	.doctor-header__logo {
		width: 118px;
		height: 66px;

		flex-basis: 118px;
	}


	.doctor-header__logo .custom-logo {
		width: 108px;
		max-width: none;

		max-height: 62px;
	}


	/* toggle */

	.doctor-header__toggle {
		width: 42px;
		height: 42px;
	}


	.doctor-header__gold-line {
		height: 4px;
	}


	/* navigation */

	.doctor-navigation__menu {
		width:
			calc(100% - 28px);
	}


	/* mega heading */

	.doctor-mega-menu__heading {
		display: block;
	}


	.doctor-mega-menu__all {
		margin-top: 11px;
	}


	/* mega cards */

	.doctor-mega-menu__grid {
		grid-template-columns: 1fr;
	}


	.doctor-mega-menu__service > a {
		grid-template-columns:
			68px
			minmax(0, 1fr);
	}


	.doctor-mega-menu__image {
		width: 68px;
		height: 52px;
	}


	.doctor-mega-menu__footer {
		padding:
			11px
			15px;

		font-size: 10px;
	}
}


/* ==================================================
   VERY SMALL MOBILE
================================================== */

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

	.doctor-header__container {
		width:
			calc(100% - 22px);
	}


	.doctor-header__logo {
		width: 102px;
		flex-basis: 102px;
	}


	.doctor-header__logo .custom-logo {
		width: 94px;
	}
}


/* ==================================================
   ACCESSIBILITY
================================================== */

.doctor-header a:focus-visible,
.doctor-header button:focus-visible {
	outline:
		3px solid
		#dfbd78;

	outline-offset: 3px;
}


/* ==================================================
   REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {

	.doctor-header *,
	.doctor-header *::before,
	.doctor-header *::after {
		transition: none !important;
	}
}