/**
 * Term filter list.
 *
 * Markup comes from wp_list_categories, so the hooks are core classes:
 * .cat-item on every row, .current-cat on the term being viewed.
 */

.ln-gd-term-filter {
	--gd-gold: #c9a227;
	--gd-ink: #1a1a1a;
	--gd-muted: #6a6963;
	--gd-rule: rgba( 26, 26, 26, 0.1 );
}

.ln-gd-term-filter ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ln-gd-term-filter li {
	margin: 0;
	border-bottom: 1px solid var( --gd-rule );
}

.ln-gd-term-filter li:last-child {
	border-bottom: 0;
}

.ln-gd-term-filter a {
	display: block;
	padding: 12px 0 12px 16px;
	border-left: 2px solid transparent;
	font-family: "Nunito Sans", sans-serif;
	font-size: 15px;
	line-height: 1.4;
	color: var( --gd-muted );
	text-decoration: none;
	transition: color 0.25s ease, border-color 0.25s ease, padding-left 0.25s ease;
}

.ln-gd-term-filter a:hover {
	padding-left: 22px;
	color: var( --gd-ink );
	border-left-color: var( --gd-gold );
}

/* The term being viewed. Core adds this class, the plugin adds it to All. */
.ln-gd-term-filter .current-cat > a {
	border-left-color: var( --gd-gold );
	color: var( --gd-ink );
	font-weight: 700;
}

.ln-gd-term-filter .ln-gd-term-all {
	border-bottom: 1px solid var( --gd-rule );
}

/* Post counts, when enabled. */
.ln-gd-term-filter .count {
	color: var( --gd-muted );
	font-size: 13px;
	font-weight: 400;
}

/* ==========================================================================
   Chip bar
   --------------------------------------------------------------------------
   The same shortcode, laid out horizontally. Put ln-gd-filter-bar on the
   Elementor container above the post grid. The vertical list above stays
   the default, so a sidebar needs no extra class at all.
   ========================================================================== */

.ln-gd-filter-bar .ln-gd-term-filter ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.ln-gd-filter-bar .ln-gd-term-filter li {
	border-bottom: 0;
}

.ln-gd-filter-bar .ln-gd-term-filter a {
	padding: 9px 18px;
	border: 1px solid rgba( 26, 26, 26, 0.16 );
	border-left-width: 1px;
	border-radius: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	white-space: nowrap;
	color: var( --gd-muted );
}

.ln-gd-filter-bar .ln-gd-term-filter a:hover {
	padding-left: 18px;
	border-color: var( --gd-gold );
	color: var( --gd-ink );
}

.ln-gd-filter-bar .ln-gd-term-filter .current-cat > a {
	background: var( --gd-ink );
	border-color: var( --gd-ink );
	color: #faf9f6;
}

/* Dark section variant: same bar on a black or navy container. */

.ln-gd-filter-bar-dark .ln-gd-term-filter a {
	border-color: rgba( 250, 249, 246, 0.22 );
	color: #b9b7b1;
}

.ln-gd-filter-bar-dark .ln-gd-term-filter a:hover {
	border-color: var( --gd-gold );
	color: #faf9f6;
}

.ln-gd-filter-bar-dark .ln-gd-term-filter .current-cat > a {
	background: var( --gd-gold );
	border-color: var( --gd-gold );
	color: #1a1a1a;
}

/* On narrow screens the bar scrolls sideways instead of stacking into
   four rows of chips that push the posts below the fold. */

@media ( max-width: 767px ) {
	.ln-gd-filter-bar .ln-gd-term-filter {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.ln-gd-filter-bar .ln-gd-term-filter::-webkit-scrollbar {
		display: none;
	}

	.ln-gd-filter-bar .ln-gd-term-filter ul {
		flex-wrap: nowrap;
	}
}