/* vertikalni navigace sekcemi — sticky leva strana */

.nav-label {
	visibility: hidden;
	position: absolute;
	pointer-events: none;
}

.section-nav {
	position: fixed;
	left: 1.5rem;
	top: 50%;
	transform: translateY(-50%);
	z-index: 100;
	display: flex;
	flex-direction: column;
	gap: 0; /* spacing řešíme dynamicky */
	background: white;
}

.section-nav__item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	color: var(--wp--preset--color--contrast-2, #6b7280);
	text-align: left;
	line-height: 0;

	/* kombinovaný transform */
	transform:
		translateX(var(--shift-x, 0px))
		translateY(calc(var(--distance, 0) * var(--distance, 0) * 3px));

	transition:
		transform 0.3s ease,
		color 0.2s ease;
}

.section-nav__item:hover,
.section-nav__item.is-active {
	color: var(--wp--preset--color--contrast, #111);
}

/* aktivní posun lehce doprava */
.section-nav__item.is-active {
	--shift-x: 4px;
}

.section-nav__item.is-active .section-nav__label {
    font-size: 1.25rem;
    margin-left: 0.5rem;
}

/* ------------------ */
/* TEČKA / CHEVRON */
/* ------------------ */

/* default = tečka */
.section-nav__chevron {
	flex-shrink: 0;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: currentColor;
	transition: all 0.2s ease;
}

/* aktivní = šipka */
.section-nav__item.is-active .section-nav__chevron {
	background: none;
	border-radius: 0;
	width: 0.75rem;
	height: 0.75rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
}

/* ------------------ */
/* LABEL */
/* ------------------ */

.section-nav__label {
	font-size: 1rem;
	margin-left: 0.5rem;
	opacity: 0;
	writing-mode: vertical-lr;
	transform: rotate(180deg) translateY(-4px);
	transition:
		opacity 0.2s ease,
		transform 0.2s ease,
		font-size 0.2s ease;
	white-space: nowrap;
}

/* zobrazit při hover nebo aktivní */
.section-nav__item:hover .section-nav__label,
.section-nav__item.is-active .section-nav__label {
	opacity: 1;
	transform: rotate(180deg) translateY(0);
}

/* větší text pro aktivní sekci */
.section-nav__item.is-active .section-nav__label {
	font-size: 1.25rem;
}