/* Shared navigation for VPS live-session pages. */
.draw-site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid rgba(216, 184, 115, 0.14);
	background: linear-gradient(180deg, rgba(28, 24, 60, 0.72), rgba(13, 11, 33, 0.66));
	backdrop-filter: saturate(140%) blur(12px);
	-webkit-backdrop-filter: saturate(140%) blur(12px);
}

.draw-site-nav {
	width: min(64rem, 100%);
	margin: 0 auto;
	padding: 0.75rem 1rem;
}

.draw-site-nav-bar,
.draw-site-nav-panel,
.draw-site-nav-links,
.draw-site-nav-lang {
	display: flex;
	align-items: center;
}

.draw-site-nav-bar {
	justify-content: space-between;
	gap: 1rem;
}

.draw-site-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	color: #f6e7b8;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0;
	text-decoration: none;
	white-space: nowrap;
}

.draw-site-logo-mark {
	display: inline-flex;
	width: 2.25rem;
	height: 2.25rem;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	border: 1px solid rgba(216, 184, 115, 0.45);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.04);
	color: #e7cd8f;
}

.draw-site-nav-toggle {
	display: inline-flex;
	width: 2.5rem;
	height: 2.5rem;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 5px;
	border: 1px solid rgba(216, 184, 115, 0.25);
	border-radius: 0.5rem;
	background: rgba(10, 9, 28, 0.5);
	color: #f0dcae;
	cursor: pointer;
}

.draw-site-nav-toggle span:not(.sr-only) {
	width: 100%;
	max-width: 1.35rem;
	height: 2px;
	border-radius: 1px;
	background: currentColor;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.draw-site-nav-toggle.is-open span:not(.sr-only):nth-of-type(2) {
	opacity: 0;
}

.draw-site-nav-toggle.is-open span:not(.sr-only):nth-of-type(1) {
	transform: translateY(7px) rotate(45deg);
}

.draw-site-nav-toggle.is-open span:not(.sr-only):nth-of-type(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.draw-site-nav-panel {
	display: none;
	margin-top: 0.75rem;
	padding: 0.75rem;
	border: 1px solid rgba(216, 184, 115, 0.16);
	border-radius: 0.75rem;
	background: rgba(10, 9, 28, 0.92);
}

.draw-site-nav-panel.is-open {
	display: block;
}

.draw-site-nav-links {
	flex-direction: column;
	align-items: stretch;
	gap: 0.15rem;
}

.draw-site-nav-link {
	display: block;
	padding: 0.65rem 0.75rem;
	border-radius: 0.5rem;
	color: #a79fc6;
	font-size: 0.95rem;
	line-height: 1.35;
	text-decoration: none;
	transition: color 0.15s ease, background 0.15s ease;
}

.draw-site-nav-link:hover {
	background: rgba(216, 184, 115, 0.08);
	color: #f0dcae;
}

.draw-site-nav-link-accent {
	color: #f0dcae;
	font-weight: 600;
}

.draw-site-nav-lang {
	gap: 0.75rem;
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid rgba(167, 159, 198, 0.2);
}

.draw-site-lang-link,
.draw-site-lang-active {
	color: #7f779d;
	font-size: 0.8rem;
	font-weight: 500;
	line-height: 1.35;
	text-decoration: none;
}

.draw-site-lang-link:hover {
	color: #ece6da;
}

.draw-site-lang-active {
	color: #e7cd8f;
	font-weight: 600;
}

@media (min-width: 768px) {
	.draw-site-nav {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding: 0.94rem 1.5rem;
	}

	.draw-site-nav-bar {
		flex: 0 0 auto;
	}

	.draw-site-nav-toggle {
		display: none;
	}

	.draw-site-nav-panel {
		display: flex !important;
		align-items: center;
		justify-content: flex-end;
		gap: 1.5rem;
		flex: 1;
		margin-top: 0;
		padding: 0;
		border: 0;
		background: transparent;
	}

	.draw-site-nav-links {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-end;
		gap: 1.25rem;
	}

	.draw-site-nav-link {
		padding: 0;
		font-size: 0.875rem;
	}

	.draw-site-nav-link:hover {
		background: transparent;
	}

	.draw-site-nav-lang {
		margin-top: 0;
		padding-top: 0;
		padding-left: 1.25rem;
		border-top: 0;
		border-left: 1px solid rgba(167, 159, 198, 0.25);
	}
}