:root {
	--rehab-header-height: 4.5rem;
}

@media (min-width: 1024px) {
	:root { --rehab-header-height: 5.25rem; } /* 84px — approved design nav height */
}

/* Fixed top navbar — standard layout (approved June 2026 design):
   brand left · inline links centre · phone + CTA right · burger mobile-only. */
.rehab-navbar {
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	gap: 24px;
	width: 100%;
	min-height: var(--rehab-header-height);
	padding: 0 clamp(20px, 4vw, 44px);
	background: var(--rehab-color-bg);
	color: var(--rehab-warm-charcoal);
	border-bottom: 1px solid rgba(186, 195, 161, 0.3);
	transition: background 0.3s var(--rehab-ease), color 0.3s var(--rehab-ease);
}

/* When mega menu is open (mobile): invert colors */
body.rehab-menu-open .rehab-navbar {
	background: var(--rehab-sage);
	color: var(--rehab-color-white);
}

/* When sticky / scrolled: stay cream, add a subtle shadow (per design) */
.rehab-navbar.is-stuck {
	background: var(--rehab-color-bg);
	color: var(--rehab-warm-charcoal);
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
}

/* Auto-hide on scroll-down for more screen real estate */
.rehab-navbar.is-hidden {
	transform: translateY(-100%);
	transition: transform 0.3s var(--rehab-ease), background 0.3s var(--rehab-ease);
}

/* Brand (left) */
.rehab-navbar__brand {
	display: flex;
	align-items: center;
	flex: none;
}

.rehab-navbar .custom-logo-link {
	display: inline-flex;
	align-items: center;
	height: calc(var(--rehab-header-height) * 0.7);
	transition: opacity 0.2s var(--rehab-ease);
}

.rehab-navbar .custom-logo-link img,
.rehab-navbar .custom-logo,
.rehab-navbar .custom-logo-link svg {
	display: block;
	height: 100%;
	width: auto;
	max-height: calc(var(--rehab-header-height) * 0.5);
}

.rehab-navbar__brand-text {
	font-family: var(--rehab-font-display);
	font-size: 1.25rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
}

/* Inline links (centre) */
.rehab-navbar__links {
	flex: 1;
	display: flex;
	justify-content: center;
	min-width: 0;
}

.rehab-navbar__menu {
	display: flex;
	align-items: center;
	gap: 30px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.rehab-navbar__menu li { position: relative; }

.rehab-navbar__menu a {
	font-family: var(--rehab-font-body);
	font-weight: 400;
	font-size: 0.9375rem;
	color: var(--rehab-warm-charcoal);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.rehab-navbar__menu a:hover {
	color: var(--rehab-sage-dark);
	text-decoration: none;
}

.rehab-navbar__menu > li.menu-item-has-children > a::after {
	content: "\25BE";
	font-size: 9px;
	color: var(--rehab-sage-dark);
}

/* Desktop dropdown for second-level items */
.rehab-navbar__menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	min-width: 240px;
	list-style: none;
	margin: 0;
	padding: 0.5rem 0;
	background: var(--rehab-color-bg);
	border: 1px solid rgba(186, 195, 161, 0.3);
	box-shadow: var(--rehab-shadow-elevated);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s var(--rehab-ease), visibility 0.2s var(--rehab-ease);
	z-index: 110;
}

.rehab-navbar__menu li:hover > .sub-menu,
.rehab-navbar__menu li:focus-within > .sub-menu,
.rehab-navbar__menu li.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
}

/* Disclosure parents render as <a role="button"> (no href); keep the pointer
   cursor so they read as interactive. header.js toggles `.is-open` on tap. */
.rehab-navbar__menu > li.menu-item-has-children > [aria-haspopup="true"] {
	cursor: pointer;
}

/* Link-parents (REH-105) carry a separate caret button for touch. On the desktop
   inline navbar it's redundant — hover opens the dropdown and a::after shows the
   caret — so hide it here; it only does work in the mobile mega-menu. */
.rehab-navbar__menu .rehab-nav__disclosure {
	display: none;
}

.rehab-navbar__menu .sub-menu a {
	display: block;
	padding: 0.55rem 1.25rem;
	font-size: 0.875rem;
	white-space: normal;
}

