/* Lock page scroll when menu is open */
html.cnav-lock,
body.cnav-lock {
	overflow: hidden;
}

/* Overlay */
.cnav-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.cnav-overlay.is-open {
	opacity: 1;
	pointer-events: auto;
}

.cnav-overlay-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(220, 220, 220, 0.6);
	backdrop-filter: blur(4px);
}

/* Shell */
.cnav-shell {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	height: 100dvh;
	overflow: hidden;
	transform: translateY(-200px);
	transition: transform 0.3s ease;
}

.cnav-overlay.is-open .cnav-shell {
	transform: translateY(0);
}

/* Static header */
.cnav-shell-header {
	position: relative;
	z-index: 2;
	flex: 0 0 auto;
	background: var(--copper-color);
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: 44px;
	color: #fff;
	padding: 0 .5rem;
}

.cnav-shell-header-center {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

.cnav-shell-title {
	font-weight: 500;
}

.cnav-back,
.cnav-close {
	border: 0;
	background: none;
	padding: 0.5rem;
	cursor: pointer;
	font: inherit;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: #fff;
}

.cnav-back.is-hidden {
	display: none !important;
}

.cnav-close {
	margin-left: auto;
	justify-self: end;
	font-size: 1.5rem;
	line-height: 1;
}

.cnav-panels {
	position: relative;
	z-index: 2;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
}

.cnav-shell-bg {
	position: absolute;
	inset: -4px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	filter: blur(2px) brightness(0.8);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
	z-index: 0;
}

.cnav-shell-bg.has-bg {
	opacity: 1;
}

/* Panels */
.cnav-panel {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	transform: translateY(18px);
	opacity: 0;
	transition: transform 0.4s ease, opacity 0.3s ease;
	background: transparent;
	overflow: hidden;
	will-change: transform, opacity;
}

.cnav-panel.is-active {
	transform: translateY(0);
	opacity: 1;
	z-index: 3;
}

.cnav-panel.is-prev {
	transform: translateY(-50px);
	opacity: 0;
	z-index: 1;
	pointer-events: none;
}

.cnav-panel.is-next {
	transform: translateY(50px);
	opacity: 0;
	z-index: 0;
	pointer-events: none;
}

/* Only the panel content area scrolls */
.cnav-panel-body {
	position: relative;
	z-index: 1;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.cnav-panel-body::-webkit-scrollbar {
	width: 0;
	height: 0;
	display: none;
}

/* Root cards - mobile/tablet first */
.cnav-mobile-nav {
	display: none;
}

.cnav-root-list {
	list-style: none;
	margin: 0;
	padding: 1rem;
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

.cnav-root-item {
	margin: 0;
	width: calc(50% - .5rem);
}

.cnav-root-card {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: rgba(250, 248, 245, 0.85);
	padding: .5rem .5rem 0 .5rem;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.cnav-root-card-header {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	min-height: 50px;
	order: 2;
}

.cnav-root-card-body {
	position: relative;
	min-width: 0;
	order: 1;
}

.cnav-root-primary {
	min-width: 0;
}

.cnav-root-card-image {
	width: 100%;
	aspect-ratio: 4 / 3;
	background-color: var(--copper-color);
	border-radius: 5px;
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.cnav-root-image-link {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.cnav-root-link-icon {
	display: none;
}

.cnav-root-link {
	text-decoration: none;
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1.1;
	min-width: 0;
	max-width: calc(100% - 44px);
}

/* Direct children are shown inline on desktop only. */
.cnav-root-subnav {
	display: none;
}

/* Standard drill-down list rows */
.cnav-list {
	list-style: none;
	margin: 0;
	padding: 1rem;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}

.cnav-list-item {
	margin: 0;
	background: rgba(255, 255, 255, 0.85);
	border-radius: 8px;
	padding: .5rem;
	box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.cnav-list-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	min-height: 58px;
}

.cnav-list-thumb {
	height: 64px;
	aspect-ratio: 1 / 1;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: var(--copper-color);
	border-radius: 3px;
	display: block;
	flex: 0 0 auto;
}

.cnav-list-link {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	text-decoration: none;
	padding: 1rem 0;
	font-weight: 400;
	color: #8ab3d6;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Forward buttons */
.cnav-forward {
	border: 0;
	display: inline-flex;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	color: #8ab3d6;
	justify-content: center;
	align-items: center;
	box-shadow: 0 0 0 2px inset;
	background: transparent;
	flex: 0 0 auto;
	cursor: pointer;
	position: relative;
}

.cnav-forward.outlined:before {
	border-radius: 50%;
	border: 1px solid transparent;
}

/* Existing responsive treatment for drill-down panels */
@media screen and (max-width: 1100px) {
	.cnav-list {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media screen and (max-width: 820px) {
	.cnav-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 560px) {
	.cnav-root-item {
		width: 100%;
	}

	.cnav-list {
		grid-template-columns: 1fr;
	}
}

/* Desktop root navigation */
@media screen and (min-width: 768px) {
	.cnav-overlay-backdrop {
		background: rgba(7, 16, 28, 0.5);
		backdrop-filter: blur(15px);
	}

	.cnav-shell {
		width: 100%;
	}

	.cnav-shell-bg {
		filter: blur(3px) brightness(0.45);
	}

	/* The desktop header is now a floating control layer rather than a bar. */
	.cnav-shell-header {
		position: absolute;
		top: 1.25rem;
		left: 1.25rem;
		right: 1.25rem;
		z-index: 10;
		min-height: 44px;
		padding: 0;
		background: transparent;
		pointer-events: none;
	}

	.cnav-shell-header-left,
	.cnav-shell-header-center,
	.cnav-shell-header-right,
	.cnav-back,
	.cnav-close {
		pointer-events: auto;
	}

	.cnav-shell-header-center {
		color: #fff;
	}

	.cnav-back {
		min-height: 42px;
		padding: .65rem .9rem;
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.12);
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
		backdrop-filter: blur(8px);
	}

	.cnav-back:hover,
	.cnav-back:focus-visible {
		background: rgba(255, 255, 255, 0.2);
	}

	.cnav-close {
		width: 44px;
		height: 44px;
		padding: 0;
		border-radius: 50%;
		justify-content: center;
		background: rgba(112, 140, 171, 0.29);
		box-shadow: 0 3px 12px rgba(0, 0, 0, 0.28);
		transition: transform .2s ease, filter .2s ease;
	}

	.cnav-close:hover,
	.cnav-close:focus-visible {
		filter: brightness(1.08);
		transform: scale(1.05);
	}

	.cnav-close:focus-visible,
	.cnav-back:focus-visible {
		outline: 2px solid #fff;
		outline-offset: 3px;
	}

	.cnav-panel[data-panel-id="root"] .cnav-panel-body {
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.cnav-root-list {
		--cnav-root-card-width: clamp(280px, 22vw, 360px);
		--cnav-root-leading-gutter: 1rem;
		--cnav-root-trailing-gutter: 1rem;
		display: flex;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 1rem;
		width: 100%;
		box-sizing: border-box;
		margin: auto 0 0;
		padding: 1rem var(--cnav-root-trailing-gutter) .75rem var(--cnav-root-leading-gutter);
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 50%;
		scroll-behavior: smooth;
		overscroll-behavior-inline: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		position: relative;
	}

	.cnav-root-list::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
	}

	.cnav-root-list.is-dragging {
		scroll-snap-type: none;
		cursor: grabbing;
		user-select: none;
	}

	.cnav-root-list.is-loop-jumping {
		scroll-behavior: auto !important;
		scroll-snap-type: none !important;
	}

	.cnav-root-list a {
		-webkit-user-drag: none;
	}

	.cnav-root-list:not(.is-dragging) {
		cursor: grab;
	}

	.cnav-root-item {
		flex: 0 0 var(--cnav-root-card-width);
		width: auto;
		min-width: 0;
		margin: 0;
		scroll-snap-align: center;
		scroll-snap-stop: always;
	}

	.cnav-root-item.has-children {
		flex-basis: calc(var(--cnav-root-card-width) * 2);
	}

	.cnav-root-card {
		height: 100%;
		padding: .5rem;
		background: rgba(18, 51, 76, 0.7);
		box-shadow: 0 8px 28px rgba(0, 0, 0, 0.24);
	}

	.cnav-root-card-header {
		order: 1;
		min-height: 0;
		padding: 0 .15rem .5rem .15rem;
		align-items: flex-start;
	}

	/* Avoid an empty header when a card has no subtitle. */
	.cnav-root-card-header.has-no-subtitle {
		display: none;
	}

	.cnav-root-header-copy {
		min-width: 0;
		max-width: 100%;
	}

	.cnav-root-subtitle {
		display: -webkit-box;
		margin: 0;
		max-width: 100%;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		/* font-size: .78rem; */
		font-weight: 500;
		line-height: 1.3;
		color: var(--mid-grey-font-color);
	}

	.cnav-root-card-body {
		order: 2;
	}

	/* The image itself remains the link; its title is an overlay. */
	.cnav-root-link {
		position: absolute;
		/* left: 50%; */
		/* top: 50%; */
		z-index: 1;
		display: inline-flex;
		align-items: center;
		gap: .45rem;
		/* max-width: calc(100% - 2rem); */
		font-size: clamp(1.15rem, 1.75vw, 1.6rem);
		color: #fff;
		/* text-shadow: 0 2px 12px rgba(0, 0, 0, .6); */
		/* transform: translate(-50%,-50%); */
		background: rgba(17, 36, 52, 0.38);
		padding: .5rem 1rem;
		backdrop-filter: blur(4px);
		border-radius: 5px;
	}

	.cnav-root-link-text {
		position: relative;
		font-weight: 600;
	}

	.cnav-root-link-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: .78em;
		color: inherit;
		transform: translateX(0);
		transition: transform .2s ease;
	}

	.cnav-root-image-link:hover .cnav-root-link-icon,
	.cnav-root-image-link:focus-visible .cnav-root-link-icon {
		transform: translateX(3px);
	}

	.cnav-root-image-link {
		overflow: hidden;
		border-radius: inherit;
	}

	/* Bottom fade keeps white overlay text legible against bright photos. */
	.cnav-root-image-link::before {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(to top, rgba(0, 0, 0, .7), transparent 58%);
		pointer-events: none;
	}

	.cnav-root-image-link:focus-visible {
		outline: 3px solid var(--copper-color);
		outline-offset: -3px;
	}

	/* Match the thumbnail width of a double-width card to a single card.
	   With a 1rem internal gutter, both images have identical 4:3 dimensions. */
	.cnav-root-card.has-children .cnav-root-primary {
		width: calc(50% - .5rem);
	}

	/* First-level children replace the old root-level drill-down button. */
	.cnav-root-forward {
		display: none;
	}

	.cnav-root-subnav {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: calc(50% + .5rem);
		min-width: 0;
		overflow-y: auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.cnav-root-subnav::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
	}

	.cnav-root-subnav-list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: .5rem;
	}

	.cnav-root-subnav-item {
		margin: 0;
		background-color: rgba(8, 20, 30, 0.4);
		border-radius: 5px;
	}
	.cnav-root-subnav-item:hover {
		background-color: rgba(43, 79, 108, 0.4);
	}
	.cnav-root-subnav-row {
		display: flex;
		align-items: center;
		gap: .5rem;
		min-height: 44px;
	}

	.cnav-root-subnav-link {
		display: flex;
		align-items: center;
		align-self: stretch;
		flex: 1 1 auto;
		min-width: 0;
		padding: .5rem;
		color: #8ab3d6;
		font-weight: 400;
		text-decoration: none;
		font-size: .95rem;
		line-height: 1.2;
	}

	.cnav-root-subnav-forward {
		width: 30px;
		height: 30px;
		margin-right: .25rem;
		font-size: .8rem;
		box-shadow: 0 0 0 1px inset;
	}

	.cnav-root-controls {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: .85rem;
		margin-bottom: auto;
		padding: .6rem 1rem 1rem;
	}

	.cnav-root-pagination {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		min-width: 0;
	}

	.cnav-root-control {
		appearance: none;
		width: 32px;
		height: 32px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		background: transparent;
		color: rgba(255, 255, 255, 0.92);
		cursor: pointer;
		font-size: .9rem;
		transition: opacity .2s ease, background-color .2s ease, transform .2s ease;
	}

	.cnav-root-control:hover:not(:disabled),
	.cnav-root-control:focus-visible {
		background: rgba(255, 255, 255, 0.12);
	}

	.cnav-root-control:active:not(:disabled) {
		transform: scale(.94);
	}

	.cnav-root-control:focus-visible {
		outline: 2px solid var(--copper-color);
		outline-offset: 2px;
	}

	.cnav-root-control:disabled {
		opacity: .2;
		cursor: default;
	}

	.cnav-root-page-segment {
		appearance: none;
		width: 24px;
		height: 5px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.28);
		cursor: pointer;
		transition: background-color .2s ease, transform .2s ease;
	}

	.cnav-root-page-segment.has-children {
		width: 48px;
	}

	.cnav-root-page-segment:hover,
	.cnav-root-page-segment:focus-visible {
		background: rgba(255, 255, 255, 0.55);
	}

	.cnav-root-page-segment:focus-visible {
		outline: 2px solid var(--copper-color);
		outline-offset: 3px;
	}

	.cnav-root-page-segment.is-active {
		background: var(--magenta-color);
		transform: scaleY(1.35);
	}


	.cnav-panel:not([data-panel-id="root"]) .cnav-panel-body {
		padding-top: 4.75rem;
	}

	.cnav-panel:not([data-panel-id="root"]) .cnav-list-item {
		background: rgba(18, 51, 76, 0.7);
	}
}

@media screen and (max-width: 767px) {
	.cnav-overlay-backdrop {
		background: rgba(7, 16, 28, 0.5);
		backdrop-filter: blur(15px);
	}

	.cnav-shell-bg {
		display: none;
	}

	.cnav-shell-header {
		position: absolute;
		top: 1rem;
		left: 1rem;
		right: 1rem;
		z-index: 10;
		min-height: 44px;
		padding: 0;
		background: transparent;
		pointer-events: none;
	}

	.cnav-shell-header-left,
	.cnav-shell-header-center {
		display: none;
	}

	.cnav-shell-header-right {
		margin-left: auto;
		pointer-events: auto;
	}

	.cnav-close {
		width: 44px;
		height: 44px;
		padding: 0;
		border-radius: 50%;
		justify-content: center;
		background: rgba(112, 140, 171, 0.29);
		box-shadow: 0 3px 12px rgba(0, 0, 0, 0.28);
	}

	.cnav-close:focus-visible {
		outline: 2px solid #fff;
		outline-offset: 3px;
	}

	.cnav-panel[data-panel-id="root"] .cnav-panel-body {
		display: block;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.cnav-root-list,
	.cnav-root-controls {
		display: none;
	}

	.cnav-mobile-nav {
		display: block;
		width: 100%;
		max-width: 640px;
		margin: 0 auto;
		padding: 5.5rem 1rem 2rem;
		box-sizing: border-box;
	}

	.cnav-mobile-list {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.cnav-mobile-list--root {
		display: flex;
		flex-direction: column;
		gap: .75rem;
	}

	.cnav-mobile-list--root > .cnav-mobile-item {
		margin: 0;
		background: rgba(18, 51, 76, 0.7);
		border-radius: 10px;
		overflow: hidden;
		box-shadow: 0 5px 18px rgba(0, 0, 0, 0.22);
	}

	.cnav-mobile-row {
		display: flex;
		align-items: stretch;
		min-width: 0;
	}

	.cnav-mobile-primary {
		display: grid;
		grid-template-columns: 90px minmax(0, 1fr);
		align-items: center;
		gap: .8rem;
		flex: 1 1 auto;
		min-width: 0;
		padding: .5rem .8rem .5rem .5rem;
		color: inherit;
		text-decoration: none;
	}

	.cnav-mobile-thumb {
		display: block;
		width: 90px;
		height: 90px;
		border-radius: 6px;
		background: var(--copper-color);
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}

	.cnav-mobile-title {
		min-width: 0;
		font-size: 1.05rem;
		font-weight: 400;
		line-height: 1.2;
		color:#8ab3d6;
	}


	.cnav-mobile-primary:focus-visible,
	.cnav-mobile-sublink:focus-visible,
	.cnav-mobile-toggle:focus-visible {
		outline: 2px solid rgba(138, 179, 214, 0.6);
		outline-offset: -2px;
	}

	.cnav-mobile-toggle {
		appearance: none;
		width: 50px;
		min-width: 50px;
		padding: 0;
		border: 0;
		border-left: 1px solid rgba(138, 179, 214, 0.2);
		background: rgba(138, 179, 214, 0.12);
		color: #8ab3d6;
		cursor: pointer;
		font-size: .9rem;
	}

	.cnav-mobile-toggle i {
		transition: transform .2s ease;
	}

	.cnav-mobile-toggle[aria-expanded="true"] i {
		transform: rotate(180deg);
	}

	.cnav-mobile-submenu {
		border-top: 1px solid rgba(64, 103, 138, 0.5);
		background: rgba(0, 0, 0, 0.018);
	}

	.cnav-mobile-submenu[hidden] {
		display: none !important;
	}

	.cnav-mobile-list--nested .cnav-mobile-item {
		margin: 0;
		border-bottom:1px solid rgba(64, 103, 138, 0.5);
	}
	.cnav-mobile-list--nested .cnav-mobile-item:hover {
		background: rgba(34, 65, 91, 0.45);
	}
	.cnav-mobile-list--nested .cnav-mobile-item:last-child {
		border-bottom: 0;
	}

	.cnav-mobile-subrow {
		display: flex;
		align-items: stretch;
		min-height: 50px;
	}

	.cnav-mobile-sublink {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: .75rem;
		flex: 1 1 auto;
		min-width: 0;
		padding: .8rem 1rem;
		color: #8ab3d6;
		text-decoration: none;
		font-size: .98rem;
		line-height: 1.25;
		font-weight: 400;
	}

}

#mobile-burger {
	display: flex;
	flex-direction: column;
	width: 56px;
	height: 56px;
	position: absolute;
	justify-content: center;
	z-index: 900;
	cursor: pointer;
	border-radius: 2px;
	gap: 6px;
	padding: 8px;
	align-items: center;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	filter: drop-shadow(0 0 16px var(--cyan-color));
}

#mobile-burger span {
	width: 100%;
	height: 4px;
	background: #fff;
	display: block;
	transition: all 0.3s;
	border-radius: 2px;
}

#mobile-burger:hover span {
	background: #fff;
}