/**
 * Site-wide breadcrumb component.
 *
 * Single source of markup: imm_render_breadcrumb() in functions.php.
 * Single source of styling: this file, loaded on every page (see header.php).
 *
 * Originally built for the blog templates only, scoped under
 * ".blog-listing .blog-breadcrumb" in css/blog-archive.css. Extracted here
 * and unscoped so every other template (page.php, single-services.php, the
 * template-*.php landing/service pages, etc.) gets the exact same look via
 * the same declarations, instead of each carrying its own copy. blog-archive
 * .css no longer defines these rules — this file is the only definition.
 */
.blog-breadcrumb {
	position: relative;
	z-index: 99;
	margin-bottom: 18px;
}

.blog-breadcrumb ol,
.blog-breadcrumb .rank-math-breadcrumb {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	font-family: var(--font-hurme-sec);
	font-size: 14px;
	letter-spacing: 0.4px;
	color: #9fb3c8;
}

.blog-breadcrumb li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.blog-breadcrumb li:not(:last-child)::after {
	content: "/";
	margin-left: 8px;
	color: #4a627a;
}

.blog-breadcrumb a,
.blog-breadcrumb .rank-math-breadcrumb a {
	color: #9fb3c8;
	transition: color 0.2s ease-in-out;
}

.blog-breadcrumb .rank-math-breadcrumb span:last-child {
	color: var(--white);
}

.blog-breadcrumb a:hover {
	color: var(--medi-blue);
}

.blog-breadcrumb li[aria-current="page"] {
	color: var(--white);
}