/**
 * Granada Theme – SaaS Menu Enhancements
 * Version: 2.3.6
 */

:root{
	/* Motion */
	--saas-menu-duration: 680ms;
	--saas-menu-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--saas-menu-stagger: 90ms;
	--saas-menu-y: 10px;

	/* Skeleton */
	--saas-skeleton-base: var(--side-nav-hover-background, rgba(0,0,0,0.06));
	--saas-skeleton-shine: var(--body-bg-color, #ffffff);
	--saas-skeleton-opacity: 0.85;

	/* Hover */
	--saas-menu-shadow: 0 10px 28px rgba(0,0,0,0.14);
	--saas-menu-shadow-hover: 0 14px 34px rgba(0,0,0,0.18);

	/* Active text sweep (ChatGPT-like) */
	--saas-active-sweep-1: rgba(0,0,0,0.42);
	--saas-active-sweep-2: rgba(0,0,0,0.98);
}

html.dark{
	--saas-skeleton-base: var(--color-grey-800, rgba(255,255,255,0.08));
	--saas-skeleton-shine: var(--color-grey-700, rgba(255,255,255,0.14));
	--saas-menu-shadow: 0 10px 28px rgba(0,0,0,0.32);
	--saas-menu-shadow-hover: 0 14px 34px rgba(0,0,0,0.38);
	--saas-active-sweep-1: rgba(255,255,255,0.46);
	--saas-active-sweep-2: rgba(255,255,255,0.98);
}

@keyframes saasShimmer{
	0%{ background-position: 200% 0; }
	100%{ background-position: -200% 0; }
}

@keyframes saasActiveTextSweep{
	0%{ background-position: 200% 0; }
	100%{ background-position: -200% 0; }
}

/* Baseline: keep existing theme layout, add animation surfaces */
.site-sidebar .primary-menu .nav > li.saas-menu-item{
	position: relative;
	--saas-i: 0;
}

.site-sidebar .primary-menu .nav > li.saas-menu-item > a,
.site-sidebar .primary-menu .nav > li.saas-menu-item > .theme-switch,
.site-sidebar .primary-menu .nav > li.saas-menu-item > .theme-color{
	position: relative;
	transform: translate3d(0, var(--saas-menu-y), 0);
	opacity: 0;
	filter: blur(0.001px); /* keeps GPU on some browsers without visible blur */
	transition:
		opacity var(--saas-menu-duration) var(--saas-menu-ease),
		transform var(--saas-menu-duration) var(--saas-menu-ease),
		box-shadow 280ms var(--saas-menu-ease),
		background-color 280ms var(--saas-menu-ease);
	transition-delay: calc(var(--saas-i) * var(--saas-menu-stagger));
	will-change: transform, opacity;
	border-radius: var(--border-radius);
}

/* Visible state */
.site-sidebar .primary-menu .nav > li.saas-menu-item.is-visible > a,
.site-sidebar .primary-menu .nav > li.saas-menu-item.is-visible > .theme-switch,
.site-sidebar .primary-menu .nav > li.saas-menu-item.is-visible > .theme-color{
	opacity: 1;
	transform: translate3d(0,0,0);
}

/* Skeleton overlay while loading */
.site-sidebar .primary-menu .nav > li.saas-menu-item.is-loading > a{
	color: transparent !important;
	box-shadow: none;
}
.site-sidebar .primary-menu .nav > li.saas-menu-item.is-loading > a svg,
.site-sidebar .primary-menu .nav > li.saas-menu-item.is-loading > a span{
	opacity: 0 !important;
}
.site-sidebar .primary-menu .nav > li.saas-menu-item.is-loading > a::after{
	content: "";
	position: absolute;
	inset: 0.4rem 0.6rem;
	border-radius: calc(var(--border-radius) - 2px);
	background-image: linear-gradient(
		90deg,
		var(--saas-skeleton-base) 0%,
		var(--saas-skeleton-shine) 40%,
		var(--saas-skeleton-base) 80%
	);
	background-size: 220% 100%;
	animation: saasShimmer 1.1s linear infinite;
	opacity: var(--saas-skeleton-opacity);
	pointer-events: none;
}

/* Micro interaction: SaaS nav hover (desktop only)
   UX: subtle ink (no lift, no shadow, no indicator line)
   NOTE: we avoid vertical separators near icons to reduce visual noise in SaaS sidebars. */
@media (hover:hover) and (pointer:fine){
	/* Base: remove card/button feel */
	.site-sidebar .primary-menu .nav > li.saas-menu-item.is-visible > a{
		transform: none !important;
		box-shadow: none !important;
		background-color: transparent;
	}

		/* Hover: subtle tint (no line) */
	.site-sidebar .primary-menu .nav > li.saas-menu-item.is-visible > a:hover{
		transform: none !important;
		box-shadow: none !important;
			background-color: rgba(0,0,0,0.05);
		background-image: none;
	}
	html.dark .site-sidebar .primary-menu .nav > li.saas-menu-item.is-visible > a:hover{
			background-color: rgba(255,255,255,0.06);
		background-image: none;
	}

		/* Active/current: same visual language as hover (no hard line) */
		.site-sidebar .primary-menu .nav > li.current-menu-item > a,
		.site-sidebar .primary-menu .nav > li.current-menu-ancestor > a{
			background-image: none;
		}
		html.dark .site-sidebar .primary-menu .nav > li.current-menu-item > a,
		html.dark .site-sidebar .primary-menu .nav > li.current-menu-ancestor > a{
			background-image: none;
		}
}

/* Active menu item label: subtle left-to-right "thinking" sweep (ChatGPT-like)
   - No dots
   - No gradients on the container, only on the active label text
   - Respects prefers-reduced-motion */
.site-sidebar .primary-menu .nav > li.current-menu-item > a span,
.site-sidebar .primary-menu .nav > li.current-menu-ancestor > a span{
	background-image: linear-gradient(
		90deg,
		var(--saas-active-sweep-1) 0%,
		var(--saas-active-sweep-2) 45%,
		var(--saas-active-sweep-1) 90%
	);
	background-size: 240% 100%;
	animation: saasActiveTextSweep 1.45s linear infinite;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

@media (prefers-reduced-motion: reduce){
	.site-sidebar .primary-menu .nav > li.current-menu-item > a span,
	.site-sidebar .primary-menu .nav > li.current-menu-ancestor > a span{
		animation: none;
		background-image: none;
		color: inherit;
	}
}

/* Focus state stays crisp */
.site-sidebar .primary-menu .nav > li.saas-menu-item.is-visible > a:focus-visible{
	box-shadow: 0 0 0 3px rgba(0,0,0,0.12), var(--saas-menu-shadow);
	outline: none;
}
html.dark .site-sidebar .primary-menu .nav > li.saas-menu-item.is-visible > a:focus-visible{
	box-shadow: 0 0 0 3px rgba(255,255,255,0.14), var(--saas-menu-shadow);
}

/* Reduced motion: no shimmer, no movement */
@media (prefers-reduced-motion: reduce){
	.site-sidebar .primary-menu .nav > li.saas-menu-item > a,
	.site-sidebar .primary-menu .nav > li.saas-menu-item > .theme-switch,
	.site-sidebar .primary-menu .nav > li.saas-menu-item > .theme-color{
		transition: none !important;
		transform: none !important;
		opacity: 1 !important;
	}
	.site-sidebar .primary-menu .nav > li.saas-menu-item.is-loading > a::after{
		animation: none !important;
		display: none !important;
	}
}


/* Theme logo (WP Central) – auto invert by theme mode
   The bundled logo is a light (white) mark.
   - Light mode: invert -> black
   - Dark mode: no filter -> white
*/
.site-logo img.theme-logo{ filter: invert(1); }
html.dark .site-logo img.theme-logo{ filter: none; }