/**
 * css/components/breadcrumb.css
 * ============================================================
 * A LEGEND 2：Breadcrumb Component
 * ============================================================
 *
 * 役割：
 * - template-parts/components/breadcrumb.php が出力するパンくずリストを装飾します。
 * - archive / single / page / taxonomy など、複数文脈で共通利用します。
 *
 * 今回の改修：
 * - ブラウザ標準の ol 番号表示を確実に無効化します。
 * - パンくずをA LEGEND 2の共通ナビゲーションコンポーネントとして整えます。
 * - グラス感のあるピル型パネルにし、既存のデザイントークンへ接続します。
 * - 長いタイトルでも表示が崩れにくいよう、折り返し・省略・最小幅を調整します。
 * - 区切り文字はHTML側で aria-hidden="true" として出力されるため、
 *   CSSでは視覚的な余白と濃淡だけを担当します。
 */

/* ============================================================
 * Root
 * ------------------------------------------------------------
 * パンくず全体の外側です。
 *
 * 配置方針：
 * - archive / single / page の各レイアウト先頭に置かれる想定です。
 * - 本文やヘッダーと自然に離れるよう、下方向に余白を持たせます。
 * - z-index を軽く付与し、背景装飾や疑似要素の上に乗りやすくします。
 * ============================================================ */

