/**
 * ELBIN R2 — структурний CSS елемента білдера «Top Bar».
 * Лейаут сервіс-блоку (телефон + графік + лінки + розділювачі).
 * Кольори/фон/падінги керуються CSS-змінними з dynamic-styles.php
 * (--topbar-*), з дефолтами на темну палітру хедера --elbin-r2-header-*.
 */

/* Сам елемент = сервіс-блок, вирівняний вправо у своїй комірці рядка */
.ct-header-topbar.sh-topbar-service {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	font-family: var(--elbin-r2-font-ui);
	font-weight: 500;
	font-size: 12.5px;
	line-height: 1;
	color: var(--topbar-text-color, var(--elbin-r2-header-text-3));
	padding: var(--topbar-padding, 0);
}

/* Рядок хедера, що містить топ-бар — темний фон на всю ширину рядка.
   Фон елемента кладемо на рядок, бо сервіс-блок сам по собі вузький. */
[data-row*="top"]:has(.ct-header-topbar),
[data-row*="middle"]:has(.ct-header-topbar),
[data-row*="bottom"]:has(.ct-header-topbar) {
	background: var(--topbar-background, var(--elbin-r2-header-bg));
}

/* Лінки сервіс-блоку */
.ct-header-topbar.sh-topbar-service a {
	color: var(--topbar-link-color, var(--elbin-r2-header-text-3));
	text-decoration: none;
	transition: color 0.15s ease;
}

.ct-header-topbar.sh-topbar-service a:hover {
	color: var(--topbar-link-hover-color, var(--elbin-r2-header-accent));
}

/* Текстові лінки (не телефон) — підкреслені, щоб одразу читалась клікабельність.
   Телефон (.sh-phone) лишається без підкреслення: він і так виділений моно+жирним.
   Підкреслення приглушене (колір розділювачів) → на hover стає колір тексту лінка. */
.ct-header-topbar.sh-topbar-service a:not(.sh-phone) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
	text-decoration-color: currentColor;
	transition: color 0.15s ease;
}

/* Телефон — моно, жирний, акцент-hover */
.ct-header-topbar.sh-topbar-service .sh-phone {
	font-family: var(--elbin-r2-font-mono);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: -0.01em;
	color: var(--topbar-text-color, var(--elbin-r2-header-text));
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.ct-header-topbar.sh-topbar-service .sh-phone:hover {
	color: var(--topbar-link-hover-color, var(--elbin-r2-header-accent));
}

/* Графік роботи */
.ct-header-topbar.sh-topbar-service .sh-schedule {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* Іконки */
.ct-header-topbar.sh-topbar-service .sh-topbar-ico {
	flex-shrink: 0;
}

/* Розділювачі «·» */
.ct-header-topbar.sh-topbar-service .sh-topbar-sep {
	color: var(--topbar-line-color, var(--elbin-r2-header-line));
	user-select: none;
}

/* Десктоп-сітка (план R-A): увесь сервіс-блок притиснутий ВПРАВО.
   Рядок top-row у Blocksy = .ct-container-fluid (display:grid, 3 колонки
   start|middle|end). Top-bar лежить у середній колонці (~760px), тож сам
   по собі width:100% не сягає країв рядка. Тому грід-айтем середньої зони,
   що містить сервіс-блок, розпираємо на всі колонки (grid-column:1/-1) —
   тоді внутрішній flex (justify-content:flex-end) притискає увесь блок
   (телефон · графік · лінки) до правого краю рядка.
   Центрування лінків (inc2c) ВІДКОЧЕНО: ні justify-center, ні absolute
   для графіка більше нема — графік тепер звичайний інлайн-елемент у потоці
   між телефоном і лінками.
   Приглушений текст/роздільники/hover-акцент — з базових правил вище. */
@media (min-width: 1000px) {
	/* Висота смужки топ-ряду ~54px.
	   Blocksy друкує фіксовану row-height (height:90px) інлайном через
	   dynamic-styles на основі theme_mod headerRowHeight — звичайний
	   min-height/padding її НЕ перебивають. Тому тут height:54px !important
	   (аналогічно тому, як палітру доводиться перебивати інлайном —
	   див. граблі каскаду Blocksy). theme_mod НЕ чіпаємо. */
	[data-row="top"] {
		height: 40px !important;
		min-height: 40px;
		padding-top: 0;
		padding-bottom: 0;
	}

	[data-row="top"] .ct-container-fluid,
	[data-row="top"] .ct-container {
		height: 40px !important;
		min-height: 40px;
		padding-top: 0;
		padding-bottom: 0;
		/* Blocksy рендерить top-row як grid з 3 під-рядками
		   (grid-template-rows:20px 20px 20px) — лого сидить у РЯДКУ 1,
		   а сервіс-блок у РЯДКУ 2, тож вони стоять один під одним і ніколи
		   не вирівнюються по одній лінії. Стискаємо контейнер в ОДИН рядок
		   54px і кладемо всі айтеми в нього (grid-row:1 нижче) — тоді лого
		   й сервіс накладаються в одну смужку, а align-items:center дає
		   спільний вертикальний центр. */
		grid-template-rows: 40px !important;
		align-items: center;
		align-content: center;
	}

	/* Усі прямі грід-айтеми ряду — в єдиний рядок 1 (накладаються в смужці). */
	[data-row="top"] .ct-container-fluid > *,
	[data-row="top"] .ct-container > * {
		grid-row: 1 !important;
		align-self: center;
	}

	/* Грід-айтем із топбар-сервісом центруємо у своїй комірці ряду. */
	[data-row="top"] .ct-container-fluid > *:has(.sh-topbar-service) {
		align-self: center;
	}

	/* Прямий грід-айтем .ct-container-fluid, що містить топ-бар → на всю ширину */
	[data-row="top"] .ct-container-fluid > *:has(.sh-topbar-service) {
		grid-column: 1 / -1;
	}

	/* Розкладка (план R-A3): ГРАФІК ліворуч, ЛІНКИ праворуч.
	   width:100% разом із grid-column:1/-1 дає блоку всю ширину рядка.
	   Графіку (.sh-schedule) даємо margin-right:auto — він стає крайнім
	   зліва, а весь «вільний» простір лягає праворуч від нього, тож група
	   лінків (зі своїми розділювачами «·») притискається до правого краю.
	   space-between тут НЕ годиться: flex-wrap + багато айтемів розкидало б
	   усі лінки рівномірно по ширині; margin-right:auto тримає лінки
	   зліпленою групою справа. */
	.ct-header-topbar.sh-topbar-service {
		display: flex;
		width: 100%;
		justify-content: flex-end;
		align-items: center;
	}

	/* Графік — крайній зліва; виштовхує решту (лінки) вправо. */
	.ct-header-topbar.sh-topbar-service .sh-schedule {
		margin-right: auto;
	}

	/* Перший розділювач — той, що стоїть ОДРАЗУ після графіка (між графіком
	   і першим лінком) — ховаємо: при розкладці «графік зліва · лінки справа»
	   він би висів у порожнечі посеред рядка. Розділювачі МІЖ самими лінками
	   лишаються (вони йдуть не після .sh-schedule). */
	.ct-header-topbar.sh-topbar-service .sh-schedule + .sh-topbar-sep {
		display: none;
	}
}

/* На вузьких екранах сервіс-блок переноситься компактно */
@media (max-width: 599.98px) {
	.ct-header-topbar.sh-topbar-service {
		gap: 10px;
		font-size: 12px;
	}

	.ct-header-topbar.sh-topbar-service .sh-phone {
		font-size: 12.5px;
	}
}