/* ==========================================================================
   Header: one row — logo · navigation · Booking Form
   Desktop dropdowns (≥ 1280px) and mobile / tablet drawer (< 1280px)
   ========================================================================== */

/* ---------- Header shell ---------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	/* Closed dropdown panels sit off to the side; clipping stops them adding a sideways scroll.
	   Open panels are moved fully on screen by navigation.js. */
	overflow-x: clip;
	background: rgba(251, 248, 242, 0.97);
	border-bottom: 1px solid var(--line);
	transition: box-shadow 0.4s var(--ease);
}

.site-header.is-scrolled {
	box-shadow: 0 12px 40px -24px rgba(15, 36, 29, 0.45);
}

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

@media (max-width: 782px) {
	.admin-bar .site-header {
		top: 0;
	}
}

.header-inner {
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: 72px;
	transition: min-height 0.4s var(--ease);
}

.site-header.is-scrolled .header-inner {
	min-height: 62px;
}

/* ---------- Logo ---------- */

.brand {
	display: inline-flex;
	align-items: center;
	flex: none;
}

.brand__logo {
	width: auto;
	height: 50px;
	transition: height 0.4s var(--ease);
}

.site-header.is-scrolled .header-inner > .brand .brand__logo {
	height: 42px;
}

/* The compact mark is only used on desktop widths where the menu needs the room. */
.brand__logo--mark {
	display: none;
}

/* ---------- Actions (mobile / tablet) ---------- */

.header-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

.header-book {
	display: none;
}

@media (min-width: 480px) {
	.header-book {
		display: inline-flex;
	}
}

.nav-toggle {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ink);
	color: #fff;
}

.nav-toggle__bars {
	display: grid;
	gap: 5px;
	width: 20px;
}

.nav-toggle__bars span {
	display: block;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform 0.35s var(--ease), opacity 0.2s;
}

.nav-toggle__bars span:nth-child(3) {
	width: 70%;
}

/* ---------- Navigation: shared ---------- */

.nav-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--sans);
	font-weight: 600;
	color: var(--ink);
	text-decoration: none;
	white-space: nowrap;
}

.nav-chevron {
	width: 16px;
	height: 16px;
	transition: transform 0.35s var(--ease);
}

.sub-toggle {
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ink);
}

.sub-toggle--full {
	display: inline-flex;
}

.sub-toggle[aria-expanded="true"] .nav-chevron {
	transform: rotate(180deg);
}

.sub-link {
	display: grid;
	gap: 2px;
	padding: 10px 14px;
	border-radius: 12px;
	text-decoration: none;
	color: var(--ink);
	transition: background-color 0.25s, color 0.25s, transform 0.25s var(--ease);
}

.sub-title {
	font-size: 0.93rem;
	font-weight: 600;
	line-height: 1.35;
}

.sub-meta {
	font-size: 0.76rem;
	font-weight: 600;
	color: var(--muted);
	letter-spacing: 0.01em;
}

.sub-link:hover,
.sub-link:focus-visible,
.sub-item.is-active > .sub-link {
	background: var(--sand);
}

.sub-link:hover {
	transform: translateX(3px);
}

/* Program links: length tile · title + details · price */
.sub-link--media {
	--menu-accent: var(--coral-deep);
	grid-template-columns: 52px minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
	padding: 8px 10px;
}

