/**
 * BABE Bali — premium header (utility, account, search, Book CTA).
 * Scoped to .pchi-topbar + .pchi-sticky-shell only. Mega menu panel: babe-mega-menu.css.
 */

.pchi-topbar,
.pchi-sticky-shell {
	--babe-h-black: #050505;
	--babe-h-charcoal: #111111;
	--babe-h-ivory: #f5f2eb;
	--babe-h-white: #ffffff;
	--babe-h-silver: #c9c2b8;
	--babe-h-muted: #8f8a83;
	--babe-h-line: rgba(0, 0, 0, 0.1);
	--babe-h-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Top bar (removed from header.php; hide legacy markup) ---------- */
.pchi-topbar {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	overflow: hidden !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

.pchi-topbar__contact,
.pchi-topbar__hours-wrap {
	border-color: rgba(0, 0, 0, 0.08) !important;
	background: rgba(255, 255, 255, 0.55) !important;
}

.pchi-topbar__contact:hover {
	border-color: rgba(0, 0, 0, 0.14) !important;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05) !important;
}

.pchi-topbar__icon {
	background: var(--babe-h-black) !important;
}

.pchi-topbar__socials a:hover {
	color: var(--babe-h-charcoal) !important;
}

/* ---------- Sticky shell / main header ---------- */
.pchi-sticky-shell {
	background: var(--babe-h-white) !important;
	box-shadow: 0 10px 32px rgba(0, 0, 0, 0.05) !important;
}

.pchi-header {
	background: var(--babe-h-white) !important;
	border-bottom: 1px solid var(--babe-h-line) !important;
	box-shadow: none !important;
}

.pchi-sticky-shell {
	max-width: 100% !important;
	overflow-x: clip !important;
}

.pchi-header {
	max-width: 100% !important;
	overflow: visible !important;
}

.pchi-header__inner {
	padding: 14px 24px !important;
	gap: 20px !important;
	max-width: 100% !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
}

.pchi-header__logo,
.pchi-header__nav,
.pchi-header__right {
	min-width: 0 !important;
}

.pchi-header__right {
	flex: 0 1 auto !important;
	flex-wrap: nowrap !important;
}

.pchi-header__cta-text--short {
	display: none !important;
}

/* ---------- Logo ---------- */
.pchi-header__logo a,
.pchi-header__logo-link,
.babe-header-logo {
	display: block !important;
	line-height: 0 !important;
	text-decoration: none !important;
}

.pchi-header__logo img,
.babe-header-logo__img {
	display: block !important;
	width: clamp(210px, 18vw, 248px) !important;
	max-width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	object-fit: contain !important;
	object-position: left center !important;
}

.pchi-header__logo-text:not(.pchi-sr-only) {
	display: none !important;
}

/* ---------- Utility menu ---------- */
.pchi-utility-menu > li > a {
	color: var(--babe-h-charcoal) !important;
	font-size: 13.5px !important;
	font-weight: 750 !important;
	letter-spacing: 0.04em !important;
	text-transform: none !important;
}

.pchi-utility-menu > li > a::after {
	bottom: -6px !important;
	height: 1px !important;
	background: var(--babe-h-black) !important;
	opacity: 1 !important;
}

.pchi-utility-menu > li:hover > a,
.pchi-utility-menu > li.current-menu-item > a,
.pchi-utility-menu > li.current-menu-ancestor > a,
.pchi-utility-menu > li.focus > a {
	color: var(--babe-h-black) !important;
	background: transparent !important;
}

.pchi-utility-menu > li:hover > a::after,
.pchi-utility-menu > li.current-menu-item > a::after,
.pchi-utility-menu > li.current-menu-ancestor > a::after {
	width: 100% !important;
}

.pchi-utility-menu .sub-menu {
	min-width: 268px !important;
	background: var(--babe-h-white) !important;
	border: 1px solid rgba(17, 17, 17, 0.14) !important;
	border-radius: 24px !important;
	box-shadow:
		0 22px 48px rgba(0, 0, 0, 0.1),
		0 4px 12px rgba(0, 0, 0, 0.04) !important;
	padding: 10px 0 !important;
}

.pchi-utility-menu .sub-menu a {
	color: var(--babe-h-charcoal) !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	padding: 11px 18px !important;
	transition:
		color 200ms var(--babe-h-ease),
		background 200ms var(--babe-h-ease),
		padding-left 200ms var(--babe-h-ease) !important;
}

.pchi-utility-menu .sub-menu a:hover,
.pchi-utility-menu .sub-menu a:focus-visible {
	background: rgba(245, 242, 235, 0.65) !important;
	color: var(--babe-h-black) !important;
	padding-left: 22px !important;
}

/* ---------- Search ---------- */
.pchi-header__search {
	width: 44px !important;
	height: 44px !important;
	min-width: 44px !important;
	min-height: 44px !important;
	border-radius: 50% !important;
	color: var(--babe-h-black) !important;
	transition:
		color 200ms var(--babe-h-ease),
		background 200ms var(--babe-h-ease),
		transform 200ms var(--babe-h-ease) !important;
}

.pchi-header__search:hover,
.pchi-header__search:focus-visible,
.pchi-header__search.is-active {
	color: var(--babe-h-black) !important;
	background: rgba(245, 242, 235, 0.85) !important;
	transform: none !important;
	outline: none !important;
}

.pchi-icon--search {
	width: 22px !important;
	height: 22px !important;
}

/* ---------- Account ---------- */
.pchi-header__account {
	min-height: 44px !important;
	padding: 0 10px !important;
	border-radius: 999px !important;
	color: var(--babe-h-charcoal) !important;
	font-size: 11px !important;
	font-weight: 750 !important;
	letter-spacing: 0.1em !important;
	transition:
		color 200ms var(--babe-h-ease),
		background 200ms var(--babe-h-ease) !important;
}

.pchi-header__account:hover,
.pchi-header__account:focus-visible {
	color: var(--babe-h-black) !important;
	background: rgba(245, 242, 235, 0.85) !important;
	transform: none !important;
}

.pchi-header__account-wrap:hover .pchi-header__account,
.pchi-header__account-wrap:focus-within .pchi-header__account {
	color: var(--babe-h-black) !important;
	background: rgba(245, 242, 235, 0.85) !important;
}

.pchi-header__account-wrap {
	position: relative !important;
}

.pchi-account-dropdown {
	position: absolute !important;
	top: calc(100% + 10px) !important;
	right: 0 !important;
	left: auto !important;
	min-width: 268px !important;
	background: var(--babe-h-white) !important;
	border: 1px solid rgba(17, 17, 17, 0.14) !important;
	border-radius: 24px !important;
	box-shadow:
		0 22px 48px rgba(0, 0, 0, 0.1),
		0 4px 12px rgba(0, 0, 0, 0.04) !important;
	padding: 10px 0 !important;
	z-index: 100200 !important;
}

.pchi-account-menu > li > a {
	color: var(--babe-h-charcoal) !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	padding: 11px 18px !important;
	transition:
		color 200ms var(--babe-h-ease),
		background 200ms var(--babe-h-ease),
		padding-left 200ms var(--babe-h-ease) !important;
}

.pchi-account-menu > li > a:hover,
.pchi-account-menu > li > a:focus-visible {
	background: rgba(245, 242, 235, 0.65) !important;
	color: var(--babe-h-black) !important;
	padding-left: 22px !important;
}

.pchi-account-menu > li:nth-child(3) {
	border-top-color: rgba(0, 0, 0, 0.08) !important;
}

/* ---------- Book A Visit CTA ---------- */
.pchi-header__cta {
	min-height: 48px !important;
	padding: 15px 28px !important;
	margin-left: 2px !important;
	background: var(--babe-h-black) !important;
	color: var(--babe-h-white) !important;
	border: 1px solid rgba(0, 0, 0, 0.85) !important;
	border-radius: 999px !important;
	font-size: 12.5px !important;
	font-weight: 850 !important;
	letter-spacing: 0.02em !important;
	text-transform: none !important;
	box-shadow:
		0 16px 40px rgba(0, 0, 0, 0.18),
		inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
	transition:
		background 220ms var(--babe-h-ease),
		transform 220ms var(--babe-h-ease),
		box-shadow 220ms var(--babe-h-ease),
		border-color 220ms var(--babe-h-ease) !important;
}

.pchi-header__cta:hover,
.pchi-header__cta:focus-visible {
	background: #151518 !important;
	color: var(--babe-h-white) !important;
	border-color: rgba(201, 194, 184, 0.35) !important;
	transform: translateY(-1px) !important;
	box-shadow:
		0 20px 44px rgba(0, 0, 0, 0.22),
		inset 0 1px 0 rgba(255, 255, 255, 0.14),
		0 0 0 1px rgba(201, 194, 184, 0.12) !important;
}

/* ---------- Search overlay ---------- */
.pchi-search-overlay {
	background: rgba(255, 255, 255, 0.98) !important;
}

.pchi-search-input {
	border-bottom-color: var(--babe-h-black) !important;
	color: var(--babe-h-black) !important;
}

.pchi-search-input::placeholder {
	color: var(--babe-h-muted) !important;
}

.pchi-search-overlay__close {
	color: var(--babe-h-black) !important;
}

.pchi-search-overlay__close:hover {
	color: var(--babe-h-charcoal) !important;
}

/* ---------- Mobile utility drawer ---------- */
.pchi-mobile-utility-toggle {
	border-color: rgba(17, 17, 17, 0.14) !important;
	border-radius: 12px !important;
	background: var(--babe-h-white) !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

.pchi-mobile-utility-toggle:hover,
.pchi-mobile-utility-toggle:focus-visible {
	background: var(--babe-h-ivory) !important;
}

.pchi-mobile-utility-drawer__panel {
	display: flex !important;
	flex-direction: column !important;
	border-left: 1px solid rgba(17, 17, 17, 0.12) !important;
	border-top: 3px solid var(--babe-h-black) !important;
	box-shadow: -16px 0 48px rgba(0, 0, 0, 0.12) !important;
}

.pchi-mobile-utility-drawer__nav {
	flex: 1 1 auto !important;
	min-height: 0 !important;
}

.pchi-mobile-utility-drawer__brand {
	flex-shrink: 0 !important;
	margin-top: auto !important;
	padding: 28px 18px 32px !important;
	border-top: 1px solid var(--babe-h-line) !important;
}

.pchi-mobile-utility-drawer__logo {
	display: block !important;
	width: min(180px, 72%) !important;
	max-width: 190px !important;
	height: auto !important;
	margin: 0 auto !important;
	opacity: 0.94 !important;
	object-fit: contain !important;
}

.pchi-mobile-utility-close:hover,
.pchi-mobile-utility-close:focus-visible {
	background: var(--babe-h-ivory) !important;
	color: var(--babe-h-black) !important;
}

.pchi-mobile-utility-menu > li > a {
	border-bottom-color: var(--babe-h-silver) !important;
}

.pchi-mobile-utility-menu .sub-menu a:hover,
.pchi-mobile-utility-menu .sub-menu a:focus-visible {
	background: rgba(245, 242, 235, 0.65) !important;
}

/* Mobile services mega drawer — remove yellow accent only */
@media (max-width: 768px) {
	body.pchi-mobile-services-menu-open #mega-menu-wrap-mega_services #mega-menu-mega_services {
		border-top: 3px solid var(--babe-h-black) !important;
	}
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
	.pchi-header__logo img,
	.babe-header-logo__img {
		width: clamp(190px, 20vw, 220px) !important;
	}

	.pchi-header__cta {
		padding: 13px 22px !important;
	}
}

@media (max-width: 1024px) {
	.pchi-header__inner {
		padding: 12px 18px !important;
		gap: 14px !important;
	}

	.pchi-header__logo img,
	.babe-header-logo__img {
		width: clamp(168px, 22vw, 200px) !important;
	}
}

@media (max-width: 768px) {
	.pchi-sticky-shell,
	.pchi-header,
	.pchi-header__inner,
	.pchi-header__right,
	.pchi-header__account-wrap {
		overflow: visible !important;
	}

	.pchi-header__nav {
		display: none !important;
	}

	.pchi-header__inner {
		padding: 10px 12px !important;
		gap: 8px !important;
	}

	.pchi-header__logo {
		flex: 0 1 auto !important;
		max-width: 46% !important;
	}

	.pchi-header__logo img,
	.babe-header-logo__img {
		width: clamp(140px, 38vw, 168px) !important;
		max-width: 100% !important;
	}

	.pchi-header__search,
	.pchi-header__account,
	.pchi-mobile-utility-toggle {
		width: 40px !important;
		height: 40px !important;
		min-width: 40px !important;
		min-height: 40px !important;
		padding: 0 !important;
		flex-shrink: 0 !important;
	}

	.pchi-header__account span:not(.pchi-icon):not(.pchi-sr-only) {
		display: none !important;
	}

	.pchi-header__cta {
		min-height: 40px !important;
		padding: 10px 14px !important;
		font-size: 11px !important;
		flex-shrink: 0 !important;
		white-space: nowrap !important;
		box-shadow:
			0 10px 24px rgba(0, 0, 0, 0.14),
			inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
	}

	.pchi-header__right {
		gap: 6px !important;
		margin-left: auto !important;
	}

	/* Override legacy PCHI yellow on utility drawer (loads after pchi-site-overrides) */
	.pchi-mobile-utility-drawer__panel {
		border-top: 3px solid var(--babe-h-black) !important;
		border-left: 1px solid rgba(17, 17, 17, 0.12) !important;
	}

	.pchi-mobile-utility-close:hover,
	.pchi-mobile-utility-close:focus-visible {
		background: var(--babe-h-ivory) !important;
		color: var(--babe-h-black) !important;
	}

	.pchi-mobile-utility-menu > li > a {
		border-bottom-color: rgba(201, 194, 184, 0.55) !important;
	}

	.pchi-mobile-utility-menu .sub-menu a:hover,
	.pchi-mobile-utility-menu .sub-menu a:focus-visible {
		background: rgba(245, 242, 235, 0.85) !important;
		color: var(--babe-h-black) !important;
	}

	/* Account menu — viewport-safe, right-aligned (not clipped by header) */
	.pchi-account-dropdown {
		position: fixed !important;
		top: calc(env(safe-area-inset-top, 0px) + 68px) !important;
		right: 12px !important;
		left: auto !important;
		width: auto !important;
		min-width: min(268px, calc(100vw - 24px)) !important;
		max-width: calc(100vw - 24px) !important;
		box-sizing: border-box !important;
		max-height: calc(100dvh - 130px) !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch !important;
		transform: none !important;
		z-index: 100250 !important;
	}

	.pchi-account-menu > li > a {
		white-space: normal !important;
		word-break: break-word !important;
	}

	.pchi-header__account-wrap:hover .pchi-account-dropdown,
	.pchi-header__account-wrap:focus-within .pchi-account-dropdown {
		transform: none !important;
	}
}

@media (max-width: 480px) {
	.pchi-sticky-shell {
		max-width: 100vw !important;
	}

	.pchi-account-dropdown {
		top: calc(env(safe-area-inset-top, 0px) + 62px) !important;
		right: 12px !important;
		max-width: calc(100vw - 24px) !important;
	}

	.pchi-header__inner {
		padding: 8px 10px !important;
		gap: 6px !important;
	}

	.pchi-header__logo {
		max-width: 42% !important;
	}

	.pchi-header__logo img,
	.babe-header-logo__img {
		width: clamp(128px, 36vw, 148px) !important;
	}

	.pchi-header__search,
	.pchi-header__account,
	.pchi-mobile-utility-toggle {
		width: 38px !important;
		height: 38px !important;
		min-width: 38px !important;
		min-height: 38px !important;
	}

	.pchi-header__cta {
		min-height: 38px !important;
		padding: 9px 12px !important;
		font-size: 10.5px !important;
	}

	.pchi-header__cta-text--full {
		display: none !important;
	}

	.pchi-header__cta-text--short {
		display: inline !important;
	}

	.pchi-header__right {
		gap: 5px !important;
	}
}

@media (max-width: 430px) {
	.pchi-header__inner {
		padding: 8px 8px !important;
		gap: 5px !important;
	}

	.pchi-header__logo {
		max-width: 41% !important;
	}

	.pchi-header__logo img,
	.babe-header-logo__img {
		width: clamp(120px, 33vw, 140px) !important;
	}

	.pchi-header__search,
	.pchi-header__account,
	.pchi-mobile-utility-toggle {
		width: 37px !important;
		height: 37px !important;
		min-width: 37px !important;
		min-height: 37px !important;
	}

	.pchi-icon svg {
		width: 18px !important;
		height: 18px !important;
	}

	.pchi-header__cta {
		min-height: 37px !important;
		padding: 8px 11px !important;
		font-size: 10px !important;
	}

	.pchi-header__right {
		gap: 4px !important;
	}
}

@media (max-width: 390px) {
	.pchi-header__inner {
		padding: 7px 6px !important;
		gap: 4px !important;
	}

	.pchi-header__logo {
		max-width: 38% !important;
	}

	.pchi-header__logo img,
	.babe-header-logo__img {
		width: clamp(112px, 30vw, 128px) !important;
	}

	.pchi-header__search,
	.pchi-header__account,
	.pchi-mobile-utility-toggle {
		width: 36px !important;
		height: 36px !important;
		min-width: 36px !important;
		min-height: 36px !important;
	}

	.pchi-header__cta {
		min-height: 36px !important;
		padding: 8px 10px !important;
		font-size: 9.75px !important;
		letter-spacing: 0.01em !important;
	}

	.pchi-header__right {
		gap: 3px !important;
	}

	.pchi-account-dropdown {
		right: 12px !important;
		min-width: min(240px, calc(100vw - 24px)) !important;
	}
}

/* Safety: prevent horizontal scroll from header shell only */
@media (max-width: 768px) {
	body:has(.pchi-sticky-shell) {
		overflow-x: clip;
	}
}

/* -------------------------------------------------------------------------
   Desktop — WebKit/Safari layering (overflow + z-index hierarchy)
   Order: utility dropdowns > treatment nav/mega > page content
   ------------------------------------------------------------------------- */
@media (min-width: 769px) {
	body .pchi-sticky-shell,
	body .pchi-site-header,
	body .pchi-header,
	body .pchi-header__inner,
	body .pchi-header__nav,
	body .pchi-mega-menu,
	body .pchi-treatment-nav,
	body .pchi-treatment-nav__inner {
		contain: none !important;
		clip-path: none !important;
	}

	body .pchi-sticky-shell {
		position: sticky !important;
		top: 0 !important;
		z-index: 100000 !important;
		overflow: visible !important;
		overflow-x: visible !important;
		overflow-y: visible !important;
	}

	body .pchi-site-header,
	body .pchi-header {
		position: relative !important;
		z-index: 100500 !important;
		overflow: visible !important;
		overflow-x: visible !important;
		overflow-y: visible !important;
	}

	body .pchi-header__inner,
	body .pchi-header__nav,
	body .pchi-header__nav > ul,
	body .pchi-header__nav li,
	body .pchi-utility-menu,
	body .pchi-utility-menu > ul,
	body .pchi-utility-menu li {
		overflow: visible !important;
		overflow-x: visible !important;
		overflow-y: visible !important;
	}

	body .pchi-header__nav .menu-item-has-children,
	body .pchi-utility-menu .menu-item-has-children {
		position: relative !important;
	}

	body .pchi-header__nav .sub-menu,
	body .pchi-header__nav [class*="dropdown"],
	body .pchi-utility-menu .sub-menu,
	body .pchi-utility-menu [class*="dropdown"],
	body .pchi-account-dropdown {
		position: absolute !important;
		z-index: 100700 !important;
	}

	body .pchi-mega-menu,
	body .pchi-treatment-nav {
		position: relative !important;
		z-index: 100200 !important;
		overflow: visible !important;
		overflow-x: visible !important;
		overflow-y: visible !important;
	}

	body #mega-menu-wrap-mega_services {
		position: relative !important;
		z-index: 100250 !important;
	}

	body #mega-menu-wrap-mega_services #mega-menu-mega_services > li.mega-menu-item > ul.mega-sub-menu,
	body #mega-menu-wrap-mega_services #mega-menu-mega_services > li.mega-menu-item.mega-toggle-on > ul.mega-sub-menu,
	body #mega-menu-wrap-mega_services #mega-menu-mega_services > li.mega-menu-megamenu > ul.mega-sub-menu,
	body #mega-menu-wrap-mega_services #mega-menu-mega_services > li.mega-menu-megamenu.mega-toggle-on > ul.mega-sub-menu {
		z-index: 100300 !important;
	}
}