/**
 * Component: breadcrumbs bar (Yoast SEO's trail).
 *
 * Yoast prints <span><span><a>Home</a></span> separator … <span
 * class="breadcrumb_last">Page</span></span>; the theme's separator filter
 * makes each separator a span, so the trail is a wrapping flex row. The
 * first crumb (Home) gets the home icon.
 */

.breadcrumbs {
	background: var(--wp--custom--breadcrumbs--background, var(--wp--preset--color--surface));
	color: var(--wp--custom--breadcrumbs--text, var(--wp--preset--color--foreground));
	font-size: var(--wp--preset--font-size--body-xs);
	line-height: var(--wp--custom--line-height--body-xs);
	text-transform: uppercase;
}

.breadcrumbs__inner {
	max-inline-size: var(--wp--style--global--content-size);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--20) var(--wp--custom--gutter);
}

.breadcrumbs__inner > span {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
}

.breadcrumbs a {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	color: inherit;
	text-decoration: none;
}

.breadcrumbs a:hover {
	text-decoration: underline;
}

.breadcrumbs__inner > span > span:first-child > a::before {
	content: "";
	flex: none;
	inline-size: var(--wp--preset--spacing--40);
	block-size: var(--wp--preset--spacing--40);
	background-color: var(--wp--custom--breadcrumbs--icon, var(--wp--preset--color--primary));
	-webkit-mask: url("../../icons/home.svg") center / contain no-repeat;
	mask: url("../../icons/home.svg") center / contain no-repeat;
}

/* laptop: the desktop bar (taller, larger text and icon). */
@media (min-width: 64em) {
	.breadcrumbs {
		font-size: var(--wp--preset--font-size--body-sm);
		line-height: var(--wp--custom--line-height--menu);
	}

	.breadcrumbs__inner {
		padding-block: var(--wp--preset--spacing--50);
	}

	.breadcrumbs__inner > span > span:first-child > a::before {
		inline-size: var(--wp--custom--icon--md);
		block-size: var(--wp--custom--icon--md);
		-webkit-mask-image: url("../../icons/home-lg.svg");
		mask-image: url("../../icons/home-lg.svg");
	}
}