/**
 * Header & Navigation Component
 */

body {
	overflow-x: hidden;
	max-width: 100%;
}

.site-header {
	background-color: #000033 !important;
	border-bottom: 1px solid #0f1241;
	position: relative;
	z-index: 100;
}

.site-header.grid-container {
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: 100%!important;
}

.main-navigation.sub-menu-right {
	background-color: transparent !important;
}

#site-navigation {
	margin-right: auto;
	margin-left: 0 !important;
}

#site-navigation.main-navigation .main-nav ul li a {
	color: var(--nav-text-base, #ffffff);
	font-weight: 500;
	position: relative;
	transition: color 0.3s ease, text-shadow 0.3s ease;
	cursor: pointer;
	line-height: 50px !important;
	display: flex;
	align-items: center;
	gap: 8px;
}

#site-navigation.main-navigation .main-nav ul li:hover > a,
#site-navigation.main-navigation .main-nav ul li.current-menu-item > a {
	color: var(--nav-accent, #00d4ff) !important;
	text-shadow: 0px 0px 8px rgba(0, 212, 255, 0.4);
}

#site-navigation.main-navigation .main-nav ul li.menu-item > a::after {
	display: var(--nav-glow-display, block);
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 4px;
	background: var(--nav-accent, #00d4ff);
	box-shadow: 0px -5px 15px var(--nav-accent, rgba(0, 212, 255, 0.9)),
	0px 0px 20px var(--nav-accent, rgba(0, 212, 255, 0.6));
	transition: all 0.3s ease-in-out;
	transform: translateX(-50%);
	border-radius: 10px;
}

#site-navigation.main-navigation .main-nav ul li:hover > a::after,
#site-navigation.main-navigation .main-nav ul li.current-menu-item > a::after {
	width: 70%;
}

.menu-live > a::before {
	content: none;
}

#site-navigation.main-navigation .main-nav ul li.menu-item > a::before {
	display: var(--nav-glow-display, block);
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 4px;
	background: var(--nav-accent, #00d4ff);
	box-shadow: 0px -5px 15px var(--nav-accent, rgba(0, 212, 255, 0.9));
	transition: all 0.3s ease-in-out;
	transform: translateX(-50%);
	border-radius: 10px 10px 0 0;
}

#site-navigation.main-navigation .main-nav ul li:hover > a::before,
#site-navigation.main-navigation .main-nav ul li.current-menu-item > a::before {
	width: 70%;
}

.menu-live > a::after {
	content: 'LIVE' !important;
	position: static !important;
	transform: none !important;
	width: auto !important;
	height: auto !important;
	background-color: #ff4400 !important;
	box-shadow: none !important;
	font-size: 9px;
	font-weight: bold;
	color: #fff;
	padding: 2px 5px;
	border-radius: 4px;
	line-height: 1;
	margin-left: 8px;
	animation: pulse-live 1.5s infinite;
}

@keyframes pulse-live {
	0% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.7; transform: scale(0.95); }
	100% { opacity: 1; transform: scale(1); }
}

/* ==========================================================================
 * АДАПТИВ
 * ========================================================================== */

/* Планшет — менший padding і логотип, компактніші пункти меню */
@media (max-width: 1024px) {
	.site-header .inside-header,
	.site-header.grid-container .inside-header {
		padding: 10px 16px;
		gap: 12px;
	}

	.site-logo img,
	.header-image {
		max-height: 48px;
		width: auto;
	}

	#site-navigation.main-navigation .main-nav ul li a {
		line-height: 44px !important;
		padding: 0 14px;
		font-size: 14px;
	}

	.menu-live > a::after {
		font-size: 8px;
		padding: 2px 4px;
		margin-left: 6px;
	}
}

/* Мобільний — GeneratePress і так вмикає мобільне меню (гамбургер),
 * ми лише правимо візуал: бургер світлий, пункти по-вертикалі,
 * LIVE-бейдж поміщається у рядок, нижня світлова лінія — відключена. */
@media (max-width: 768px) {
	.site-header .inside-header {
		padding: 8px 12px;
		flex-wrap: wrap;
	}

	.site-logo img,
	.header-image {
		max-height: 40px;
	}

	.menu-toggle,
	.mobile-menu-control-wrapper .menu-toggle {
		color: #ffffff !important;
		background: transparent;
	}

	#site-navigation.main-navigation.toggled .main-nav {
		background-color: #000033;
	}

	#site-navigation.main-navigation.toggled .main-nav ul li a {
		line-height: 1.3 !important;
		padding: 14px 18px;
		display: flex;
		justify-content: flex-start;
		font-size: 15px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	}

	/* На мобільному прибираємо десктопну нижню "світлову" лінію */
	#site-navigation.main-navigation .main-nav ul li.menu-item > a::after,
	#site-navigation.main-navigation .main-nav ul li.menu-item > a::before {
		display: none !important;
	}

	/* LIVE бейдж робимо наново для мобільного меню */
	#site-navigation.main-navigation.toggled .menu-live > a::after {
		content: 'LIVE' !important;
		display: inline-block !important;
		position: static !important;
		width: auto !important;
		height: auto !important;
		background: #ff4400 !important;
		color: #fff;
		font-size: 9px;
		padding: 2px 6px;
		border-radius: 4px;
		margin-left: 8px;
		box-shadow: none !important;
	}
}