/**
 * Top-bar над основним хедером (§1.1 ТЗ).
 */
.top-bar {
	position: relative;
	top: 0;
	left: 0;
	right: 0;
	z-index: 60;
	background: #111;
	color: #fff;
	font-size: 14px;
	line-height: 1.4;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Підняти фіксований головний хедер нижче top-bar та компенсувати
   висоту смужки у body, щоб контент не сидів під нею. */
body.has-top-bar {
	padding-top: 40px;
}

body.has-top-bar #mainHeader.fixed,
body.has-top-bar .main-header.fixed {
}

/* -------------------------------------------------------------------------
 * Фон шапки при скролі (КОНТРАСТ із секцією).
 * Вихідний .scrolled — градієнт, що згасає в нуль донизу і розрахований на
 * висоту шапки БЕЗ top-bar; top-bar (40px) зсував рядок меню у прозорий
 * «хвіст» → нечитабельно. Тут робимо фон суцільним. Логіка контрасту —
 * у JS (addHeaderColor): над світлою секцією шапка отримує .light (темний
 * фон + білий текст), над темною — .dark (світлий фон + темний текст).
 * Тож колір фону прив'язано до класу, а не до секції:
 *   .light → темний фон #252324
 *   .dark  → світлий фон #f4f3f1
 * Специфічність = градієнту, а top-bar.css підключається ПІСЛЯ bundle.min.css. */
@media (min-width: 992px) {
	.main-header.scrolled.light {
		background: #252324;
	}
	.main-header.scrolled.dark {
		background: #f4f3f1;
	}
}

.top-bar-inner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 24px;
	min-height: 40px;
	padding: 6px 0;
}

.top-bar-inner > .top-bar-actions {
	margin-left: auto;
}

.top-bar-info,
.top-bar-actions,
.top-bar-socials {
	display: flex;
	align-items: center;
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.top-bar-info > li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.top-bar-info a {
	color: #fff;
	text-decoration: none;
	transition: opacity 0.15s ease;
}

.top-bar-info a:hover {
	opacity: 0.75;
}

.top-bar-info .icon {
	font-size: 16px;
	opacity: 0.85;
}

.top-bar-socials {
	gap: 10px;
}

.top-bar-socials a {
	display: inline-flex;
	width: 28px;
	height: 28px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.top-bar-socials a:hover {
	background: rgba(255, 255, 255, 0.16);
	transform: translateY(-1px);
}

.top-bar-socials a img {
	max-width: 60%;
	max-height: 60%;
	object-fit: contain;
	display: block;
}

.top-bar-actions {
	gap: 16px;
}

.top-bar-cta {
	min-height: 32px;
	padding: 4px 16px;
	font-size: 13px;
}

@media (max-width: 991px) {
	.top-bar {
		display: none;
	}
	body.has-top-bar {
		padding-top: 0;
	}
	body.has-top-bar #mainHeader.fixed,
	body.has-top-bar .main-header.fixed {
		top: 0;
	}
}

/* -------------------------------------------------------------------------
 * Top-bar контакти всередині мобільного бургер-меню.
 * Top-bar схований на <=991px, а бургер-меню існує з <=1199px — тож контакти
 * показуємо всередині меню в тому ж діапазоні.
 * ---------------------------------------------------------------------- */
.main-header .mobile-top-bar {
	display: none;
}

@media (max-width: 1199px) {
	.main-header .mobile-top-bar {
		display: block;
		margin-bottom: 26px;
		padding-bottom: 24px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	}
	.main-header.dark .mobile-top-bar {
		border-bottom-color: rgba(37, 35, 36, 0.12);
	}

	.mobile-top-bar__info {
		list-style: none;
		margin: 14px 0 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 16px;
		font-size: 15px;
		line-height: 1.35;
	}
	.mobile-top-bar__info li {
		display: flex;
		align-items: center;
		gap: 12px;
	}
	.mobile-top-bar__info .icon {
		flex: 0 0 auto;
		width: 22px;
		font-size: 18px;
		text-align: center;
		opacity: 0.6;
	}
	.mobile-top-bar__info a,
	.mobile-top-bar__info span {
		color: inherit;
		text-decoration: none;
	}
	.mobile-top-bar__info a:active {
		opacity: 0.7;
	}
}

/* Соцмережі в мобільному меню: ті самі круглі кнопки, що в top-bar
   (клас .top-bar-socials), але по центру. */
@media (max-width: 768px) {
	.main-header .mobile-bottom .bordered-top {
		justify-content: center;
	}
	.main-header .mobile-bottom .bordered-top .top-bar-socials {
		justify-content: center;
		flex-wrap: wrap;
		gap: 14px;
	}
	/* Світле меню (header .dark) — інвертуємо круглі кнопки, щоб іконки
	   не зникали на світлому тлі. */
	.main-header.dark .mobile-bottom .top-bar-socials a {
		color: #252324;
		background: rgba(37, 35, 36, 0.08);
	}
	.main-header.dark .mobile-bottom .top-bar-socials a:hover {
		background: rgba(37, 35, 36, 0.16);
	}
}