/*
 * EuroSpeak — cienki pasek breadcrumb pod nagłówkiem.
 *
 * Założenie (decyzja właściciela): żadnych czarnych pasów ze zdjęciem
 * i powtórzonym tytułem strony. Poza stroną główną ma być pod nagłówkiem
 * wąski, jasny pasek z samą ścieżką nawigacji.
 *
 * Oryginał motywu: 135 px paddingu góra/dół, stockowe zdjęcie w tle,
 * ciemna nakładka, tytuł strony w <h2> (duplikat H1 z treści) i breadcrumb
 * jako biała, zaokrąglona „pigułka" pozycjonowana absolutnie.
 * Poniżej rozbieramy to na czynniki pierwsze.
 *
 * Wysokość docelowa: ~44 px (12 px padding + linia tekstu).
 */

/* ── Sam pasek ─────────────────────────────────────────────────────────── */
.custom-breadcrumb {
	background-color: #F1F2F6 !important;
	background-image: none !important;   /* zdjęcie stockowe z importu demo */
	border-bottom: 1px solid rgba(28, 30, 39, .07);
	position: relative;
	overflow: visible;
	min-height: 0;
}

/* ciemna nakładka motywu — niepotrzebna na jasnym pasku */
.custom-breadcrumb .breadcrumb-overlay { display: none !important; }

/*
 * Tytuł strony w pasku — ukryty.
 * Ta sama treść jest już wypisana jako właściwy <h1> na początku treści
 * strony, więc w pasku był czystym duplikatem.
 *
 * Ukrywamy CSS-em, nie opcją motywu: funkcja zilom_get_option() sprawdza
 * wartość jako isset() ORAZ truthy, więc ustawienie opcji na 0 jest
 * traktowane jak „nieustawione" i podmieniane z powrotem na domyślne 1.
 * Nie istnieje wartość opcji, która realnie wyłącza tytuł — sprzeczność
 * wbudowana w motyw.
 */
.custom-breadcrumb .heading-title { display: none !important; }

/* ── Wewnętrzny kontener: z 135 px na 12 px ────────────────────────────── */
/*
 * Motyw wstawia padding INLINE (style="padding-top:40px;padding-bottom:40px"),
 * więc bez !important nie da się go nadpisać z arkusza.
 */
.custom-breadcrumb .breadcrumb-container-inner {
	padding-top: 12px !important;
	padding-bottom: 12px !important;
	position: relative !important;
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	transform: none !important;
	inset: auto !important;
	max-width: none !important;
	min-height: 0 !important;
}

.custom-breadcrumb .breadcrumb-main {
	position: relative !important;
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	transform: none !important;
	inset: auto !important;
}

/* ── Ścieżka nawigacji ─────────────────────────────────────────────────── */
/*
 * W oryginale ol.breadcrumb to biała zaokrąglona pigułka pozycjonowana
 * absolutnie i wystająca poza prawą krawędź. Rozbieramy ją do zwykłego
 * wiersza tekstu.
 */
.custom-breadcrumb ol.breadcrumb {
	position: relative !important;
	inset: auto !important;
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	font-size: 13.5px;
	line-height: 20px;
	font-family: var(--zilom-font-sans-serif, inherit);
}

.custom-breadcrumb ol.breadcrumb li { color: #8A8D99; }

.custom-breadcrumb ol.breadcrumb li:not(:last-child)::after {
	content: "/";
	margin-left: 6px;
	color: #C3C6D1;
}

.custom-breadcrumb ol.breadcrumb li a {
	color: #757783;
	text-decoration: none;
	transition: color .2s ease;
}
.custom-breadcrumb ol.breadcrumb li a:hover { color: #4D5FE3; }

.custom-breadcrumb ol.breadcrumb li.active { color: #1C1E27; font-weight: 600; }

/* ── Strona główna: paska nie ma w ogóle ───────────────────────────────── */
body.home .custom-breadcrumb,
body.front-page .custom-breadcrumb { display: none !important; }

/* ── H1 na stronach Elementora ─────────────────────────────────────────── */
/*
 * Strony budowane w Elementorze renderują treść pełną szerokością, bez
 * .container — więc H1 z page.php lądował przy samej krawędzi okna.
 * Wyrównujemy do tej samej osi co komponenty treści (.es-content).
 */
body[class*="elementor-page"] .content-page h1.title {
	max-width: 1170px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 20px;
}
@media (min-width: 1210px) {
	body[class*="elementor-page"] .content-page h1.title { padding: 0; }
}