/**
 * Divine Ledger — fixed side navigation.
 *
 * Kept out of style.css even though that file was idle at the time this was
 * written: this component is self-contained and roughly block-sized, and
 * every other component-scoped stylesheet in this theme (hero, faq, etc.)
 * gets its own file rather than being folded into the shared one. Enqueued
 * separately from inc/enqueue.php — see that file for the handle.
 *
 * The panel reuses the same duration tokens as the rest of the theme
 * (--dl-duration-base, --dl-duration-fast), so it automatically goes to 1ms
 * under `prefers-reduced-motion: reduce` the same way everything else in
 * variables.css does.
 *
 * @package DivineLedger
 */

/* Hidden per the client's request: the whole panel, not just the traveling
   icon. `display: none` here beats the inline opacity/pointer-events
   side-nav.js sets on this same element every scroll frame, so the panel
   never paints at any scroll position regardless of what the script is
   doing. side-nav.js keeps building and injecting the markup untouched —
   this is a one-line revert if the client wants the rail back. */
.dl-side-nav {
	position: fixed;
	top: 50%;
	right: clamp(0.75rem, 2vw, 1.75rem);
	z-index: 90;
	display: none;
	opacity: 0;
	pointer-events: none;
	transform: translate(10px, -50%);
	transition:
		opacity var(--dl-duration-base) var(--dl-ease-out),
		transform var(--dl-duration-base) var(--dl-ease-out);
}

.dl-side-nav.is-revealed {
	transform: translate(0, -50%);
}

.dl-side-nav__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;

	/* Track, dots and spacing all scaled up ~30% from their previous values
	   (0.55rem / 1rem 0.65rem) per the client's request, keeping the
	   icon-to-track ratio intact rather than growing the track alone. */
	gap: 0.72rem;
	padding: 1.3rem 0.85rem;
	border: 1px solid var(--dl-hairline-gold);
	border-radius: var(--dl-radius-pill);
	background: linear-gradient(180deg, rgb(10 23 48 / 82%) 0%, rgb(5 13 28 / 90%) 100%);
	box-shadow: var(--dl-shadow-lg);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

/* Hidden per the client's explicit call: at track scale the monogram's two
   overlapping B strokes (navy + gold, from the brand mark's own artwork —
   see logo-lockup.jpg) read as a smudged, doubled glyph rather than a clean
   icon, and no amount of drop-shadow tuning fixed that at 36px. `display:
   none` rather than deleting the element/markup, so this is a one-line
   revert if a cleaner mark is supplied later. JS still positions it every
   frame; that stays harmless work on a hidden element rather than a second
   change to side-nav.js for the same revert. */
.dl-side-nav__icon {
	display: none;
}

.dl-side-nav__divider {
	width: 60%;
	height: 1px;
	flex-shrink: 0;
	background: var(--dl-hairline-gold);
}

.dl-side-nav__dot {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px; /* 26px * 1.3, matching the track's overall 30% enlargement. */
	height: 34px;
	flex-shrink: 0;
	text-decoration: none;
	cursor: pointer;
}

.dl-side-nav__label {
	position: absolute;
	right: 100%;
	margin-right: 0.65rem;
	white-space: nowrap;
	font-family: var(--dl-font-sans);
	font-size: var(--dl-text-xs);
	letter-spacing: var(--dl-tracking-wide);
	color: var(--dl-text-inverse-muted);
	opacity: 0;
	transform: translateX(4px);
	pointer-events: none;
	transition:
		opacity var(--dl-duration-fast) var(--dl-ease-out),
		transform var(--dl-duration-fast) var(--dl-ease-out),
		color var(--dl-duration-fast) var(--dl-ease-out);
}

.dl-side-nav__dot:hover .dl-side-nav__label,
.dl-side-nav__dot:focus-visible .dl-side-nav__label {
	opacity: 1;
	transform: translateX(0);
	color: var(--dl-gold-400);
}

.dl-side-nav__marker {
	width: 9px; /* 7px * 1.3 */
	height: 9px;
	border-radius: 50%;
	background: var(--dl-gold-500);
	transition:
		width var(--dl-duration-fast) var(--dl-ease-out),
		height var(--dl-duration-fast) var(--dl-ease-out),
		opacity var(--dl-duration-fast) var(--dl-ease-out),
		box-shadow var(--dl-duration-fast) var(--dl-ease-out);
}

.dl-side-nav__dot:hover .dl-side-nav__marker,
.dl-side-nav__dot:focus-visible .dl-side-nav__marker {
	width: 12px; /* 9px * 1.3 */
	height: 12px;
	box-shadow: 0 0 10px rgb(198 166 103 / 45%);
}

/* With the traveling icon hidden, the active dot's own marker is the only
   position indicator left on the track, so it stays visible and grows to
   the hover size instead of disappearing under an icon that is no longer
   there. */
.dl-side-nav__dot.is-active .dl-side-nav__marker {
	width: 12px;
	height: 12px;
	box-shadow: 0 0 10px rgb(198 166 103 / 45%);
}

.dl-side-nav__dot:focus-visible {
	outline: 1px solid var(--dl-gold-400);
	outline-offset: 2px;
	border-radius: 50%;
}

/* A vertical dot rail competes with thumb reach and page content on narrow
   viewports, so this is a desktop-only wayfinding affordance. */
@media (max-width: 781px) {

	.dl-side-nav {
		display: none;
	}
}