/**
 * Moore Health — Header and navigation
 *
 * The header is sticky and in normal flow, so interior pages need no offset.
 * On the homepage it carries `mh-header--overlay`, which pulls the following
 * content up by the header height so the hero runs underneath a transparent bar.
 *
 * @package MooreHealth
 */

/* =====================================================================
 * Shell
 * ===================================================================== */

.mh-header {
	position: sticky;
	top: 0;
	z-index: var(--mh-z-header);
	background-color: var(--mh-white);
	border-bottom: 1px solid transparent;
	transition:
		background-color var(--mh-duration-slow) var(--mh-ease),
		border-color var(--mh-duration-slow) var(--mh-ease),
		box-shadow var(--mh-duration-slow) var(--mh-ease);
}

.mh-header--overlay {
	background-color: transparent;
	margin-bottom: calc(var(--mh-header-height) * -1);
}

/* Solid warm white with a hairline border once the page has scrolled. */
.mh-header.is-scrolled {
	background-color: var(--mh-white);
	border-bottom-color: var(--mh-border);
	box-shadow: 0 1px 0 rgba(8, 27, 44, 0.02);
}

.mh-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mh-space-4);
	height: var(--mh-header-height);
}

/* =====================================================================
 * Brand
 * ===================================================================== */

.mh-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--mh-space-2);
	flex-shrink: 0;
	text-decoration: none;
	color: var(--mh-navy);
}

.mh-brand__mark {
	flex-shrink: 0;
	width: 2rem;
	height: 2rem;
	color: var(--mh-blue);
}

.mh-brand__text {
	display: flex;
	flex-direction: column;
	line-height: 1.05;
}

.mh-brand__name {
	font-family: var(--mh-font-display);
	font-size: 1.375rem;
	font-weight: var(--mh-weight-semibold);
	letter-spacing: -0.02em;
	color: var(--mh-navy);
	white-space: nowrap;
}

.mh-brand__descriptor {
	font-size: 0.6875rem;
	font-weight: var(--mh-weight-semibold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mh-slate);
	white-space: nowrap;
}

@media (min-width: 960px) {
	.mh-brand__mark {
		width: 2.25rem;
		height: 2.25rem;
	}

	.mh-brand__name {
		font-size: 1.5rem;
	}
}

/* =====================================================================
 * Desktop navigation
 * ===================================================================== */

.mh-nav {
	display: none;
}

@media (min-width: 960px) {
	.mh-nav {
		display: block;
	}
}

