/*
 * Site chrome -- header + primary navigation.
 * Native WordPress: header.php renders wp_nav_menu('primary'); every rule
 * below targets CORE menu classes (.menu-item, .menu-item-has-children,
 * .sub-menu) so the markup stays 100% standard and editable in
 * Appearance > Menus. Visual spec ported from the mock site-header
 * (design-reference/mocks/css/styles.css). Tokens carry safe fallbacks so
 * the bar never collapses if a chrome-only var is missing.
 */

:root {
	--header-h: 72px;
	--nav-panel-enter: 340ms;
	--nav-panel-exit: 220ms;
	--nav-panel-switch: 180ms;
	--nav-header-motion: 340ms;
	--nav-motion-out: var(--ease-reveal, cubic-bezier(0.16, 1, 0.3, 1));
	--nav-motion-in: cubic-bezier(0.4, 0, 1, 1);
}

html { scroll-padding-top: calc(var(--header-h) + var(--space-24, 24px)); }

/* Skip link */
.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 1100;
	background: var(--cream); color: var(--text-primary);
	padding: var(--space-8, 8px) var(--space-16, 16px); border-radius: 8px;
}
.skip-link:focus { left: var(--space-16, 16px); top: var(--space-16, 16px); }

/* ---- Fixed floating bar ---- */
.site-header {
	position: fixed; inset: 0 0 auto; z-index: 1000;
	box-sizing: border-box; max-width: 100%;
	padding: clamp(var(--space-8,8px), 1.6vw, var(--space-16,16px)) clamp(var(--space-16,16px), 2vw, var(--space-24,24px)) 0;
	pointer-events: none;
	--nav-pill-bg: color-mix(in srgb, var(--primary) 10%, transparent);
	--nav-pill-hover-bg: color-mix(in srgb, var(--cream) 10%, transparent);
	--nav-pill-border: color-mix(in srgb, var(--primary) 68%, transparent);
	--nav-pill-hover-border: color-mix(in srgb, var(--primary-hover) 92%, transparent);
	--nav-pill-highlight: transparent;
	--nav-pill-hover-highlight: color-mix(in srgb, var(--white) 18%, transparent);
	--nav-pill-text: var(--text-primary);
	--nav-pill-accent: var(--primary-dark);
}
body.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 32px); }
.site-header > * { pointer-events: auto; }
.site-header.is-hidden { pointer-events: auto; }
.site-header.is-hidden:not(:hover):not(:focus-within):not(.nav-forced) > * { pointer-events: none; }

.header-inner {
	max-width: var(--container-wide, 1200px);
	margin: 0 auto;
	display: flex; align-items: center; justify-content: space-between;
	gap: clamp(var(--space-16,16px), 1.8vw, var(--space-32,32px));
	height: var(--header-h);
	padding: 0 clamp(var(--space-16,16px), 2.4vw, var(--space-32,32px));
	box-sizing: border-box;
	background: color-mix(in srgb, var(--cream) 82%, transparent);
	border: 1px solid color-mix(in srgb, var(--warm-sand) 56%, transparent);
	border-radius: 16px;
	box-shadow: 0 18px 44px color-mix(in srgb, var(--deep-forest) 22%, transparent), inset 0 1px 0 color-mix(in srgb, var(--white) 82%, transparent);
	backdrop-filter: blur(22px) saturate(145%);
	-webkit-backdrop-filter: blur(22px) saturate(145%);
	transition: background .3s var(--ease, ease), box-shadow .3s var(--ease, ease);
}

.header-logo { flex-shrink: 0; display: block; position: relative; z-index: 1001; }
.header-logo img {
	display: block; width: auto; object-fit: contain;
	height: clamp(var(--space-48,48px), 5vw, var(--space-64,64px));
	max-width: min(150px, 22vw);
}

.site-nav { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }

/* ---- Desktop nav (native menu markup) ---- */
.nav-list { display: flex; align-items: stretch; gap: 0; list-style: none; margin: 0; padding: 0; height: 100%; }
.nav-list > .menu-item { position: relative; display: flex; align-items: center; }
.nav-list > .menu-item > a {
	font-family: var(--font-body); font-weight: var(--weight-bold, 700); font-size: var(--text-sm);
	text-transform: uppercase; color: var(--text-primary); text-decoration: none; white-space: nowrap;
	padding: var(--space-8,8px) clamp(var(--space-8,8px), 1.25vw, var(--space-24,24px));
	border-radius: 6px; position: relative; display: flex; align-items: center; gap: var(--space-8,8px);
	transition: color .3s var(--ease, ease);
}
.nav-list > .menu-item > a::after {
	content: ''; position: absolute; bottom: 2px; left: 16px; right: 16px; height: 3px; border-radius: 3px;
	background: var(--primary); transform: scaleX(0); transform-origin: right; transition: transform .3s var(--ease, ease);
}
.nav-list > .menu-item.menu-item-has-children > a::before {
	content: ''; order: 2; width: 8px; height: 8px; margin-left: 2px;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg); transition: transform .3s var(--ease, ease); opacity: .7;
}
.nav-list > .menu-item:hover > a, .nav-list > .menu-item:focus-within > a,
.nav-list > .menu-item.current-menu-item > a, .nav-list > .menu-item.current-menu-ancestor > a { color: var(--primary-dark); }
.nav-list > .menu-item:hover > a::after, .nav-list > .menu-item:focus-within > a::after { transform: scaleX(1); transform-origin: left; }
.nav-list > .menu-item:hover > a::before, .nav-list > .menu-item:focus-within > a::before { transform: translateY(1px) rotate(225deg); }

