/**
 * Adobe Illustrator / Photoshop-style hover tooltips.
 * Used on social links and shared with the 404 History panel.
 */

[data-tooltip] {
	position: relative;
}

[data-tooltip]::after {
	content: attr(data-tooltip);
	position: absolute;
	z-index: 1100;
	max-width: 200px;
	padding: 4px 7px;
	font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
	font-size: 10px;
	font-weight: 400;
	line-height: 1.3;
	color: #1a1a1a;
	white-space: nowrap;
	pointer-events: none;
	background-color: #f5f0c8;
	border: 1px solid #8a8670;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.12s ease, visibility 0.12s ease;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
	opacity: 1;
	visibility: visible;
}

/* Contact page, menu & footer social icons */
.studio-contact__social-link[data-tooltip]::after,
.nk-nav-social [data-tooltip]::after,
.site-footer__social-link[data-tooltip]::after {
	left: 50%;
	bottom: calc(100% + 6px);
	top: auto;
	transform: translateX(-50%);
}

.studio-contact__social-link[data-tooltip]:hover,
.studio-contact__social-link[data-tooltip]:focus-visible,
.nk-nav-social [data-tooltip]:hover,
.nk-nav-social [data-tooltip]:focus-visible,
.site-footer__social-link[data-tooltip]:hover,
.site-footer__social-link[data-tooltip]:focus-visible {
	z-index: 5;
}