/* Breadcrumb Styles (moved from views) */

/* container that wraps breadcrumb nav — transparent and full-width */
.breadcrumb-container {
	background-color: transparent;
	padding: 0;
	margin-bottom: 0;
	box-sizing: border-box;
}

/* default breadcrumb card (used on non-hero pages) */
.breadcrumb {
	background-color: rgba(255, 255, 255, 0.95);
	padding: 0.6rem 1rem;
	border-radius: 0.5rem;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	margin-bottom: 0;
	font-size: 0.95rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	min-height: 2.4rem; /* ensure enough height so items are never clipped */
	line-height: 1.35;
	box-sizing: border-box;
	overflow: visible;
}

	/* separator between items */
	.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
		content: "›";
		color: #6c757d;
		font-size: 1.05rem;
		padding: 0 0.45rem;
	}

	/* clear any left-border/line coming from other stylesheet */
	.breadcrumb .breadcrumb-item {
		border-left: none !important;
		box-shadow: none !important;
		padding-left: 0 !important;
		margin: 0; /* remove vertical margins that can collapse container */
		line-height: inherit;
	}

/* default link styles - anchors use inline horizontal padding only */
.breadcrumb-item a {
	color: #0d6efd;
	text-decoration: none;
	transition: color 0.15s ease;
	display: inline-block;
	padding: 0 .35rem; /* horizontal spacing only */
	line-height: 1.35; /* match container so text vertically centered */
	white-space: nowrap; /* avoid anchor text being wrapped into narrow height */
}

	.breadcrumb-item a:hover {
		color: #0a58ca;
		text-decoration: underline;
	}

.breadcrumb-item.active {
	color: #6c757d;
	font-weight: 500;
}

/* ------------------------------
   HERO (dark background) overrides
   Breadcrumb is embedded in hero area — transparent background and white text.
   Use high-specificity selectors to avoid being overridden.
   ------------------------------ */

/* ensure breadcrumb and its content are above any decorative overlays */
.heroapp .hero-breadcrumb {
	position: relative;
	z-index: 9999;
	mix-blend-mode: normal;
}

	/* breadcrumb container inside hero */
	.heroapp .hero-breadcrumb .breadcrumb {
		background: transparent !important;
		padding: 0.45rem 0 !important; /* maintain small vertical padding for breathing room */
		margin-bottom: 0;
		box-shadow: none !important;
		line-height: 1.4; /* slightly taller line height */
		min-height: 2.6rem; /* prevent clipping on all browsers */
		box-sizing: border-box;
		overflow: visible;
		position: relative;
		z-index: 10000; /* ensure above dotted patterns or pseudo elements */
	}

		/* ensure breadcrumb ITEM uses no vertical padding so it does not cause collapse */
		.heroapp .hero-breadcrumb .breadcrumb .breadcrumb-item {
			padding: 0;
			margin: 0;
			line-height: inherit;
		}

			/* white separator inside hero */
			.heroapp .hero-breadcrumb .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
				content: "›";
				color: #ffffff !important;
				padding: 0 .5rem;
				font-size: 1rem;
				vertical-align: middle;
				opacity: 1 !important;
			}

			/* anchors in hero: inline-block with horizontal padding only; force white and visible */
			/* also set -webkit-text-fill-color to override any browser-specific text-fill rules */
			.heroapp .hero-breadcrumb .breadcrumb .breadcrumb-item a {
				color: #ffffff !important;
				-webkit-text-fill-color: #ffffff !important;
				opacity: 1 !important;
				text-shadow: none !important;
				display: inline-block;
				padding: 0 .4rem; /* horizontal spacing only */
				line-height: inherit;
				white-space: nowrap;
			}

			/* active item stronger */
			.heroapp .hero-breadcrumb .breadcrumb .breadcrumb-item.active {
				color: #ffffff !important;
				-webkit-text-fill-color: #ffffff !important;
				font-weight: 600;
			}

			/* hover/focus states */
			.heroapp .hero-breadcrumb .breadcrumb .breadcrumb-item a:hover,
			.heroapp .hero-breadcrumb .breadcrumb .breadcrumb-item a:focus {
				color: #ffffff !important;
				-webkit-text-fill-color: #ffffff !important;
				text-decoration: underline;
				outline: none;
			}

	/* keep breadcrumb content aligning with page content (do not remove container padding) */
	.heroapp .hero-breadcrumb > .container {
		/* rely on bootstrap's container padding so breadcrumb text sits slightly left of page center */
	}

/* reduce hero top padding when breadcrumb present */
.heroapp.has-breadcrumb {
	padding-top: 2.5rem !important;
}

/* Responsive tweaks */
@media (max-width: 768px) {
	.breadcrumb {
		font-size: 0.9rem;
		padding: 0.45rem 0.75rem;
		min-height: 2.2rem;
	}

		.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
			padding: 0 0.35rem;
		}

	.breadcrumb-item a {
		padding: 0 .3rem;
	}
}

@media (max-width: 576px) {
	.breadcrumb {
		font-size: 0.85rem;
		padding: 0.35rem 0.5rem;
		min-height: 2rem;
	}

	.heroapp.has-breadcrumb {
		padding-top: 2rem !important;
	}

	.heroapp .hero-breadcrumb > .container {
		padding-left: 0.75rem;
		padding-right: 0.75rem;
	}

	.breadcrumb-item a {
		padding: 0 .25rem;
	}
}

/* keep related-apps styles here (unchanged) */
.related-apps-section {
	background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

	.related-apps-section h2 {
		color: #212529;
		font-weight: 700;
		font-size: 2rem;
	}

.related-app-card {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	border: 1px solid #e9ecef;
	position: relative;
}

.related-app_card:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1) !important;
}

.supported-formats {
	border-top: 1px solid #e9ecef;
	padding-top: 0.75rem;
}

.alert-info {
	background-color: #e7f3ff;
	border-color: #b3d9ff;
}

	.alert-info a {
		color: #004085;
		font-weight: 500;
	}

		.alert-info a:hover {
			color: #002752;
		}