/* Hover bridge so the dropdown doesn't drop when crossing the gap */
.nav-list > .menu-item-has-children::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 12px; }

/* ---- Dropdown panel ---- */
.nav-list .sub-menu {
	position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(6px);
	min-width: 230px; margin: 0; padding: var(--space-8,8px); list-style: none;
	background: color-mix(in srgb, var(--cream) 96%, transparent);
	border: 1px solid color-mix(in srgb, var(--warm-sand) 56%, transparent);
	border-radius: 14px;
	box-shadow: 0 20px 48px color-mix(in srgb, var(--deep-forest) 22%, transparent);
	backdrop-filter: blur(22px) saturate(145%); -webkit-backdrop-filter: blur(22px) saturate(145%);
	opacity: 0; visibility: hidden; pointer-events: none;
	transition: opacity .28s var(--ease, ease), transform .28s var(--ease, ease), visibility .28s;
}
.nav-list > .menu-item:hover > .sub-menu, .nav-list > .menu-item:focus-within > .sub-menu, .nav-list > .menu-item.is-open > .sub-menu {
	opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.nav-list .sub-menu > .menu-item { display: block; }
.nav-list .sub-menu > .menu-item > a {
	display: block; padding: var(--space-8,8px) var(--space-16,16px); border-radius: 8px;
	font-family: var(--font-body); font-weight: var(--weight-medium, 500); font-size: var(--text-sm);
	color: var(--text-primary); text-decoration: none; white-space: nowrap;
	transition: background .2s var(--ease, ease), color .2s var(--ease, ease);
}
.nav-list .sub-menu > .menu-item > a:hover, .nav-list .sub-menu > .menu-item > a:focus-visible {
	background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary-dark);
}

/* ---- Right-side actions ---- */
.nav-actions { display: flex; align-items: center; gap: clamp(var(--space-8,8px), 1.3vw, var(--space-16,16px)); flex: 0 1 auto; min-width: 0; }
.nav-cta {
	font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-bold, 700);
	text-transform: uppercase; min-height: 48px;
	background: var(--primary); color: var(--deep-forest); border: 1px solid var(--primary); border-radius: 10px;
	padding: 0 clamp(var(--space-16,16px), 2vw, var(--space-32,32px));
	display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; text-decoration: none;
	transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.nav-cta:hover, .nav-cta:focus-visible {
	background: var(--primary-hover); border-color: var(--primary-hover);
	box-shadow: 0 12px 24px color-mix(in srgb, var(--deep-forest) 14%, transparent); transform: translateY(-1px);
}

.mobile-header-cta {
	display: none;
	min-height: var(--space-48,48px);
	align-items: center;
	justify-content: center;
	padding-inline: var(--space-24,24px);
	border: 1px solid var(--primary);
	border-radius: var(--radius-sm,6px);
	background: var(--primary);
	color: var(--deep-forest);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--weight-heavy,800);
	line-height: var(--lh-solid,1);
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}
.mobile-header-cta:hover, .mobile-header-cta:focus-visible {
	background: var(--primary-hover);
	border-color: var(--primary-hover);
	color: var(--deep-forest);
	text-decoration: none;
}