/* Category colours (same family as the program pages). */
.sub-link--wellness-programs { --menu-accent: #4f7d2a; }
.sub-link--yoga-trek { --menu-accent: #2b6a8c; }
.sub-link--healing-programs { --menu-accent: #7a4fa3; }
.sub-link--singing-bowl { --menu-accent: #a0661c; }
.sub-link--online-courses { --menu-accent: #1d7a72; }

.sub-badge {
	display: grid;
	place-items: center;
	align-content: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: color-mix(in srgb, var(--menu-accent) 10%, var(--paper));
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--menu-accent) 18%, transparent);
	color: var(--menu-accent);
	line-height: 1;
	transition: background-color 0.3s, color 0.3s, transform 0.4s var(--ease);
}

.sub-badge strong {
	font-family: var(--serif);
	font-size: 1.3rem;
	font-weight: 500;
}

.sub-badge small {
	margin-top: 3px;
	font-size: 0.56rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.sub-badge--icon .icon {
	width: 24px;
	height: 24px;
}

.sub-link--media:hover .sub-badge,
.sub-item.is-active > .sub-link--media .sub-badge {
	background: var(--menu-accent);
	color: #fff;
	transform: scale(1.05) rotate(-3deg);
}

.sub-text {
	display: grid;
	gap: 1px;
	min-width: 0;
}

.sub-price {
	padding: 4px 10px;
	border-radius: var(--pill);
	background: rgba(95, 143, 47, 0.12);
	color: #3f6a1f;
	font-size: 0.74rem;
	font-weight: 800;
	white-space: nowrap;
	transition: background-color 0.25s, color 0.25s;
}

.sub-price--request {
	background: var(--sand-2);
	color: var(--muted);
}

.sub-link--media:hover .sub-price {
	background: var(--ink);
	color: #fff;
}

/* Page links in the "More" menu: icon · title */
.sub-link--icon {
	grid-template-columns: 38px minmax(0, 1fr);
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
}

.sub-icon {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background: var(--sand);
	color: var(--moss);
	transition: background-color 0.25s, color 0.25s;
}

.sub-icon .icon {
	width: 18px;
	height: 18px;
}

.sub-link--icon:hover .sub-icon,
.sub-item.is-active > .sub-link--icon .sub-icon {
	background: var(--ink);
	color: var(--lime);
}

.drawer-head,
.drawer-foot {
	display: none;
}

/* ---------- Navigation: desktop (≥ 1280px) ---------- */

@media (min-width: 1280px) {
	.header-inner {
		max-width: 1760px;
		gap: 16px;
	}

	.nav-toggle,
	.nav-overlay,
	.header-actions {
		display: none !important;
	}

	.primary-nav {
		flex: 1;
		min-width: 0;
		margin-left: clamp(8px, 2vw, 48px);
	}

	/* Spread items evenly so spare width is shared instead of leaving a gap after the logo. */
	.nav-list {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0;
	}

	.nav-item {
		position: relative;
	}

	.nav-row {
		display: flex;
		align-items: center;
	}

	.nav-list > .nav-item > .nav-link,
	.nav-row > .nav-link,
	.sub-toggle--full {
		padding: 24px 2px 24px 10px;
		font-size: 0.9rem;
	}

	.nav-list > .nav-item:not(.has-sub) > .nav-link,
	.sub-toggle--full {
		padding-right: 10px;
	}

	.nav-row .sub-toggle {
		width: 22px;
		height: 40px;
		margin-right: 2px;
	}

	.nav-chevron {
		width: 15px;
		height: 15px;
	}

	.nav-link::after {
		content: "";
		position: absolute;
		left: 10px;
		right: 10px;
		bottom: 15px;
		height: 2px;
		border-radius: 2px;
		background: var(--coral);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 0.4s var(--ease);
	}

	.nav-row > .nav-link::after {
		right: 0;
	}

	.site-header.is-scrolled .nav-link::after {
		bottom: 10px;
	}

	.site-header.is-scrolled .nav-list > .nav-item > .nav-link,
	.site-header.is-scrolled .nav-row > .nav-link,
	.site-header.is-scrolled .sub-toggle--full {
		padding-top: 19px;
		padding-bottom: 19px;
	}

	.nav-item:hover > .nav-link::after,
	.nav-item:hover > .nav-row > .nav-link::after,
	.nav-item.is-open > .nav-row > .nav-link::after,
	.nav-item.is-open > .nav-link::after,
	.nav-item.is-active > .nav-link::after,
	.nav-item.is-active > .nav-row > .nav-link::after {
		transform: scaleX(1);
	}

	/* "Booking Form" menu item shown as the call-to-action button. */
	.nav-item--cta {
		margin-left: 12px;
	}

	.nav-item--cta .nav-cta {
		min-height: 42px;
		padding: 10px 20px;
		font-size: 0.88rem;
	}

	.nav-item--cta .nav-cta::after {
		content: none;
	}

	/* navigation.js lowers --nav-fit only when the menu would not fit on one row
	   (e.g. longer words after Google translation). Sub-menus are not scaled. */
	.nav-list > .nav-item > .nav-link,
	.nav-list > .nav-item > .nav-row,
	.nav-list > .nav-item > .sub-toggle--full,
	.nav-list > .nav-item > .nav-cta {
		zoom: var(--nav-fit, 1);
	}

	.sub-panel {
		position: absolute;
		top: calc(100% - 12px);
		left: 0;
		z-index: 20;
		min-width: 350px;
		padding: 10px;
		border: 1px solid var(--line);
		border-radius: 20px;
		background: var(--paper);
		box-shadow: var(--shadow-lg);
		opacity: 0;
		visibility: hidden;
		transform: translateY(10px) scale(0.98);
		transform-origin: top left;
		transition: opacity 0.3s var(--ease), transform 0.35s var(--ease), visibility 0s linear 0.35s;
	}

	.sub-panel::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -14px;
		height: 14px;
	}

	.nav-item.is-open > .sub-panel {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition-delay: 0s;
	}

	/* navigation.js shifts a panel left/right (--panel-shift) so it never leaves the screen. */
	.sub-panel {
		margin-left: var(--panel-shift, 0px);
	}

	/* Program menus: a single list of programs with a "View all" footer link. */
	.sub-panel--programs {
		width: 500px;
		padding: 10px 10px 8px;
		border-radius: 22px;
	}

	.sub-panel--programs .sub-list {
		display: grid;
		gap: 2px;
	}

	/* "More" menu: two columns of icon links. */
	.sub-panel--links {
		width: 540px;
	}

	.sub-panel--links .sub-list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2px;
	}

	.sub-panel__all {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 8px 2px 0;
		padding: 12px 12px 6px;
		border-top: 1px solid var(--line);
		font-size: 0.86rem;
		font-weight: 700;
		color: var(--coral-deep);
		text-decoration: none;
	}

	.sub-panel__all .icon {
		width: 16px;
		height: 16px;
		transition: transform 0.3s var(--ease);
	}

	.sub-panel__all:hover .icon {
		transform: translateX(4px);
	}

	.sub-list > li {
		opacity: 0;
		transform: translateY(6px);
		transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
	}

	.nav-item.is-open .sub-list > li {
		opacity: 1;
		transform: none;
	}

	.nav-item.is-open .sub-list > li:nth-child(2) { transition-delay: 0.03s; }
	.nav-item.is-open .sub-list > li:nth-child(3) { transition-delay: 0.06s; }
	.nav-item.is-open .sub-list > li:nth-child(4) { transition-delay: 0.09s; }
	.nav-item.is-open .sub-list > li:nth-child(5) { transition-delay: 0.12s; }
	.nav-item.is-open .sub-list > li:nth-child(n + 6) { transition-delay: 0.15s; }
}

/* Laptops (1280–1499px): swap to the compact logo mark so everything fits one row. */
@media (min-width: 1280px) and (max-width: 1499.98px) {
	.primary-nav {
		margin-left: 4px;
	}

	.header-inner > .brand .brand__logo--full {
		display: none;
	}
	.header-inner > .brand .brand__logo--mark {
		display: block;
		height: 48px;
	}
	.site-header.is-scrolled .header-inner > .brand .brand__logo--mark {
		height: 42px;
	}
}

@media (min-width: 1280px) and (max-width: 1759.98px) {
	.header-inner {
		padding-inline: 16px;
		gap: 10px;
	}
	.nav-list > .nav-item > .nav-link,
	.nav-row > .nav-link,
	.sub-toggle--full {
		padding-left: 7px;
		font-size: 0.84rem;
	}
	.nav-list > .nav-item:not(.has-sub) > .nav-link,
	.sub-toggle--full {
		padding-right: 7px;
	}
	.nav-row .sub-toggle {
		width: 18px;
		margin-right: 0;
	}
	.nav-link::after {
		left: 7px;
		right: 7px;
	}
	.nav-item--cta {
		margin-left: 6px;
	}
	.nav-item--cta .nav-cta {
		padding-inline: 16px;
		font-size: 0.84rem;
	}
}

/* Smallest desktops (1280–1365px): slightly smaller menu text. */
@media (min-width: 1280px) and (max-width: 1365.98px) {
	.nav-list > .nav-item > .nav-link,
	.nav-row > .nav-link,
	.sub-toggle--full {
		padding-left: 6px;
		font-size: 0.8rem;
	}
	.nav-list > .nav-item:not(.has-sub) > .nav-link,
	.sub-toggle--full {
		padding-right: 6px;
	}
	.nav-row .sub-toggle {
		width: 16px;
	}
	.nav-chevron {
		width: 13px;
		height: 13px;
	}
	.nav-item--cta .nav-cta {
		padding-inline: 14px;
		font-size: 0.8rem;
	}
}

/* ---------- Navigation: mobile / tablet drawer (< 1280px) ---------- */

@media (max-width: 1279.98px) {
	.primary-nav {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 300;
		display: flex;
		flex-direction: column;
		width: min(420px, calc(100% - 44px));
		height: 100vh;
		height: 100dvh;
		background: var(--cream);
		box-shadow: -30px 0 80px -30px rgba(15, 36, 29, 0.5);
		transform: translateX(105%);
		visibility: hidden;
		transition: transform 0.5s var(--ease), visibility 0s linear 0.5s;
		overscroll-behavior: contain;
	}

	.admin-bar .primary-nav {
		top: 32px;
		height: calc(100dvh - 32px);
	}

	.nav-open .primary-nav {
		transform: none;
		visibility: visible;
		transition-delay: 0s;
	}

	.nav-overlay {
		position: fixed;
		inset: 0;
		z-index: 250;
		background: rgba(15, 36, 29, 0.55);
		opacity: 0;
		transition: opacity 0.4s var(--ease);
	}

	.nav-open .nav-overlay {
		opacity: 1;
	}

	.drawer-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 14px 20px;
		border-bottom: 1px solid var(--line);
	}

	.drawer-head .brand__logo {
		height: 46px;
	}

	.drawer-close {
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		border: 0;
		border-radius: 50%;
		background: var(--sand);
		color: var(--ink);
	}

	.nav-list {
		flex: 1;
		padding: 8px 20px 16px;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.nav-item {
		border-bottom: 1px solid var(--line);
	}

	/* The drawer footer already has the Booking Form button. */
	.nav-item--cta {
		display: none;
	}

	.nav-row,
	.sub-toggle--full {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}

	.nav-list > .nav-item > .nav-link,
	.nav-row > .nav-link,
	.sub-toggle--full {
		flex: 1;
		padding: 15px 0;
		font-size: 1.05rem;
		text-align: left;
	}

	.nav-item.is-active > .nav-link,
	.nav-item.is-active > .nav-row > .nav-link {
		color: var(--coral-deep);
	}

	.nav-row .sub-toggle {
		width: 42px;
		height: 42px;
		border-radius: 50%;
		background: var(--sand);
	}

	.sub-toggle--full .nav-chevron {
		width: 42px;
		height: 42px;
		padding: 12px;
		border-radius: 50%;
		background: var(--sand);
	}

	.sub-panel {
		display: grid;
		grid-template-rows: 0fr;
		visibility: hidden;
		transition: grid-template-rows 0.4s var(--ease), visibility 0s linear 0.4s;
	}

	.nav-item.is-open > .sub-panel {
		grid-template-rows: 1fr;
		visibility: visible;
		transition-delay: 0s;
	}

	.sub-panel__inner {
		min-height: 0;
		overflow: hidden;
	}

	.nav-item.is-open .sub-panel__inner {
		padding-bottom: 12px;
	}

	.sub-list {
		display: grid;
		gap: 2px;
		padding-left: 2px;
	}

	.sub-link {
		padding: 9px 10px;
	}

	.sub-badge {
		width: 46px;
		height: 46px;
	}

	.sub-link--media {
		grid-template-columns: 46px minmax(0, 1fr) auto;
	}

	.sub-panel__all {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 6px 10px 2px;
		font-size: 0.9rem;
		font-weight: 700;
		color: var(--coral-deep);
		text-decoration: none;
	}

	.sub-panel__all .icon {
		width: 16px;
		height: 16px;
	}

	.drawer-foot {
		display: grid;
		gap: 10px;
		padding: 16px 20px 24px;
		border-top: 1px solid var(--line);
		background: var(--sand);
	}

	.drawer-contact {
		margin: 4px 0 0;
		font-size: var(--fs-sm);
		text-align: center;
	}

	.drawer-contact a {
		text-decoration: none;
		font-weight: 600;
	}

	.nav-open .nav-toggle__bars span:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}

	.nav-open .nav-toggle__bars span:nth-child(2) {
		opacity: 0;
	}

	.nav-open .nav-toggle__bars span:nth-child(3) {
		width: 100%;
		transform: translateY(-7px) rotate(-45deg);
	}
}

@media (max-width: 782px) {
	.admin-bar .primary-nav {
		top: 46px;
		height: calc(100dvh - 46px);
	}
}

@media (max-width: 480px) {
	.header-inner {
		min-height: 72px;
	}
	.brand__logo {
		height: 46px;
	}
	.nav-toggle {
		width: 44px;
		height: 44px;
	}
}