.mh-nav__list {
	display: flex;
	align-items: center;
	gap: var(--mh-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mh-nav__item {
	position: relative;
	margin: 0;
}

.mh-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.625rem var(--mh-space-2);
	border-radius: var(--mh-radius-sm);
	font-size: 0.9375rem;
	font-weight: var(--mh-weight-medium);
	color: var(--mh-navy);
	text-decoration: none;
	white-space: nowrap;
	transition:
		color var(--mh-duration) var(--mh-ease),
		background-color var(--mh-duration) var(--mh-ease);
}

.mh-nav__link:hover {
	color: var(--mh-blue);
	background-color: rgba(220, 234, 255, 0.6);
}

/* Current page and current section both get the underline. */
.mh-nav__item.current-menu-item > .mh-nav__link,
.mh-nav__item.current-menu-parent > .mh-nav__link,
.mh-nav__item.current-menu-ancestor > .mh-nav__link,
.mh-nav__item.current_page_item > .mh-nav__link {
	color: var(--mh-blue);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.35em;
}

.mh-nav__toggle-icon {
	width: 0.75rem;
	height: 0.75rem;
	color: var(--mh-slate);
	transition: transform var(--mh-duration) var(--mh-ease);
}

/* ---------------------------------------------------------------------
 * Simple dropdown (Care). Opens on hover and on keyboard focus.
 * --------------------------------------------------------------------- */

.mh-nav__submenu {
	position: absolute;
	top: calc(100% + 0.5rem);
	left: 0;
	z-index: 1;
	min-width: 15rem;
	margin: 0;
	padding: var(--mh-space-2);
	list-style: none;
	background-color: var(--mh-pure-white);
	border: 1px solid var(--mh-border);
	border-radius: var(--mh-radius);
	box-shadow: var(--mh-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition:
		opacity var(--mh-duration) var(--mh-ease),
		transform var(--mh-duration) var(--mh-ease),
		visibility var(--mh-duration) var(--mh-ease);
}

.mh-nav__item:hover > .mh-nav__submenu,
.mh-nav__item:focus-within > .mh-nav__submenu,
.mh-nav__item.is-open > .mh-nav__submenu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.mh-nav__item:hover > .mh-nav__link .mh-nav__toggle-icon,
.mh-nav__item.is-open > .mh-nav__link .mh-nav__toggle-icon {
	transform: rotate(180deg);
}

.mh-nav__submenu .mh-nav__item {
	margin: 0;
}

.mh-nav__submenu .mh-nav__link {
	display: flex;
	width: 100%;
	padding: 0.625rem var(--mh-space-2);
	white-space: normal;
}

/* =====================================================================
 * Header actions
 * ===================================================================== */

.mh-header__actions {
	display: none;
	align-items: center;
	gap: var(--mh-space-2);
	flex-shrink: 0;
}

@media (min-width: 960px) {
	.mh-header__actions {
		display: flex;
	}
}

.mh-header__login {
	display: inline-flex;
	align-items: center;
	min-height: var(--mh-tap-target);
	padding: 0 var(--mh-space-2);
	font-size: 0.9375rem;
	font-weight: var(--mh-weight-semibold);
	color: var(--mh-navy);
	text-decoration: none;
	border-radius: var(--mh-radius-sm);
	white-space: nowrap;
}

.mh-header__login:hover {
	color: var(--mh-blue);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.mh-header__cta {
	white-space: nowrap;
}

/* =====================================================================
 * Mobile toggle
 * ===================================================================== */

.mh-nav-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--mh-space-1);
	min-width: var(--mh-tap-target);
	min-height: var(--mh-tap-target);
	padding: 0 var(--mh-space-2);
	border: 1px solid var(--mh-border);
	border-radius: var(--mh-radius-pill);
	background-color: var(--mh-pure-white);
	font-size: var(--mh-size-small);
	font-weight: var(--mh-weight-semibold);
	color: var(--mh-navy);
}

@media (min-width: 960px) {
	.mh-nav-toggle {
		display: none;
	}
}

.mh-nav-toggle__bars {
	position: relative;
	width: 1.125rem;
	height: 0.75rem;
	flex-shrink: 0;
}

.mh-nav-toggle__bars span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background-color: currentColor;
	transition: transform var(--mh-duration-slow) var(--mh-ease), opacity var(--mh-duration) var(--mh-ease);
}

.mh-nav-toggle__bars span:nth-child(1) {
	top: 0;
}

.mh-nav-toggle__bars span:nth-child(2) {
	top: 50%;
	transform: translateY(-50%);
}

.mh-nav-toggle__bars span:nth-child(3) {
	bottom: 0;
}

.mh-nav-toggle[aria-expanded="true"] .mh-nav-toggle__bars span:nth-child(1) {
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
}

.mh-nav-toggle[aria-expanded="true"] .mh-nav-toggle__bars span:nth-child(2) {
	opacity: 0;
}

.mh-nav-toggle[aria-expanded="true"] .mh-nav-toggle__bars span:nth-child(3) {
	bottom: 50%;
	transform: translateY(50%) rotate(-45deg);
}

/* =====================================================================
 * Mobile panel
 *
 * Hidden with the `hidden` attribute so it is unreachable without JS
 * rather than merely off-screen.
 * ===================================================================== */

.mh-mobile-nav {
	position: fixed;
	inset: 0;
	z-index: var(--mh-z-mobile-nav);
	display: flex;
	flex-direction: column;
	background-color: var(--mh-white);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.mh-mobile-nav[hidden] {
	display: none;
}

@media (prefers-reduced-motion: no-preference) {
	.mh-mobile-nav {
		animation: mh-panel-in var(--mh-duration-slow) var(--mh-ease);
	}
}

@keyframes mh-panel-in {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.mh-mobile-nav__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mh-space-4);
	height: var(--mh-header-height);
	padding-inline: var(--mh-gutter);
	border-bottom: 1px solid var(--mh-border);
}

