/**
 * Filtres catégories — page blog.
 * Shortcode : [wpcursor name="blog-categories"]
 */

.wpcursor-blog-categories {
	--wpcursor-blog-cat-active-bg: #5b4377;
	--wpcursor-blog-cat-active-text: #ffffff;
	--wpcursor-blog-cat-inactive-bg: #f3ede6;
	--wpcursor-blog-cat-inactive-text: #2d2a45;

	box-sizing: border-box;
	width: 100%;
	padding: 0 clamp(1.25rem, 4vw, 2rem) clamp(1.5rem, 3vw, 2rem);
	background: transparent;
}

.wpcursor-blog-categories__inner {
	max-width: 1180px;
	margin: 0 auto;
	box-sizing: border-box;
}

.wpcursor-blog-categories__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.65rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wpcursor-blog-categories__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.65rem 1.25rem;
	border: none;
	border-radius: 999px;
	background: var(--wpcursor-blog-cat-inactive-bg);
	color: var(--wpcursor-blog-cat-inactive-text);
	font-family: var(--wpcursor-font-sans);
	font-size: 0.88rem;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.wpcursor-blog-categories__link:hover,
.wpcursor-blog-categories__link:focus-visible {
	background: #e8dfd4;
	color: var(--wpcursor-blog-cat-inactive-text);
	outline: none;
}

.wpcursor-blog-categories__link.is-active {
	background: var(--wpcursor-blog-cat-active-bg);
	color: var(--wpcursor-blog-cat-active-text);
	box-shadow: 0 2px 10px rgba(91, 67, 119, 0.25);
}

.wpcursor-blog-categories__link.is-active:hover,
.wpcursor-blog-categories__link.is-active:focus-visible {
	background: #4f3968;
	color: #ffffff;
}

@media (max-width: 640px) {
	.wpcursor-blog-categories__list {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 0.25rem;
		scrollbar-width: thin;
	}

	.wpcursor-blog-categories__item {
		flex-shrink: 0;
	}
}