/**
 * Breadcrumbs Component
 *
 * Displays breadcrumb navigation with schema compatibility
 *
 * @package MattressProtectorReviews
 */

.breadcrumbs {
	background: var(--gray-50);
	border-bottom: 1px solid var(--gray-200);
	padding: 0.75rem 0;
	font-size: 0.875rem;
}

.breadcrumbs-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.breadcrumbs-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.breadcrumbs-link {
	color: var(--gray-600);
	text-decoration: none;
	transition: color 0.2s ease;
}

.breadcrumbs-link:hover,
.breadcrumbs-link:focus {
	color: var(--blue-600);
	text-decoration: underline;
}

.breadcrumbs-separator {
	color: var(--gray-400);
	user-select: none;
}

.breadcrumbs-current {
	color: var(--gray-900);
	font-weight: 500;
	max-width: 100%;  /* Prevent overflow */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Mobile optimization */
@media (max-width: 640px) {
	.breadcrumbs {
		font-size: 0.8125rem;
		padding: 0.625rem 0;
	}

	.breadcrumbs-list {
		gap: 0.375rem;
		max-width: 100%;  /* Prevent list overflow */
	}

	.breadcrumbs-item {
		gap: 0.375rem;
		max-width: 100%;  /* Prevent item overflow */
		overflow: hidden;
	}

	/* Truncate long breadcrumb titles on mobile */
	.breadcrumbs-link,
	.breadcrumbs-current {
		max-width: 120px !important;  /* Force truncation */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: inline-block;
	}
}

/* Dark mode support (if implemented) */
@media (prefers-color-scheme: dark) {
	.breadcrumbs {
		background: var(--gray-800, #1f2937);
		border-bottom-color: var(--gray-700, #374151);
	}

	.breadcrumbs-link {
		color: var(--gray-300, #d1d5db);
	}

	.breadcrumbs-link:hover,
	.breadcrumbs-link:focus {
		color: var(--blue-400, #60a5fa);
	}

	.breadcrumbs-separator {
		color: var(--gray-500, #6b7280);
	}

	.breadcrumbs-current {
		color: var(--gray-100, #f3f4f6);
	}
}