/**
 * cs-header-icon-tooltips.css — Module 27.
 *
 * Hover/focus tooltips for the four header icons. Content comes from `data-cs-tip`, which
 * cs-header-icon-labels.js sets from the same string it puts in the icon's aria-label — one
 * source of truth for the wording, so the visible tooltip and the screen-reader name can never
 * drift apart.
 *
 * Colours are the header's own: #5a5550 is the hover colour the top-bar links and the icons
 * already resolve to, so the tooltip reads as part of the same system.
 */

header .elementor-element-f11ce97 > .elementor-element[data-cs-tip] {
	position: relative;
}

header .elementor-element-f11ce97 > .elementor-element[data-cs-tip]::after {
	content: attr(data-cs-tip);
	position: absolute;
	z-index: 1002; /* the top row sits at 1001 — see the #12 mini-cart fix in cs-ui-polish.css */
	top: calc(100% + 9px);
	left: 50%;
	padding: 5px 9px;
	border-radius: 4px;
	background-color: #5a5550;
	color: #fff;
	font-family: futura-pt, sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: 0.01em;
	text-transform: none;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, -4px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;

	/* The tooltip must never eat the click meant for the icon underneath it. */
	pointer-events: none;
}

header .elementor-element-f11ce97 > .elementor-element[data-cs-tip]:hover::after,
header .elementor-element-f11ce97 > .elementor-element[data-cs-tip]:focus-within::after {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

/**
 * Suppressed on touch, where there is no hover: the tooltip would either never appear or stick
 * after a tap, and on a 375px header the last icon's tooltip would run off the right edge.
 */
@media (hover: none), (max-width: 567px) {

	header .elementor-element-f11ce97 > .elementor-element[data-cs-tip]::after {
		content: none;
	}
}