/* Navigace – veřejná část */

.vn-bar {
	--vn-bg: #0c0c0a;
	--vn-text: #cecece;
	--vn-accent: #a8e63c;
	--vn-h: 60px;
	--vn-speed: 550ms;
	/* písmo se při načtení přebírá z hlavní navigace (front.js); toto jsou záložní hodnoty */
	--vn-ff: Helvetica, Arial, sans-serif;
	--vn-fs: 14px;
	--vn-fw: 400;
	--vn-ls: .48px;
	--vn-lh: 26px;
	--vn-tt: none;
	--vn-gap: 40px;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10000;
	height: var(--vn-h);
	box-sizing: border-box;
	background: var(--vn-bg);
	color: var(--vn-text);
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	transform: translateY(-100%);
	opacity: 0;
	transition: transform var(--vn-speed) cubic-bezier(.2, .8, .2, 1), opacity calc(var(--vn-speed) * .7) ease;
	font-family: var(--vn-ff);
	letter-spacing: var(--vn-ls);
	line-height: 1.2;
}
.vn-bar *,
.vn-bar *::before,
.vn-bar *::after { box-sizing: border-box; }

.vn-bar.vn-in  { transform: translateY(0); opacity: 1; }
.vn-bar.vn-out { transform: translateY(-100%); opacity: 0; }

.admin-bar .vn-bar { top: 32px; }
@media (max-width: 782px) { .admin-bar .vn-bar { top: 46px; } }

.vn-inner {
	height: 100%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 32px;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 16px 32px;
}
.vn-inner.vn-pos-center { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.vn-left  { display: flex; align-items: center; gap: 18px; min-width: 0; }
.vn-nav { justify-self: end; }
.vn-pos-left .vn-nav { justify-self: start; }
.vn-pos-center .vn-nav { justify-self: center; }
.vn-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }

.vn-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 16px;
	border: 1px solid rgba(206, 206, 206, .35);
	border-radius: 999px;
	color: var(--vn-text);
	text-decoration: none;
	font-size: var(--vn-fs);
	letter-spacing: var(--vn-ls);
	white-space: nowrap;
	transition: border-color .2s ease, color .2s ease;
}
.vn-back:hover,
.vn-back:focus-visible { border-color: var(--vn-accent); color: var(--vn-accent); }
.vn-back svg { width: 16px; height: 16px; flex: none; }

.vn-sep { width: 1px; height: 28px; background: rgba(255, 255, 255, .18); flex: none; }

.vn-logo {
	display: inline-flex;
	align-items: center;
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	font-size: 22px;
	letter-spacing: -.04em;
}
.vn-logo img { display: block; max-width: none; }

.vn-menu, .vn-menu li { list-style: none !important; margin: 0; padding: 0; }
.vn-menu { display: flex; align-items: center; gap: var(--vn-gap); }
.vn-menu li::before, .vn-menu li::after, .vn-menu a::before, .vn-menu a::after { content: none !important; display: none !important; }
.vn-menu li::marker { content: none; }
.vn-menu a {
	display: inline-block;
	margin: 0;
	padding: 0;
	color: var(--vn-text);
	text-decoration: none;
	font-family: var(--vn-ff);
	font-size: var(--vn-fs);
	font-weight: var(--vn-fw);
	letter-spacing: var(--vn-ls);
	line-height: var(--vn-lh);
	text-transform: var(--vn-tt);
	transition: color .2s ease;
}
.vn-menu a:hover,
.vn-menu .current-menu-item > a { color: var(--vn-accent); }

.vn-cta {
	display: inline-block;
	background: var(--vn-accent);
	color: #000;
	font-weight: 500;
	font-size: var(--vn-fs);
	letter-spacing: var(--vn-ls);
	text-decoration: none;
	padding: 9px 20px;
	border-radius: 999px;
	white-space: nowrap;
	transition: transform .2s ease, filter .2s ease;
}
.vn-cta:hover { transform: translateY(-2px); filter: brightness(1.06); color: #000; }
.vn-cta-m { display: none; }

.vn-burger {
	display: none;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid rgba(206, 206, 206, .35);
	border-radius: 50%;
	background: transparent;
	color: var(--vn-text);
	cursor: pointer;
	align-items: center;
	justify-content: center;
}

/* Mobil: šipka zpět, logo a tlačítko menu; po otevření celoobrazovkové menu */
.vn-burger .vn-i-x { display: none; }
@media (max-width: 900px) {
	.vn-inner, .vn-inner.vn-pos-center { padding: 0 16px; display: flex; justify-content: space-between; }
	.vn-back-label { display: none; }
	.vn-back { padding: 7px 10px; }
	.vn-actions > .vn-cta { display: none; }
	.vn-actions { margin-left: auto; }
	.vn-burger { display: inline-flex; }
	.vn-nav { display: none; }
	.vn-menu { flex-direction: column; align-items: stretch; gap: 0; }
	.vn-cta-m { display: inline-block; margin-top: 28px; }

	/* otevřené menu přes celou obrazovku */
	html.vn-lock, html.vn-lock body { overflow: hidden !important; }
	.vn-bar.vn-open {
		top: 0 !important; bottom: 0; height: auto; z-index: 100000; overflow-y: auto; overscroll-behavior: contain;
		transform: none !important; opacity: 1 !important; border-bottom: 0;
	}
	.admin-bar .vn-bar.vn-open { top: 46px !important; }
	.vn-bar.vn-open .vn-inner, .vn-bar.vn-open .vn-inner.vn-pos-center {
		height: auto; min-height: 100%; flex-wrap: wrap; align-content: flex-start; padding: 0 20px 48px;
	}
	.vn-bar.vn-open .vn-left, .vn-bar.vn-open .vn-actions { height: var(--vn-h); }
	.vn-bar.vn-open .vn-back, .vn-bar.vn-open .vn-sep { display: none; }
	.vn-bar.vn-open .vn-nav {
		display: block; order: 3; flex: 0 0 100%; position: static; padding: 24px 0 0; background: transparent; border: 0;
		animation: vn-menu-in .35s cubic-bezier(.2, .8, .2, 1) both;
	}
	.vn-bar.vn-open .vn-menu a { display: block; padding: 13px 0; line-height: 1.3; border: 0; font-size: max(var(--vn-fs), 18px); }
	.vn-bar.vn-open .vn-i-m { display: none; }
	.vn-bar.vn-open .vn-i-x { display: inline; }
}
@media (min-width: 783px) and (max-width: 900px) { .admin-bar .vn-bar.vn-open { top: 32px !important; } }
@keyframes vn-menu-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

/* Hlavní navigace zůstává: nová lišta pod ní */
.vn-bar.vn-keep { top: var(--vn-top, 60px); z-index: 9998; }
.admin-bar .vn-bar.vn-keep { top: var(--vn-top, 92px); }
@media (max-width: 782px) { .admin-bar .vn-bar.vn-keep { top: var(--vn-top, 106px); } }

/* Přechod hlavní hlavičky motivu při odchodu a návratu */
body.vn-leaving #header-outer {
	transform: translateY(-100%) !important;
	opacity: 0 !important;
	transition: transform .35s ease, opacity .3s ease !important;
}
@keyframes vn-drop {
	from { transform: translateY(-100%); opacity: 0; }
	to   { transform: none; opacity: 1; }
}
body.vn-returning #header-outer {
	animation: vn-drop var(--vn-return-speed, .55s) cubic-bezier(.2, .8, .2, 1) both;
}

@media (prefers-reduced-motion: reduce) {
	.vn-bar { transition: none; }
	body.vn-returning #header-outer { animation: none; }
}