/* =============================================================================
   EdouJob Filter — job listing filter form
   =============================================================================

   Design choice: borrow the STRUCTURE of the big classifieds sites (dubizzle) —
   a large pill-shaped search bar with the action button inside, then a row of
   facets as clickable chips — with the site's PALETTE, never the model's.

   Colours are read from the `edou-job-listing` theme variables
   (--edou-primary, --edou-border, …) with a fallback value for each one:
   the form follows the theme when it is present, and still looks presentable
   elsewhere (another theme's sidebar, a bare page).

   The markup is not touched. Everything relies on the existing structure:

     form.edoujob-filter
       div.edoujob-filter__inner
         ul.edoujob-filter__fields
           li.edoujob-filter__field.edoujob-filter__field--search     h4 + input[text]
           li.edoujob-filter__field.edoujob-filter__field--<taxonomy> h4 + ul>li>label>input
           li.edoujob-filter__field.edoujob-filter__field--salary     h4 + span.edoujob-filter__range
           li.edoujob-filter__field.edoujob-filter__field--submit     input[submit]

   ========================================================================== */

/* ── Tokens ──────────────────────────────────────────────────────────────── */

.edoujob-filter {
	--ejf-primary:      var(--edou-primary, #1a56db);
	--ejf-primary-dark: var(--edou-primary-dark, #1e429f);
	--ejf-text:         var(--edou-dark, #1f2937);
	--ejf-muted:        var(--edou-gray, #6b7280);
	--ejf-border:       var(--edou-border, #e5e7eb);
	--ejf-surface:      var(--edou-white, #ffffff);
	--ejf-subtle:       var(--edou-light, #f9fafb);

	/* Light tint of the primary colour, for the selected state. */
	--ejf-tint:         #eff4fe;
	--ejf-ring:         rgba(26, 86, 219, .22);

	--ejf-radius:       .75rem;
	--ejf-radius-sm:    .625rem;
	--ejf-pill:         999px;
	--ejf-bar-height:   3.25rem;
	--ejf-field-height: 2.75rem;
	--ejf-gap:          .75rem;
	--ejf-gap-row:      1rem;

	--ejf-shadow: var(--edou-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05));
}

/* Browsers that support colour mixing derive the tint and the focus ring
   from the theme's actual colour, instead of the blue fallback. */
@supports (color: color-mix(in srgb, red 10%, white)) {
	.edoujob-filter {
		--ejf-tint: color-mix(in srgb, var(--ejf-primary) 8%, #fff);
		--ejf-ring: color-mix(in srgb, var(--ejf-primary) 22%, transparent);
	}
}

/* ── The card ────────────────────────────────────────────────────────────── */

.edoujob-filter {
	box-sizing: border-box;
	padding: 1.25rem;
	border: 1px solid var(--ejf-border);
	border-radius: var(--ejf-radius);
	background: var(--ejf-surface);
	box-shadow: var(--ejf-shadow);
	color: var(--ejf-text);
	font-family: inherit;
	line-height: 1.5;
}

.edoujob-filter *,
.edoujob-filter *::before,
.edoujob-filter *::after {
	box-sizing: border-box;
}

.edoujob-filter__inner {
	display: block;
}

/* ── Layout: search bar, then facets ─────────────────────────────────────── */

.edoujob-filter__fields {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	column-gap: var(--ejf-gap);

	/* Vertical spacing is carried by the facets (margin-top), not by row-gap:
	   the forced line break below must add nothing when the form only
	   contains the search field and its button. */
	row-gap: 0;

	margin: 0;
	padding: 0;
	list-style: none;
}

.edoujob-filter__field {
	order: 4;
	flex: 1 1 13rem;
	min-width: 0;
	margin: var(--ejf-gap-row) 0 0;
	padding: 0;
	list-style: none;
}

/* Forced line break between the button (order 2) and the facets (order 4). */
.edoujob-filter__fields::before {
	content: '';
	order: 3;
	flex-basis: 100%;
	height: 0;
}

/* Row 1 — the bar. The field stretches, the button keeps its width. */
.edoujob-filter__field--search {
	order: 1;
	flex: 1 1 18rem;
	margin-top: 0;
}

.edoujob-filter__field--submit {
	order: 2;
	flex: 0 0 auto;
	align-self: flex-end;
	margin-top: 0;
}

/* A few facets breathe better when slightly wider. */
.edoujob-filter__field--salary {
	flex-basis: 15rem;
}

/* ── Headings ────────────────────────────────────────────────────────────── */

.edoujob-filter__field h4 {
	margin: 0 0 .4rem;
	padding: 0;
	color: var(--ejf-muted);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .045em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* ── The search field: large pill with magnifier ─────────────────────────── */

.edoujob-filter__field--search input[type="text"],
.edoujob-filter__field--search input[type="search"] {
	width: 100%;
	height: var(--ejf-bar-height);
	padding: 0 1.25rem 0 3rem;
	border: 1px solid var(--ejf-border);
	border-radius: var(--ejf-pill);
	background-color: var(--ejf-subtle);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 1.125rem center;
	color: var(--ejf-text);
	font-family: inherit;
	font-size: 1rem;
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.edoujob-filter__field--search input[type="text"]::placeholder,
.edoujob-filter__field--search input[type="search"]::placeholder {
	color: var(--ejf-muted);
	opacity: 1;
}

.edoujob-filter__field--search input[type="text"]:hover,
.edoujob-filter__field--search input[type="search"]:hover {
	border-color: #d1d5db;
}

.edoujob-filter__field--search input[type="text"]:focus,
.edoujob-filter__field--search input[type="search"]:focus {
	outline: 0;
	border-color: var(--ejf-primary);
	background-color: var(--ejf-surface);
	box-shadow: 0 0 0 3px var(--ejf-ring);
}

/* ── The button ──────────────────────────────────────────────────────────── */

.edoujob-filter input[type="submit"],
.edoujob-filter button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--ejf-bar-height);
	padding: 0 1.875rem;
	border: 0;
	border-radius: var(--ejf-pill);
	background: var(--ejf-primary);
	color: #fff;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.edoujob-filter input[type="submit"]:hover,
.edoujob-filter button[type="submit"]:hover {
	background: var(--ejf-primary-dark);
	transform: translateY(-1px);
	box-shadow: 0 6px 16px -6px var(--ejf-ring);
}

.edoujob-filter input[type="submit"]:active,
.edoujob-filter button[type="submit"]:active {
	transform: translateY(0);
	box-shadow: none;
}

.edoujob-filter input[type="submit"]:focus-visible,
.edoujob-filter button[type="submit"]:focus-visible {
	outline: 0;
	box-shadow: 0 0 0 3px var(--ejf-ring);
}

/* ── Term lists: clickable chips ─────────────────────────────────────────── */

/* Child combinator, and that is no detail: the token selector's list is also
   a <ul> inside the field. With a plain descendant selector, these rules
   (0-1-1) beat `.ejf-tags__list` (0-1-0) — `display: flex` cancelled its
   `display: none`, so the list never closed, and the `padding: 0` of the `li`
   rule pushed the text against the edges. The `>` only targets the native
   list, the field's only direct child. */
.edoujob-filter__field > ul {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: 0;
	padding: 0;
	list-style: none;

	/* A taxonomy can have dozens of terms: cap the height rather than let
	   the form stretch over a whole screen. */
	max-height: 11rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

.edoujob-filter__field > ul li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Sub-levels of a hierarchical taxonomy: on their own line, indented. */
.edoujob-filter__field > ul ul {
	flex-basis: 100%;
	max-height: none;
	overflow: visible;
	margin-top: .4rem;
	padding-left: 1rem;
	border-left: 2px solid var(--ejf-border);
}

.edoujob-filter__field label {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	min-height: 2.25rem;
	padding: .375rem .75rem;
	border: 1px solid var(--ejf-border);
	border-radius: var(--ejf-pill);
	background: var(--ejf-surface);
	color: var(--ejf-text);
	font-size: .875rem;
	font-weight: 500;
	line-height: 1.3;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.edoujob-filter__field label:hover {
	border-color: var(--ejf-primary);
	background: var(--ejf-subtle);
}

.edoujob-filter__field label input[type="checkbox"],
.edoujob-filter__field label input[type="radio"] {
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
	margin: 0;
	accent-color: var(--ejf-primary);
	cursor: pointer;
}

/* Selected state. The checkbox stays visible and coloured: without :has(), it
   carries the information, and the tinted chip is only reinforcement. */
.edoujob-filter__field label:has(input:checked) {
	border-color: var(--ejf-primary);
	background: var(--ejf-tint);
	color: var(--ejf-primary-dark);
	font-weight: 600;
}

.edoujob-filter__field label:focus-within {
	border-color: var(--ejf-primary);
	box-shadow: 0 0 0 3px var(--ejf-ring);
}

/* ── Dropdowns ───────────────────────────────────────────────────────────── */

.edoujob-filter__field select {
	width: 100%;
	height: var(--ejf-field-height);
	max-width: 100%;
	padding: 0 2.25rem 0 .875rem;
	border: 1px solid var(--ejf-border);
	border-radius: var(--ejf-radius-sm);
	background-color: var(--ejf-surface);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .875rem center;
	color: var(--ejf-text);
	font-family: inherit;
	font-size: .9375rem;
	line-height: 1.3;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.edoujob-filter__field select:hover {
	border-color: #d1d5db;
}

.edoujob-filter__field select:focus {
	outline: 0;
	border-color: var(--ejf-primary);
	box-shadow: 0 0 0 3px var(--ejf-ring);
}

/* Multiple selection: no chevron, free height. */
.edoujob-filter__field select[multiple] {
	height: auto;
	min-height: 7rem;
	padding: .5rem;
	background-image: none;
	cursor: auto;
}

.edoujob-filter__field select[multiple] option {
	padding: .25rem .375rem;
	border-radius: .25rem;
}

/* ── Salary range: two fields, one control ───────────────────────────────── */

.edoujob-filter__range {
	display: flex;
	align-items: stretch;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	border: 1px solid var(--ejf-border);
	border-radius: var(--ejf-radius-sm);
	background: var(--ejf-surface);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.edoujob-filter__range:focus-within {
	border-color: var(--ejf-primary);
	box-shadow: 0 0 0 3px var(--ejf-ring);
}

.edoujob-filter__range input {
	flex: 1 1 0;
	width: 100%;
	min-width: 0;
	max-width: none;
	height: var(--ejf-field-height);
	padding: 0 .75rem;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--ejf-text);
	font-family: inherit;
	font-size: .9375rem;
}

.edoujob-filter__range input + input {
	border-left: 1px solid var(--ejf-border);
}

.edoujob-filter__range input:focus {
	outline: 0;
}

.edoujob-filter__range input::placeholder {
	color: var(--ejf-muted);
	opacity: 1;
}

/* ── Dates ───────────────────────────────────────────────────────────────── */

.edoujob-filter__field input[type="date"] {
	width: 100%;
	height: var(--ejf-field-height);
	padding: 0 .875rem;
	border: 1px solid var(--ejf-border);
	border-radius: var(--ejf-radius-sm);
	background: var(--ejf-surface);
	color: var(--ejf-text);
	font-family: inherit;
	font-size: .9375rem;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.edoujob-filter__field input[type="date"] + input[type="date"] {
	margin-top: .4rem;
}

.edoujob-filter__field input[type="date"]:focus {
	outline: 0;
	border-color: var(--ejf-primary);
	box-shadow: 0 0 0 3px var(--ejf-ring);
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

/* Tablet: the bar keeps its row, the facets switch to two columns. */
@media (max-width: 860px) {
	.edoujob-filter__field {
		flex-basis: 11rem;
	}

	.edoujob-filter__field--salary {
		flex-basis: 13rem;
	}
}

/* Phone: one column, full-width button, comfortable touch targets. */
@media (max-width: 640px) {
	.edoujob-filter {
		padding: 1rem;
		border-radius: var(--ejf-radius-sm);
	}

	.edoujob-filter__field,
	.edoujob-filter__field--search,
	.edoujob-filter__field--salary {
		flex: 1 1 100%;
	}

	.edoujob-filter__field--submit {
		flex: 1 1 100%;
		margin-top: var(--ejf-gap-row);
	}

	.edoujob-filter input[type="submit"],
	.edoujob-filter button[type="submit"] {
		width: 100%;
	}

	.edoujob-filter__field > ul {
		max-height: 9rem;
	}

	/* On mobile, chips must remain easy to tap. */
	.edoujob-filter__field label {
		min-height: 2.5rem;
	}
}

/* ── Stacked form (sidebar, class="…--stacked" attribute) ────────────────── */

.widget-area .edoujob-filter__field,
.widget .edoujob-filter__field,
.edoujob-filter--stacked .edoujob-filter__field,
.edoujob-filter--stacked .edoujob-filter__field--search,
.edoujob-filter--stacked .edoujob-filter__field--salary {
	flex: 1 1 100%;
}

.widget-area .edoujob-filter__field--submit,
.widget .edoujob-filter__field--submit,
.edoujob-filter--stacked .edoujob-filter__field--submit {
	flex: 1 1 100%;
	margin-top: var(--ejf-gap-row);
}

.widget-area .edoujob-filter input[type="submit"],
.widget .edoujob-filter input[type="submit"],
.edoujob-filter--stacked input[type="submit"] {
	width: 100%;
}

/* ── Display preferences ─────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.edoujob-filter *,
	.edoujob-filter *::before,
	.edoujob-filter *::after {
		transition: none !important;
	}

	.edoujob-filter input[type="submit"]:hover,
	.edoujob-filter button[type="submit"]:hover {
		transform: none;
	}
}

@media (forced-colors: active) {
	.edoujob-filter__field label:has(input:checked) {
		border-color: Highlight;
	}
}

/* =============================================================================
   Token selector (data-ejf-tags) — assets/js/edoujob-filter.js
   -----------------------------------------------------------------------------
   A long facet does not fit as checkboxes: `job_category` has 64 terms. The
   component replaces the native control with a single field where you type to
   filter and where each choice becomes a removable pill.

   The native control stays in the DOM, hidden and disabled (`.ejf-tags__native`)
   — it is the no-JavaScript fallback, and the source of the options.

   LAYOUT STABILITY — the constraint that governs this whole block.

   A row of side-by-side facets must not move when it is used.
   Two sources of movement, both neutralised here:

     1. The open list. It is `position: absolute`, i.e. floating: it takes no
        space in the flow and pushes neither the neighbouring facets nor the
        results counter below.
     2. The pills. The control has a FIXED height (`--ejf-field-height`) and
        pills do not wrap: they scroll horizontally inside
        `.ejf-tags__track`. One pill or ten, the height does not change.

   Horizontal scrolling was chosen over wrapping onto several lines: in a
   2.75rem control, a wrapped area would show only one row anyway, and
   vertically scrolling a single line is confusing. So the track slides
   horizontally, the last pill added is brought into view, and a gradient
   signals what overflows.
   ========================================================================== */

.ejf-tags__native[hidden] {
	display: none !important;
}

.ejf-tags {
	position: relative;
	display: block;
}

/* The open field sits above its neighbours: they are flex siblings, painted
   in source order, so without this the "Sector" list would slide under the
   "City" background. The attribute is set by the script. */
.edoujob-filter__field {
	position: relative;
}

.edoujob-filter__field[data-ejf-open="true"] {
	z-index: 30;
}

.ejf-tags__mount {
	display: block;
}

/* ── The field ───────────────────────────────────────────────────────────── */

.ejf-tags__control {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: .25rem;

	/* Fixed height, not `min-height`: this is what locks the row. */
	height: var(--ejf-field-height);
	padding: 0 .375rem 0 .5rem;
	overflow: hidden;
	border: 1px solid var(--ejf-border);
	border-radius: var(--ejf-radius-sm);
	background: var(--ejf-surface);
	cursor: text;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.ejf-tags__control:hover {
	border-color: var(--ejf-primary);
}

/* Focus lives on the input, but the whole field must show it. */
.ejf-tags:focus-within .ejf-tags__control {
	border-color: var(--ejf-primary);
	box-shadow: 0 0 0 3px var(--ejf-ring);
}

/* The track: pills and input on a single sliding line. */
.ejf-tags__track {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: nowrap;
	align-items: center;
	gap: .3125rem;
	min-width: 0;
	height: 100%;
	overflow-x: auto;
	overflow-y: hidden;

	/* Thin but VISIBLE bar: without it, nothing tells you there are pills
	   out of view — you think there is only one. It only appears on real
	   overflow (`overflow-x: auto`) and reserves no gutter. */
	scrollbar-width: thin;
	scrollbar-color: var(--ejf-muted) transparent;
	overscroll-behavior-x: contain;
}

.ejf-tags__track::-webkit-scrollbar {
	height: 4px;
}

.ejf-tags__track::-webkit-scrollbar-track {
	background: transparent;
}

.ejf-tags__track::-webkit-scrollbar-thumb {
	border-radius: var(--ejf-pill);
	background: var(--ejf-muted);
}

.ejf-tags__track:hover::-webkit-scrollbar-thumb {
	background: var(--ejf-text);
}

.ejf-tags__chips {
	display: contents;
}

/* A gradient on each side, shown only on the side where pills remain to be
   seen. Together with the scrollbar, these are the two signals saying "there
   are more". The right one stops before the chevron, which stays sharp. */
.ejf-tags__control::before,
.ejf-tags__control::after {
	content: '';
	position: absolute;
	top: 1px;
	bottom: 1px;
	width: 1.5rem;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease;
}

.ejf-tags__control::before {
	left: 1px;
	background: linear-gradient(to left, transparent, var(--ejf-surface));
}

.ejf-tags__control::after {
	right: 1.75rem;
	background: linear-gradient(to right, transparent, var(--ejf-surface));
}

.ejf-tags[data-more-start="true"] .ejf-tags__control::before,
.ejf-tags[data-more-end="true"] .ejf-tags__control::after {
	opacity: 1;
}

.ejf-tags__input {
	flex: 1 0 5rem;
	min-width: 5rem;
	width: auto;
	margin: 0;
	padding: .25rem 0;
	border: 0;
	background: none;
	color: var(--ejf-text);
	font: inherit;
	font-size: .9375rem;
	line-height: 1.4;
	outline: 0;
	box-shadow: none;
}

/* As soon as there are pills, the input gives way: keeping 5rem for an
   empty field, in a 13rem facet, cost a whole pill. */
.ejf-tags[data-filled="true"] .ejf-tags__input {
	flex: 1 1 3.5rem;
	min-width: 3.5rem;
}

.ejf-tags__input::placeholder {
	color: var(--ejf-muted);
	opacity: 1;
}

.ejf-tags__toggle {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	margin-left: auto;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--ejf-muted);
	cursor: pointer;
	transition: transform .15s ease, color .15s ease;
}

.ejf-tags__toggle svg {
	width: 1.125rem;
	height: 1.125rem;
}

.ejf-tags__toggle:hover {
	color: var(--ejf-text);
}

.ejf-tags[data-open="true"] .ejf-tags__toggle {
	transform: rotate(180deg);
}

/* ── The pills ───────────────────────────────────────────────────────────── */

.ejf-tags__chip {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: .25rem;

	/* An overly long label is truncated rather than taking the whole track: a
	   facet is 13rem wide, a single "Administrative & Virtual Assistance" would
	   fill it and only one pill would be visible. */
	max-width: 8.5rem;
	padding: .1875rem .25rem .1875rem .5625rem;
	border: 1px solid var(--ejf-border);
	border-radius: var(--ejf-pill);
	background: var(--ejf-tint);
	color: var(--ejf-primary-dark);
	font-size: .8125rem;
	font-weight: 500;
	line-height: 1.35;
}

.ejf-tags__chip-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ejf-tags__remove {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;

	/* 1.25rem visible, but the real target is enlarged by the padding: a 20px
	   "x" is below the recommended minimum touch target. */
	width: 1.25rem;
	height: 1.25rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: currentColor;
	cursor: pointer;
	opacity: .7;
	transition: background-color .15s ease, opacity .15s ease;
}

.ejf-tags__remove svg {
	width: .875rem;
	height: .875rem;
}

.ejf-tags__remove:hover,
.ejf-tags__remove:focus-visible {
	background: var(--ejf-primary);
	color: #fff;
	opacity: 1;
}

.ejf-tags__remove:focus-visible {
	outline: 2px solid var(--ejf-primary);
	outline-offset: 1px;
}

/* ── The list ────────────────────────────────────────────────────────────── */

/* Class doubled on the list and its items: the form lives inside page
   content, where a theme readily sets rules such as
   `.entry-content ul li` (0-2-1). Without this, they would take over the
   inner padding and push the text back against the edges. */
.ejf-tags .ejf-tags__list {
	display: none;

	/* Floating: out of the flow, so the row of facets and everything after it
	   stay exactly where they were, list open or closed. */
	position: absolute;
	top: calc(100% + .375rem);
	left: 0;
	right: 0;
	z-index: 30;

	max-height: 13.5rem;
	margin: 0;
	padding: .3125rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	border: 1px solid var(--ejf-border);
	border-radius: var(--ejf-radius-sm);
	background: var(--ejf-surface);
	box-shadow: var(--ejf-shadow);
	list-style: none;
}

.ejf-tags[data-open="true"] .ejf-tags__list {
	display: block;
}

.ejf-tags__list .ejf-tags__option {
	margin: 0;
	padding: .5625rem .875rem;
	border-radius: .375rem;
	color: var(--ejf-text);
	font-size: .875rem;
	line-height: 1.45;
	cursor: pointer;
	list-style: none;
}

.ejf-tags__list .ejf-tags__option + .ejf-tags__option {
	margin-top: .0625rem;
}

.ejf-tags__option strong {
	font-weight: 700;
	color: var(--ejf-primary-dark);
}

/* Hover and keyboard share the same state: only one option is "targeted". */
.ejf-tags__list .ejf-tags__option.is-active {
	background: var(--ejf-tint);
	color: var(--ejf-primary-dark);
}

.ejf-tags__list .ejf-tags__empty {
	margin: 0;
	padding: .5625rem .875rem;
	color: var(--ejf-muted);
	font-size: .875rem;
	list-style: none;
}

/* Screen reader announcements: present, never visible. */
.ejf-tags__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.ejf-tags__fields {
	display: none;
}

/* ── Responsive and preferences ──────────────────────────────────────────── */

@media (max-width: 640px) {
	.ejf-tags .ejf-tags__list {
		max-height: 11rem;
	}

	/* Touch targets: relax the compact desktop heights. */
	.ejf-tags__list .ejf-tags__option {
		padding: .75rem .875rem;
	}

	.ejf-tags__remove {
		width: 1.5rem;
		height: 1.5rem;
	}
}

@media (forced-colors: active) {
	.ejf-tags__chip {
		border-color: CanvasText;
	}

	.ejf-tags__list .ejf-tags__option.is-active {
		background: Highlight;
		color: HighlightText;
		forced-color-adjust: none;
	}
}

/* =============================================================================
   Results list [edoujob_filter_results]
   -----------------------------------------------------------------------------
   The grid and cards come from jobs-listing.css (EdouJob): only the counter,
   which does not exist on the EdouJob side, is added here.
   ========================================================================== */

.ejf-results {
	margin-top: 1.5rem;
}

.ejf-results__count {
	margin: 0 0 1rem;
	color: var(--edou-gray, #6b7280);
	font-size: .9375rem;
}

.ejf-results__count strong {
	color: var(--edou-dark, #1f2937);
	font-weight: 600;
}

/* =============================================================================
   Results bar: active filters and sorting
   -----------------------------------------------------------------------------
   Rendered by [edoujob_filter_results]. It answers two questions a visitor
   asks in front of a filtered list: "why this number?" and "how do I remove
   this criterion without scrolling back up to the form?".

   Same tokens as the form, but declared here too: the results list may live
   on a page that has no form, and therefore no `.edoujob-filter` block
   where they are defined.
   ========================================================================== */

.ejf-results {
	--ejf-primary:      var(--edou-primary, #1a56db);
	--ejf-primary-dark: var(--edou-primary-dark, #1e429f);
	--ejf-text:         var(--edou-dark, #1f2937);
	--ejf-muted:        var(--edou-gray, #6b7280);
	--ejf-border:       var(--edou-border, #e5e7eb);
	--ejf-surface:      var(--edou-white, #ffffff);
	--ejf-subtle:       var(--edou-light, #f9fafb);
	--ejf-tint:         #eff4fe;
	--ejf-pill:         999px;
	--ejf-radius-sm:    .625rem;
}

@supports (color: color-mix(in srgb, red 10%, white)) {
	.ejf-results {
		--ejf-tint: color-mix(in srgb, var(--ejf-primary) 8%, #fff);
	}
}

/* ── Active filters ──────────────────────────────────────────────────────── */

.ejf-active {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin: 0 0 1rem;
}

.ejf-active__chip {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	max-width: 100%;
	padding: .3125rem .625rem .3125rem .75rem;
	border: 1px solid var(--ejf-border);
	border-radius: var(--ejf-pill);
	background: var(--ejf-tint);
	color: var(--ejf-primary-dark);
	font-size: .8125rem;
	line-height: 1.35;
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease;
}

.ejf-active__chip:hover,
.ejf-active__chip:focus-visible {
	border-color: var(--ejf-primary);
	background: var(--ejf-surface);
	color: var(--ejf-primary-dark);
}

/* The field name stays discreet: the value is what people read. */
.ejf-active__field {
	color: var(--ejf-muted);
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.ejf-active__field::after {
	content: '';
}

.ejf-active__label {
	overflow: hidden;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ejf-active__x {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.125rem;
	height: 1.125rem;
	border-radius: 50%;
	background: rgba(0, 0, 0, .06);
	font-size: .875rem;
	line-height: 1;
}

.ejf-active__chip:hover .ejf-active__x {
	background: var(--ejf-primary);
	color: #fff;
}

.ejf-active__clear {
	margin-left: .25rem;
	color: var(--ejf-muted);
	font-size: .8125rem;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ejf-active__clear:hover {
	color: var(--ejf-primary-dark);
}

/* ── Counter and sorting, on the same line ───────────────────────────────── */

.ejf-results__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	margin-bottom: 1rem;
}

.ejf-results__bar .ejf-results__count {
	margin: 0;
}

.ejf-sort {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
}

.ejf-sort__label {
	color: var(--ejf-muted);
	font-size: .8125rem;
	white-space: nowrap;
}

.ejf-sort__select {
	height: 2.25rem;
	max-width: 12rem;
	padding: 0 2rem 0 .75rem;
	border: 1px solid var(--ejf-border);
	border-radius: var(--ejf-radius-sm);
	background-color: var(--ejf-surface);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 7.5 10 12l4.5-4.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .5rem center;
	color: var(--ejf-text);
	font-family: inherit;
	font-size: .875rem;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

.ejf-sort__select:focus {
	outline: 0;
	border-color: var(--ejf-primary);
	box-shadow: 0 0 0 3px var(--edou-ring, rgba(26, 86, 219, .22));
}

.ejf-sort__go {
	height: 2.25rem;
	padding: 0 .875rem;
	border: 1px solid var(--ejf-border);
	border-radius: var(--ejf-radius-sm);
	background: var(--ejf-subtle);
	color: var(--ejf-text);
	font-family: inherit;
	font-size: .8125rem;
	cursor: pointer;
}

/* The script submits on change: the button is only used without
   JavaScript, and it is hidden as soon as the script takes over. */
.ejf-sort[data-auto="1"] .ejf-sort__go {
	display: none;
}

@media (max-width: 640px) {
	.ejf-results__bar {
		align-items: flex-start;
		flex-direction: column;
	}

	.ejf-sort__select {
		max-width: none;
		flex: 1 1 auto;
	}
}