/**
 * David Loy — taxonomy filter capsules
 *
 * Turns Elementor's Taxonomy Filter widget from a wrapped list of plain words
 * into pill buttons: inactive terms sit quiet in outline, the active term
 * fills with Forest.
 *
 * Elementor has revised this widget's markup more than once, so the selectors
 * below are deliberately broad — .e-filter-item is the current class, with
 * older patterns covered alongside. To confirm what your build emits:
 *
 *     right-click a filter term -> Inspect
 *
 * and check the class on the clickable element and what marks the active one
 * (aria-pressed="true", or a class like .e-filter-item-active). Once known,
 * the rest can be deleted.
 *
 * Colours and type come from dl-tokens.css, which must be enqueued first and
 * named as a dependency:
 *
 *   wp_enqueue_style( 'dl-filters',
 *     get_stylesheet_directory_uri() . '/assets/dl-filters.css', [ 'dl-tokens' ],
 *     filemtime( get_stylesheet_directory() . '/assets/dl-filters.css' ) );
 */

/* ---------------------------------------------------------------- layout */

.e-filter,
.elementor-widget-taxonomy-filter .e-filter,
.dl-filter .e-filter {
	display: flex !important;
	flex-wrap: wrap;
	gap: 10px !important;
	align-items: center;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

/* ----------------------------------------------------------- the capsule */

.e-filter-item,
.elementor-widget-taxonomy-filter .e-filter-item,
.dl-filter .e-filter-item {
	display: inline-flex;
	align-items: center;
	gap: 7px;

	font-family: var(--dl-ui);
	font-size: 0.68rem !important;
	font-weight: 500 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase;
	line-height: 1 !important;
	white-space: nowrap;

	/* !important throughout: Elementor emits per-element rules scoped to
	 * .elementor-element-{id}, which outrank a bare .e-filter-item. Without
	 * this the text picks up the colour and tracking but the box does not
	 * render — no border, no padding, no capsule. */
	padding: 10px 18px !important;
	border-radius: 999px !important;
	border: 1px solid var(--dl-rule) !important;
	background: transparent !important;
	color: var(--dl-moss) !important;

	cursor: pointer;
	text-decoration: none !important;
	transition: background-color 0.18s ease, color 0.18s ease,
	            border-color 0.18s ease;
}

.e-filter-item:hover,
.dl-filter .e-filter-item:hover {
	background: var(--dl-parchment) !important;
	border-color: var(--dl-moss) !important;
	color: var(--dl-ink) !important;
}

.e-filter-item:focus-visible {
	outline: 2px solid var(--dl-gold);
	outline-offset: 2px;
}

/* --------------------------------------------------------------- active
 * Several selectors because the active marker differs by Elementor version:
 * aria-pressed on a button, .e-filter-item-active on a div, or a checked
 * input in the older markup.
 */

.e-filter-item[aria-pressed="true"],
.e-filter-item.e-filter-item-active,
.e-filter-item.active,
.dl-filter .e-filter-item[aria-pressed="true"],
.dl-filter input:checked + .e-filter-item {
	background: var(--dl-forest) !important;
	border-color: var(--dl-forest) !important;
	color: var(--dl-cream) !important;
}

.e-filter-item[aria-pressed="true"]:hover,
.e-filter-item.e-filter-item-active:hover,
.e-filter-item.active:hover {
	background: var(--dl-ink) !important;
	border-color: var(--dl-ink) !important;
	color: var(--dl-cream) !important;
}

/* A small × on the active capsule, so it reads as removable. */
.e-filter-item[aria-pressed="true"]::after,
.e-filter-item.e-filter-item-active::after {
	content: "×";
	font-size: 1.05em;
	line-height: 1;
	opacity: 0.75;
	margin-left: 2px;
}

/* ------------------------------------------------------------ term count
 * Elementor can append a count; keep it subordinate to the label.
 */

.e-filter-item .e-filter-item-count,
.e-filter-item small {
	font-size: 0.85em;
	font-weight: 400;
	opacity: 0.6;
	letter-spacing: 0.04em;
}

/* -------------------------------------------------------- "All" / reset */

.e-filter-item[data-filter=""],
.e-filter-item:first-child {
	/* nothing special by default — uncomment to de-emphasise the All pill
	   border-style: dashed; */
}

/* ------------------------------------------------- group label and rows */

.dl-filter-group {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 14px;
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--dl-rule);
}

.dl-filter-group__label {
	flex: 0 0 auto;
	min-width: 78px;
	font-family: var(--dl-ui);
	font-size: 0.6rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--dl-gold);
}

/* ------------------------------------------------------------ dropdowns
 * If a filter is set to Dropdown rather than Buttons, match the capsules.
 */

.elementor-widget-taxonomy-filter select {
	font-family: var(--dl-ui);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dl-moss);
	background: transparent;
	border: 1px solid var(--dl-rule);
	border-radius: 999px;
	padding: 10px 34px 10px 18px;
	cursor: pointer;
}
.elementor-widget-taxonomy-filter select:hover {
	border-color: var(--dl-moss);
	color: var(--dl-ink);
}

/* --------------------------------------------------------------- mobile
 * Horizontal scroll rather than four wrapped rows of capsules.
 */

@media (max-width: 767px) {
	.e-filter,
	.dl-filter .e-filter {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 4px;
	}
	.e-filter::-webkit-scrollbar { display: none; }
	.e-filter-item { flex: 0 0 auto; font-size: 0.64rem; padding: 9px 15px; }
	.dl-filter-group { flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
	.e-filter-item { transition: none; }
}