/* MCDP site-wide scroll-dot navigation (right rail; labels reveal on hover per Figma) */
.mcdp-dots {
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(calc(-50% + var(--mcdp-rail-top-offset, 0px)));
	/* Labels sit above carousel controls, below the main header and dialogs. */
	z-index: 110;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 15.375px;
	margin: 0;
	/* Keep the dots at their original 44px inset while making the entire
	   corridor from the dots to the viewport edge hoverable. */
	padding: 0 44px 0 0;
	list-style: none;
	will-change: transform;
	/* The closed rail must not intercept page controls beneath its invisible
	   label area. A dedicated right-edge activation zone opts back in below. */
	pointer-events: none;
}
[data-mcdp-focus-target]:focus {
	outline: none;
}
.mcdp-dots__activation {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 89;
	width: 72px;
	pointer-events: auto;
}
.mcdp-dots li {
	position: relative;
	z-index: 1;
}
.mcdp-dots::before,
.mcdp-dots::after {
	content: '';
	width: 1.5px;
	height: 130px;
	background: rgba(110, 130, 145, 0.45);
	margin: 10px 5.5px;
}
.mcdp-dots::after {
	transform: scaleY(var(--mcdp-rail-bottom-line-scale, 1));
	transform-origin: top;
}
.mcdp-dots a {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	text-decoration: none;
	perspective: 240px;
	pointer-events: none;
}
.mcdp-dots.is-hover-open a,
.mcdp-dots:has(a:focus-visible) a {
	pointer-events: auto;
}
.mcdp-dots.is-hover-open,
.mcdp-dots:has(a:focus-visible) {
	pointer-events: auto;
}
.mcdp-dots a::before {
	content: attr(data-label);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.2px;
	white-space: nowrap;
	/* Translucent navy pill keeps labels legible over any section. */
	color: #fff;
	background: rgba(15, 32, 46, 0.94);
	padding: 5px 12px;
	border-radius: 999px;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	box-shadow: 0 4px 14px rgba(8, 20, 30, 0.24);
	opacity: 0;
	transform: translateX(12px) scale(0.96) rotateY(4deg);
	transform-origin: right center;
	transition:
		color 0.3s ease,
		filter 0.38s ease,
		letter-spacing 0.35s ease,
		box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
		opacity 0.32s ease,
		transform 0.48s cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: var(--mcdp-dot-delay, 0ms);
	pointer-events: none;
	will-change: transform, opacity;
}
/* Pointer proximity is gated in scroll-dots.js so the invisible label width
   cannot open the menu prematurely; keyboard focus still reveals it. */
.mcdp-dots.is-hover-open a::before,
.mcdp-dots:has(a:focus-visible) a::before {
	opacity: 1;
	transform: translateX(0) scale(1) rotateY(0);
}
.mcdp-dots li:nth-child(2) { --mcdp-dot-delay: 25ms; }
.mcdp-dots li:nth-child(3) { --mcdp-dot-delay: 50ms; }
.mcdp-dots li:nth-child(4) { --mcdp-dot-delay: 75ms; }
.mcdp-dots li:nth-child(5) { --mcdp-dot-delay: 100ms; }
.mcdp-dots li:nth-child(6) { --mcdp-dot-delay: 125ms; }
.mcdp-dots li:nth-child(7) { --mcdp-dot-delay: 150ms; }
.mcdp-dots li:nth-child(8) { --mcdp-dot-delay: 175ms; }
.mcdp-dots a::after {
	content: '';
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(140, 158, 172, 0.6);
	box-shadow: 0 0 0 0 rgba(111, 176, 224, 0);
	transition:
		background-color 0.3s ease,
		box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
		opacity 0.35s ease,
		transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
	margin-right: 1px;
}
.mcdp-dots a:hover::before {
	color: #ffffff;
	letter-spacing: 0.45px;
	transform: translateX(-5px) scale(1.025);
	box-shadow:
		0 0 0 1px rgba(142, 203, 242, 0.34),
		0 8px 28px rgba(18, 69, 105, 0.34),
		0 0 24px rgba(111, 176, 224, 0.24);
}
.mcdp-dots a:hover::after {
	background: #8ecbf2;
	box-shadow:
		0 0 0 6px rgba(111, 176, 224, 0.16),
		0 0 22px rgba(111, 176, 224, 0.82);
	transform: scale(1.28);
}
.mcdp-dots a:focus-visible {
	outline: 2px solid var(--wp--preset--color--eyebrow, #2c6396);
	outline-offset: 6px;
	border-radius: 2px;
}
.mcdp-dots li.is-active a::before {
	color: #8ecbf2;
	font-weight: 500;
	font-size: 13px;
	opacity: 1;
	transform: translateX(0) scale(1) rotateY(0);
}
.mcdp-dots li.is-active a::after {
	width: 13px;
	height: 13px;
	margin-right: 0;
	background: var(--wp--preset--color--eyebrow, #2c6396);
	box-shadow: 0 0 0 5px rgba(44, 99, 150, 0.18);
}
.mcdp-dots li.is-active a:hover::after {
	background: #8ecbf2;
	box-shadow:
		0 0 0 7px rgba(111, 176, 224, 0.18),
		0 0 26px rgba(111, 176, 224, 0.9);
}
@media (prefers-reduced-motion: no-preference) {
	/* Magnetic focus: the hovered destination moves toward the page while
	   the rest of the rail softly recedes without disturbing its spacing. */
	.mcdp-dots.is-hover-open:has(a:hover) li:not(:has(a:hover)) a::before {
		opacity: 1;
		transform: translateX(4px) scale(0.985);
	}
	.mcdp-dots.is-hover-open:has(a:hover) li:not(:has(a:hover)) a::after {
		opacity: 0.52;
		transform: scale(0.9);
	}
}
@media (prefers-reduced-motion: reduce) {
	.mcdp-dots a::before,
	.mcdp-dots a::after {
		animation: none;
		transition-delay: 0ms;
		transition-duration: 0.01ms;
	}
	.mcdp-dots a:hover::before {
		transform: none;
	}
	.mcdp-dots a:hover::after {
		transform: none;
	}
}
/* labels overlay the page transiently on hover, so they are safe at any
   width the rail is shown; the rail itself stays desktop-only */
@media (max-width: 1359px) {
	.mcdp-dots,
	.mcdp-dots__activation { display: none; }
}