/* ---- Hamburger ---- */
.menu-toggle { display: none; flex-direction: column; gap: var(--space-8,8px); background: none; border: none; cursor: pointer; padding: var(--space-16,16px); }
.menu-toggle:focus-visible { outline: 2px solid var(--primary-hover); outline-offset: 2px; border-radius: var(--radius-sm, 6px); }
.menu-toggle span { display: block; width: var(--space-24,24px); height: 2px; border-radius: 2px; background: var(--text-primary); transition: transform .3s var(--ease, ease), opacity .3s var(--ease, ease); }
.menu-toggle.active span:nth-child(1) { transform: translateY(calc(var(--space-8,8px) + 2px)) rotate(45deg); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { transform: translateY(calc(-1 * (var(--space-8,8px) + 2px))) rotate(-45deg); }

/* ---- Mobile drawer ---- */
.mobile-nav {
	display: none; position: fixed; inset: 0; z-index: 999; overflow-y: auto;
	background-color: var(--cream);
	background-image: url("assets/img/decor/paper-cream.webp?v=4");
	background-repeat: repeat;
	color: var(--text-primary);
	opacity: 0; visibility: hidden; transition: opacity .32s var(--ease, ease), visibility .32s var(--ease, ease);
}
.mobile-nav.open { opacity: 1; visibility: visible; }
.mobile-nav__inner { padding: calc(var(--header-h) + var(--space-24,24px)) var(--space-32,32px) var(--space-40,40px); }
.mobile-nav .nav-list { flex-direction: column; align-items: stretch; height: auto; gap: var(--space-4,4px); }
.mobile-nav .nav-list > .menu-item { display: block; }
.mobile-nav .nav-list > .menu-item > a { font-size: var(--text-lg); padding: var(--space-12,12px) 0; }
.mobile-nav .nav-list > .menu-item > a::after { display: none; }
.mobile-nav .menu-item-has-children.is-open > a::before { transform: translateY(1px) rotate(225deg); }
.mobile-nav .sub-menu {
	position: static; opacity: 1; visibility: visible; pointer-events: auto; transform: none;
	box-shadow: none; border: none; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
	min-width: 0; padding: 0 0 var(--space-8,8px) var(--space-16,16px);
	display: none;
}
.mobile-nav .menu-item-has-children.is-open > .sub-menu { display: block; }
.mobile-nav .sub-menu > .menu-item > a { font-size: var(--text-sm); padding: var(--space-8,8px) 0; }
.mobile-nav__actions { margin-top: var(--space-24,24px); }
.mobile-nav__actions .nav-cta { width: 100%; }

body.nav-open { overflow: hidden; }

/* ---- Swap desktop nav for burger below 1024 ---- */
@media (max-width: 1024px) {
	.site-nav { display: none; }
	.nav-actions { display: none; }
	.header-inner { gap: var(--space-8,8px); padding-right: var(--space-8,8px); }
	.header-logo { flex: 1 1 auto; min-width: 0; }
	.header-logo img { max-width: clamp(calc(var(--space-96,96px) + var(--space-8,8px)), 24vw, calc(var(--space-120,120px) + var(--space-32,32px))); }
	.mobile-header-cta { display: inline-flex; flex: 0 0 auto; }
	.menu-toggle { display: flex; align-items: center; justify-content: center; align-self: center; }
	.mobile-nav { display: block; }
}

/* Phone banners begin below a flush, opaque navigation shell. This keeps the
 * hero artwork touching the viewport edges without exposing its fallback
 * colour around the old floating header. The homepage's higher-specificity
 * transparent-at-top state still removes this surface until scrolling. */
@media (max-width: 767px) {
	.site-header { padding: 0; }
	.header-inner {
		width: 100%;
		max-width: none;
		height: var(--header-h);
		padding-inline: var(--space-16,16px);
		border-width: 0 0 1px;
		border-radius: 0;
		background: var(--cream);
		box-shadow: 0 8px 24px color-mix(in srgb, var(--deep-forest) 18%, transparent);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}

@media (max-width: 480px) {
	.nav-actions .nav-cta { padding: 0 var(--space-16,16px); font-size: var(--text-xs); }
}

@media (prefers-reduced-motion: reduce) {
	.site-header, .header-inner, .nav-list .sub-menu, .menu-toggle span, .mobile-nav { transition: none; }
}

/* ===== Adventure image-card mega nav (desktop) ===================================
 * Walker (inc/nav-walker.php) renders each top-level item's children as a
 * full-bar mega panel of image cards, media from each linked page's Featured
 * Image. Reveals on hover/focus-within. Mobile drawer keeps the default menu. */
.header-inner { position: relative; }
.nav-list > .nav-item { position: relative; display: flex; align-items: center; }
.nav-list > .nav-item.has-mega { position: static; }
.nav-list > .nav-item > .nav-link {
	font-family: var(--font-body); font-weight: var(--weight-bold, 700); font-size: var(--text-sm);
	text-transform: uppercase; color: var(--text-primary); text-decoration: none; white-space: nowrap;
	padding: var(--space-8, 8px) clamp(var(--space-8, 8px), 1.25vw, var(--space-24, 24px));
	display: flex; align-items: center; gap: var(--space-8, 8px); position: relative;
	margin: 0; border: 0; border-radius: var(--radius-sm, 6px); background: transparent; appearance: none; cursor: pointer;
	transition: color .3s var(--ease, ease);
}
.nav-list > .nav-item.has-mega > .nav-link::after {
	content: ''; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg); opacity: .7; transition: transform .3s var(--ease, ease);
}
.nav-list > .nav-item:hover > .nav-link, .nav-list > .nav-item:focus-within > .nav-link, .nav-list > .nav-item.is-current > .nav-link { color: var(--primary-dark); }
.nav-list > .nav-item.mega-open > .nav-link { color: var(--primary-dark); }
.nav-list > .nav-item.mega-open > .nav-link::after { transform: translateY(1px) rotate(225deg); }

.mega-menu.adventure-menu {
	position: absolute; top: 100%; left: -1px; right: -1px; z-index: 50;
	padding: var(--space-24, 24px);
	overflow: hidden;
	background: var(--cream);
	border: 1px solid color-mix(in srgb, var(--warm-sand) 56%, transparent); border-top: 0;
	border-radius: 0 0 var(--radius-lg, 16px) var(--radius-lg, 16px);
	box-shadow: 0 var(--space-16, 16px) var(--space-40, 40px) color-mix(in srgb, var(--deep-forest) 22%, transparent);
	opacity: 0; visibility: hidden; pointer-events: none;
	clip-path: inset(0 0 100% 0 round 0 0 var(--radius-lg, 16px) var(--radius-lg, 16px));
	transform: translateY(-2px) scale(.995); transform-origin: top center;
	transition:
		opacity 150ms var(--nav-motion-in),
		clip-path var(--nav-panel-exit) var(--ease, ease),
		transform var(--nav-panel-exit) var(--ease, ease),
		visibility 0s linear var(--nav-panel-exit);
}
.nav-list > .nav-item.mega-open > .adventure-menu {
	opacity: 1; visibility: visible; pointer-events: auto;
	clip-path: inset(0 0 0 0 round 0 0 var(--radius-lg, 16px) var(--radius-lg, 16px));
	transform: translateY(0) scale(1);
	transition:
		opacity 170ms ease-out,
		clip-path var(--nav-panel-enter) var(--nav-motion-out),
		transform var(--nav-panel-enter) var(--nav-motion-out),
		visibility 0s linear 0s;
}
.adventure-menu__head,
.adventure-menu__grid > * {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 110ms ease, transform 160ms var(--ease, ease);
}
.nav-item.mega-open .adventure-menu__head,
.nav-item.mega-open .adventure-menu__grid > * {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 180ms ease-out, transform 280ms var(--nav-motion-out);
}
.nav-item.mega-open .adventure-menu__head { transition-delay: 35ms; }
.nav-item.mega-open .adventure-menu__grid > :nth-child(1) { transition-delay: 55ms; }
.nav-item.mega-open .adventure-menu__grid > :nth-child(2) { transition-delay: 75ms; }
.nav-item.mega-open .adventure-menu__grid > :nth-child(3) { transition-delay: 95ms; }
.nav-item.mega-open .adventure-menu__grid > :nth-child(4) { transition-delay: 115ms; }
.nav-item.mega-open .adventure-menu__grid > :nth-child(5) { transition-delay: 135ms; }
.nav-item.mega-open .adventure-menu__grid > :nth-child(n+6) { transition-delay: 155ms; }

/* Keep the dropdown shell continuously open when moving between top-level
 * items. Only the contents crossfade; the full roll-up is reserved for exit. */
.site-header.is-mega-switching .nav-item.mega-open > .adventure-menu {
	opacity: 1; visibility: visible; clip-path: inset(0 0 0 0 round 0 0 var(--radius-lg, 16px) var(--radius-lg, 16px));
	transform: none; transition: none;
}
.site-header.is-mega-switching .nav-item.mega-switch-from > .adventure-menu {
	z-index: 50; pointer-events: none;
}
.site-header.is-mega-switching .nav-item.mega-switch-to > .adventure-menu {
	z-index: 51; pointer-events: auto; background: transparent; border-color: transparent; box-shadow: none;
}
.site-header.is-mega-switching .mega-switch-from .adventure-menu__head,
.site-header.is-mega-switching .mega-switch-from .adventure-menu__grid > *,
.site-header.is-mega-switching .mega-switch-to .adventure-menu__head,
.site-header.is-mega-switching .mega-switch-to .adventure-menu__grid > * {
	transition: none;
	transition-delay: 0s;
}
.site-header.is-mega-switching.is-switch-ready .mega-switch-from .adventure-menu__head,
.site-header.is-mega-switching.is-switch-ready .mega-switch-from .adventure-menu__grid > *,
.site-header.is-mega-switching.is-switch-ready .mega-switch-to .adventure-menu__head,
.site-header.is-mega-switching.is-switch-ready .mega-switch-to .adventure-menu__grid > * {
	transition: opacity var(--nav-panel-switch) ease, transform var(--nav-panel-switch) var(--nav-motion-out);
	transition-delay: 0s;
}
.site-header.is-mega-switching .mega-switch-from .adventure-menu__head,
.site-header.is-mega-switching .mega-switch-from .adventure-menu__grid > * {
	opacity: 1; transform: translateX(0);
}
.site-header.is-mega-switching .mega-switch-to .adventure-menu__head,
.site-header.is-mega-switching .mega-switch-to .adventure-menu__grid > * {
	opacity: 0; transform: translateX(10px);
}
.site-header.is-mega-switching.switch-backward .mega-switch-to .adventure-menu__head,
.site-header.is-mega-switching.switch-backward .mega-switch-to .adventure-menu__grid > * {
	transform: translateX(-10px);
}
.site-header.is-mega-switching.is-switch-active .mega-switch-from .adventure-menu__head,
.site-header.is-mega-switching.is-switch-active .mega-switch-from .adventure-menu__grid > * {
	opacity: 0; transform: translateX(-10px);
}
.site-header.is-mega-switching.switch-backward.is-switch-active .mega-switch-from .adventure-menu__head,
.site-header.is-mega-switching.switch-backward.is-switch-active .mega-switch-from .adventure-menu__grid > * {
	transform: translateX(10px);
}
.site-header.is-mega-switching.is-switch-active .mega-switch-to .adventure-menu__head,
.site-header.is-mega-switching.is-switch-active .mega-switch-to .adventure-menu__grid > * {
	opacity: 1; transform: translateX(0);
}
.adventure-menu__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-16, 16px); align-items: stretch; }
.adventure-card { position: relative; display: block; min-height: 240px; overflow: hidden; border-radius: var(--radius-md, 12px); background: var(--deep-forest); color: var(--white); text-decoration: none; transition: box-shadow .24s ease, transform .24s ease; }
.adventure-card__media { position: absolute; inset: 0; background-color: var(--deep-forest); background-position: center; background-size: cover; background-repeat: no-repeat; }
.adventure-card__body { position: absolute; inset-inline: 0; bottom: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; padding: var(--space-16, 16px); background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--deep-forest) 50%, transparent) 48%, color-mix(in srgb, var(--deep-forest) 90%, transparent) 100%); transition: gap .28s ease; }
.adventure-card:hover .adventure-card__body, .adventure-card:focus-within .adventure-card__body { gap: var(--space-8, 8px); }
.adventure-card__title { color: var(--white); font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-heavy, 800); line-height: var(--lh-snug); text-transform: uppercase; text-shadow: 0 4px 12px color-mix(in srgb, var(--deep-forest) 55%, transparent); }
.adventure-card__desc, .adventure-card__cta { max-height: 0; overflow: hidden; opacity: 0; transform: translateY(var(--space-8, 8px)); transition: max-height .28s ease, opacity .22s ease, transform .28s ease; }
.adventure-card__desc { color: var(--white); font-family: var(--font-body); font-size: var(--text-xs); line-height: var(--lh-normal); }
.adventure-card__cta { color: var(--primary); font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-heavy, 800); text-transform: uppercase; }
.adventure-card:hover .adventure-card__desc, .adventure-card:focus-within .adventure-card__desc, .adventure-card:hover .adventure-card__cta, .adventure-card:focus-within .adventure-card__cta { max-height: 104px; opacity: 1; transform: translateY(0); }
.adventure-card:hover, .adventure-card:focus-visible { box-shadow: 0 16px 32px color-mix(in srgb, var(--deep-forest) 50%, transparent); transform: translateY(-2px); }

