@use "variables" as *;

// ===========================================================================
// お知らせ archive  (archive-news.php / taxonomy-news_cat.php)
//   page-head band (common) + category nav + bordered news list + pagination.
//   Content column = .inner-box--narrow (matches the design's 1024 column).
// ===========================================================================

// ---------------------------------------------------------------------------
// .cat-nav — taxonomy filter pills (lime). Current pulled to the front and
// shown in the active outline style (white bg / green border / green text).
// ---------------------------------------------------------------------------
.cat-nav {
	margin-bottom: rem(50);

	@include sp {
		margin-bottom: rem(30);
	}
}

.cat-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: rem(10);
}

.cat-nav__link {
	display: inline-flex;
	align-items: center;
	padding: rem(4) rem(20);
	background: $color-lime;
	border: 1px solid $color-lime; // border on both states -> no size shift
	border-radius: $radius-pill;
	font-family: $font-sans;
	font-weight: 700;
	font-size: rem(14);
	line-height: 1.4;
	color: $color-white;
	transition: opacity 0.2s, background-color 0.3s, color 0.3s;

	@include sp {
		font-size: rem(13);
	}
}

a.cat-nav__link:hover {
	opacity: 0.8;
	text-decoration: none;
}

// Active (current) — outline: white bg, green border + text. Sits first.
.cat-nav__link--current {
	background: $color-white;
	border-color: $color-green;
	color: $color-green;
}

// ---------------------------------------------------------------------------
// .news-list — bordered list. Reuses the shared .news-item internals; adds a
// thin rule above every row + one closing the list.
// ---------------------------------------------------------------------------
.news-list {
	border-bottom: 1px solid $color-line;

	.news-item {
		border-top: 1px solid $color-line;
	}
}

.news-list__empty {
	padding-block: rem(40);
	font-family: $font-sans;
	color: $color-text;
}

// ---------------------------------------------------------------------------
// Pagination (the_posts_pagination) — square pills. Current = green fill,
// others = white / green outline; hover inverts.
// ---------------------------------------------------------------------------
.news-archive .pagination {
	margin-top: rem(60);

	@include sp {
		margin-top: rem(40);
	}

	.nav-links {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		gap: rem(10);

		@include sp {
			justify-content: center;
		}
	}

	.page-numbers {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: rem(40);
		height: rem(40);
		background: $color-white;
		border: 1px solid $color-green;
		border-radius: $radius-sm; // 10 (design 8 ~ same scale step)
		font-family: $font-sans;
		font-weight: 700;
		font-size: rem(16);
		line-height: 1;
		color: $color-green;
		transition: background-color 0.3s, color 0.3s;
	}

	a.page-numbers:hover {
		background: $color-green;
		color: $color-white;
		text-decoration: none;
	}

	.page-numbers.current {
		background: $color-green;
		border-color: $color-green;
		color: $color-white;
	}

	// dots (…) — no box
	.page-numbers.dots {
		border-color: transparent;
		background: none;
		color: $color-text;
	}
}