.aleg2-breadcrumb {
	position: relative;
	z-index: 2;
	width: min(100% - (var(--aleg2-container-padding, 24px) * 2), var(--aleg2-container-lg, 1180px));
	margin: 0 auto var(--aleg2-space-5, 24px);
	color: var(--aleg2-color-muted, rgba(244, 241, 234, 0.68));
	font-family: var(--aleg2-font-latin, inherit);
	font-size: clamp(0.72rem, 0.68rem + 0.18vw, 0.84rem);
	font-weight: 700;
	line-height: 1.45;
	overflow-wrap: anywhere;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ============================================================
 * List
 * ------------------------------------------------------------
 * ol本体です。
 *
 * 重要：
 * - list-style: none;
 * - margin: 0;
 * - padding: ...
 *
 * この3つで、今回の不具合だった「1. HOME / 2. ...」のような
 * ブラウザ標準番号表示を根本的に止めます。
 * ============================================================ */

.aleg2-breadcrumb__list {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	max-width: 100%;
	padding: 0.58rem 0.82rem;
	margin: 0;
	list-style: none;
	background: var(--aleg2-glass-bg, var(--aleg2-color-surface, rgba(255, 255, 255, 0.08)));
	border: 1px solid var(--aleg2-color-border, rgba(255, 255, 255, 0.16));
	border-radius: var(--aleg2-radius-pill, 999px);
	box-shadow: var(--aleg2-shadow-soft, 0 10px 30px rgba(0, 0, 0, 0.18));
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
}

/**
 * WordPress本文やブラウザ標準CSSの影響で、
 * ol/li に margin や padding が入るテーマ干渉を防ぎます。
 */
.aleg2-breadcrumb__list,
.aleg2-breadcrumb__list > li {
	box-sizing: border-box;
}

/* ============================================================
 * Item
 * ------------------------------------------------------------
 * パンくず1項目です。
 *
 * 方針：
 * - separator / link / current を横並びにします。
 * - min-width: 0 により、長いタイトルが親要素を押し広げにくくなります。
 * ============================================================ */

.aleg2-breadcrumb__item {
	display: inline-flex;
	align-items: center;
	min-width: 0;
	padding: 0;
	margin: 0;
	list-style: none;
}

/**
 * 現在ページitem。
 *
 * aria-current="page" はHTML側で付与します。
 * CSSでは色と太さを少しだけ強めます。
 */
.aleg2-breadcrumb__item.is-current {
	color: var(--aleg2-color-text, #f4f1ea);
}

/* ============================================================
 * Separator
 * ------------------------------------------------------------
 * 階層の区切り文字です。
 *
 * 区切り文字そのものは管理画面設定からPHPで出力します。
 * そのためCSS content ではなく、ここでは余白・透明度だけを調整します。
 * ============================================================ */

.aleg2-breadcrumb__separator {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-inline: 0.55em;
	color: currentColor;
	opacity: 0.48;
	transform: translateY(-0.02em);
}

/* ============================================================
 * Link / Current
 * ------------------------------------------------------------
 * リンクと現在ページラベルです。
 *
 * 方針：
 * - リンクは下線ではなく、薄い点線ボーダーで控えめに示します。
 * - hover / focus-visible でアクセントカラーへ変化させます。
 * - 長い現在ページ名は折り返し・省略しやすくします。
 * ============================================================ */

.aleg2-breadcrumb__link,
.aleg2-breadcrumb__current {
	display: inline-block;
	max-width: 100%;
	color: inherit;
	text-decoration: none;
	overflow-wrap: anywhere;
	word-break: normal;
}

.aleg2-breadcrumb__link {
	border-bottom: 1px dotted currentColor;
	transition:
		color 0.2s ease,
		border-color 0.2s ease,
		opacity 0.2s ease;
}

.aleg2-breadcrumb__link:hover {
	color: var(--aleg2-color-primary, var(--aleg2-color-accent, #d6b46a));
	opacity: 1;
}

.aleg2-breadcrumb__link:focus-visible {
	color: var(--aleg2-color-primary, var(--aleg2-color-accent, #d6b46a));
	border-color: currentColor;
	outline: 2px solid currentColor;
	outline-offset: 3px;
	border-radius: 4px;
}

.aleg2-breadcrumb__current {
	max-width: min(62vw, 38rem);
	color: var(--aleg2-color-text, #f4f1ea);
	font-weight: 800;
}

/* ============================================================
 * Context adjustments
 * ------------------------------------------------------------
 * data-aleg2-breadcrumb-context は template 側で出力します。
 *
 * 現段階では大きく見た目を変えませんが、将来
 * archive / single / page / taxonomy ごとに微調整できる余地を残します。
 * ============================================================ */

.aleg2-breadcrumb[data-aleg2-breadcrumb-context="archive"],
.aleg2-breadcrumb[data-aleg2-breadcrumb-context="taxonomy"] {
	margin-bottom: var(--aleg2-space-4, 20px);
}

.aleg2-breadcrumb[data-aleg2-breadcrumb-context="single"],
.aleg2-breadcrumb[data-aleg2-breadcrumb-context="page"] {
	margin-bottom: var(--aleg2-space-5, 24px);
}

/* ============================================================
 * Responsive
 * ------------------------------------------------------------
 * スマートフォンでは横幅が狭いため、以下を調整します。
 *
 * - パネルを横幅いっぱいに近づける
 * - 文字サイズを少し下げる
 * - 現在ページ名の最大幅を広げすぎない
 * - 区切り文字の余白を少し詰める
 * ============================================================ */

@media (max-width: 768px) {
	.aleg2-breadcrumb {
		width: min(100% - 32px, var(--aleg2-container-lg, 1180px));
		margin-bottom: var(--aleg2-space-4, 20px);
		font-size: 0.72rem;
		letter-spacing: 0.06em;
	}

	.aleg2-breadcrumb__list {
		display: flex;
		width: 100%;
		min-width: 0;
		padding: 0.52rem 0.68rem;
		border-radius: var(--aleg2-radius-panel, 24px);
	}

	.aleg2-breadcrumb__separator {
		margin-inline: 0.42em;
	}

	.aleg2-breadcrumb__current {
		max-width: 68vw;
	}
}

@media (max-width: 480px) {
	.aleg2-breadcrumb {
		width: min(100% - 24px, var(--aleg2-container-lg, 1180px));
	}

	.aleg2-breadcrumb__list {
		gap: 0.16rem 0;
		padding: 0.5rem 0.62rem;
	}

	.aleg2-breadcrumb__current {
		max-width: 74vw;
	}
}

/* ============================================================
 * Reduced motion
 * ------------------------------------------------------------
 * prefers-reduced-motion 環境ではhover transitionを抑えます。
 * ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.aleg2-breadcrumb__link {
		transition: none;
	}
}