/* ━━━ カテゴリナビゲーションバー ━━━ */
.cat-nav {
	background: var(--c-white);
	border-bottom: 2px solid var(--c-border);
	position: relative;
	z-index: 1;
}

.cat-nav__inner {
	display: flex;
	align-items: center;
	padding-block: .7rem;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	gap: 0;
}
.cat-nav__inner::-webkit-scrollbar { display: none; }

/* ━━━ リスト ━━━ */
.cat-nav__list {
	display: flex;
	align-items: center;
	gap: .4rem;
	flex-wrap: nowrap;
	padding-inline: 0;
	padding-inline-end: 3rem; /* スクロール末尾がマスクに隠れないよう確保 */
}

/* ━━━ ピル型リンク ━━━ */
.cat-nav__link {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .35rem 1rem;
	border-radius: var(--r-pill);
	font-size: .78rem;
	font-weight: 700;
	white-space: nowrap;
	border: 1.5px solid transparent;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
	line-height: 1;
	/* カテゴリ色は CSS カスタムプロパティで注入 */
	color:      var(--cat-color, var(--c-blue));
	background: var(--cat-bg,    var(--c-blue-lt));
}
.cat-nav__link:hover,
.cat-nav__link:focus-visible {
	border-color: var(--cat-color, var(--c-blue));
	transform: translateY(-2px);
	box-shadow: 0 4px 14px rgba(0,0,0,.1);
}
.cat-nav__link:focus-visible {
	outline: 2px solid var(--cat-color, var(--c-blue));
	outline-offset: 2px;
}

/* すべてリンク */
.cat-nav__item--all .cat-nav__link {
	color:      var(--c-text);
	background: var(--c-border);
}
.cat-nav__item--all .cat-nav__link:hover {
	border-color: var(--c-text);
}

/* 投稿数バッジ */
.cat-nav__count {
	font-size: .62rem;
	font-weight: 600;
	opacity: .65;
	font-variant-numeric: tabular-nums;
}

/* ━━━ 右端グラデーション（スクロール示唆） ━━━ */
.cat-nav {
	-webkit-mask-image: linear-gradient(
		to right,
		black calc(100% - 48px),
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		black calc(100% - 48px),
		transparent 100%
	);
}

/* ━━━ アクティブ状態（現在のカテゴリ） ━━━ */
.cat-nav__link--active {
	background: var(--cat-color, var(--c-blue));
	color: #fff;
	border-color: transparent;
}
.cat-nav__item--all .cat-nav__link--active {
	background: var(--c-text);
	color: #fff;
}
.cat-nav__link--active .cat-nav__count { opacity: .8; }

@media (max-width: 600px) {
	.cat-nav__link { padding: .3rem .8rem; font-size: .75rem; }
}

/* ━━━ パンくずリスト（Yoast SEO） ━━━ */
.breadcrumb {
	background: var( --c-white );
	border-bottom: 1px solid var( --c-border );
	font-size: .78rem;
	color: var( --c-muted );
}
.breadcrumb__inner { padding-block: .45rem; }
.breadcrumb__items {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .1rem;
}
.breadcrumb__item a {
	color: var( --c-blue );
	text-decoration: none;
}
.breadcrumb__item a:hover { text-decoration: underline; }
.breadcrumb__item--current { color: var( --c-muted ); }
.breadcrumb__sep { color: var( --c-muted ); margin-inline: .15rem; }