/**
 * Breadcrumbs Styles (Shortcode Version)
 * - 軽量・プレフィックス付き（swx-breadcrumbs*）
 * - 既存デザインに影響を与えない
 * - スマホ対応（横スクロール）
 * - ショートコードで任意の場所に配置可能
 */

/* ===== 基本スタイル ===== */
.swx-breadcrumbs {
	margin: 1.5rem 0 2rem;
	padding: 1rem 1.5rem;
	background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
	border-radius: 0.5rem;
	border: 1px solid #e5e7eb;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	font-size: 0.875rem;
	line-height: 1.6;
}

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

.swx-breadcrumbs__item {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	white-space: nowrap;
}

.swx-breadcrumbs__item:not(:last-child)::after {
	content: '›';
	margin-left: 0.5rem;
	margin-right: 0.125rem;
	color: #9ca3af;
	font-size: 1rem;
	font-weight: 300;
}

/* ===== リンク ===== */
.swx-breadcrumbs__link {
	color: #6b7280;
	text-decoration: none;
	transition: all 0.2s ease;
	padding: 0.25rem 0.5rem;
	border-radius: 0.25rem;
	position: relative;
}

.swx-breadcrumbs__link:hover,
.swx-breadcrumbs__link:focus {
	color: #111827;
	background-color: rgba(0, 0, 0, 0.03);
	text-decoration: none;
}

/* ===== 現在地 ===== */
.swx-breadcrumbs__current {
	color: #111827;
	font-weight: 600;
	padding: 0.25rem 0.5rem;
}

/* ===== スマホ対応（横スクロール） ===== */
@media (max-width: 640px) {
	.swx-breadcrumbs {
		margin: 1rem 0 1.5rem;
		padding: 0.875rem 1.25rem;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.swx-breadcrumbs__list {
		flex-wrap: nowrap;
		min-width: max-content;
	}

	.swx-breadcrumbs__item {
		flex-shrink: 0;
	}

	.swx-breadcrumbs__link,
	.swx-breadcrumbs__current {
		padding: 0.25rem 0.375rem;
	}
}

/* ===== アクセシビリティ ===== */
.swx-breadcrumbs__link:focus-visible {
	outline: 2px solid #3b82f6;
	outline-offset: 2px;
	border-radius: 0.25rem;
	background-color: rgba(59, 130, 246, 0.1);
}

/* ===== ダークモード対応（任意） ===== */
@media (prefers-color-scheme: dark) {
	.swx-breadcrumbs {
		background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
		border-color: #374151;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	}

	.swx-breadcrumbs__link {
		color: #9ca3af;
	}

	.swx-breadcrumbs__link:hover,
	.swx-breadcrumbs__link:focus {
		color: #f9fafb;
		background-color: rgba(255, 255, 255, 0.05);
	}

	.swx-breadcrumbs__current {
		color: #f9fafb;
	}

	.swx-breadcrumbs__item:not(:last-child)::after {
		color: #6b7280;
	}
}