@media (max-width: 1024px) { .mega-menu.adventure-menu { display: none; } }
/* ===== Header scroll states (is-scrolled / is-hidden / home transparent) =========
 * JS (chrome.js) toggles .is-scrolled (solid past 24px), .is-hidden (hide on
 * scroll-down past the hero, reveal on scroll-up) and keeps the bar visible
 * while hovered / focused / a mega is open. */
.site-header .header-inner {
	--nav-header-ease: var(--nav-motion-out);
	opacity: 1; transform: translateY(0);
	transition: background .3s var(--ease, ease), border-color .3s var(--ease, ease), border-radius .22s var(--ease, ease), box-shadow .3s var(--ease, ease), transform var(--nav-header-motion) var(--nav-header-ease), opacity var(--nav-header-motion) var(--nav-header-ease), backdrop-filter .3s var(--ease, ease);
}
.site-header.is-hidden:not(:hover):not(:focus-within):not(.nav-forced) .header-inner {
	--nav-header-ease: var(--nav-motion-in);
	transform: translateY(calc(-100% - var(--space-24, 24px)));
	opacity: 0;
}

/* The bar and panel behave as one object. Keep the bar in this joined state
 * until the panel's exit transition has fully finished. */
.site-header.has-mega-open .header-inner,
.site-header.is-nav-closing .header-inner {
	background: var(--cream);
	border-bottom-color: transparent;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* Home hero: bar loads transparent over the hero, solid on scroll / hover /
 * focus / open mega. WP adds body.home on the front page. */
body.home .site-header:not(.is-scrolled):not(.nav-forced):not(.has-mega-open):not(.is-nav-closing):not(:hover):not(:focus-within) {
	--nav-pill-bg: color-mix(in srgb, var(--deep-forest) 30%, transparent);
	--nav-pill-hover-bg: color-mix(in srgb, var(--deep-forest) 44%, transparent);
	--nav-pill-border: color-mix(in srgb, var(--white) 32%, transparent);
	--nav-pill-hover-border: color-mix(in srgb, var(--primary-hover) 84%, transparent);
	--nav-pill-highlight: color-mix(in srgb, var(--white) 10%, transparent);
	--nav-pill-hover-highlight: color-mix(in srgb, var(--white) 20%, transparent);
	--nav-pill-text: var(--white);
	--nav-pill-accent: var(--primary-hover);
}
body.home .site-header:not(.is-scrolled):not(.nav-forced):not(.has-mega-open):not(.is-nav-closing):not(:hover):not(:focus-within) .header-inner {
	background: transparent; border-color: transparent; box-shadow: none;
	backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.home .site-header:not(.is-scrolled):not(.nav-forced):not(.has-mega-open):not(.is-nav-closing):not(:hover):not(:focus-within) .nav-list > .nav-item > .nav-link {
	color: var(--white); text-shadow: 0 1px 12px color-mix(in srgb, var(--deep-forest) 60%, transparent);
}
body.home .site-header:not(.is-scrolled):not(.nav-forced):not(.has-mega-open):not(.is-nav-closing):not(:hover):not(:focus-within) .menu-toggle span { background: var(--white); }

/* A mega panel is solid cream, so never let it open over a transparent bar. */
body.home .site-header.has-mega-open:not(.is-scrolled) .header-inner,
body.home .site-header.is-nav-closing:not(.is-scrolled) .header-inner {
	background: var(--cream);
	border-color: color-mix(in srgb, var(--warm-sand) 56%, transparent);
	border-bottom-color: transparent;
	box-shadow: none;
	backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.home .site-header.has-mega-open:not(.is-scrolled) .nav-list > .nav-item > .nav-link,
body.home .site-header.is-nav-closing:not(.is-scrolled) .nav-list > .nav-item > .nav-link { color: var(--text-primary); text-shadow: none; }

@media (prefers-reduced-motion: reduce) {
	.site-header .header-inner,
	.mega-menu.adventure-menu,
	.adventure-menu__head,
	.adventure-menu__grid > * { transition: none; }
	.mega-menu.adventure-menu { clip-path: none; transform: none; }
	.adventure-menu__head,
	.adventure-menu__grid > * { transform: none; }
}
/* ===== Adventure mega: head, feature upsell, event pill, active underline ===== */
/* Active / open underline under the nav label (green). */
.nav-list > .nav-item > .nav-link::before {
	content: ''; position: absolute; left: clamp(var(--space-8,8px), 1.25vw, var(--space-24,24px)); right: clamp(var(--space-8,8px), 1.25vw, var(--space-24,24px)); bottom: 2px; height: 3px; border-radius: 3px;
	background: var(--primary); transform: scaleX(0); transform-origin: right; transition: transform .3s var(--ease, ease);
}
.nav-list > .nav-item:hover > .nav-link::before, .nav-list > .nav-item.mega-open > .nav-link::before, .nav-list > .nav-item.is-current > .nav-link::before { transform: scaleX(1); transform-origin: left; }

/* Mega head. */
.adventure-menu__head { display: flex; align-items: center; gap: var(--space-16,16px); margin-bottom: var(--space-24,24px); }
.adventure-menu__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: var(--primary); }
.adventure-menu__icon svg, .adventure-menu__icon img, .adventure-menu__icon .roarr-ui-icon, .adventure-menu__icon .roarr-generated-icon { width: var(--space-48,48px); height: var(--space-48,48px); }
.adventure-menu__heading { display: flex; flex-direction: column; gap: var(--space-4,4px); min-width: 0; }
.adventure-menu__heading strong { color: color-mix(in srgb, var(--primary-dark) 72%, var(--deep-forest)); font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-heavy,800); line-height: var(--lh-tight); text-transform: uppercase; }
.adventure-menu__heading span { color: var(--text-secondary); font-family: var(--font-body); font-size: var(--text-xs); line-height: var(--lh-snug); }

/* Grid: 5 card columns + a wider cross-sell feature column. */
.adventure-menu__grid { grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.4fr); }

