/*
 * Page Builder — Breadcrumb
 *
 * Yoast envolve todos os itens em um único <span> interno; o layout flex
 * precisa ser aplicado nesse wrapper.
 */

.cortex-pb-breadcrumb #breadcrumbs {
	font-size: 13px;
	line-height: 1;
}

.cortex-pb-breadcrumb #breadcrumbs > span {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.cortex-pb-breadcrumb #breadcrumbs > span > span {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

.cortex-pb-breadcrumb #breadcrumbs a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	color: var(--cortex-gray-custom);
	text-decoration: none;
	transition: color 0.2s ease;
}

.cortex-pb-breadcrumb #breadcrumbs a.cortex-breadcrumb-home {
	align-items: center;
}

.cortex-pb-breadcrumb #breadcrumbs a:hover {
	color: var(--cortex-orange-dark);
}

.cortex-pb-breadcrumb #breadcrumbs .breadcrumb_last {
	display: inline-flex;
	align-items: center;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	color: var(--cortex-heading);
}

.cortex-pb-breadcrumb #breadcrumbs .cortex-breadcrumb-sep {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
	color: var(--cortex-gray-custom);
	user-select: none;
}

.cortex-pb-breadcrumb #breadcrumbs .cortex-breadcrumb-home-icon {
	display: block;
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	margin-top: -2px;
	opacity: 0.55;
}

@media (max-width: 768px) {
	.cortex-pb-breadcrumb #breadcrumbs > span {
		flex-wrap: nowrap;
	}

	.cortex-pb-breadcrumb #breadcrumbs {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.cortex-pb-breadcrumb #breadcrumbs::-webkit-scrollbar {
		display: none;
	}

	.cortex-pb-breadcrumb #breadcrumbs a {
		max-width: 230px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.cortex-pb-breadcrumb #breadcrumbs .breadcrumb_last {
		max-width: 230px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}