/* Actions (right): phone link + CTA + mobile burger */
.rehab-navbar__actions {
	display: flex;
	align-items: center;
	gap: 20px;
	flex: none;
}

.rehab-navbar__phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--rehab-font-body);
	font-weight: 500;
	font-size: 0.9375rem;
	letter-spacing: 0.02em;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
}

.rehab-navbar__phone-icon { display: inline-flex; }
.rehab-navbar__phone-icon svg { width: 16px; height: 16px; stroke: var(--rehab-sage-dark); }

.rehab-navbar__phone-text {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-decoration-color: var(--rehab-tan);
}

.rehab-navbar__phone:hover { text-decoration: none; }
.rehab-navbar__phone:hover .rehab-navbar__phone-text { text-decoration-color: var(--rehab-sage-dark); }

/* Menu toggle button — mobile only */
.rehab-navbar__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	padding: 0.5rem;
	color: inherit;
	background: transparent;
	border: none;
	cursor: pointer;
}

.rehab-navbar__toggle-icon { display: inline-flex; }
.rehab-navbar__toggle-icon svg { width: 1.375rem; height: auto; }
.rehab-navbar__toggle-icon-close { display: none; }

body.rehab-menu-open .rehab-navbar__toggle-icon-open { display: none; }
body.rehab-menu-open .rehab-navbar__toggle-icon-close { display: block; }

/* Mid-width (laptops / half-screen on large displays): the full inline nav
   needs ~1366px to sit without the centred links sliding under the logo. In
   the 1150-1365px band, reclaim space — drop the phone link and tighten the
   gaps — so the links still fit inline rather than overlapping the brand.
   The phone number stays reachable via the CTA and the footer. */
@media (min-width: 1150px) and (max-width: 1365px) {
	.rehab-navbar { gap: 16px; }
	.rehab-navbar__menu { gap: 22px; }
	.rehab-navbar__phone { display: none; }
}

/* Responsive: collapse to the burger once the inline nav can no longer fit. */
@media (max-width: 1149px) {
	.rehab-navbar__links { display: none; }
	.rehab-navbar__phone { display: none; }
	.rehab-navbar__toggle { display: inline-flex; }
	.rehab-navbar__brand { flex: 1; }
}

@media (max-width: 560px) {
	.rehab-navbar__cta { display: none; }
}

/* Off-canvas mega menu */
.rehab-mega-menu {
	position: fixed;
	z-index: 99;
	top: 0;
	left: 0;
	right: 0;
	height: 100vh;
	background: var(--rehab-sage);
	color: var(--rehab-color-white);
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s var(--rehab-ease), visibility 0.3s var(--rehab-ease);
	overflow-y: auto;
	scrollbar-width: thin;
}

body.rehab-menu-open .rehab-mega-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.rehab-mega-menu__inner {
	padding-top: var(--rehab-header-height);
	display: grid;
	grid-template-columns: 1fr;
	min-height: 100%;
	gap: 0;
}

@media (min-width: 1024px) {
	.rehab-mega-menu__inner {
		grid-template-columns: 2fr 1fr;
	}
}

.rehab-mega-menu__nav {
	padding: 2rem 1.5rem;
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
	/* Grid items default to min-width:auto, so this nav sized itself to its
	   longest menu label and pushed past its own track — 409px inside a 360px
	   menu at mobile widths, dragging the whole document wider. Most pages
	   masked it with a clipping ancestor; the search results page had none, so
	   /?s= scrolled sideways. Same fix as the minmax(0,…) tracks used elsewhere
	   in this codebase (REH-200). */
	min-width: 0;

	@media (min-width: 1024px) { padding: 3rem 3rem 3rem 4rem; }
}

.rehab-mega-menu__list,
.rehab-mega-menu__list .sub-menu {
	list-style: none;
	padding: 0;
	margin: 0;
}

