/**
 * Header category navigation skin for Vida Aromatica Core.
 *
 * Only the look of the header bar. Overflow, arrow shape and placement,
 * disabled state, focus rings and motion preferences all live in the engine,
 * va-scroller.css, declared as a dependency of this stylesheet.
 *
 * The arrows are configured through the engine tokens (--va-scroller-*), so
 * this file never redeclares their geometry or their states.
 *
 * Every rule is scoped to the .va-category-nav namespace. No Kadence, theme or
 * WooCommerce selector is overridden.
 *
 * Palette: child theme tokens (--va-*) with literal fallbacks, so the band
 * stays coherent even where global.css is not loaded.
 */

.va-category-nav {
	--va-cn-bg: var(--va-bg, #F5EFE6);
	--va-cn-border: var(--va-border, #E1D6C4);
	--va-cn-text: var(--va-text-secondary, #5A4D3F);
	--va-cn-text-strong: var(--va-text, #2A231C);
	--va-cn-accent: var(--va-accent, #5B6B52);
	--va-cn-surface: var(--va-surface, #FBF7F0);
	--va-cn-focus: var(--va-focus-ring, #2A231C);
	--va-cn-transition: var(--va-transition, 240ms ease-out);
	--va-cn-fade: 2.5rem;

	/* Engine configuration: compact arrows, tight against the band edges. */
	--va-scroller-transition: var(--va-cn-transition);
	--va-scroller-focus-color: var(--va-cn-focus);
	--va-scroller-track-focus-offset: -2px;
	--va-scroller-control-size: 2rem;
	--va-scroller-control-offset: 0.15rem;
	--va-scroller-control-bg: var(--va-cn-surface);
	--va-scroller-control-color: var(--va-cn-text-strong);
	--va-scroller-control-border: var(--va-cn-border);
	--va-scroller-control-shadow: 0 1px 4px rgba(42, 35, 28, 0.12);
	--va-scroller-control-bg-hover: var(--va-cn-accent);
	--va-scroller-control-color-hover: var(--va-cn-surface);
	--va-scroller-control-border-hover: var(--va-cn-accent);

	background: var(--va-cn-bg);
	border-top: 1px solid var(--va-cn-border);
}

.va-category-nav__frame {
	margin: 0 auto;
	max-width: var(--global-content-width, 1290px);
	padding: 0 1.25rem;
}

/* ---------------------------------------------------------------------------
 * Track
 * ------------------------------------------------------------------------ */

.va-category-nav__track {
	gap: 0.25rem;
	scroll-snap-type: x proximity;
	/* The arrows and the swipe gesture are the affordance; a scrollbar inside
	   the header would read as a broken layout. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.va-category-nav__track::-webkit-scrollbar {
	display: none;
}

.va-category-nav__item {
	scroll-snap-align: start;
}

.va-category-nav__link {
	color: var(--va-cn-text);
	display: block;
	font-size: 0.9375rem;
	letter-spacing: 0.01em;
	line-height: 1.2;
	padding: 0.875rem 0.9rem;
	position: relative;
	text-decoration: none;
	transition: color var(--va-cn-transition);
	white-space: nowrap;
}

/* Discreet underline, coherent with the Kadence "underline" nav style. */
.va-category-nav__link::after {
	background: var(--va-cn-accent);
	bottom: 0.5rem;
	content: "";
	height: 1px;
	left: 0.9rem;
	opacity: 0;
	position: absolute;
	right: 0.9rem;
	transform: scaleX(0);
	transform-origin: left center;
	transition: opacity var(--va-cn-transition), transform var(--va-cn-transition);
}

.va-category-nav__link:hover,
.va-category-nav__link:focus-visible {
	color: var(--va-cn-text-strong);
}

.va-category-nav__link:hover::after,
.va-category-nav__link:focus-visible::after {
	opacity: 1;
	transform: scaleX(1);
}

.va-category-nav__link:focus-visible {
	outline: 2px solid var(--va-cn-focus);
	outline-offset: -3px;
}

.va-category-nav__link.is-current {
	color: var(--va-cn-text-strong);
	font-weight: 600;
}

.va-category-nav__link.is-current::after {
	opacity: 1;
	transform: scaleX(1);
}

/* ---------------------------------------------------------------------------
 * Edge fades: the categories melt into the band instead of being cut
 * ------------------------------------------------------------------------ */

.va-category-nav__frame::before,
.va-category-nav__frame::after {
	bottom: 0;
	content: "";
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: 0;
	transition: opacity var(--va-cn-transition);
	width: var(--va-cn-fade);
	z-index: 2;
}

.va-category-nav__frame::before {
	background: linear-gradient(to right, var(--va-cn-bg) 35%, rgba(245, 239, 230, 0) 100%);
	left: 0;
}

.va-category-nav__frame::after {
	background: linear-gradient(to left, var(--va-cn-bg) 35%, rgba(245, 239, 230, 0) 100%);
	right: 0;
}

.va-category-nav.has-overflow-start .va-category-nav__frame::before,
.va-category-nav.has-overflow-end .va-category-nav__frame::after {
	opacity: 1;
}

/* ---------------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------------ */

@media (max-width: 1024px) {
	.va-category-nav__frame {
		padding: 0 0.75rem;
	}

	.va-category-nav__link {
		font-size: 0.9rem;
		padding: 0.8rem 0.75rem;
	}
}

@media (max-width: 767px) {
	.va-category-nav {
		--va-cn-fade: 1.75rem;
		--va-scroller-control-size: 1.75rem;
	}

	.va-category-nav__frame {
		/* On touch the gesture leads, so the band uses the full width and the
		   arrows sit tight against the edges. */
		padding: 0 0.5rem;
	}

	.va-category-nav__link {
		font-size: 0.875rem;
		padding: 0.75rem 0.65rem;
	}

	.va-category-nav__link::after {
		bottom: 0.4rem;
		left: 0.65rem;
		right: 0.65rem;
	}
}

/* ---------------------------------------------------------------------------
 * Accessibility preferences
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.va-category-nav__link,
	.va-category-nav__link::after,
	.va-category-nav__frame::before,
	.va-category-nav__frame::after {
		transition: none;
	}
}