/* Cross-sell feature card. */
.adventure-feature { position: relative; display: flex; align-items: flex-end; overflow: hidden; border-radius: var(--radius-md,12px); background-color: var(--deep-forest); background-position: center; background-size: cover; background-repeat: no-repeat; text-decoration: none; transition: box-shadow .2s ease, transform .2s ease; }
.adventure-feature::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--deep-forest) 12%, transparent) 0%, color-mix(in srgb, var(--deep-forest) 84%, transparent) 86%); }
.adventure-feature__body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--space-8,8px); padding: var(--space-24,24px); }
.adventure-feature__title { color: var(--white); font-family: var(--font-body); font-size: var(--text-lg); font-weight: var(--weight-heavy,800); line-height: var(--lh-snug); text-transform: uppercase; }
.adventure-feature__cta { color: var(--primary); font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-heavy,800); text-transform: uppercase; }
.adventure-feature:hover, .adventure-feature:focus-visible { box-shadow: 0 16px 32px color-mix(in srgb, var(--deep-forest) 50%, transparent); transform: translateY(-2px); }

/* Event pill (nav-actions). */
.nav-event-pill { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8,8px); min-width: 0; min-height: 48px; padding: 0 clamp(var(--space-16,16px), 1.4vw, var(--space-24,24px)); border-radius: var(--radius-sm,10px); border: 2px solid var(--nav-pill-border); background: var(--nav-pill-bg); box-shadow: inset 0 1px 0 var(--nav-pill-highlight); color: var(--nav-pill-text); text-decoration: none; white-space: nowrap; flex-shrink: 1; transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.nav-event-pill:hover, .nav-event-pill:focus-visible { border-color: var(--nav-pill-hover-border); background: var(--nav-pill-hover-bg); box-shadow: inset 0 1px 0 var(--nav-pill-hover-highlight); transform: translateY(-1px); }
.nav-event-pill__icon { flex: 0 0 var(--space-40,40px); display: block; width: var(--space-40,40px); height: var(--space-40,40px); max-width: var(--space-40,40px); max-height: var(--space-40,40px); color: var(--nav-pill-accent); }
.nav-event-pill__icon svg, .nav-event-pill__icon img, .nav-event-pill__icon .roarr-ui-icon, .nav-event-pill__icon .roarr-generated-icon { width: 100%; height: 100%; }
.nav-event-pill__copy { display: grid; justify-items: center; gap: var(--space-8,8px); min-width: 0; overflow: hidden; line-height: var(--lh-solid,1); transform: translateY(1px); }
.nav-event-pill__title, .nav-event-pill__detail { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-heavy,800); line-height: var(--lh-solid,1); text-align: center; text-transform: uppercase; color: var(--nav-pill-text); }
.nav-event-pill__detail { color: var(--nav-pill-accent); }
.nav-event-pill--desktop { max-width: calc((var(--space-120,120px) * 2) + var(--space-64,64px)); }

