/**
 * css/components/archive-filter.css
 * ============================================================
 * A LEGEND 2：Archive Category Filter
 * ============================================================
 *
 * 役割：
 * - template-parts/components/archive-filter.php のカテゴリーフィルターUIを装飾します。
 *
 * 今回の改修：
 * - A LEGEND 2の重いガラス風パネルではなく、旧A LEGENDに近い
 *   「カテゴリ名だけ」のシンプルな横並びUIへ寄せます。
 * - ただし旧テーマの固定色をそのまま移植せず、
 *   A LEGEND 2のCSS変数へ接続してデザインプリセット変更に追従します。
 * - グループラベルや大きな囲みは出さず、BLOG / NEWS / GALLERY / APPLICATIONで
 *   同じ見た目を使います。
 * - 旧HTML構造がキャッシュ等で一時的に混在しても破綻しないよう、
 *   __group / __label の最低限の吸収スタイルも残します。
 */

/* ------------------------------------------------------------
 * Archive category filter wrapper
 * ------------------------------------------------------------
 *
 * アーカイブ一覧上部のカテゴリーフィルター全体です。
 *
 * 注意：
 * - 背景パネルは持たせません。
 * - archive header / content grid と同じcontainer幅に揃えます。
 * - カテゴリ名だけが軽く並ぶ、A LEGEND風のシンプルな導線にします。
 */
.aleg2-archive-filter {
	width: min(100% - (var(--aleg2-container-padding) * 2), var(--aleg2-container-lg));
	padding: 0;
	margin: 0 auto var(--aleg2-space-8);
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	backdrop-filter: none;
}

/* ------------------------------------------------------------
 * Backward compatibility for old grouped markup
 * ------------------------------------------------------------
 *
 * 旧構造では taxonomy ごとに __group / __label が出ていました。
 * 今回の新HTMLではラベルを出しませんが、キャッシュや一時混在に備えて
 * 余計な外枠や区切り線が復活しないよう吸収します。
 */
.aleg2-archive-filter__group {
	padding: 0;
	margin: 0;
	border: 0;
}

.aleg2-archive-filter__group + .aleg2-archive-filter__group {
	padding-top: 0;
	margin-top: var(--aleg2-space-3);
	border-top: 0;
}

.aleg2-archive-filter__label {
	display: none;
}

/* ------------------------------------------------------------
 * Filter list
 * ------------------------------------------------------------
 *
 * カテゴリリンク一覧です。
 * 横並びで自然に折り返すため、PC / SPともに同じHTMLで扱えます。
 */
.aleg2-archive-filter__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(8px, 1.2vw, 14px);
	padding: 0;
	margin: 0;
	list-style: none;
}

.aleg2-archive-filter__item {
	margin: 0;
}

/* ------------------------------------------------------------
 * Filter link
 * ------------------------------------------------------------
 *
 * カテゴリ名だけのシンプルなピル型リンクです。
 *
 * 方針：
 * - 文字を主役にし、背景は控えめにします。
 * - active / hover / focus-visible は primary token を使います。
 * - 角丸は pill があれば pill、なければ button へfallbackします。
 */
.aleg2-archive-filter__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 34px;
	padding: 0.46em 1.05em;
	color: var(--aleg2-color-text-muted);
	font-family: var(--aleg2-font-latin);
	font-size: var(--aleg2-font-size-xs);
	font-weight: 800;
	line-height: 1;
	letter-spacing: var(--aleg2-letter-spacing-wide);
	text-decoration: none;
	background: transparent;
	border: 1px solid var(--aleg2-color-border);
	border-radius: var(--aleg2-radius-pill, var(--aleg2-radius-button));
	box-shadow: none;
	transition:
		color var(--aleg2-duration-fast) var(--aleg2-ease-standard),
		background var(--aleg2-duration-fast) var(--aleg2-ease-standard),
		border-color var(--aleg2-duration-fast) var(--aleg2-ease-standard),
		box-shadow var(--aleg2-duration-fast) var(--aleg2-ease-standard),
		transform var(--aleg2-duration-fast) var(--aleg2-ease-standard);
}

.aleg2-archive-filter__link:hover,
.aleg2-archive-filter__link:focus-visible,
.aleg2-archive-filter__link.is-active {
	color: var(--aleg2-color-on-primary);
	text-decoration: none;
	background: var(--aleg2-color-primary);
	border-color: var(--aleg2-color-primary);
	box-shadow: var(--aleg2-shadow-soft);
}

.aleg2-archive-filter__link:focus-visible {
	outline: 2px solid color-mix(in srgb, var(--aleg2-color-primary) 55%, transparent);
	outline-offset: 3px;
}

/*
 * ボタンhover liftが有効なデザインでは、フィルターにも同じ体感を合わせます。
 * hover_amount が未定義の環境でも崩れないよう fallback を入れます。
 */
[data-aleg2-button-hover-lift="1"] .aleg2-archive-filter__link:hover,
[data-aleg2-button-hover-lift="1"] .aleg2-archive-filter__link:focus-visible {
	transform: translateY(calc(var(--aleg2-button-hover-amount, 2px) * -1));
}

/* ------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------
 *
 * スマホでも横スクロールにせず、カテゴリ名を自然に折り返します。
 */
@media (max-width: 640px) {
	.aleg2-archive-filter {
		margin-bottom: var(--aleg2-space-6);
	}

	.aleg2-archive-filter__list {
		justify-content: flex-start;
		gap: 8px;
	}

	.aleg2-archive-filter__link {
		min-height: 32px;
		padding: 0.42em 0.9em;
		font-size: calc(var(--aleg2-font-size-xs) * 0.95);
	}
}