/* Gumb Black Friday v meniju (inc/black-friday-menu.php) – »neon«:
   črn gumb z vrtečo se limetno obrobo in neonskim napisom.
   Obroba je dvoslojno ozadje (črno polje + conic-gradient v obrobi), kot se
   vrti prek @property. Brez psevdoelementov, ker jih menijska vrstica teme
   odstranjuje (::after) in povozi z !important. */

@property --enduro-bf-angle {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}

/* Gradient obrobe mora biti na sami povezavi: tam se animira --enduro-bf-angle. */
.enduro-bf-item {
	--enduro-bf-neon: #c0ff00;
}

/* === Namizni meni === */

.enduro-new-design #menu-main-menu > li.menu-item.enduro-bf-item > a,
.enduro-new-design .site-navigation ul > li.menu-item.enduro-bf-item > a {
	display: inline-flex !important;
	align-items: center !important;
	height: 32px !important;
	padding: 0 13px !important;
	border: 2px solid transparent !important;
	border-radius: 999px !important;
	background: linear-gradient(#000, #000) padding-box, conic-gradient(from var(--enduro-bf-angle), transparent 0deg, transparent 220deg, #c0ff00 300deg, #ffffff 340deg, transparent 360deg) border-box !important;
	box-shadow: inset 0 0 0 1px rgba(192, 255, 0, 0.25) !important;
	color: var(--enduro-bf-neon) !important;
	font-weight: 800 !important;
	letter-spacing: 0.04em !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	animation: enduro-bf-spin 2.4s linear infinite, enduro-bf-flicker 3.2s linear infinite;
}

.enduro-new-design #menu-main-menu > li.menu-item.enduro-bf-item > a:focus-visible,
.enduro-new-design .site-navigation ul > li.menu-item.enduro-bf-item > a:focus-visible {
	outline: 2px solid var(--enduro-bf-neon) !important;
	outline-offset: 3px !important;
}

/* Gumb je širši od napisa Outlet: manjši razmiki, da meni ostane v eni vrsti
   (tema pri 1282–1431 px že sama uporabi 18 px). */
@media (min-width: 1432px) and (max-width: 1700px) {
	.enduro-new-design .site-navigation > div > ul:has(> li.enduro-bf-item),
	.enduro-new-design .site-navigation > ul:has(> li.enduro-bf-item) {
		gap: 30px !important;
	}
}

@media (min-width: 1282px) and (max-width: 1431px) {
	.enduro-new-design .site-navigation > div > ul:has(> li.enduro-bf-item),
	.enduro-new-design .site-navigation > ul:has(> li.enduro-bf-item) {
		gap: 12px !important;
	}
}

/* === Mobilni drsni meni === */

.zank-header-mobile .sliding-menu li.enduro-bf-item > a {
	display: inline-flex;
	align-items: center;
	width: auto;
	height: 38px;
	margin: 4px 0;
	padding: 0 18px;
	border: 2px solid transparent;
	border-radius: 999px;
	background: linear-gradient(#000, #000) padding-box, conic-gradient(from var(--enduro-bf-angle), transparent 0deg, transparent 220deg, #c0ff00 300deg, #ffffff 340deg, transparent 360deg) border-box;
	box-shadow: inset 0 0 0 1px rgba(192, 255, 0, 0.25);
	color: var(--enduro-bf-neon);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.06em;
	line-height: 1;
	animation: enduro-bf-spin 2.4s linear infinite, enduro-bf-flicker 3.2s linear infinite;
}

.zank-header-mobile .sliding-menu li.enduro-bf-item > a:focus-visible {
	outline: 2px solid #000;
	outline-offset: 3px;
}

/* === Animaciji === */

@keyframes enduro-bf-spin {
	to {
		--enduro-bf-angle: 360deg;
	}
}

@keyframes enduro-bf-flicker {
	0%, 18%, 22%, 62%, 64%, 100% {
		color: #c0ff00;
	}
	20%, 63% {
		color: rgba(192, 255, 0, 0.4);
	}
}

/* Brez gibanja: mirna limetna obroba, brez utripanja. */
@media (prefers-reduced-motion: reduce) {
	.enduro-new-design #menu-main-menu > li.menu-item.enduro-bf-item > a,
	.enduro-new-design .site-navigation ul > li.menu-item.enduro-bf-item > a,
	.zank-header-mobile .sliding-menu li.enduro-bf-item > a {
		animation: none !important;
		background: linear-gradient(#000, #000) padding-box, linear-gradient(rgba(192, 255, 0, 0.7), rgba(192, 255, 0, 0.7)) border-box !important;
	}
}