/* Vikingo Studio Menü: a fejléc menüsora (Figma 1478:9032). Clash Display
   Medium 16 px, 4% betűköz, ink, 40 px köz; a gomb-menüpont DM Mono 16 ink
   1 px ink kerettel, pill. Lenyíló: fehér háttér, 1 px sand keret,
   szögletes, árnyék nélkül. 1025 px alatt hamburger és teljes képernyős
   <dialog>. A vikingo.hu platform navigacio.css-éből átemelve.

   Minden szabály .vk-vs-menu előtaggal és explicit resetekkel, mert az
   Elementor kit globális stílusai (minden <button> pill, minden <a> korall)
   különben átfestenék. Tokenek: --vkvs-* lokális változók var(--vk-*,
   tartalék) értékkel. */

.vk-vs-menu {
	--vkvs-ink: var(--vk-ink, #3E2E45);
	--vkvs-korall: var(--vk-coral, #FF544D);
	--vkvs-korall-hover: var(--vk-coral-hover, #E83D36);
	--vkvs-mauve: var(--vk-mauve, #7A687F);
	--vkvs-sand: var(--vk-sand, #DCD0C3);
	--vkvs-paper: var(--vk-paper, #F3EEEB);
	--vkvs-feher: var(--vk-white, #FFFFFF);
	--vkvs-cim-font: var(--vk-clash-display, 'Clash Display', sans-serif);
	--vkvs-mono-font: var(--vk-dm-mono, 'DM Mono', monospace);
	--vkvs-koz: 40px;
	position: relative;
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: flex-end;
	min-width: 0;
	font-family: var(--vkvs-cim-font);
	color: var(--vkvs-ink);
}

.vk-vs-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vk-vs-menu [hidden] {
	display: none !important;
}

.vk-vs-menu a,
.vk-vs-menu a:hover,
.vk-vs-menu a:focus {
	text-decoration: none;
	box-shadow: none;
}

/* A widget burkolója a fejléc flexboxának eleme: ő záródik jobbra, a logó a
   bal szélen marad. Az Elementor widget-alap 100%-a kiszorítaná a logót. */
.vk-vs-menu-doboz[data-e-type="vk-vs-menu"],
.vk-vs-menu-doboz {
	width: auto;
	max-width: 100%;
	flex: 0 1 auto;
	margin-left: auto;
	min-width: 0;
}

/* ---- Gombok resetje (a kit minden <button>-t átfest) ----
   (0,1,1) erő, mint a kit `.elementor-kit-N button` szabálya: a sorrend
   dönt, ezért a stíluslap a kit UTÁN töltődik (20-as prioritás). */
.vk-vs-menu button {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: inherit;
	font: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: none;
	cursor: pointer;
}

.vk-vs-menu button:hover,
.vk-vs-menu button:focus,
.vk-vs-menu button:active {
	background: transparent;
	border: 0;
	border-color: transparent;
	box-shadow: none;
	color: inherit;
}

.vk-vs-menu :focus-visible {
	outline: 2px solid var(--vkvs-korall);
	outline-offset: 3px;
}

.vk-vs-menu .vk-vs-menu-ikon {
	display: block;
	width: 24px;
	height: 24px;
	flex: none;
}

/* ---- Asztali menüsor ---- */

.vk-vs-menu .vk-vs-menu-sor {
	display: flex;
	align-items: center;
	gap: var(--vkvs-koz);
}

.vk-vs-menu .vk-vs-menu-elem {
	position: relative;
	display: flex;
	align-items: center;
	gap: 4px;
}

.vk-vs-menu .vk-vs-menu-link {
	display: inline-flex;
	align-items: center;
	padding: 8px 0;
	font-family: var(--vkvs-cim-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: 0.04em;
	color: var(--vkvs-ink);
	white-space: nowrap;
	transition: color 0.2s ease;
}

/* Hover csak egeres eszközön: érintőn a :hover a koppintás után beragadna. */
@media (hover: hover) {
	.vk-vs-menu .vk-vs-menu-link:hover,
	.vk-vs-menu .vk-vs-menu-elem:hover > .vk-vs-menu-link,
	.vk-vs-menu .vk-vs-menu-elem:hover > .vk-vs-menu-nyil {
		color: var(--vkvs-korall);
	}
}

.vk-vs-menu .vk-vs-menu-link:focus-visible,
.vk-vs-menu .vk-vs-menu-elem--aktiv > .vk-vs-menu-link,
.vk-vs-menu .vk-vs-menu-elem--aktiv > .vk-vs-menu-nyil,
.vk-vs-menu .vk-vs-menu-elem--nyitva > .vk-vs-menu-link,
.vk-vs-menu .vk-vs-menu-elem--nyitva > .vk-vs-menu-nyil {
	color: var(--vkvs-korall);
}

.vk-vs-menu .vk-vs-menu-nyil {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	color: var(--vkvs-ink);
	transition: color 0.2s ease;
}

.vk-vs-menu .vk-vs-menu-nyil .vk-vs-menu-ikon {
	width: 20px;
	height: 20px;
	transition: transform 0.2s ease;
}

.vk-vs-menu .vk-vs-menu-nyil--felirat {
	width: auto;
	height: auto;
	gap: 10px;
}

.vk-vs-menu .vk-vs-menu-elem--nyitva .vk-vs-menu-nyil .vk-vs-menu-ikon {
	transform: rotate(180deg);
}

/* ---- Gomb-menüpont (Kapcsolat) ----
   A Figmában a gomb is 40 px-re áll az utolsó menüponttól: a sor köze elég. */

.vk-vs-menu .vk-vs-menu-gomb {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 53px;
	padding: 0 32px;
	border: 1px solid var(--vkvs-ink);
	border-radius: 40px;
	background: transparent;
	font-family: var(--vkvs-mono-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0;
	color: var(--vkvs-ink);
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.vk-vs-menu .vk-vs-menu-gomb:focus-visible {
	background: var(--vkvs-ink);
	color: var(--vkvs-feher);
}

.vk-vs-menu .vk-vs-menu-gomb--kitoltott {
	border-color: var(--vkvs-korall);
	background: var(--vkvs-korall);
	color: var(--vkvs-feher);
}

.vk-vs-menu .vk-vs-menu-gomb--kitoltott:focus-visible {
	border-color: var(--vkvs-korall-hover);
	background: var(--vkvs-korall-hover);
}

@media (hover: hover) {
	.vk-vs-menu .vk-vs-menu-gomb:hover {
		background: var(--vkvs-ink);
		color: var(--vkvs-feher);
	}

	.vk-vs-menu .vk-vs-menu-gomb--kitoltott:hover {
		border-color: var(--vkvs-korall-hover);
		background: var(--vkvs-korall-hover);
	}
}

/* ---- Lenyíló ---- */

.vk-vs-menu .vk-vs-menu-panel {
	position: absolute;
	top: calc(100% + 12px);
	left: -24px;
	z-index: 1000;
	box-sizing: border-box;
	min-width: 240px;
	padding: 0;
	border: 1px solid var(--vkvs-sand);
	/* Fehér: a Paper fejléc előtt kiválik (Bence, 2026-10-14). */
	background: var(--vkvs-feher);
	color: var(--vkvs-ink);
}

/* A sorokat 1 px sand vonal választja el (a lenyíló kerete is sand). */
.vk-vs-menu .vk-vs-menu-allista > li + li {
	border-top: 1px solid var(--vkvs-sand);
}

.vk-vs-menu .vk-vs-menu-allink {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 24px;
	font-family: var(--vkvs-cim-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.02em;
	color: var(--vkvs-ink);
	white-space: nowrap;
	transition: color 0.2s ease;
}

.vk-vs-menu .vk-vs-menu-allink:focus-visible {
	color: var(--vkvs-korall);
}

@media (hover: hover) {
	.vk-vs-menu .vk-vs-menu-allink:hover {
		color: var(--vkvs-korall);
	}
}

/* ÚJ címke: a vikingo.hu menüjének szalagja (korall, egy-egy 4,5 px-es
   csúcs balra és jobbra). */
.vk-vs-menu .vk-vs-menu-cimke {
	display: inline-block;
	flex: 0 0 auto;
	margin-left: -4px;
	padding: 0 9px;
	font-family: var(--vkvs-mono-font);
	font-size: 12px;
	font-weight: 500;
	line-height: 17px;
	letter-spacing: 0;
	color: var(--vkvs-feher);
	background: var(--vkvs-korall);
	clip-path: polygon(4.5px 0, calc(100% - 4.5px) 0, 100% 50%, calc(100% - 4.5px) 100%, 4.5px 100%, 0 50%);
}

/* ---- Nyelvváltó (Figma): a gombok után 40 px-re, Clash 16 / 500, Ink ---- */

.vk-vs-menu .vk-vs-menu-nyelv {
	display: inline-flex;
	align-items: center;
	padding: 8px 0;
	font-family: var(--vkvs-cim-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: 0.04em;
	color: var(--vkvs-ink);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}

@media (hover: hover) {
	.vk-vs-menu .vk-vs-menu-nyelv:hover {
		color: var(--vkvs-korall);
	}
}

.vk-vs-menu .vk-vs-menu-nyelv:focus-visible {
	outline: 2px solid var(--vkvs-korall);
	outline-offset: 4px;
}

/* A mobil példány csak a hamburger mellett, 1025 alatt. */
.vk-vs-menu .vk-vs-menu-nyelv--mobil {
	display: none;
}

/* ---- Hamburger és mobil menü ---- */

.vk-vs-menu .vk-vs-menu-hamburger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-right: -8px; /* a vonalak széle a konténer szélére, nem a találati terület */
	color: var(--vkvs-ink);
}

@media (hover: hover) {
	.vk-vs-menu .vk-vs-menu-hamburger:hover,
	.vk-vs-menu .vk-vs-menu-bezaras:hover {
		color: var(--vkvs-korall);
	}
}

.vk-vs-menu .vk-vs-menu-hamburger:focus-visible,
.vk-vs-menu .vk-vs-menu-bezaras:focus-visible {
	color: var(--vkvs-korall);
	outline: 2px solid var(--vkvs-korall);
	outline-offset: 2px;
	border-radius: 8px;
}

.vk-vs-menu .vk-vs-menu-hamburger .vk-vs-menu-ikon,
.vk-vs-menu .vk-vs-menu-bezaras .vk-vs-menu-ikon {
	width: 32px;
	height: auto;
	overflow: visible;
}

/* A menü-ikon X-állapota: a felső és alsó vonal a rajz közepére fordul, a
   cikkcakk eltűnik. Átmenet nincs: a bezáró gomb állandó X. */
.vk-vs-menu .vk-vs-menu-ikon--menu g {
	transform-origin: 0 0;
}

.vk-vs-menu .vk-vs-menu-ikon--x .vk-vs-menu-ikon-felso {
	transform: translate(21px, 15.5px) rotate(45deg);
}

.vk-vs-menu .vk-vs-menu-ikon--x .vk-vs-menu-ikon-also {
	transform: translate(21px, 15.5px) rotate(-45deg);
}

.vk-vs-menu .vk-vs-menu-ikon--x .vk-vs-menu-ikon-kozep {
	transform: translate(21px, 15.5px) scaleX(0);
	opacity: 0;
}

.vk-vs-menu .vk-vs-menu-hamburger:focus,
.vk-vs-menu .vk-vs-menu-bezaras:focus,
.vk-vs-menu .vk-vs-menu-mobil:focus,
.vk-vs-menu .vk-vs-menu-mobil:focus-visible {
	outline: none;
}

.vk-vs-menu .vk-vs-menu-mobil {
	position: fixed;
	/* Bejelentkezve az admin sáv alatt kezdődik. */
	inset: var(--wp-admin--admin-bar-height, 0px) 0 0 0;
	box-sizing: border-box;
	width: 100vw;
	max-width: 100vw;
	height: calc(100vh - var(--wp-admin--admin-bar-height, 0px));
	height: calc(100dvh - var(--wp-admin--admin-bar-height, 0px));
	max-height: calc(100vh - var(--wp-admin--admin-bar-height, 0px));
	max-height: calc(100dvh - var(--wp-admin--admin-bar-height, 0px));
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--vkvs-paper);
	color: var(--vkvs-ink);
	font-family: var(--vkvs-cim-font);
	overflow: hidden;
}

.vk-vs-menu .vk-vs-menu-mobil[open] {
	display: flex;
	flex-direction: column;
}

.vk-vs-menu .vk-vs-menu-mobil::backdrop {
	background: transparent;
}

.vk-vs-menu .vk-vs-menu-mobil-fej {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	/* A JS az oldal fejlécéből méri: a fejsor alsó vonala a fejléc aljára esik. */
	height: var(--vkvs-mobil-fej, 80px);
	min-height: 56px;
	padding: 0 32px;
	border-bottom: 1px solid var(--vkvs-sand);
}

.vk-vs-menu .vk-vs-menu-mobil-logo,
.vk-vs-menu .vk-vs-menu-mobil-logo > * {
	display: block;
	width: var(--vkvs-logo-szelesseg, auto);
	height: var(--vkvs-logo-magassag, auto);
	max-width: 100%;
	color: var(--vkvs-ink);
}

/* Logóval a „Menü” felirat csak felolvasónak marad. */
.vk-vs-menu .vk-vs-menu-mobil-fej--logos .vk-vs-menu-mobil-cim {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.vk-vs-menu .vk-vs-menu-mobil-cim {
	font-family: var(--vkvs-mono-font);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--vkvs-mauve);
}

.vk-vs-menu .vk-vs-menu-bezaras {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-right: -8px;
	color: var(--vkvs-ink);
	z-index: 1;
}

.vk-vs-menu .vk-vs-menu-mobil-lista {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 8px 32px 24px;
}

.vk-vs-menu .vk-vs-menu-mobil-elem {
	border-bottom: 1px solid var(--vkvs-sand);
}

.vk-vs-menu .vk-vs-menu-mobil-link,
.vk-vs-menu .vk-vs-menu-mobil-kapcsolo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	box-sizing: border-box;
	width: 100%;
	padding: 18px 0;
	font-family: var(--vkvs-cim-font);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: 0.02em;
	color: var(--vkvs-ink);
	text-align: left;
}

.vk-vs-menu .vk-vs-menu-mobil-link:focus-visible,
.vk-vs-menu .vk-vs-menu-mobil-elem--aktiv > .vk-vs-menu-mobil-link,
.vk-vs-menu .vk-vs-menu-mobil-kapcsolo[aria-expanded="true"] {
	color: var(--vkvs-korall);
}

@media (hover: hover) {
	.vk-vs-menu .vk-vs-menu-mobil-link:hover,
	.vk-vs-menu .vk-vs-menu-mobil-allista a:hover {
		color: var(--vkvs-korall);
	}
}

.vk-vs-menu .vk-vs-menu-mobil-kapcsolo .vk-vs-menu-ikon {
	width: 30px;
	height: 30px;
	transition: transform 0.2s ease;
}

.vk-vs-menu .vk-vs-menu-mobil-kapcsolo[aria-expanded="true"] .vk-vs-menu-ikon {
	transform: rotate(180deg);
}

.vk-vs-menu .vk-vs-menu-mobil-al {
	padding: 0 0 16px;
}

.vk-vs-menu .vk-vs-menu-mobil-allista a {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 8px 0;
	font-family: var(--vkvs-cim-font);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--vkvs-ink);
}

.vk-vs-menu .vk-vs-menu-mobil-allista a:focus-visible {
	color: var(--vkvs-korall);
}

.vk-vs-menu .vk-vs-menu-mobil-allista .vk-vs-menu-mobil-osszes {
	gap: 8px;
	margin-top: 8px;
	font-family: var(--vkvs-mono-font);
	font-size: 16px;
	font-weight: 500;
	color: var(--vkvs-korall);
}

.vk-vs-menu .vk-vs-menu-mobil-osszes .vk-vs-menu-ikon {
	width: 20px;
	height: 20px;
}

.vk-vs-menu .vk-vs-menu-mobil-gombok {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 12px;
	padding: 16px 32px calc(24px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--vkvs-sand);
}

.vk-vs-menu .vk-vs-menu-mobil-gombok .vk-vs-menu-gomb {
	width: 100%;
}

/* Üres menü üzenete (csak szerkesztőnek látszik). */
.vk-vs-menu-uzenet {
	padding: 12px 16px;
	border: 1px dashed var(--vk-coral, #FF544D);
	font-size: 14px;
	line-height: 1.5;
	color: var(--vk-ink, #3E2E45);
}

/* ---- Ragadós fejléc (a JS teszi a fejléc-konténerre) ----
   A transform csak a rejtett állapotban él (a transform új rétegrendet nyit). */
.vk-fejlec {
	position: relative;
	z-index: 990; /* a lap z-indexes tartalma alatta marad */
	transform: none;
	transition: transform 0.22s ease;
}

.vk-fejlec--rogzitett {
	position: fixed !important;
	top: var(--wp-admin--admin-bar-height, 0px);
	left: 0;
	right: 0;
	width: 100%;
	/* A rögzített fejléc a papír színét tartja, alul sand vonal választja el. */
	background: var(--vk-paper, #F3EEEB);
	border-bottom: 1px solid var(--vk-sand, #DCD0C3);
}

.vk-fejlec--rejtett {
	transform: translateY(-100%);
}

.vk-fejlec.vk-fejlec--azonnal {
	transition: none !important;
}

.vk-fejlec-hely {
	width: 100%;
}

/* A --wp-admin--admin-bar-height változót a WP a frontenden nem adja meg:
   itt kap értéket a body.admin-bar osztályon (32 px, 782 px alatt 46 px). */
body.admin-bar {
	--wp-admin--admin-bar-height: 32px;
}

@media (max-width: 782px) {
	body.admin-bar {
		--wp-admin--admin-bar-height: 46px;
	}
}

/* A nyitott mobil menü alatt a törzs nem görög. */
html.vk-vs-menu-nyitva {
	overflow: hidden;
}

/* ---- Szűkebb asztal: kisebb köz ---- */

@media (max-width: 1279px) {
	.vk-vs-menu {
		--vkvs-koz: 28px;
	}
}

/* ---- Töréspont: 1025 alatt hamburger ---- */

@media (max-width: 1024px) {
	.vk-vs-menu .vk-vs-menu-sor {
		display: none;
	}

	.vk-vs-menu .vk-vs-menu-hamburger {
		display: inline-flex;
	}

	.vk-vs-menu .vk-vs-menu-nyelv--mobil {
		display: inline-flex;
		min-height: 48px;
		margin-right: 16px;
	}

	.vk-vs-menu.vk-vs-menu--csak-gomb .vk-vs-menu-sor {
		display: flex;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vk-fejlec,
	.vk-vs-menu *,
	.vk-vs-menu *::before,
	.vk-vs-menu *::after {
		transition: none !important;
	}
}