/**
 * .hover-swap — reusable hover "line swap" text effect.
 *
 * Add the class (or data-hover-swap attribute) to any link/button/element
 * whose text label should get the effect; js/hover-swap.js builds the
 * required inner markup from the element's text content on page load:
 *
 *   <a class="hover-swap" href="#">Solutions</a>
 *
 * On hover/focus the current label slides up and out while a copy slides
 * up into its place from below (same color as the label by default).
 * Customize the copy's color per usage with the --hover-swap-color custom
 * property, if a specific usage ever needs one:
 *
 *   <a class="hover-swap" style="--hover-swap-color:#ff6b6b" href="#">Solutions</a>
 *
 * If the element has other children that must stay outside the effect
 * (e.g. an icon), add data-hover-swap-target="selector" pointing at the
 * child that holds the label text — see hover-swap.js.
 */
.hover-swap {
	--hover-swap-color: inherit;
}
.hover-swap__mask {
	position: relative;
	display: block;
	overflow: clip;
	line-height: 1.2;
}
.hover-swap__line {
	display: block;
	transition: transform .45s cubic-bezier(.65, 0, .35, 1);
	will-change: transform;
}
.hover-swap__line--copy {
	position: absolute;
	left: 0;
	top: 100%;
	color: var(--hover-swap-color);
}
/* Only on devices with a real hover mechanism (mouse/trackpad) — on touch,
   :hover triggers on tap and then stays "stuck" until something else is
   tapped, since there's no pointer to move away and un-hover it, which
   read as the label swapping and not swapping back. :focus-visible and
   .is-active (programmatic control) still apply everywhere; only the
   hover trigger itself is gated. */
@media (hover: hover) {
	.hover-swap:hover .hover-swap__line {
		transform: translateY(-100%);
	}
}
.hover-swap:focus-visible .hover-swap__line,
.hover-swap.is-active .hover-swap__line {
	transform: translateY(-100%);
}

/**
 * Header menu: while hovering one item, the other ("sibling") items dim via
 * opacity instead of staying at full strength — this dims the label text
 * and its dropdown-arrow icon (a background-image ::after, so `color`
 * doesn't reach it) together in one step. The hovered item itself is
 * untouched — no dimming, just the line-swap above.
 *
 * Gated the same way as .hover-swap:hover above — on touch, :hover triggers
 * on tap and has no pointer to move away and clear it, so the tapped item's
 * siblings would stay dimmed until something else is tapped.
 */
.header__menu-list > li > a {
	transition: opacity .35s ease;
}
@media (hover: hover) {
	.header__menu-list:hover > li > a:not(:hover) {
		opacity: 0.5;
	}
}