/**
 * Native Nav Menu with "Invoxa Pill" on, and containers with "Invoxa Header" on.
 * Values come from the controls as CSS variables, with token fallbacks.
 */

/* ---------- Pill nav ---------- */
.ix-pill-nav-yes .elementor-nav-menu--main .elementor-nav-menu {
	position: relative;
	align-items: center;
	gap: var(--ix-pill-gap, 2px);
}

.ix-pill-nav-yes .elementor-nav-menu--main .elementor-item {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	min-height: var(--ix-pill-h, 44px);
	padding: 0 var(--ix-pill-px, 20px);
	border-radius: var(--ix-pill-r, 999px);
	color: var(--ix-pill-item, var(--ix-nav-text));
	transition:
		color var(--ix-dur-sm) var(--ix-ease-out),
		background-color var(--ix-dur-xs) var(--ix-ease-out);
}

.ix-pill-nav-yes .elementor-nav-menu--main .elementor-item.elementor-item-active {
	background-color: var(--ix-pill-bg, var(--ix-primary-500));
	color: var(--ix-pill-text, var(--ix-surface));
}

/* Outranks Elementor's menu typography selector (0,5,0), which sets the weight for every item. */
.elementor-element.ix-pill-nav-yes .elementor-nav-menu--main .elementor-nav-menu .elementor-item.elementor-item-active {
	font-weight: var(--ix-pill-active-weight, 400);
}

/* Hover: the same filled pill as the active item, with white text (owner request). */
.ix-pill-nav-yes .elementor-nav-menu--main .elementor-item:not(.elementor-item-active):hover,
.ix-pill-nav-yes .elementor-nav-menu--main .elementor-item:not(.elementor-item-active):focus-visible {
	background-color: var(--ix-pill-bg, var(--ix-primary-500));
	color: var(--ix-pill-text, var(--ix-surface));
}

/* Sliding indicator (JS adds .ix-pill-js and the indicator element). */
.ix-pill-js .elementor-nav-menu--main .elementor-item.elementor-item-active,
.ix-pill-js .elementor-nav-menu--main .elementor-item:not(.elementor-item-active):hover,
.ix-pill-js .elementor-nav-menu--main .elementor-item:not(.elementor-item-active):focus-visible {
	background-color: transparent;
	color: var(--ix-pill-item, var(--ix-nav-text));
}

/* The item under the sliding pill (active or hovered) is white; :hover/:focus-visible
   match the specificity of the reset above so a hovered item doesn't stay dark. */
.ix-pill-js .elementor-nav-menu--main .elementor-item.is-ix-pill,
.ix-pill-js .elementor-nav-menu--main .elementor-item.is-ix-pill:hover,
.ix-pill-js .elementor-nav-menu--main .elementor-item.is-ix-pill:focus-visible {
	color: var(--ix-pill-text, var(--ix-surface));
}

.ix-pill__indicator {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 0;
	height: 0;
	background-color: var(--ix-pill-bg, var(--ix-primary-500));
	opacity: 0;
	pointer-events: none;
	clip-path: inset(0 round var(--ix-pill-r, 999px));
	transition:
		clip-path var(--ix-dur-sm) var(--ix-ease-out),
		opacity var(--ix-dur-xs) var(--ix-ease-out);
}

.ix-pill__indicator.is-instant {
	transition: none;
}

/* ---------- Site header ---------- */
.ix-site-header-yes {
	border-bottom: 1px solid transparent;
	transition:
		background-color var(--ix-dur-sm) var(--ix-ease-out),
		border-color var(--ix-dur-sm) var(--ix-ease-out),
		box-shadow var(--ix-dur-sm) var(--ix-ease-out),
		transform var(--ix-dur-sm) var(--ix-ease-out);
}

.ix-site-header-yes.is-ix-hidden {
	transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
	.ix-pill-nav-yes .elementor-nav-menu--main .elementor-item,
	.ix-pill__indicator,
	.ix-site-header-yes {
		transition: none;
	}
}