.mh-mobile-nav__body {
	display: flex;
	flex-direction: column;
	gap: var(--mh-space-5);
	padding: var(--mh-space-5) var(--mh-gutter) var(--mh-space-7);
}

/* Primary action and login sit at the top of the panel. */
.mh-mobile-nav__actions {
	display: flex;
	flex-direction: column;
	gap: var(--mh-space-2);
}

.mh-mobile-nav__login {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--mh-space-2);
	min-height: var(--mh-control-height);
	padding: 0 var(--mh-space-4);
	border: 1px solid var(--mh-navy);
	border-radius: var(--mh-radius-pill);
	font-weight: var(--mh-weight-semibold);
	color: var(--mh-navy);
	text-decoration: none;
}

.mh-mobile-nav__list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--mh-border);
}

.mh-mobile-nav__item {
	margin: 0;
	border-bottom: 1px solid var(--mh-border);
}

.mh-mobile-nav__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mh-space-3);
	min-height: 56px;
	padding: var(--mh-space-2) 0;
	font-family: var(--mh-font-display);
	font-size: 1.375rem;
	font-weight: var(--mh-weight-medium);
	color: var(--mh-navy);
	text-decoration: none;
}

.mh-mobile-nav__link:hover {
	color: var(--mh-blue);
}

.mh-mobile-nav__item.current-menu-item > .mh-mobile-nav__link {
	color: var(--mh-blue);
}

/* One level of nesting only — no deep accordions. */
.mh-mobile-nav__submenu {
	margin: 0 0 var(--mh-space-3);
	padding: 0 0 0 var(--mh-space-3);
	list-style: none;
	border-left: 2px solid var(--mh-sky);
}

.mh-mobile-nav__submenu .mh-mobile-nav__link {
	min-height: var(--mh-tap-target);
	font-family: var(--mh-font-body);
	font-size: var(--mh-size-body);
	font-weight: var(--mh-weight-medium);
}

.mh-mobile-nav__footer {
	padding-top: var(--mh-space-4);
	border-top: 1px solid var(--mh-border);
	font-size: var(--mh-size-small);
	color: var(--mh-slate);
}

/* =====================================================================
 * PREMIUM REFIT (v2)
 * ===================================================================== */

.mh-header {
	background-color: rgba(251, 250, 247, 0.72);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
}

.mh-header.is-scrolled {
	background-color: rgba(251, 250, 247, 0.88);
	border-bottom-color: var(--mh-border);
	box-shadow: 0 1px 0 rgba(8, 27, 44, 0.04), 0 8px 24px rgba(8, 27, 44, 0.04);
}

.mh-header--overlay:not(.is-scrolled) {
	background-color: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.mh-brand__mark {
	color: var(--mh-blue);
}

.mh-brand__name {
	color: var(--mh-ink);
	letter-spacing: -0.028em;
}

.mh-nav__link {
	color: var(--mh-ink);
	font-weight: var(--mh-weight-medium);
}

.mh-nav__link:hover {
	color: var(--mh-blue-press);
	background-color: rgba(22, 93, 255, 0.07);
}

.mh-nav__item.current-menu-item > .mh-nav__link,
.mh-nav__item.current_page_item > .mh-nav__link {
	color: var(--mh-blue-press);
	text-decoration-color: var(--mh-blue);
}

.mh-header__login {
	color: var(--mh-ink);
}

.mh-header__login:hover {
	color: var(--mh-blue-press);
}

.mh-nav__submenu {
	border-color: transparent;
	box-shadow: var(--mh-ring), var(--mh-shadow);
	border-radius: var(--mh-radius);
}

.mh-nav-toggle {
	border-color: var(--mh-border-strong);
	background-color: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(6px);
}

.mh-mobile-nav__link {
	color: var(--mh-ink);
}

.mh-mobile-nav__link:hover {
	color: var(--mh-blue-press);
}