/* Vikingo Menü - a fejléc menüsora (Figma 2882-14835): Clash Display Medium
   16 px, 4% betűköz, ink szín, 40 px köz; gomb-menüpont DM Mono 16 korall
   1 px ink kerettel; ÚJ címke DM Mono 12 fehér korall alapon, cikkcakkos
   széllel. A Kurzusok mega menüje a fejléc alatt, teljes szélességben,
   vonalrácsban (paper háttér, 1 px sand vonalak, szögletes, árnyék nélkül).
   1200 px alatt hamburger + teljes képernyős <dialog>.

   Minden szabály .vk-vhp-menu előtaggal és explicit resetekkel, mert az
   Elementor kit globális stílusai (KIT-CSAPDA: minden <button> korall pill,
   [hidden] felülírva) különben átfestenék. Tokenek --vkvhp-* lokális
   változók var(--vk-*, fallback) értékkel. */

@font-face {
	font-family: 'Clash Display';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/ClashDisplay-Regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Clash Display';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/ClashDisplay-Medium.woff2') format('woff2');
}
@font-face {
	font-family: 'DM Mono';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/DMMono-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'DM Mono';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/DMMono-Medium.ttf') format('truetype');
}

.vk-vhp-menu {
	--vkvhp-ink: var(--vk-ink, #3E2E45);
	--vkvhp-korall: var(--vk-coral, #FF544D);
	--vkvhp-korall-hover: var(--vk-coral-hover, #E83D36);
	--vkvhp-mauve: var(--vk-mauve, #7A687F);
	--vkvhp-sand: var(--vk-sand, #DCD0C3);
	--vkvhp-paper: var(--vk-paper, #F3EEEB);
	--vkvhp-feher: var(--vk-white, #FFFFFF);
	--vkvhp-cim-font: var(--vk-clash-display, 'Clash Display', sans-serif);
	--vkvhp-mono-font: var(--vk-dm-mono, 'DM Mono', monospace);
	--vkvhp-koz: 40px; /* a menüpontok köze (Figma) */
	--vkvhp-hasab: 80px; /* a mega panel oldalsó behúzása - a hasáb-szabály */
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-width: 0;
	font-family: var(--vkvhp-cim-font);
	color: var(--vkvhp-ink);
}

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

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

/* A kit minden <a>-t korallra és aláhúzottra fest: itt a link a saját
   szabályai szerint színeződik. */
.vk-vhp-menu a,
.vk-vhp-menu a:hover,
.vk-vhp-menu a:focus {
	text-decoration: none;
	box-shadow: none;
}

/* A nav nem zsugorodhat a logóra: ha kevés a hely, a köz szűkül (lent),
   1200 alatt pedig hamburger. */
.vk-vhp-menu {
	flex: 0 0 auto;
}

/* A widget BURKOLÓJA a fejléc flexboxának eleme (a nav csak benne ül):
   ezért ő záródik jobbra, a konténer justify-content beállításától
   függetlenül - a logó bal szélen, a menü jobb szélen. */
/* Dupla szelektor (0,2,0): a katalogus.css `[data-e-type^="vk-vhp-"]`
   szabálya 100% szélességet ad minden Vikingo-widgetnek, és a körhintás
   oldalakon (Főoldal, Kurzusok) a menü burkolóját is elkapta - ettől lett
   a logó 146 helyett 131 px azokon az oldalakon. */
.vk-vhp-menu-doboz[data-e-type="vk-vhp-menu"],
.vk-vhp-menu-doboz {
	width: auto; /* az Elementor widget-alap 100%-a itt kiszorítaná a logót */
	max-width: 100%;
	flex: 0 1 auto;
	margin-left: auto;
	min-width: 0;
}

/* ---- Gombok resetje (a kit minden <button>-t átfest) ----
   Ugyanaz az erő (0,1,1), 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 (wp_enqueue_scripts
   20-as prioritás). Erősebb szelektor itt nem lehet: a saját gomb-stílusok
   (nyíl, hamburger, mobil kapcsoló) (0,2,0) erejűek, és egy (0,2,1)-es
   reset azokat is felülírná. */

.vk-vhp-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-vhp-menu button:hover,
.vk-vhp-menu button:focus,
.vk-vhp-menu button:active {
	background: transparent;
	/* A kit :focus-ra 1 px keretet is ad, attól a gomb 2 px-t nőne. */
	border: 0;
	border-color: transparent;
	box-shadow: none;
	color: inherit;
}

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

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

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

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

.vk-vhp-menu .vk-vhp-menu-elem {
	position: relative;
	display: flex;
	align-items: center;
	gap: 4px; /* a nyíl a szó mellett áll, nem tőle külön */
}

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

/* A felirat és a nyíl EGY elem: hoverre, nyitva és aktív oldalon együtt
   váltanak korallra (külön színű nyíl zavaró volt - Bence, 2026-09-04). */
.vk-vhp-menu .vk-vhp-menu-link:hover,
.vk-vhp-menu .vk-vhp-menu-link:focus-visible,
.vk-vhp-menu .vk-vhp-menu-elem:hover > .vk-vhp-menu-link,
.vk-vhp-menu .vk-vhp-menu-elem:hover > .vk-vhp-menu-nyil,
.vk-vhp-menu .vk-vhp-menu-elem--aktiv > .vk-vhp-menu-link,
.vk-vhp-menu .vk-vhp-menu-elem--aktiv > .vk-vhp-menu-nyil,
.vk-vhp-menu .vk-vhp-menu-elem--nyitva > .vk-vhp-menu-link,
.vk-vhp-menu .vk-vhp-menu-elem--nyitva > .vk-vhp-menu-nyil {
	color: var(--vkvhp-korall);
	text-decoration: none;
}

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

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

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

.vk-vhp-menu .vk-vhp-menu-elem--nyitva .vk-vhp-menu-nyil {
	color: var(--vkvhp-korall);
}

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

/* ---- ÚJ címke: korall, cikkcakkos szél ---- */

.vk-vhp-menu .vk-vhp-menu-cimke {
	display: inline-block;
	margin-left: 8px;
	padding: 0 9px;
	font-family: var(--vkvhp-mono-font);
	font-size: 12px;
	font-weight: 500;
	line-height: 17px;
	letter-spacing: 0;
	color: var(--vkvhp-feher);
	background: var(--vkvhp-korall);
	vertical-align: 1px;
	/* Szalag-forma a Figma szerint: egy-egy 4,5 px-es csúcs balra és jobbra. */
	clip-path: polygon(4.5px 0, calc(100% - 4.5px) 0, 100% 50%, calc(100% - 4.5px) 100%, 4.5px 100%, 0 50%);
}

/* ---- Gomb-menüpont (Belépés / Csatlakozom) ---- */

.vk-vhp-menu .vk-vhp-menu-elem--gomb {
	margin-left: var(--vkvhp-koz); /* Figma: 80 px a menüsor és a gomb között */
}

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

.vk-vhp-menu .vk-vhp-menu-gomb:hover,
.vk-vhp-menu .vk-vhp-menu-gomb:focus-visible {
	background: var(--vkvhp-ink);
	color: var(--vkvhp-feher);
	text-decoration: none;
}

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

.vk-vhp-menu .vk-vhp-menu-gomb--kitoltott:hover,
.vk-vhp-menu .vk-vhp-menu-gomb--kitoltott:focus-visible {
	border-color: var(--vkvhp-korall-hover);
	background: var(--vkvhp-korall-hover);
	color: var(--vkvhp-feher);
}

/* ---- Egyszerű lenyíló ---- */

.vk-vhp-menu .vk-vhp-menu-panel {
	z-index: 1000;
	box-sizing: border-box;
	background: var(--vkvhp-paper);
	color: var(--vkvhp-ink);
}

.vk-vhp-menu .vk-vhp-menu-panel--lenyilo {
	position: absolute;
	top: calc(100% + 12px);
	left: -24px;
	min-width: 240px;
	padding: 8px 0;
	border: 1px solid var(--vkvhp-sand);
}

.vk-vhp-menu .vk-vhp-menu-allink {
	display: block;
	padding: 10px 24px;
	font-family: var(--vkvhp-cim-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.02em;
	color: var(--vkvhp-ink);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}

/* Almenüpont mono aláírása (a kihívás alkalmának dátuma) és a görgetés
   szerint aktuális alkalom jelölése (kihivas.js: aria-current). */
.vk-vhp-menu .vk-vhp-menu-allink__al {
	display: block;
	margin-top: 3px;
	font-family: var(--vkvhp-mono-font);
	font-size: 11.5px;
	font-weight: 400;
	letter-spacing: 0.02em;
	color: var(--vkvhp-mauve);
}

/* Ikonos almenüsor (a kihívás naptár-útjai): jel-oszlop + szövegblokk, az
   aláírás a cím alatt marad. Asztalon és a mobil listában ugyanaz a rács. */
/* A szöveg-oszlop max-content: a shrink-to-fit panelben az 1fr a nowrap
   aláírást nem mérné bele, és a sor kilógna a keretből. */
.vk-vhp-menu .vk-vhp-menu-allink--ikonos {
	display: grid;
	grid-template-columns: 22px max-content;
	column-gap: 12px;
	align-items: start;
}

.vk-vhp-menu .vk-vhp-menu-allink__ikon {
	display: inline-flex;
	width: 22px;
	height: 22px;
	align-items: center;
	justify-content: center;
	color: var(--vkvhp-mauve);
}

.vk-vhp-menu .vk-vhp-menu-allink__ikon svg {
	width: 20px;
	height: 20px;
}

.vk-vhp-menu .vk-vhp-menu-allink__ikon .vk-naptar-ikon--logo {
	width: 22px;
	height: 22px;
}

/* Aláírás nélküli ikonos sor: a jel a cím közepére. */
.vk-vhp-menu .vk-vhp-menu-allink--ikonos {
	align-items: center;
}

.vk-vhp-menu .vk-vhp-menu-allink__szoveg {
	display: block;
	min-width: 0;
}

.vk-vhp-menu .vk-vhp-menu-mobil-allista .vk-vhp-menu-allink--ikonos {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr);
	padding: 9px 0;
}

.vk-vhp-menu .vk-vhp-menu-mobil-allista .vk-vhp-menu-allink--ikonos .vk-vhp-menu-allink__al {
	flex: none;
	margin-top: 3px;
}

.vk-vhp-menu .vk-vhp-menu-allink--ikonos:hover .vk-vhp-menu-allink__ikon,
.vk-vhp-menu .vk-vhp-menu-allink--ikonos:focus-visible .vk-vhp-menu-allink__ikon {
	color: var(--vkvhp-korall);
}

/* A mobil almenü sora flex (címke jobbra): az aláírás új sorba, teljes szélességen. */
.vk-vhp-menu .vk-vhp-menu-mobil-allista .vk-vhp-menu-allink__al {
	flex: 0 0 100%;
	margin-top: 2px;
}

.vk-vhp-menu .vk-vhp-menu-mobil-allista a {
	flex-wrap: wrap;
}

.vk-vhp-menu .vk-vhp-menu-allink[aria-current="true"],
.vk-vhp-menu .vk-vhp-menu-mobil-allista a[aria-current="true"] {
	color: var(--vkvhp-korall);
}

.vk-vhp-menu .vk-vhp-menu-ikon-kulso {
	margin-left: 6px;
	vertical-align: -1px;
	color: var(--vkvhp-mauve);
}

/* A pill gomb külső-link jele a gomb saját színét viszi (kitöltött gombon
   fehér), a gomb inline-flex, ezért a köz a margóból jön. */
.vk-vhp-menu .vk-vhp-menu-gomb .vk-vhp-menu-ikon-kulso {
	flex: none;
	width: 16px;
	height: 16px;
	margin-left: 8px;
	color: currentColor;
}

/* A mobil sor felirata egy burkolóban a szöveg utáni ikonnal: a sor flex,
   a két végére húzva, és a burkoló nélkül az ikon a sor túlsó végére esne. */
.vk-vhp-menu .vk-vhp-menu-mobil-felirat {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.vk-vhp-menu .vk-vhp-menu-mobil-felirat .vk-vhp-menu-ikon-kulso {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0;
}

/* A menüsor linkje inline-flex: a jel a sor közepén áll, ami a Clash
   Display kis- és nagybetűs szavának optikai közepére esik. */
.vk-vhp-menu .vk-vhp-menu-ikon-elo {
	flex: none;
	width: 18px;
	height: 18px;
	margin-right: 9px;
	position: relative;
	/* Fél pixel feljebb: a jel alja a betű alapvonalára, a teteje a
	   nagybetű tetejére esik - a lelógó betűk nem húzzák le. */
	top: -0.5px;
}

/* A felirat-kapcsoló gomb 10 px-es gap-je a nyílnak való; a szöveg előtti
   jel köze a margóból jön, ezért a gap-et ott negatív margó egyenlíti ki. */
.vk-vhp-menu .vk-vhp-menu-nyil--felirat .vk-vhp-menu-ikon-elo {
	margin-right: -1px;
}

.vk-vhp-menu .vk-vhp-menu-allink:hover,
.vk-vhp-menu .vk-vhp-menu-allink:focus-visible {
	color: var(--vkvhp-korall);
	text-decoration: none;
}

/* ---- Kurzusok mega menü ----
   position: fixed, a tetejét a JS méri a fejléc aljához - így a panel a
   fejléc TELJES szélességében nyílik, nem a widget dobozában. */

.vk-vhp-menu .vk-vhp-menu-panel--mega {
	position: fixed;
	left: 0;
	right: 0;
	/* 1 px-szel a fejléc alja fölé: a fejléc saját alsó vonala és a panel
	   felső szegélye így egybeesik, nem áll össze 2 px-es vonallá. */
	top: calc(var(--vkvhp-panel-top, 104px) - 1px);
	max-height: calc(100vh - var(--vkvhp-panel-top, 104px) - 16px);
	overflow-y: auto;
	/* Fent és lent nincs padding: a rács függőleges vonalai a fejléc vonalától
	   a záró sor vonaláig futnak, megszakítás nélkül. */
	padding: 0 var(--vkvhp-hasab);
	border-top: 1px solid var(--vkvhp-sand);
	border-bottom: 1px solid var(--vkvhp-sand);
}

.vk-vhp-menu .vk-vhp-mega-racs {
	display: grid;
	grid-template-columns: repeat(var(--vkvhp-mega-oszlopok, 4), minmax(0, 1fr));
}

.vk-vhp-menu .vk-vhp-mega-oszlop {
	min-width: 0;
	padding: 40px 0 32px;
	border-left: 1px solid var(--vkvhp-sand);
}

.vk-vhp-menu .vk-vhp-mega-oszlop:first-child {
	border-left: 0;
}

/* A két szélső oszlop a panel széléig ér (negatív margó a hasáb-behúzás
   ellen), a tartalma viszont a hasáb vonalán marad: így a cím aláhúzása a
   képernyő széléig fut, a szöveg nem mozdul. */
.vk-vhp-menu .vk-vhp-mega-oszlop:first-child {
	margin-left: calc(-1 * var(--vkvhp-hasab));
}

.vk-vhp-menu .vk-vhp-mega-oszlop:last-child {
	margin-right: calc(-1 * var(--vkvhp-hasab));
}

/* A vízszintes belső térköz a cím és a lista sorain ül, nem az oszlopon, a
   szélső oszlopok így érhetnek a panel széléig. */
.vk-vhp-menu .vk-vhp-mega-cim,
.vk-vhp-menu .vk-vhp-mega-lista {
	padding-left: 32px;
	padding-right: 32px;
}

.vk-vhp-menu .vk-vhp-mega-oszlop:first-child .vk-vhp-mega-cim,
.vk-vhp-menu .vk-vhp-mega-oszlop:first-child .vk-vhp-mega-lista {
	padding-left: var(--vkvhp-hasab);
}

.vk-vhp-menu .vk-vhp-mega-oszlop:last-child .vk-vhp-mega-cim,
.vk-vhp-menu .vk-vhp-mega-oszlop:last-child .vk-vhp-mega-lista {
	padding-right: var(--vkvhp-hasab);
}

.vk-vhp-menu .vk-vhp-mega-cim {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-top: 0;
	padding-bottom: 10px;
	margin: 0;
	font-family: var(--vkvhp-cim-font);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.02em;
	color: var(--vkvhp-ink);
	text-decoration: none;
	transition: color 0.2s ease;
}

.vk-vhp-menu .vk-vhp-mega-cim:hover,
.vk-vhp-menu .vk-vhp-mega-cim:focus-visible {
	color: var(--vkvhp-korall);
	text-decoration: none;
}

.vk-vhp-menu .vk-vhp-mega-nev {
	min-width: 0;
}

.vk-vhp-menu .vk-vhp-mega-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 0;
	font-family: var(--vkvhp-cim-font);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.01em;
	color: var(--vkvhp-ink);
	text-decoration: none;
	transition: color 0.2s ease;
}

.vk-vhp-menu .vk-vhp-mega-link:hover,
.vk-vhp-menu .vk-vhp-mega-link:focus-visible {
	color: var(--vkvhp-korall);
	text-decoration: none;
}

.vk-vhp-menu .vk-vhp-mega-lab {
	display: flex;
	justify-content: flex-end;
	/* Kifut a panel széléig: a negatív margó a hasáb-behúzást vonja vissza,
	   a padding ugyanannyival hozza vissza a tartalmat a vonalra. */
	margin: 0 calc(-1 * var(--vkvhp-hasab));
	padding: 16px var(--vkvhp-hasab) 24px;
	border-top: 1px solid var(--vkvhp-sand);
}

.vk-vhp-menu .vk-vhp-mega-osszes,
.vk-vhp-menu .vk-vhp-menu-mobil-osszes {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--vkvhp-mono-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--vkvhp-korall);
	text-decoration: none;
	transition: color 0.2s ease;
}

.vk-vhp-menu .vk-vhp-mega-osszes .vk-vhp-menu-ikon,
.vk-vhp-menu .vk-vhp-menu-mobil-osszes .vk-vhp-menu-ikon {
	width: 18px;
	height: 18px;
}

.vk-vhp-menu .vk-vhp-mega-osszes:hover,
.vk-vhp-menu .vk-vhp-mega-osszes:focus-visible,
.vk-vhp-menu .vk-vhp-menu-mobil-osszes:hover,
.vk-vhp-menu .vk-vhp-menu-mobil-osszes:focus-visible {
	color: var(--vkvhp-korall-hover);
	text-decoration: none;
}

/* A kurzus ikonja a sor elején (Notion Ikon mező, thumbnail méret). */
.vk-vhp-menu .vk-vhp-mega-ikon {
	display: block;
	width: 22px;
	height: 22px;
	flex: none;
	object-fit: contain;
}

.vk-vhp-menu .vk-vhp-mega-ikon--ures {
	visibility: hidden;
}

/* ---- Hamburger és mobil lenyíló ---- */

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

/* Hover csak egeres eszközön: érintőn a koppintás után a :hover beragad, és
   az X a nyitott menü teljes ideje alatt korall maradna. */
@media (hover: hover) {
	.vk-vhp-menu .vk-vhp-menu-hamburger:hover,
	.vk-vhp-menu .vk-vhp-menu-bezaras:hover {
		color: var(--vkvhp-korall);
	}
}

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

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

/* ---- A menü-ikon két állapota ----
   Minden vonal a saját (0,0) középpontja köré van rajzolva, a helyét a <g>
   translate attribútuma adja. Az X-állapot ugyanezt a translate-et írja
   CSS-ből a rajz közepére (21, 15.5) és forgat: az origó a vonal közepe,
   transform-origin nélkül - a WebKit a százalékos origót SVG-elemen
   rosszul számolja. A CSS px SVG-ben rajz-egység, ezért a megjelenített
   méret nem számít. */
.vk-vhp-menu .vk-vhp-menu-ikon--menu g {
	transform-origin: 0 0;
	transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

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

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

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

/* Egérkattintás vagy koppintás után ne maradjon a böngésző alap fókuszgyűrűje
   a gombon (a WebKit kör alakút rajzol); billentyűs fókuszra a saját
   :focus-visible keret jön. */
.vk-vhp-menu .vk-vhp-menu-hamburger:focus,
.vk-vhp-menu .vk-vhp-menu-bezaras:focus {
	outline: none;
}

.vk-vhp-menu .vk-vhp-menu-mobil {
	position: fixed;
	/* Az admin sáv alatt kezdődik (bejelentkezve): a dialog a felső rétegben
	   különben a sávot is letakarná, és a fejsora 46 px-szel feljebb ülne,
	   mint az oldal fejléce - az X a lista első sorára csúszna. */
	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(--vkvhp-paper);
	color: var(--vkvhp-ink);
	font-family: var(--vkvhp-cim-font);
	overflow: hidden;
}

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

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

.vk-vhp-menu .vk-vhp-menu-mobil-fej {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: none;
	/* A magasságot a JS az oldal fejlécéből méri: így a fejsor alsó vonala
	   a fejléc vonalára esik, és a hamburger helyére tett X a fejsorban ül. */
	box-sizing: border-box;
	height: var(--vkvhp-mobil-fej, 80px);
	min-height: 56px;
	padding: 0 32px;
	border-bottom: 1px solid var(--vkvhp-sand);
}

/* A fejsor logója: a JS az oldal fejlécének logó-linkjét másolja ide, így
   ugyanaz a jel és méret, mint a fejlécben; a „Menü" felirat csak
   felolvasónak marad, ha a logó bekerült. */
.vk-vhp-menu .vk-vhp-menu-mobil-logo {
	display: inline-flex;
	align-items: center;
	color: var(--vkvhp-ink);
}

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

.vk-vhp-menu .vk-vhp-menu-mobil-fej--logos .vk-vhp-menu-mobil-cim {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

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

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

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

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

.vk-vhp-menu .vk-vhp-menu-mobil-link,
.vk-vhp-menu .vk-vhp-menu-mobil-kapcsolo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	box-sizing: border-box;
	padding: 18px 0;
	/* Lenyitáskor a JS a gombot a lista tetejére görgeti; a margó a lista
	   felső térközével egyezik, így az első sor nem mozdul. */
	scroll-margin-top: 8px;
	font-family: var(--vkvhp-cim-font);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: 0.02em;
	color: var(--vkvhp-ink);
	text-align: left;
	text-decoration: none;
}

.vk-vhp-menu .vk-vhp-menu-mobil-link:hover,
.vk-vhp-menu .vk-vhp-menu-mobil-link:focus-visible,
.vk-vhp-menu .vk-vhp-menu-mobil-elem--aktiv > .vk-vhp-menu-mobil-link,
.vk-vhp-menu .vk-vhp-menu-mobil-kapcsolo[aria-expanded="true"] {
	color: var(--vkvhp-korall);
	text-decoration: none;
}

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

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

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

.vk-vhp-menu .vk-vhp-menu-mobil-kat {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 16px 0 4px;
	font-family: var(--vkvhp-mono-font);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--vkvhp-mauve);
}

.vk-vhp-menu .vk-vhp-menu-mobil-allista a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 7px 0;
	font-family: var(--vkvhp-cim-font);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--vkvhp-ink);
	text-decoration: none;
}

.vk-vhp-menu .vk-vhp-menu-mobil-allista a:hover,
.vk-vhp-menu .vk-vhp-menu-mobil-allista a:focus-visible {
	color: var(--vkvhp-korall);
	text-decoration: none;
}

.vk-vhp-menu .vk-vhp-menu-mobil-allista .vk-vhp-mega-ikon {
	width: 22px;
	height: 22px;
}

.vk-vhp-menu .vk-vhp-menu-mobil-allista .vk-vhp-menu-cimke {
	font-size: 11px;
	line-height: 16px;
}

.vk-vhp-menu .vk-vhp-menu-mobil-osszes {
	padding: 10px 0 4px;
}

.vk-vhp-menu .vk-vhp-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(--vkvhp-sand);
}

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

/* ---- Ragadós fejléc (a JS teszi a fejléc-konténerre) ----
   Nem a widget, hanem a FEJLÉC-ŐS kapja: logóval és felső sávval együtt
   rögzül. A transform csak a rejtett állapotban él, mert a transform
   stacking contextet nyit, és a fejlécben ülő fixed mega panel a fejléchez
   viszonyítódna. A rögzített állapot az admin-sáv alá kerül. */
.vk-fejlec {
	position: relative;
	z-index: 990; /* a lap tartalma (z-indexes szalagok, képek) alatta marad */
	transition: transform 0.22s ease, background-color 0.22s ease, border-color 0.22s ease;
	transform: none;
}

/* Nyitott mega panelnél a fejléc a panel színét kapja: a fejléc-ős maga
   átlátszó, és az oldal teteje (pl. a hero ferde szalagja) pár pixelt a
   fejléc aljába lóghat - az a panel felső vonala fölött átlátszana. Rögzített
   állapotban a fejléc már fehér, ott nem kell. */
.vk-fejlec:not(.vk-fejlec--rogzitett):has(.vk-vhp-menu-elem--nyitva > .vk-vhp-menu-panel--mega) {
	background: var(--vk-paper, #F3EEEB);
}

.vk-fejlec--rogzitett {
	position: fixed !important;
	top: var(--wp-admin--admin-bar-height, 0px);
	left: 0;
	right: 0;
	z-index: 990;
	width: 100%;
}

.vk-fejlec--tomor {
	background: var(--vk-white, #FFFFFF);
	border-bottom: 1px solid var(--vk-sand, #DCD0C3);
}

/* A rögzített fejléc MÉRETE az eredeti marad (Bence, 2026-09-04): csak a
   háttér és az alsó vonal jelzi, hogy a lap fölött úszik. */

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

/* Rögzítés pillanatában nincs átmenet: a fejléc rejtve születik. */
.vk-fejlec.vk-fejlec--azonnal {
	transition: none !important;
}

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

/* ---- Az admin sáv magassága ----
   A --wp-admin--admin-bar-height változót a WP a frontenden NEM adja meg
   (csak a szerkesztőben), ezért itt kap értéket a WP saját body.admin-bar
   osztályán: 32 px, 782 px alatt 46 px - ugyanaz a két lépcső, amit a sáv
   CSS-e használ. Ebből számol a rögzített és az átlátszó fejléc, a mobil
   menü és a JS is. */
body.admin-bar {
	--wp-admin--admin-bar-height: 32px;
}

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

/* ---- Átlátszó fejléc (body.vk-fejlec-atlatszo, oldalankénti kapcsoló) ----
   A fejléc-ős a tartalom fölé kerül és helyet nem foglal, háttere nincs; a
   rögzített állapot változatlanul fehér. A szelektor a sablon-osztályt is
   nevezi, hogy a JS futása előtt se foglaljon helyet (különben betöltéskor
   ugrana a tartalom). A helytartó itt sosem jelenhet meg: a fejléc alatt
   eleve nem volt hely. A szerkesztő vásznán marad a folyamban. */
body.vk-fejlec-atlatszo:not(.elementor-editor-active) :is(.elementor-location-header, [data-vk-fejlec], .vk-fejlec):not(.vk-fejlec--rogzitett) {
	position: absolute;
	top: var(--wp-admin--admin-bar-height, 0px);
	left: 0;
	right: 0;
	width: 100%;
	z-index: 990;
	background: transparent;
}

body.vk-fejlec-atlatszo .vk-fejlec-hely {
	display: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.vk-fejlec {
		transition: none !important;
	}
}

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

/* ---- Szűkebb asztal: kisebb köz, hogy a menüsor a logó mellé férjen ---- */

@media (max-width: 1439px) {
	.vk-vhp-menu {
		--vkvhp-koz: 28px;
	}
}

/* ---- Visszaszámláló (a kihívás menüje, a gomb előtt) ----
   Számblokkok Clash-ben, alattuk mono címke; a változó jegy csúszik
   (navigacio.js). Csak asztalon: 1200 alatt a fejléc dolga a gomb. */
.vk-vhp-menu .vk-vhp-menu-elem--szamlalo {
	margin-left: var(--vkvhp-koz);
}

.vk-vhp-menu .vk-vhp-szamlalo {
	display: inline-flex;
	align-items: center;
	color: var(--vkvhp-ink);
	cursor: default;
	user-select: none;
}

.vk-vhp-menu .vk-vhp-szamlalo__blokkok {
	display: inline-flex;
	align-items: flex-start;
	gap: 14px;
}

.vk-vhp-menu .vk-vhp-szamlalo__blokk {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	min-width: 30px;
}

.vk-vhp-menu .vk-vhp-szamlalo__szam {
	display: inline-flex;
	font-family: var(--vkvhp-cim-font);
	font-size: 22px;
	font-weight: 500;
	/* A sor a betű teljes magassága: a Clash Display ékezetei és talpa a
	   betűméretnél magasabbra nyúlnak, szűkebb sorban a jegy teteje levágódik. */
	line-height: 30px;
	letter-spacing: 0;
	color: var(--vkvhp-ink);
}

/* A jegy doboza a legszélesebb számjegyhez (a Clash Display „0"-ja 0,71 em,
   nincs tabuláris változata): fix szélesség, középre zárt jegy - így a szám
   nem vágódik le, és a blokk szélessége nem ugrál percenként. */
.vk-vhp-menu .vk-vhp-szamlalo__jegy {
	position: relative;
	display: inline-block;
	width: 0.76em;
	height: 30px;
	overflow: hidden;
	text-align: center;
}

.vk-vhp-menu .vk-vhp-szamlalo__jegy-belso {
	position: absolute;
	inset: 0;
	display: block;
	transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s ease;
}

.vk-vhp-menu .vk-vhp-szamlalo__jegy-belso--ki {
	transform: translateY(-100%);
	opacity: 0;
}

.vk-vhp-menu .vk-vhp-szamlalo__jegy-belso--be {
	transform: translateY(100%);
	opacity: 0;
	transition: none;
}

.vk-vhp-menu .vk-vhp-szamlalo__cimke {
	margin-top: -3px;
	/* A betűköz az utolsó betű után is kiteszi a helyét: a felirat annyival
	   balra csúszna a szám közepétől, a bal oldali behúzás kiegyenlíti. */
	padding-left: 0.08em;
	font-family: var(--vkvhp-mono-font);
	font-size: 10px;
	font-weight: 500;
	line-height: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--vkvhp-mauve);
}

/* Élő állapot: a blokkok helyén a korall szalag-jelvény. */
.vk-vhp-menu .vk-vhp-szamlalo__elo {
	display: none;
}

.vk-vhp-menu .vk-vhp-szamlalo--elo .vk-vhp-szamlalo__blokkok {
	display: none;
}

.vk-vhp-menu .vk-vhp-szamlalo--elo .vk-vhp-szamlalo__elo {
	display: inline-flex;
}

.vk-vhp-menu .vk-vhp-szamlalo--elo .vk-vhp-menu-cimke {
	margin-left: 0;
	font-size: 13px;
	line-height: 22px;
	padding: 0 12px;
}

@media (prefers-reduced-motion: reduce) {
	.vk-vhp-menu .vk-vhp-szamlalo__jegy-belso {
		transition: none;
	}
}

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

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

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

	/* Csak-gomb menü (a kihívás landingje): nincs hamburger, a gomb marad. */
	.vk-vhp-menu.vk-vhp-menu--csak-gomb .vk-vhp-menu-sor {
		display: flex;
	}

	.vk-vhp-menu .vk-vhp-menu-elem--szamlalo {
		display: none;
	}
}

.vk-vhp-menu.vk-vhp-menu--csak-gomb .vk-vhp-menu-elem--gomb {
	margin-left: 0;
}

@media (max-width: 767px) {
	.vk-vhp-menu.vk-vhp-menu--csak-gomb .vk-vhp-menu-gomb {
		height: 44px;
		padding: 0 20px;
		font-size: 14px;
	}
}

@media (max-width: 767px) {
	.vk-vhp-menu .vk-vhp-menu-mobil-fej {
		height: var(--vkvhp-mobil-fej, 72px);
	}
}

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