.rehab-mega-menu__list > li {
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.rehab-mega-menu__list > li:last-child {
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.rehab-mega-menu__list a {
	display: block;
	padding: 1rem 0.5rem;
	font-family: var(--rehab-font-display);
	font-size: 1.5rem;
	font-weight: 300;
	color: var(--rehab-color-white);
	text-decoration: none;
	transition: padding-left 0.2s var(--rehab-ease), opacity 0.2s var(--rehab-ease);
}

.rehab-mega-menu__list a:hover {
	padding-left: 1rem;
	opacity: 0.85;
	text-decoration: none;
}

/* Accordion: submenus are collapsed; tapping the disclosure header opens them.
   (No hover on touch, so reveal is driven purely by the .is-open class that
   header.js toggles.) */
.rehab-mega-menu__list .sub-menu {
	display: none;
	padding-left: 1rem;
	margin-bottom: 0.5rem;
}

.rehab-mega-menu__list li.is-open > .sub-menu {
	display: block;
}

/* Disclosure headers read as buttons — show a caret that flips when open. */
.rehab-mega-menu__list [aria-haspopup="true"] {
	cursor: pointer;
}

.rehab-mega-menu__list [aria-haspopup="true"]::after {
	content: "\25BE";
	display: inline-block;
	margin-left: 0.5rem;
	font-size: 0.6em;
	vertical-align: middle;
	transition: transform 0.2s var(--rehab-ease);
}

.rehab-mega-menu__list li.is-open > [aria-haspopup="true"]::after {
	transform: rotate(180deg);
}

/* Link-parents (REH-105): the header itself is a real link, with a separate
   caret button beside it that toggles the submenu. Lay each row out as flex so
   the link fills the row, the caret sits at the end, and the submenu (when open)
   wraps to its own full-width line below. Depth-agnostic — nested link-parents
   get the same treatment. */
.rehab-mega-menu__list li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.rehab-mega-menu__list li > a {
	flex: 1 1 auto;
}

.rehab-mega-menu__list li > .sub-menu {
	flex: 0 0 100%;
}

.rehab-mega-menu__list .rehab-nav__disclosure {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 3.25rem;
	align-self: stretch;
	padding: 0;
	background: none;
	border: 0;
	color: var(--rehab-color-white);
	cursor: pointer;
}

/* The caret glyph comes from the shared [aria-haspopup]::after rule above; drop
   its inline left margin here since the button already centres it. */
.rehab-mega-menu__list .rehab-nav__disclosure::after {
	margin-left: 0;
	font-size: 0.9rem;
}

/* Toggle-parents (REH-105: parents with no URL, i.e. About) carry the caret on
   the anchor itself rather than on a separate button, so it rendered glued to
   the label while link-parents rendered theirs at the row's right edge — the
   arrows read as inconsistent (REH-201). Give the anchor caret the same 3.25rem
   end-aligned box as the button, so both sit on the same vertical line. The
   trailing padding moves onto that box so the two right edges agree exactly. */
.rehab-mega-menu__list > li > a[aria-haspopup="true"] {
	display: flex;
	align-items: center;
	padding-right: 0;
}

.rehab-mega-menu__list > li > a[aria-haspopup="true"]::after {
	margin-left: auto;
	min-width: 3.25rem;
	font-size: 0.9rem;
	text-align: center;
}

.rehab-mega-menu__list .sub-menu a {
	font-family: var(--rehab-font-body);
	font-size: 0.9375rem;
	padding: 0.4rem 0.5rem;
	letter-spacing: 0.02em;
	opacity: 0.92;
}

.rehab-mega-menu__list .sub-menu .sub-menu a {
	font-size: 0.8125rem;
	opacity: 0.78;
}

/* Sidebar pitch panel */
.rehab-mega-menu__sidebar {
	min-width: 0;
	background: var(--rehab-sage-dark);
	display: flex;
	align-items: center;
	padding: 3rem 1.5rem;

	@media (min-width: 1024px) { padding: 4rem 4rem 4rem 3rem; }
}

.rehab-mega-menu__pitch {
	max-width: 380px;
}

.rehab-mega-menu__pitch-title {
	font-family: var(--rehab-font-display);
	font-size: 1.5rem;
	line-height: 1.3;
	margin: 0 0 1rem;
	color: var(--rehab-color-white);
}

.rehab-mega-menu__pitch-body {
	font-family: var(--rehab-font-body);
	font-weight: 300;
	font-size: 1rem;
	line-height: 1.7;
	margin: 0 0 2rem;
	color: rgba(255, 255, 255, 0.92);
}

/* Below the two-column breakpoint the sidebar stacks under the full nav list,
   and the pitch body copy pushed the phone CTA below the fold on phones — keep
   just the title + number there. */
@media (max-width: 1023px) {
	.rehab-mega-menu__pitch-body { display: none; }
	.rehab-mega-menu__pitch-title { margin-bottom: 1.25rem; }
	.rehab-mega-menu__sidebar { padding: 2rem 1.5rem; }
}

/* Spacer below fixed navbar so content doesn't jump */
body { padding-top: var(--rehab-header-height); }

/* Skip link */
.rehab-skip-link:focus {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 1000;
	padding: 0.5rem 1rem;
	background: var(--rehab-warm-charcoal);
	color: var(--rehab-color-white);
	clip: auto !important;
	width: auto;
	height: auto;
}

/* ---- Header search (REH-200) -------------------------------------------
   Search existed at /?s= with a full results template, but had no entry point
   anywhere on the site. Desktop gets a toggle that expands an inline field;
   mobile gets an always-visible form inside the mega-menu instead, since the
   header actions row is already tight at small widths. */
.rehab-navbar__search {
	position: relative;
	display: flex;
	align-items: center;
}

.rehab-navbar__search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: var(--rehab-radius-pill);
	color: var(--rehab-soft-charcoal);
	cursor: pointer;
	transition: color 0.2s var(--rehab-ease), background-color 0.2s var(--rehab-ease);
}

.rehab-navbar__search-toggle:hover,
.rehab-navbar__search-toggle:focus-visible,
.rehab-navbar__search.is-open .rehab-navbar__search-toggle {
	color: var(--rehab-sage-text);
	background-color: rgba(var(--rehab-sage-rgb), 0.16);
}

/* Overlaid rather than inline so opening the field never reflows the nav. */
.rehab-navbar__search-form {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 20;
	background: var(--rehab-color-bg);
	border: 1px solid var(--rehab-divider-warm);
	border-radius: var(--rehab-radius-sm);
	box-shadow: var(--rehab-shadow-subtle);
	padding: 0.5rem;
}

.rehab-navbar__search-form[hidden] {
	display: none;
}

.rehab-navbar__search-form input[type="search"] {
	width: min(17rem, 60vw);
	border: 0;
	background: none;
	font-family: var(--rehab-font-body);
	font-size: 0.9375rem;
	color: var(--rehab-warm-charcoal);
	padding: 0.35rem 0.5rem;
}

.rehab-navbar__search-form input[type="search"]:focus {
	outline: none;
}

/* The header actions row is crowded on small screens; the mega-menu form
   below covers mobile instead. */
@media (max-width: 900px) {
	.rehab-navbar__search {
		display: none;
	}
}

/* ---- Mobile tooltip panel (REH-203) ------------------------------------
   Anchored under the tapped icon rather than pinned to the bottom of the
   screen. Fixed positioning is required: .rehab-homepage sets
   overflow-x:hidden, which clips absolutely-positioned children, and no
   ancestor sets transform/filter so fixed escapes it. */
.rehab-tooltip-panel {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 80;
	width: 100vw;
	height: auto;
	box-sizing: border-box;
	padding: 1rem 3rem 1rem 1.25rem;   /* right padding clears the close button */
	background: var(--rehab-warm-charcoal);
	color: var(--rehab-color-white);
	box-shadow: var(--rehab-shadow-elevated);
}

.rehab-tooltip-panel__text {
	margin: 0;
	font-family: var(--rehab-font-body);
	font-size: 0.875rem;
	font-weight: 300;
	line-height: 1.55;
	color: var(--rehab-color-white);
}

.rehab-tooltip-panel__close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 40px is the comfortable minimum touch target. */
	width: 40px;
	height: 40px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--rehab-color-white);
	opacity: 0.85;
	cursor: pointer;
}

.rehab-tooltip-panel__close:hover,
.rehab-tooltip-panel__close:focus-visible {
	opacity: 1;
}

[data-tooltip] {
	cursor: pointer;
}