/**
 * Thủy Bích Vĩnh Long — Shared Pagination
 * File: css/tb-pagination.css
 *
 * Owner:
 * - Shared pagination visual language for blog/archive surfaces.
 * - Provides a reusable `.tb-pagination` component for future templates.
 * - Aliases current Blog Category Archive pagination without changing markup.
 *
 * Not owner:
 * - Query logic / posts per page.
 * - Product grid layout.
 * - WooCommerce product card visuals.
 * - Header/footer.
 */

:root {
	--tb-pagination-gap: 18px;
	--tb-pagination-size: 24px;
	--tb-pagination-text: var(--tb-text, #1e2320);
	--tb-pagination-muted: var(--tb-muted, #59615b);
	--tb-pagination-accent: var(--tb-brass, #a98a5e);
	--tb-pagination-active-bg: var(--tb-text, #1e2320);
	--tb-pagination-active-text: #fff;
}

.tb-pagination,
.tb-blog-archive__pagination {
	width: 100%;
	max-width: 100%;
	margin: 56px auto 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--tb-pagination-gap);
	text-align: center;
	clear: both;
}

.tb-pagination .nav-links,
.tb-blog-archive__pagination .nav-links {
	width: auto;
	max-width: max-content;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--tb-pagination-gap);
}

.tb-pagination .page-numbers,
.tb-blog-archive__pagination .page-numbers {
	min-width: auto;
	height: var(--tb-pagination-size);
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	color: var(--tb-pagination-text);
	font-family: var(--tb-font, "Be Vietnam Pro", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
	font-size: 13px;
	line-height: 1;
	font-weight: 600;
	text-decoration: none;
	box-shadow: none;
}

.tb-pagination .page-numbers.current,
.tb-blog-archive__pagination .page-numbers.current {
	min-width: var(--tb-pagination-size);
	padding: 0 7px;
	background: var(--tb-pagination-active-bg);
	color: var(--tb-pagination-active-text);
}

.tb-pagination .page-numbers:hover,
.tb-pagination .page-numbers:focus-visible,
.tb-blog-archive__pagination .page-numbers:hover,
.tb-blog-archive__pagination .page-numbers:focus-visible {
	color: var(--tb-pagination-accent);
	outline: 0;
}

.tb-pagination .page-numbers:focus-visible,
.tb-blog-archive__pagination .page-numbers:focus-visible {
	box-shadow: 0 0 0 2px rgba(169, 138, 94, .28);
}

.tb-pagination .page-numbers.current:hover,
.tb-pagination .page-numbers.current:focus-visible,
.tb-blog-archive__pagination .page-numbers.current:hover,
.tb-blog-archive__pagination .page-numbers.current:focus-visible {
	color: var(--tb-pagination-active-text);
	box-shadow: none;
}

.tb-pagination .page-numbers.prev,
.tb-pagination .page-numbers.next,
.tb-blog-archive__pagination .page-numbers.prev,
.tb-blog-archive__pagination .page-numbers.next {
	min-width: var(--tb-pagination-size);
	color: var(--tb-pagination-muted);
	font-size: 16px;
	font-weight: 500;
}

@media (max-width: 549px) {
	.tb-pagination,
	.tb-blog-archive__pagination {
		margin-top: 44px;
		gap: 14px;
	}

	.tb-pagination .nav-links,
	.tb-blog-archive__pagination .nav-links {
		gap: 14px;
	}
}