/**
 * Menu Effects Component
 *
 * Ефекти hover/active для пунктів навігації + динамічні бейджі (LIVE / HOT / NEW).
 * Використовує CSS-змінні, які підставляються з Customizer
 * (див. `gp_custom_combined_css_output` у functions.php).
 */

/* ==========================================================================
   1. HOVER / ACTIVE для пунктів primary-навігації
   ========================================================================== */

/* Переходи — плавно змінюємо колір тексту і фон */
#site-navigation.main-navigation .main-nav ul li > a {
	transition: color 0.25s ease, background-color 0.25s ease, text-shadow 0.25s ease;
}

/* Hover — колір тексту та (опційно) фон */
#site-navigation.main-navigation .main-nav ul li:hover > a,
#site-navigation.main-navigation .main-nav ul li:focus-within > a {
	color: var(--nav-hover-text, var(--nav-accent, #00d4ff)) !important;
	background-color: var(--nav-hover-bg, transparent);
}

/* Active (поточна сторінка / розділ) — зберігаємо стан підсвічування */
#site-navigation.main-navigation .main-nav ul li.current-menu-item > a,
#site-navigation.main-navigation .main-nav ul li.current-menu-ancestor > a,
#site-navigation.main-navigation .main-nav ul li.current_page_item > a {
	color: var(--nav-active-text, var(--nav-accent, #00d4ff)) !important;
	background-color: var(--nav-active-bg, transparent);
}

/* Додаткові варіанти active-стилю (text-shadow / приховування лінії) виводяться
   умовно з functions.php → gp_custom_combined_css_output() залежно від
   налаштування `monobrend_nav_active_style`. */

/* ==========================================================================
   2. БЕЙДЖІ (LIVE / HOT / NEW / кастомний текст)
   ========================================================================== */

.monobrend-menu-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 8px;
	padding: 2px 6px;
	min-width: 20px;
	height: auto;
	font-size: 9px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--nav-badge-text, #ffffff);
	background-color: var(--nav-badge-bg, #ff4400);
	border-radius: 4px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
	vertical-align: middle;
	white-space: nowrap;
	pointer-events: none;
}

/* На мобільних трохи менше відступу */
@media (max-width: 768px) {
	.monobrend-menu-badge {
		font-size: 8px;
		padding: 2px 5px;
		margin-left: 6px;
	}
}

/* ==========================================================================
   3. АНІМАЦІЇ
   ========================================================================== */

/* Pulse — плавна пульсація (підходить для LIVE) */
.monobrend-anim-pulse .monobrend-menu-badge {
	animation: monobrend-badge-pulse 1.5s ease-in-out infinite;
}

@keyframes monobrend-badge-pulse {
	0%   { opacity: 1;   transform: scale(1);    }
	50%  { opacity: 0.8; transform: scale(0.92); }
	100% { opacity: 1;   transform: scale(1);    }
}

/* Blink — різке миготіння (агресивніший акцент) */
.monobrend-anim-blink .monobrend-menu-badge {
	animation: monobrend-badge-blink 1s steps(2, start) infinite;
}

@keyframes monobrend-badge-blink {
	0%, 49%   { opacity: 1; }
	50%, 100% { opacity: 0.35; }
}

/* None — анімація явно вимкнена */
.monobrend-anim-none .monobrend-menu-badge {
	animation: none;
}

/* Повага до accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
	.monobrend-anim-pulse .monobrend-menu-badge,
	.monobrend-anim-blink .monobrend-menu-badge {
		animation: none;
	}
}