/*
 * Pasek kontaktowy nad nagłówkiem (672:124–128, 672:273/277) i pasek przyklejony
 * na telefonach. Oba mają ciemne tło, bo ikony z Figmy są białe i nie da się ich
 * przemalować CSS-em (wchodzą jako <img>, nie inline SVG).
 */

.wa-ikona {
	flex: none; /* bez tego flex-kontener ściska ikonę przy długim numerze */
}

/* --- Pasek nad nagłówkiem --- */

/* Pasek 672:124: 1920×66, tło #252525. Grupa kontaktowa zaczyna się na x=281
   (6 px w głąb treści 275–1645), ikony 15×15, social 32×32 przy prawej krawędzi. */
.wa-pasek {
	background: var(--wa-color-bg-bar);
	color: #fff;
	font-family: var(--wa-family-body);
	font-size: 14px;
	line-height: 24px;
}

.wa-pasek__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wa-space-s);
	height: 66px;
}

.wa-pasek__dane {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 27px;   /* w renderze projektu 28 px od ostatniej cyfry do ikony e-maila (408 → 436) */
	margin: 0 0 0 6px; /* 281 − 275 */
}

.wa-pasek__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;  /* 301 − (281 + 15) ≈ 457 − (436 + 15) */
	color: inherit;
	/* Figma pokazuje Lato SemiBold — rodzina z Google Fonts nie ma wagi 600
	   (100/300/400/700/900), więc najbliższa dostępna to 700. */
	font-weight: 700;
	text-decoration: none;
}

.wa-pasek__link:hover,
.wa-pasek__link:focus-visible {
	color: #fff;
	text-decoration: underline;
}

/* 672:273 x=1565 i 672:277 x=1613 — 32×32, odstęp 16 px, prawa krawędź na 1645. */
.wa-pasek__social {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wa-pasek__social-link {
	display: block;
	line-height: 0;
	transition: opacity var(--wa-transition);
}

.wa-pasek__social-link:hover,
.wa-pasek__social-link:focus-visible {
	opacity: 0.85; /* w projekcie ikony są w pełni białe (672:273), przygaszamy tylko na hover */
}

@media (max-width: 599px) {
	/* Na wąskim ekranie pasek zjadałby pół pierwszego widoku — ale chowamy go tylko
	   wtedy, gdy przyklejony pasek na dole faktycznie jest w DOM. Bez tego warunku
	   wyłączenie mobile CTA w Ustawieniach odcinałoby telefon i e-mail całkowicie.
	   Brak :has() w przeglądarce = pasek zostaje widoczny, czyli bezpieczna strona. */
	body:has(.wa-mobile-cta) .wa-pasek {
		display: none;
	}
}

/* --- Pasek przyklejony na telefonach --- */

.wa-mobile-cta {
	display: none;
}

@media (max-width: 767px) {
	.wa-mobile-cta {
		position: fixed;
		inset: auto 0 0;
		z-index: 100;
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		background: var(--wa-color-bg-dark);
		box-shadow: 0 -2px 12px rgb(0 0 0 / 25%);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.wa-mobile-cta__link {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--wa-space-xs);
		min-height: 52px;
		color: #fff;
		font-family: var(--wa-family-body);
		font-weight: 700;
		text-decoration: none;
	}

	.wa-mobile-cta__link + .wa-mobile-cta__link {
		border-left: 1px solid rgb(255 255 255 / 20%);
	}

	/* Pasek leży na treści — oddech pod stopką tylko gdy faktycznie jest w DOM. */
	body:has(.wa-mobile-cta) {
		padding-bottom: 52px;
	}

	/* Przycisk „do góry” Astry (bottom: 30px) chował się w 70% pod paskiem (PM, Z8). */
	body:has(.wa-mobile-cta) #ast-scroll-top {
		right: 16px;
		bottom: calc(52px + env(safe-area-inset-bottom, 0px) + 16px);
	}
}