/* Header CTA + event pill responsiveness. */
.nav-cta--compact { display: none; }
@media (max-width: 1024px) {
	.nav-cta--full { display: none; }
	.nav-cta--compact { display: inline-flex; padding: 0 var(--space-16,16px); }
	.nav-actions .nav-event-pill__detail { display: none; }
	.nav-actions .nav-event-pill__title { max-width: 15ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 420px) {
	.site-header { padding-inline: 0; }
	.header-inner { height: var(--header-h); padding-inline: var(--space-16,16px); gap: var(--space-8,8px); }
	.header-logo img { height: var(--space-48,48px); max-width: 26vw; }
	.mobile-header-cta { min-height: var(--space-48,48px); padding-inline: var(--space-16,16px); font-size: var(--text-xs); }
	.header-inner .menu-toggle { padding: var(--space-8,8px); }
	.mobile-nav-inner { padding-inline: var(--space-24,24px); }
}
/* ===== Mobile drawer drill-down (folder-style) ================================== */
.mobile-nav-inner { position: relative; display: grid; min-height: 100%; align-content: stretch; gap: var(--space-24,24px); padding: calc(var(--header-h,72px) + var(--space-24,24px)) var(--space-32,32px) var(--space-40,40px); }
.mobile-nav-inner::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--primary) 0 50%, var(--primary-dark) 50% 100%); }
.mobile-nav-views { display: grid; }
.mobile-nav-panel { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: stretch; gap: var(--space-24,24px); transition: opacity .3s var(--ease,ease), transform .3s var(--ease,ease); }
.mobile-nav-panel[hidden] { display: none; }
.mobile-nav-panel--sub { opacity: 0; visibility: hidden; transform: translateX(var(--space-48,48px)); pointer-events: none; }
.mobile-nav-views.is-sub .mobile-nav-panel--root { opacity: 0; visibility: hidden; transform: translateX(calc(-1 * var(--space-48,48px))); pointer-events: none; }
.mobile-nav-views.is-sub .mobile-nav-panel--sub.is-active { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.mobile-nav-back { display: inline-flex; align-items: center; gap: var(--space-8,8px); align-self: flex-start; margin: 0; padding: var(--space-8,8px) 0; border: none; background: none; color: var(--text-secondary); font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-heavy,800); text-transform: uppercase; letter-spacing: .04em; cursor: pointer; }
.mobile-nav-back:hover, .mobile-nav-back:focus-visible { color: var(--primary-dark); }
.mobile-nav-back__chevron { display: inline-flex; width: var(--space-16,16px); height: var(--space-16,16px); transform: rotate(90deg); }
.mobile-nav-back__chevron svg, .mobile-nav-back__chevron img { width: 100%; height: 100%; }
.mobile-nav-panel__head { display: grid; gap: var(--space-8,8px); }
.mobile-nav-panel__title { margin: 0; color: var(--text-primary); font-family: var(--font-body); font-size: var(--text-xl); font-weight: var(--weight-heavy,800); line-height: var(--lh-tight); text-transform: uppercase; }
.mobile-nav-panel__desc { margin: 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--lh-normal); }
.mobile-nav-list { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.mobile-nav-item { border-bottom: 1px solid color-mix(in srgb, var(--deep-forest) 10%, transparent); }
.mobile-nav-link { display: flex; align-items: center; gap: var(--space-16,16px); width: 100%; margin: 0; padding: var(--space-16,16px) var(--space-8,8px); border: none; background: none; text-align: left; cursor: pointer; color: var(--text-primary); font-family: var(--font-body); font-size: var(--text-lg); font-weight: var(--weight-heavy,800); line-height: var(--lh-tight); text-decoration: none; text-transform: uppercase; }
.mobile-nav-link:hover, .mobile-nav-link:focus-visible { color: var(--primary-dark); }
.mobile-nav-link__icon { display: grid; place-items: center; flex: 0 0 auto; width: var(--space-48,48px); height: var(--space-48,48px); border: 1px solid color-mix(in srgb, var(--warm-sand) 60%, transparent); border-radius: var(--radius-sm,6px); background: color-mix(in srgb, var(--cream) 72%, transparent); color: var(--primary-dark); }
.mobile-nav-link__icon svg, .mobile-nav-link__icon img, .mobile-nav-link__icon .roarr-ui-icon { width: var(--space-24,24px); height: var(--space-24,24px); }
.mobile-nav-link__icon .roarr-generated-icon { width: calc(var(--space-48,48px) - var(--space-8,8px)); height: calc(var(--space-48,48px) - var(--space-8,8px)); }
.mobile-nav-link__label { flex: 1 1 auto; }
.mobile-nav-link__chevron { display: inline-flex; flex: 0 0 auto; width: var(--space-16,16px); height: var(--space-16,16px); color: var(--text-secondary); transform: rotate(-90deg); }
.mobile-nav-link__chevron svg, .mobile-nav-link__chevron img { width: 100%; height: 100%; }
.mobile-nav-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin-top: auto; background: var(--primary); color: var(--deep-forest); border-radius: 10px; padding: 0 var(--space-24,24px); font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-heavy,800); text-transform: uppercase; text-decoration: none; }
.mobile-nav-cta:hover, .mobile-nav-cta:focus-visible { background: var(--primary-hover); }
.mobile-nav-event { display: block; overflow: hidden; line-height: 0; border-radius: var(--radius-md,12px); box-shadow: 0 16px 32px color-mix(in srgb, var(--deep-forest) 20%, transparent); text-decoration: none; }
.mobile-nav-event[hidden] { display: none; }
.mobile-nav-event__img { display: block; width: 100%; height: auto; }

/* High-contrast, two-tone keyboard focus treatment remains visible over both
 * the transparent hero state and the solid cream menu state. */
.site-header :is(a, button):focus-visible,
.mobile-nav :is(a, button):focus-visible {
	outline: 2px solid var(--primary-dark);
	outline-offset: 3px;
	box-shadow: 0 0 0 5px var(--cream);
	text-decoration: none;
}

/* All nav state changes still happen, but without interpolated movement when
 * the visitor has requested reduced motion. Kept last to cover every layer. */
@media (prefers-reduced-motion: reduce) {
	.site-header,
	.site-header *,
	.site-header *::before,
	.site-header *::after,
	.mobile-nav,
	.mobile-nav *,
	.mobile-nav *::before,
	.mobile-nav *::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}