/* ============================================================
   Parkwellness — Header
   Single-page site: fixed, always overlays the hero slideshow (no
   "inner page" case like Heron Lakes has — everything lives on this
   one page). Starts semi-transparent black, turns solid on scroll.
   ============================================================ */

.pw-header {
	position: fixed;
	top: 0;
	inset-inline-start: 0;
	width: 100%;
	z-index: 100;
	background-color: var(--overlay-black-70);
	transition: background-color var(--transition-base);
}

/* Scrolled, or mobile menu open — solid black, no transparency */
.pw-header.is-scrolled,
.pw-header.is-menu-open {
	background-color: var(--color-dark-900);
}

/* Logged-in admin viewing the front end — WP's own #wpadminbar is fixed
   at the very top (z-index 99999), so the fixed .pw-header needs to
   start below it instead of at 0. Matches WP core's admin-bar height
   and its 782px breakpoint. */
body.admin-bar .pw-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .pw-header {
		top: 46px;
	}
}

/* -------------------------------------------------------
   Header Inner — flex row: logo | nav | phone | cta
   ------------------------------------------------------- */
.pw-header-inner {
	display: flex;
	align-items: center;
	gap: clamp(16px, 3vw, 40px);
	min-height: var(--header-height);
}

.pw-header-logo {
	flex-shrink: 0;
	line-height: 1;
}

.pw-header-logo a {
	display: block;
}

/* .pw-header prefix (not just .pw-header-logo-img) — needed to outrank
   reset.css's ".pw-landing img" rule, which is more specific (class +
   element vs. just a class) and would otherwise win the max-width
   cascade and make this render at full intrinsic size. */
.pw-header .pw-header-logo-img {
	width: 100%;
	max-width: clamp(120px, 14vw, 180px);
	height: auto;
	object-fit: contain;
}

/* -------------------------------------------------------
   Main Navigation — anchors to sections on this same page
   ------------------------------------------------------- */
.pw-header-nav {
	flex: 1;
	min-width: 0; /* flex items don't shrink below content width by default — without this the nav pushes phone/CTA out past the container edge */
	display: flex;
	justify-content: center;
}

.pw-main-menu {
	display: flex;
	align-items: center;
	gap: clamp(20px, 2.5vw, 40px);
}

/* !important: same Thrive ul>li margin-left rule as the mobile menu —
   spacing here comes from .pw-main-menu's own `gap` above, not margin. */
.pw-main-menu > li {
	margin: 0 !important;
}

.pw-main-menu a {
	display: block;
	color: var(--color-cream-200);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	white-space: nowrap;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: clamp(0.8rem, 1vw, 0.9rem);
	padding-block-end: 4px;
	transition: opacity var(--transition-fast);
}

.pw-main-menu a:hover {
	opacity: 0.75;
}

/* -------------------------------------------------------
   Phone number
   ------------------------------------------------------- */
.pw-header-phone {
	flex-shrink: 0;
	color: var(--color-cream-200);
	font-family: var(--font-body);
	font-size: clamp(0.8rem, 1vw, 0.9rem);
	white-space: nowrap;
}

/* -------------------------------------------------------
   CTA
   ------------------------------------------------------- */
.pw-header-cta {
	flex-shrink: 0;
}

/* -------------------------------------------------------
   Mobile hamburger toggle — hidden on desktop, shown below
   ------------------------------------------------------- */
@media (min-width: 1025px) {
	.pw-mobile-menu-toggle,
	.pw-mobile-menu-cta-item {
		display: none;
	}
}

/* -------------------------------------------------------
   Mobile — hamburger + full-screen overlay menu, same
   mechanism as Heron Lakes/Jersey Jump (no sub-menus here).
   ------------------------------------------------------- */
@media (max-width: 1024px) {

	.pw-header-phone,
	.pw-header-cta {
		display: none;
	}

	.pw-header-nav {
		flex: 0 0 auto;
		margin-inline-start: auto;
	}

	/* Hamburger button */
	.pw-mobile-menu-toggle {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 44px;
		height: 44px;
		padding: 8px;
		cursor: pointer;
	}

	.pw-hamburger-line {
		display: block;
		width: 100%;
		height: 2px;
		background-color: var(--color-white);
		transition: transform var(--transition-base), opacity var(--transition-base);
		transform-origin: center;
	}

	/* Hamburger → X when open */
	.pw-header-nav.is-open .pw-mobile-menu-toggle .pw-hamburger-line:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}

	.pw-header-nav.is-open .pw-mobile-menu-toggle .pw-hamburger-line:nth-child(2) {
		opacity: 0;
		transform: scaleX(0);
	}

	.pw-header-nav.is-open .pw-mobile-menu-toggle .pw-hamburger-line:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}

	/* Full-screen overlay — starts below the header, fills the rest of the
	   viewport. display:block (not flex) on purpose: a block-level <li>
	   fills the full row width on its own, with none of the flexbox
	   cross-axis alignment the desktop rule above would otherwise leak
	   in (align-items/gap aren't block-layout properties, so there's
	   nothing to reset or fight against). */
	.pw-main-menu {
		display: none;
		position: fixed;
		top: var(--header-height);
		inset-inline-start: 0;
		width: 100%;
		height: calc(100vh - var(--header-height)); /* dvh fallback below overrides this where supported */
		height: calc(100dvh - var(--header-height));
		z-index: 150;
		background-color: var(--color-dark-900);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.pw-header-nav.is-open .pw-main-menu {
		display: block;
	}

	/* margin: 0 !important already handled by the base .pw-main-menu > li
	   rule above (same Thrive override, applies at every width) */
	.pw-main-menu > li {
		list-style: none;
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	}

	.pw-main-menu > li > a {
		display: block;
		padding: 18px 20px;
		font-size: 1rem;
	}

	/* CTA row — not a nav link, so no border/full-width treatment. The
	   button itself needs no overrides here: .pw-cta-button's own
	   !important rules (main.css) already win over the plain nav-row
	   rule above regardless of nesting. */
	.pw-main-menu > li.pw-mobile-menu-cta-item {
		border-bottom: none;
		padding: 18px 20px 24px;
	}

}

/* Lock body scroll while the mobile menu is open */
body.pw-menu-is-open {
	overflow: hidden;
}