/* ==========================================================================
   NovaBP Breadcrumbs Component Styles
   Matching Figma 314:8507 (Single Post — Main Nav Bar)
   ========================================================================== */

/* The inline padding is the shared page gutter (--nova-gutter-x, style.css) so
   the crumbs line up with the hero and article below them at every width. The
   block padding stays 20px: this is a nav bar, not a section, and it carries no
   rhythm of its own. `!important` because Elementor's per-element CSS for the
   container this widget sits in would otherwise win — it is what the old
   tablet/mobile overrides were escalating past, and hoisting it here lets the
   three rules collapse into one. */
.nova-breadcrumbs {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	text-align: left;
	width: 100%;
	padding: 20px var(--nova-gutter-x) !important;
	box-sizing: border-box;
	background-color: #FFFFFF;
	font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* The bar itself is full-bleed (it carries the white background); the crumbs
   sit in the shared 1280px content column, same as every other single-post
   section. `margin: 0 auto` centres the column while the crumbs inside it stay
   left-aligned. */
.nova-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
	list-style: none;
}

.nova-breadcrumbs__item {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #020F32;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
}

.nova-breadcrumbs__link,
.nova-breadcrumbs__text {
	color: inherit;
	font: inherit;
	text-decoration: none;
	opacity: 0.6;
	transition: opacity 0.2s ease;
}

.nova-breadcrumbs__link:hover,
.nova-breadcrumbs__link:focus-visible {
	opacity: 1;
	text-decoration: none;
}

/* Last crumb: the current post, always full strength. */
.nova-breadcrumbs__item--current .nova-breadcrumbs__text {
	opacity: 1;
}

.nova-breadcrumbs__separator {
	color: #020F32;
	opacity: 0.4;
	flex-shrink: 0;
	user-select: none;
}

/* --- Responsive --- */
@media (max-width: 767px) {
	/* Only the block axis is left to tune — the inline axis follows the gutter
	   token, which style.css has already dropped to 16px by this width. */
	.nova-breadcrumbs {
		padding-block: 16px !important;
	}
	.nova-breadcrumbs__item {
		font-size: 13px;
	}
}