/**
 * ============================================================
 * SEO-friendly Breadcrumbs
 * Location : assets/css/pages/breadcrumbs.css
 * Used by  : inc/class-b4b-breadcrumbs.php (b4b_breadcrumbs())
 * Renders  : Breadcrumb_Class (inc/class.breadcrumb.php) trail markup
 *            wrapped in .b4b-breadcrumbs, styled via Customizer-driven
 *            CSS custom properties (see B4B_Breadcrumbs::inline_style_vars()).
 * ============================================================
 */

.b4b-breadcrumbs {
	--b4b-crumb-bg-fallback:      transparent;
	--b4b-crumb-text-fallback:    var(--dcs-text-muted, #9b9b9b);
	--b4b-crumb-link-fallback:    var(--dcs-text-secondary, #6b6b6b);
	--b4b-crumb-hover-fallback:   var(--dcs-accent, #0d0d0d);
	--b4b-crumb-current-fallback: var(--dcs-text, #0d0d0d);
	--b4b-crumb-sep:              "/";

	background: var(--b4b-crumb-bg, var(--b4b-crumb-bg-fallback));
	padding: 12px 0;
	margin: 0 0 16px;
	font-size: var(--b4b-crumb-font-size, 13px);
	line-height: 1.4;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	text-align: left;
	clear: both;
	float: none;
	display: block;
}

.b4b-breadcrumbs--center {
	text-align: center;
}

.b4b-breadcrumbs--right {
	text-align: right;
}

.b4b-breadcrumbs--uppercase .trail-items {
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* Neutralize classic theme `.breadcrumbs { float: right }` (main.css) */
.b4b-breadcrumbs .breadcrumb-trail.breadcrumbs,
.b4b-breadcrumbs .breadcrumbs {
	float: none !important;
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: inherit;
}

.b4b-breadcrumbs .trail-browse {
	display: none; /* "Browse:" label — hidden, kept in DOM for a11y/back-compat */
}

.b4b-breadcrumbs .trail-items {
	list-style: none;
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	float: none;
	width: auto;
	max-width: 100%;
}

.b4b-breadcrumbs--left .trail-items {
	justify-content: flex-start;
}

.b4b-breadcrumbs--center .trail-items {
	justify-content: center;
}

.b4b-breadcrumbs--right .trail-items {
	justify-content: flex-end;
}

.b4b-breadcrumbs .trail-item,
.b4b-breadcrumbs .breadcrumbs li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	float: none !important;
	position: static;
	margin: 0;
	padding: 0 !important;
	color: var(--b4b-crumb-text, var(--b4b-crumb-text-fallback));
}

/* Kill classic `>` separators from main.css */
.b4b-breadcrumbs .breadcrumbs li::before,
.b4b-breadcrumbs .trail-item::before {
	content: none !important;
	display: none !important;
}

.b4b-breadcrumbs .trail-item a,
.b4b-breadcrumbs .breadcrumbs li a {
	float: none !important;
	display: inline-flex;
	align-items: center;
	color: var(--b4b-crumb-link, var(--b4b-crumb-link-fallback));
	text-decoration: none;
	font-size: inherit;
}

.b4b-breadcrumbs .trail-item a:hover,
.b4b-breadcrumbs .trail-item a:focus {
	color: var(--b4b-crumb-link-hover, var(--b4b-crumb-hover-fallback));
	text-decoration: underline;
}

.b4b-breadcrumbs .trail-end {
	color: var(--b4b-crumb-current, var(--b4b-crumb-current-fallback));
	font-weight: 600;
}

/* Customizer separator between items */
.b4b-breadcrumbs .trail-item + .trail-item::before {
	content: var(--b4b-crumb-sep) !important;
	display: inline-block !important;
	margin-right: 6px;
	color: var(--b4b-crumb-text, var(--b4b-crumb-text-fallback));
	opacity: 0.6;
	font-weight: 400;
	position: static;
	right: auto;
	top: auto;
	line-height: 1;
	font-size: inherit;
}

/* Home crumb — plain icon + visible “Home” text (no box) */
.b4b-breadcrumbs--icon .trail-begin > a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 0;
	border: 0 !important;
	border-radius: 0;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--b4b-crumb-link, var(--b4b-crumb-link-fallback, #6b6b6b));
	text-decoration: none !important;
	line-height: 1.3;
	min-width: 0;
	min-height: 0;
}

.b4b-breadcrumbs--icon .trail-begin > a:hover,
.b4b-breadcrumbs--icon .trail-begin > a:focus {
	color: var(--b4b-crumb-link-hover, var(--b4b-crumb-hover-fallback, #0d0d0d));
	background: transparent !important;
	border: 0 !important;
	text-decoration: underline !important;
}

.b4b-breadcrumbs .b4b-crumb-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin: 0;
	padding: 0;
	border: 0 !important;
	border-radius: 0;
	background: transparent !important;
	box-shadow: none !important;
	line-height: 0;
	color: inherit;
}

.b4b-breadcrumbs .b4b-crumb-icon svg {
	display: block;
	width: 14px;
	height: 14px;
	fill: currentColor;
}

/* Kill any leftover FA / mask ::before home glyphs */
.b4b-breadcrumbs--icon .trail-item:first-child a::before,
.b4b-breadcrumbs--icon .trail-begin a::before {
	content: none !important;
	display: none !important;
	background: none !important;
	-webkit-mask: none !important;
	mask: none !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
}

@media (max-width: 576px) {
	.b4b-breadcrumbs {
		font-size: calc(var(--b4b-crumb-font-size, 13px) - 1px);
	}

	.b4b-breadcrumbs .trail-items {
		gap: 4px;
	}
}