/* Vikingo tooltip - bármelyik elemre rátehető, egyetlen attribútummal:
   data-vk-tipp="Figma". Nincs hozzá JS és nincs hozzá osztály sem: az
   attribútum egyben a kapcsoló és a szöveg forrása.

   MIÉRT NEM Elementor global class: a buborékot ::after és ::before adja,
   a global class CSS-e viszont egyetlen szelektor-blokkba kerül, pszeudo-
   elemet nem tud. Ugyanaz az indok, mint a szövegkiemelésnél (kiemeles.css). */

[data-vk-tipp] {
	/* A buborék NEM az ink (#3E2E45): a sötét szakaszok háttere pont az,
	   ott beleolvadna. Egy fokkal mélyebb tinta + hajszálvékony világos
	   keret - így világos és sötét háttéren is elválik. */
	--vkvhp-tipp-hatter: var(--vk-ink-deep, #2A2036);
	--vkvhp-tipp-keret: rgba(255, 255, 255, .22);
	--vkvhp-tipp-szin: var(--vk-white, #FFFFFF);
	--vkvhp-tipp-tavolsag: 10px;
	position: relative;
}

[data-vk-tipp]::after,
[data-vk-tipp]::before {
	position: absolute;
	z-index: 20;
	/* A nyíl a buborék FÖLÉ rajzolódik (::before, z-index 21): a felső fele
	   így letakarja a buborék alsó keretvonalát, és nem az húz keresztül a
	   nyílon. A két alsó lapján lévő hajszálkeret folytatja a buborék
	   körvonalát, ezért a kettő egyetlen alakzatnak látszik. */
	bottom: calc(100% + var(--vkvhp-tipp-tavolsag));
	left: 50%;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 4px);
	transition: opacity .14s ease, transform .14s ease;
	transition-delay: 0s;
}

[data-vk-tipp]::after {
	content: attr(data-vk-tipp);
	padding: 7px 11px;
	border: 1px solid var(--vkvhp-tipp-keret);
	border-radius: 8px;
	color: var(--vkvhp-tipp-szin);
	background: var(--vkvhp-tipp-hatter);
	box-shadow: 0 10px 24px rgba(32, 25, 35, .22);
	font-family: var(--vk-dm-mono, 'DM Mono', ui-monospace, monospace);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: .03em;
	white-space: nowrap;
}

/* A nyilat elforgatott négyzet adja: így a buborék hátterével együtt
   színeződik, és nem kell hozzá külön elem. */
[data-vk-tipp]::before {
	content: "";
	z-index: 21;
	width: 9px;
	height: 9px;
	margin-bottom: -4px;
	border-radius: 1px;
	border-right: 1px solid var(--vkvhp-tipp-keret);
	border-bottom: 1px solid var(--vkvhp-tipp-keret);
	background: var(--vkvhp-tipp-hatter);
	transform: translate(-50%, 4px) rotate(45deg);
}

/* Billentyűzetről is előjön, nem csak egérrel. */
[data-vk-tipp]:hover::after,
[data-vk-tipp]:hover::before,
[data-vk-tipp]:focus-visible::after,
[data-vk-tipp]:focus-visible::before {
	opacity: 1;
	transform: translate(-50%, 0);
	transition-delay: .06s;
}

[data-vk-tipp]:hover::before,
[data-vk-tipp]:focus-visible::before {
	transform: translate(-50%, 0) rotate(45deg);
}

/* Lefelé nyíló változat, ha fölötte nincs hely. */
[data-vk-tipp][data-vk-tipp-hely="lent"]::after,
[data-vk-tipp][data-vk-tipp-hely="lent"]::before {
	top: calc(100% + var(--vkvhp-tipp-tavolsag));
	bottom: auto;
	transform: translate(-50%, -4px);
}

[data-vk-tipp][data-vk-tipp-hely="lent"]::before {
	margin-top: -4px;
	margin-bottom: 0;
	transform: translate(-50%, -4px) rotate(45deg);
}

[data-vk-tipp][data-vk-tipp-hely="lent"]:hover::after,
[data-vk-tipp][data-vk-tipp-hely="lent"]:focus-visible::after {
	transform: translate(-50%, 0);
}

[data-vk-tipp][data-vk-tipp-hely="lent"]:hover::before,
[data-vk-tipp][data-vk-tipp-hely="lent"]:focus-visible::before {
	transform: translate(-50%, 0) rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
	[data-vk-tipp]::after,
	[data-vk-tipp]::before {
		transition: none;
		transform: translate(-50%, 0);
	}

	[data-vk-tipp]::before,
	[data-vk-tipp]:hover::before,
	[data-vk-tipp]:focus-visible::before {
		transform: translate(-50%, 0) rotate(45deg);
	}
}

/* Érintőképernyőn nincs hover: ott a buborék sosem jelenne meg, viszont a
   :focus-visible koppintásra sem sül el. A tooltip dekoráció - a jelentést
   az aria-label hordozza -, ezért itt nem erőltetjük. */