/**
 * Experimental header button-interaction styles (Customizer: Header → Button
 * hover style). Enqueued only when the style is not "none" (inc/header.php), so
 * the default header ships zero bytes here. Orthogonal to the header-style
 * select — layers on top of default / merged-purple / merged-light alike.
 *
 * Two variants, scoped by body class:
 *  - `.j2e-btn-zoom`      — the modern "text pops" feel: the label scales up on
 *    hover while its box stays put (transforms run post-layout, so neighbours
 *    never reflow). Reference: detailerplace.com.
 *  - `.j2e-btn-underline` — a centre-out underline grows under the label.
 *
 * Both REPLACE the loud purple fill-on-hover (the "old-school pressed" feel) on
 * the bottom nav and top-bar menus with motion. The current-menu-item highlight
 * is left intact (it marks location, not hover), and the language switcher is
 * deliberately untouched (its dropdown trigger fights a scale/underline).
 *
 * Targets differ per variant:
 *  - zoom:      bottom nav (.main-navigation), top-bar menus (.j2e-top-menu__list)
 *               and the cart trigger (.j2e-cart-link).
 *  - underline: bottom nav and top-bar menus only — the cart and the contact
 *               links (.j2e-contact a) are excluded.
 * Contact links never zoom either; only the cart carries the zoom beyond the menus.
 *
 * Depends on 'just2euro-header' so it loads after the base header cascade.
 */

/* ---------------------------------------------------------------------------
   1. Neutralise the purple fill-on-hover so the motion reads as text-only.

   These prefix GP's own hover selectors (header.css) with the body class to
   beat their specificity — the bottom-nav rule is (0,4,3), so the body-class
   prefix lifts ours to (0,5,3) and wins. The :not(current-menu) guard mirrors
   GP's so the active item keeps its solid background.
   --------------------------------------------------------------------------- */
.j2e-btn-zoom .main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.j2e-btn-zoom .main-navigation .main-nav ul li:not([class*="current-menu-"]):focus-within > a,
.j2e-btn-zoom .main-navigation .main-nav ul li.sfHover:not([class*="current-menu-"]) > a,
.j2e-btn-underline .main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.j2e-btn-underline .main-navigation .main-nav ul li:not([class*="current-menu-"]):focus-within > a,
.j2e-btn-underline .main-navigation .main-nav ul li.sfHover:not([class*="current-menu-"]) > a {
	background-color: transparent;
}

.j2e-btn-zoom .j2e-top-menu__list > li > a:hover,
.j2e-btn-zoom .j2e-top-menu__list > li > a:focus,
.j2e-btn-zoom .j2e-top-menu__list > li:hover > a,
.j2e-btn-zoom .j2e-top-menu__list > li:focus-within > a,
.j2e-btn-underline .j2e-top-menu__list > li > a:hover,
.j2e-btn-underline .j2e-top-menu__list > li > a:focus,
.j2e-btn-underline .j2e-top-menu__list > li:hover > a,
.j2e-btn-underline .j2e-top-menu__list > li:focus-within > a {
	background-color: transparent;
}

/* In the merged styles the top-bar cluster moves inline and header-merged.css
   repaints its hover at (0,4,3) — chain both body classes here so this lands at
   (0,5,3) and still wins. (The standalone bar above is only (0,2,2), so the
   plain rule already beats it there.) */
body.j2e-header-merged.j2e-btn-zoom .j2e-top-bar--inline .j2e-top-menu__list > li > a:hover,
body.j2e-header-merged.j2e-btn-zoom .j2e-top-bar--inline .j2e-top-menu__list > li > a:focus,
body.j2e-header-merged.j2e-btn-zoom .j2e-top-bar--inline .j2e-top-menu__list > li:hover > a,
body.j2e-header-merged.j2e-btn-zoom .j2e-top-bar--inline .j2e-top-menu__list > li:focus-within > a,
body.j2e-header-merged.j2e-btn-underline .j2e-top-bar--inline .j2e-top-menu__list > li > a:hover,
body.j2e-header-merged.j2e-btn-underline .j2e-top-bar--inline .j2e-top-menu__list > li > a:focus,
body.j2e-header-merged.j2e-btn-underline .j2e-top-bar--inline .j2e-top-menu__list > li:hover > a,
body.j2e-header-merged.j2e-btn-underline .j2e-top-bar--inline .j2e-top-menu__list > li:focus-within > a {
	background-color: transparent;
}

