/**
 * MenuEngine — card style (opt-in visual layer).
 *
 * Adds card framing on top of the structural base CSS. Enqueued when the user
 * chooses "Card layout" as their Style mode. Themes can still override the
 * card's tunable values via CSS variables.
 *
 * Variables introduced here:
 *   --menuengine-card-padding       Inside padding (default 1rem)
 *   --menuengine-card-border        Border (default 1px solid currentColor 15%)
 *   --menuengine-card-bg            Card background (default transparent)
 *   --menuengine-card-shadow-hover  Hover shadow (default subtle)
 */

.menuengine-menu-item {
	padding: var(--menuengine-card-padding, 1rem);
	border: var(--menuengine-card-border, 1px solid);
	border-color: color-mix(in srgb, currentColor 15%, transparent);
	border-radius: var(--menuengine-card-radius, 8px);
	background: var(--menuengine-card-bg, transparent);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.menuengine-menu-item:hover {
	transform: translateY(-2px);
	box-shadow: var(
		--menuengine-card-shadow-hover,
		0 4px 12px color-mix(in srgb, currentColor 12%, transparent)
	);
}
.menuengine-menu-item__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
	border-radius: var(--menuengine-card-radius, 8px);
}