/* ---------------------------------------------------------------------------
   2. Zoom variant — scale the label on hover/focus, box stays put.

   --j2e-btn-ease overshoots slightly (the "pop"); transform-origin: center
   grows the text in place. No display change: GP's block anchors scale fine,
   and the li never resizes because transforms don't reflow.
   --------------------------------------------------------------------------- */
.j2e-btn-zoom {
	--j2e-btn-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
	--j2e-btn-scale: 1.08;
}

.j2e-btn-zoom .main-navigation .main-nav ul li > a,
.j2e-btn-zoom .j2e-top-menu__list > li > a,
.j2e-btn-zoom .j2e-cart-link {
	transform-origin: center;
	transition: transform 0.25s var(--j2e-btn-ease);
}

.j2e-btn-zoom .main-navigation .main-nav ul li:hover > a,
.j2e-btn-zoom .main-navigation .main-nav ul li:focus-within > a,
.j2e-btn-zoom .main-navigation .main-nav ul li.sfHover > a,
.j2e-btn-zoom .j2e-top-menu__list > li:hover > a,
.j2e-btn-zoom .j2e-top-menu__list > li:focus-within > a,
.j2e-btn-zoom .j2e-cart-link:hover,
.j2e-btn-zoom .j2e-cart-link:focus {
	transform: scale(var(--j2e-btn-scale));
}

/* ---------------------------------------------------------------------------
   3. Underline variant — a centre-out bar grows under the label on hover.

   An absolutely-positioned ::after scaled from scaleX(0) → scaleX(1);
   transform-origin: center opens it from the middle outward. Applied only to
   the bottom nav and the top-bar menus (cart and contact links are excluded).
   The bottom-nav bar mirrors the merged-light native underline — full link
   width, pinned to the bottom edge, 3px — so the purple bars read the same as
   the light bar. The inline-block top-bar links get a slimmer inset bar.
   --------------------------------------------------------------------------- */
.j2e-btn-underline {
	--j2e-btn-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.j2e-btn-underline .main-navigation .main-nav ul li > a,
.j2e-btn-underline .j2e-top-menu__list > li > a {
	position: relative;
}

.j2e-btn-underline .main-navigation .main-nav ul li > a::after,
.j2e-btn-underline .j2e-top-menu__list > li > a::after {
	content: "";
	position: absolute;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.25s var(--j2e-btn-ease);
}

/* Bottom nav: full link width, pinned to the bar's bottom edge (matches the
   merged-light native indicator). */
.j2e-btn-underline .main-navigation .main-nav ul li > a::after {
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
}

/* Inline-block top-bar links hug their text — a slimmer inset bar just under. */
.j2e-btn-underline .j2e-top-menu__list > li > a::after {
	left: 0.6rem;
	right: 0.6rem;
	bottom: 0.1rem;
	height: 2px;
}

.j2e-btn-underline .main-navigation .main-nav ul li:hover > a::after,
.j2e-btn-underline .main-navigation .main-nav ul li:focus-within > a::after,
.j2e-btn-underline .main-navigation .main-nav ul li.sfHover > a::after,
.j2e-btn-underline .j2e-top-menu__list > li:hover > a::after,
.j2e-btn-underline .j2e-top-menu__list > li:focus-within > a::after {
	transform: scaleX(1);
}

/* ---------------------------------------------------------------------------
   4. Reduced motion. Zoom is decorative — drop it entirely. The underline is
   an affordance, so keep it appearing on hover; only the animated grow is
   removed (no transition), so it snaps in rather than sweeping.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.j2e-btn-zoom .main-navigation .main-nav ul li > a,
	.j2e-btn-zoom .j2e-top-menu__list > li > a,
	.j2e-btn-zoom .j2e-cart-link {
		transition: none;
	}

	.j2e-btn-zoom .main-navigation .main-nav ul li:hover > a,
	.j2e-btn-zoom .main-navigation .main-nav ul li:focus-within > a,
	.j2e-btn-zoom .main-navigation .main-nav ul li.sfHover > a,
	.j2e-btn-zoom .j2e-top-menu__list > li:hover > a,
	.j2e-btn-zoom .j2e-top-menu__list > li:focus-within > a,
	.j2e-btn-zoom .j2e-cart-link:hover,
	.j2e-btn-zoom .j2e-cart-link:focus {
		transform: none;
	}

	.j2e-btn-underline .main-navigation .main-nav ul li > a::after,
	.j2e-btn-underline .j2e-top-menu__list > li > a::after {
		transition: none;
	}
}