/**
 * Sharon Careers — Hero band + search-pill styling (scoped under .sc-jobs-hero).
 *
 * Single source of truth for the hero banner and the WP Job Manager search form.
 * Design tokens (:root), the global page gradient (html / body / body::before),
 * and the wrapper transparency all live in joblook.css — do NOT redefine them here.
 */

/* =====================================================
   HERO GRADIENT BAND
   ===================================================== */
.sc-jobs-hero {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	margin-top: 30px;
	margin-bottom: 48px;
	padding: 0px 24px 64px;
	box-sizing: border-box;
	text-align: center;
	direction: rtl;
	background: transparent !important;
}

body.home ul.job_listings.job-grid .job_listing,
body.page-template-template-fullwidth ul.job_listings.job-grid .job_listing {
	background-color: rgba(255, 255, 255, 0.72) !important;
	border-color: rgba(148, 163, 184, 0.24) !important;
}

.sc-jobs-hero form.job_filters {
	direction: rtl;
	text-align: center;
	width: 100% !important;
	max-width: 1100px !important;
	margin: 0 auto !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	position: static !important;
	left: auto !important;
	right: auto !important;
	margin-left: auto !important;
	margin-right: auto !important;
	margin-top: 0 !important;
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow: visible !important;
}

.sc-jobs-hero .jobs-hero-accent {
	color: var(--tq);
}

.sc-jobs-hero .jobs-hero-banner-content {
	padding-top: 8px;
	margin-bottom: 7px;
	text-align: center;
	direction: rtl;
	width: 100%;
	max-width: 820px;
}

.sc-jobs-hero .jobs-hero-banner-title {
	font-size: clamp(28px, 4vw, 45px);
	font-weight: 800;
	color: var(--text-muted);
	margin: 0 0 16px;
	font-family: "Rubik", "Heebo", sans-serif;
	line-height: 1.25;
}

.sc-jobs-hero .jobs-hero-banner-subtitle {
	font-size: 22px;
	padding-bottom:10px ;
	font-weight: 400;
	color: var(--text-muted);
	margin: 0 0 12px;
	font-family: "Rubik", "Heebo", sans-serif;
	line-height: 1.4;
	text-align: right;
}

.sc-jobs-hero .jobs-hero-banner-count {
	display: block;
	background: transparent;
	border: none;
	padding: 0;
	margin-top: 12px;
	font-size: 22px;
	padding-bottom:10px ;

	color: var(--text-muted);
	font-family: "Rubik", "Heebo", sans-serif;
	font-weight: 700;
}

.sc-jobs-hero .jobs-hero-banner-count strong {
	color: var(--purple);
	font-weight: 700;
}

/* Hide duplicate location when regions plugin adds .search_region */
.sc-jobs-hero .search_jobs:has(.search_region) .search_location {
	display: none !important;
}

/* ---- search_region: must never be pushed offscreen --------------------- */
/* Some Chosen/legacy rules apply left:-9999px via position:absolute on the  */
/* container. Force it back in view. Chosen's own proxy (.select2-container  */
/* / .chosen-container) is positioned relatively inside this cell.           */
.sc-jobs-hero .search_jobs .search_region {
	position: relative !important;
	left: auto !important;
}

/* Hide the native <select#search_region> on DESKTOP only — on mobile the
   native select acts as a functional fallback if Select2 fails to inject.
   Rule lives inside the desktop @media block (see below). */

/* Keep the Chosen/Select2 proxy visible */
.sc-jobs-hero .search_jobs #search_region_chosen,
.sc-jobs-hero .search_jobs #search_location_chosen,
.sc-jobs-hero .search_jobs .search_region .select2-container {
	display: block !important;
	visibility: visible !important;
}

/* -webkit-autofill: neutralise Chrome's blue autofill background on keywords */
.sc-jobs-hero .search_jobs .search_keywords input:-webkit-autofill,
.sc-jobs-hero .search_jobs .search_keywords input:-webkit-autofill:hover,
.sc-jobs-hero .search_jobs .search_keywords input:-webkit-autofill:focus,
.sc-jobs-hero .search_jobs .search_keywords input:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
	-webkit-text-fill-color: #333 !important;
	transition: background-color 5000s ease-in-out 0s !important;
}

/* Remote checkbox sits below the pill */
.sc-jobs-hero .search_jobs .search_remote_position {
	flex: 0 0 100%;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 14px;
	font-family: "Rubik", "Heebo", sans-serif;
	font-size: 14px;
	color: #4a5568;
}

/* =====================================================
   SEARCH PILL — shared field tokens
   ===================================================== */
.sc-jobs-hero .search_jobs {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	position: relative;
	gap: 0;
}

.sc-jobs-hero .search_jobs>div {
	float: none;
	clear: none;
	box-sizing: border-box;
}

.sc-jobs-hero .search_jobs input[type="text"],
.sc-jobs-hero .search_jobs select {
	width: 100%;
	height: 100%;
	min-height: 48px;
	padding: 0 14px;
	border: none;
	border-radius: 0;
	background: transparent;
	font-size: 15px;
	font-family: "Rubik", "Heebo", sans-serif;
	color: #333;
	direction: rtl;
	text-align: right;
	outline: none;
	box-shadow: none;
	line-height: normal;
}

/* Keep the theme-owned location select independent from legacy global
   form.job_filters select styles in joblook.css. */
html body .sc-jobs-hero form.job_filters .search_jobs .search_location select#search_location {
	padding-right: 16px !important;
	padding-left: 36px !important;
	color: #243446 !important;
	font-family: "Rubik", "Heebo", sans-serif !important;
	font-size: 15px !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	background-image: none !important;
}

html body .sc-jobs-hero form.job_filters .search_jobs .search_location select#search_location:focus {
	outline: none !important;
	border-color: var(--tq-border) !important;
	box-shadow: 0 0 0 3px rgba(16, 181, 166, 0.14) !important;
}

.sc-jobs-hero .search_jobs input[type="text"]::placeholder {
	color: #888;
	opacity: 1;
}

.sc-jobs-hero .search_jobs .search_keywords input[type="text"]::placeholder {
	color: var(--text-muted);
	font-size: 16px;
	opacity: 1;
}

/* Chosen + Select2 — fill field cell, no double borders */
.sc-jobs-hero .search_jobs .chosen-container,
.sc-jobs-hero .search_jobs .select2-container {
	width: 100% !important;
	height: 100% !important;
	min-height: 48px;
	direction: rtl;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

.sc-jobs-hero .search_jobs .chosen-container-single .chosen-single,
.sc-jobs-hero .search_jobs .chosen-container-multi .chosen-choices {
	height: 100% !important;
	min-height: 48px;
	line-height: normal !important;
	padding: 0 14px !important;
	border: none !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	display: flex !important;
	align-items: center !important;
	direction: rtl;
	text-align: right;
}

.sc-jobs-hero .search_jobs .chosen-container-single .chosen-single span,
.sc-jobs-hero .search_jobs .chosen-container-multi .chosen-choices li.search-field input[type="text"] {
	color: var(--text-muted) !important;
	font-size: 17px !important;
	font-family: "Rubik", "Heebo", sans-serif !important;
}

.sc-jobs-hero .search_jobs .chosen-container-single .chosen-single div {
	left: 10px !important;
	right: auto !important;
}

.sc-jobs-hero .search_jobs .select2-container--default .select2-selection--single {
	height: 100% !important;
	min-height: 48px;
	border: none !important;
	background: transparent !important;
	border-radius: 0 !important;
	direction: rtl;
}

.sc-jobs-hero .search_jobs .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 48px;
	padding-right: 14px;
	padding-left: 28px;
	color: #333;
	font-size: 15px;
	font-family: "Rubik", "Heebo", sans-serif;
}

.sc-jobs-hero .search_jobs .select2-container--default .select2-selection--single .select2-selection__arrow {
	left: 8px;
	right: auto;
	height: 48px;
}

.sc-jobs-hero .search_jobs .chosen-container-multi .chosen-choices {
	flex-wrap: nowrap;
	/* Scrollable so a newly added pill that doesn't fit can shift into view
	   (see custom.js scroll-into-view on selection) — just no visible
	   scrollbar UI, per the "no scroller" requirement. */
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
	gap: 4px;
}

.sc-jobs-hero .search_jobs .chosen-container-multi .chosen-choices::-webkit-scrollbar {
	display: none;
}

/* Guarantee the multi-select search field always has room for its placeholder.
   Chosen sizes this input inline (can collapse to ~0), which would clip the
   placeholder text — force it to fill the remaining cell width. */
.sc-jobs-hero .search_jobs .chosen-container-multi .chosen-choices li.search-field {
	flex: 1 1 auto !important;
	min-width: 120px !important;
}

.sc-jobs-hero .search_jobs .chosen-container-multi .chosen-choices li.search-field input[type="text"] {
	width: 100% !important;
	min-width: 100px !important;
}

/* Once at least one choice is selected and the dropdown is closed, the
   free-text input is just an empty placeholder sitting next to the pills —
   hide it everywhere (desktop pill row and mobile alike), not only on
   mobile. It reappears automatically while the field is empty or open.
   `.has-choices` is toggled in custom.js on every change event, not derived
   with a CSS :has() selector — Chosen rebuilds the search-field <li> on
   every choice add/remove, so relying on :has() to re-evaluate against that
   churn was unreliable; a JS-driven class reacts to the same event. */
.sc-jobs-hero .search_jobs .chosen-container-multi.has-choices:not(.chosen-container-active) .chosen-choices li.search-field {
	display: none;
}

/* No width/max-width here on purpose — flex: 0 0 auto (set in the mobile
   block) plus white-space: nowrap on the text means each pill's width comes
   straight from its own selected choice's text length, growing or shrinking
   per choice instead of being clamped to one shared size. */
.sc-jobs-hero .search_jobs .chosen-container-multi .chosen-choices li.search-choice {
	background: var(--tq) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 16px !important;
	font-size: 12px !important;
	padding: 2px 22px 2px 10px !important;
	margin: 0 !important;
	line-height: 20px !important;
	white-space: nowrap;
}

.sc-jobs-hero .search_jobs .chosen-container-multi .chosen-choices li.search-choice span {
	white-space: nowrap;
}

/* This theme's chosen.css was stripped of the sprite-image background it
   normally uses to draw the remove "×" (no chosen-sprite.png ships with the
   theme), so the close link renders with no glyph at all — draw one with a
   pseudo-element instead. */
.sc-jobs-hero .search_jobs .chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
	display: flex;
	align-items: center;
	justify-content: center;
}

.sc-jobs-hero .search_jobs .chosen-container-multi .chosen-choices li.search-choice .search-choice-close::before {
	content: "\00d7";
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

.sc-jobs-hero .search_jobs .chosen-container-active .chosen-single,
.sc-jobs-hero .search_jobs .chosen-container-active .chosen-choices {
	border: none !important;
	box-shadow: none !important;
}

.sc-jobs-hero .search_jobs .search_submit input[type="submit"] {
	width: 100%;
	height: 100%;
	min-height: 48px;
	padding: 0 18px;
	border: none;
	border-radius: 14px;
	background: var(--tq);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	font-family: "Rubik", "Heebo", sans-serif;
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(16, 181, 166, 0.35);
	transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
	white-space: nowrap;
}

.sc-jobs-hero .search_jobs .search_submit input[type="submit"]:hover {
	background: var(--tq-dark);
	box-shadow: 0 6px 20px rgba(16, 181, 166, 0.45);
	transform: translateY(-1px);
}

/* Dropdown panels */
.sc-jobs-hero .chosen-drop,
.sc-jobs-hero .select2-dropdown {
	direction: rtl;
	text-align: right;
	border-radius: 12px !important;
	border: 1px solid var(--tq-border) !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
	z-index: 9999;
}

.sc-jobs-hero .chosen-results li.highlighted,
.sc-jobs-hero .select2-results__option--highlighted {
	background: var(--tq) !important;
	color: #fff !important;
}

.sc-jobs-hero .select2-results__option {
	padding: 10px 14px !important;
	color: #243446 !important;
	font-family: "Rubik", "Heebo", sans-serif !important;
	font-size: 14px !important;
	text-align: right !important;
	direction: rtl !important;
}

.sc-jobs-hero .select2-results__option[aria-selected="true"] {
	background: var(--tq-bg) !important;
	color: var(--tq-dark) !important;
}

.sc-jobs-hero .select2-container--default .select2-results__option--highlighted[aria-selected],
.sc-jobs-hero .select2-results__option--highlighted[aria-selected="true"],
.sc-jobs-hero .select2-results__option--highlighted[aria-selected="false"] {
	background: var(--tq) !important;
	color: #fff !important;
}

/* =====================================================
   SELECT2 MULTI-SELECT PILLS — brand styling
   Applies to Select2 choices (e.g. search_region multi-select)
   and normalises float:right legacy behaviour inside flex containers.
   ===================================================== */
.sc-jobs-hero .search_jobs .select2-container--default .select2-selection--multiple .select2-selection__choice {
	background-color: var(--tq) !important;
	border: none !important;
	border-radius: 16px !important;
	color: #fff !important;
	font-size: 12px !important;
	font-family: "Rubik", "Heebo", sans-serif !important;
	padding: 2px 22px 2px 10px !important;
	margin: 2px 0 2px 4px !important;
	line-height: 20px !important;
	float: none !important;
	/* remove legacy float — parent is flex */
	display: inline-flex !important;
	align-items: center !important;
}

.sc-jobs-hero .search_jobs .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
	color: rgba(255, 255, 255, 0.8) !important;
	margin-left: 0 !important;
	margin-right: 6px !important;
	font-size: 14px !important;
	line-height: 1 !important;
}

/* RTL: × button sits on the left end of the pill (visual "end" in Hebrew) */
.sc-jobs-hero [dir="rtl"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
	padding-right: 10px !important;
	padding-left: 24px !important;
	position: relative !important;
}

.sc-jobs-hero [dir="rtl"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
	position: absolute !important;
	left: 6px !important;
	right: auto !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	margin: 0 !important;
}

.sc-jobs-hero .search_jobs .select2-container--default .select2-selection--multiple {
	background: transparent !important;
	border: none !important;
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	min-height: 48px !important;
	padding: 0 8px !important;
}

/* =====================================================
   DESKTOP — single-row pill
   ===================================================== */
@media (min-width: 768px) {
	html body .sc-jobs-hero form.job_filters .search_jobs {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
		height: 68px !important;
		width: 100% !important;
		max-width: 1100px !important;
		margin: 0 auto !important;
		overflow: visible !important;
		background: #ffffff !important;
		box-shadow: 0 4px 25px rgba(0, 0, 0, 0.06) !important;
		border: 1px solid rgba(0, 0, 0, 0.07) !important;
		border-radius: 100px !important;
		padding: 8px !important;
		position: relative !important;
		gap: 0 !important;
	}

	html body .sc-jobs-hero form.job_filters .search_jobs .search_categories,
	html body .sc-jobs-hero form.job_filters .search_jobs .search_region {
		flex: 1.4 1 0 !important;
		min-width: 160px !important;
	}

	html body .sc-jobs-hero form.job_filters .search_jobs .search_keywords {
		flex: 1.2 1 0 !important;
		min-width: 140px !important;
	}

	html body .sc-jobs-hero form.job_filters .search_jobs .search_location {
		flex: 1.2 1 0 !important;
		min-width: 140px !important;
	}

	html body .sc-jobs-hero form.job_filters .search_jobs .search_submit {
		flex: 0 0 158px !important;
		min-width: 140px !important;
	}

	html body .sc-jobs-hero form.job_filters .search_jobs .search_keywords,
	html body .sc-jobs-hero form.job_filters .search_jobs .search_region,
	html body .sc-jobs-hero form.job_filters .search_jobs .search_location {
		display: flex !important;
		align-items: center !important;
		height: 100% !important;
		min-height: unset !important;
		padding: 0 6px !important;
		margin: 0 !important;
		background: transparent !important;
		border: none !important;
		border-left: 1px solid rgba(0, 0, 0, 0.08) !important;
		border-radius: 0 !important;
		float: none !important;
		overflow: visible !important;
	}

	/* Keywords field: no left-border separator (it sits next to categories, which has one) */
	html body .sc-jobs-hero form.job_filters .search_jobs .search_keywords {
		border-left: none !important;
	}

	html body .sc-jobs-hero form.job_filters .search_jobs .search_categories {
		flex: 1.4 1 0 !important;
		min-width: 160px !important;
		display: flex !important;
		align-items: center !important;
		height: 100% !important;
		min-height: unset !important;
		padding: 0 6px !important;
		margin: 0 !important;
		background: transparent !important;
		border: none !important;
		border-left: 1px solid rgba(0, 0, 0, 0.08) !important;
		border-radius: 0 !important;
		float: none !important;
		overflow: visible !important;
	}

	html body .sc-jobs-hero form.job_filters .search_jobs .search_submit {
		border-left: none !important;
		height: 100% !important;
		padding: 0 !important;
	}

	html body .sc-jobs-hero form.job_filters .search_jobs .search_submit input[type="submit"] {
		border-radius: 100px !important;
	}

	/* Remote-work checkbox sits centered BELOW the single-row pill (the pill is
	   flex-nowrap, so it can't drop inside — position it absolutely instead). */
	html body .sc-jobs-hero form.job_filters .search_jobs .search_remote_position {
		position: absolute !important;
		top: calc(100% + 14px) !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		gap: 8px !important;
		margin-top: 0 !important;
	}

	/* Beat legacy per-field bordered inputs inside the pill */
	html body .sc-jobs-hero form.job_filters .search_jobs input[type="text"] {
		background: transparent !important;
		border: none !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		height: 100% !important;
		line-height: normal !important;
	}

	html body .sc-jobs-hero form.job_filters .search_jobs .chosen-container-single .chosen-single,
	html body .sc-jobs-hero form.job_filters .search_jobs .chosen-container-multi .chosen-choices {
		background: transparent !important;
		border: none !important;
		box-shadow: none !important;
		border-radius: 0 !important;
	}

	html body .sc-jobs-hero form.job_filters .search_jobs:has(.search_region) .search_location {
		display: none !important;
	}

	/* On desktop, library (Chosen/Select2) proxy replaces the native region select */
	html body .sc-jobs-hero form.job_filters .search_jobs .search_region select#search_region {
		display: none !important;
		visibility: hidden !important;
	}
}

/* =====================================================
   MOBILE — stacked fields
   ===================================================== */
@media (max-width: 767px) {
	.sc-jobs-hero {
		margin-top: -80px;
		padding: 30px 16px 0px;
	}

	html body .sc-jobs-hero form.job_filters {
		padding: 0 !important;
		margin-bottom: 24px !important;
	}

	html body .sc-jobs-hero form.job_filters .search_jobs {
		display: flex !important;
		flex-direction: column !important;
		width: 100% !important;
		height: auto !important;
		background: transparent !important;
		border: none !important;
		box-shadow: none !important;
		padding: 0 !important;
		gap: 10px !important;
		overflow: visible !important;
	}

	html body .sc-jobs-hero form.job_filters .search_jobs .search_keywords,
	html body .sc-jobs-hero form.job_filters .search_jobs .search_location {
		width: 100% !important;
		height: 52px !important;
		background: #fff !important;
		border: 1px solid #d7e0ea !important;
		border-radius: 12px !important;
		padding: 0 !important;
		box-shadow: none !important;
	}

	html body .sc-jobs-hero form.job_filters .search_jobs .search_categories,
	html body .sc-jobs-hero form.job_filters .search_jobs .search_region {
		width: 100% !important;
		height: auto !important;
		min-height: 52px !important;
		background: #fff !important;
		border: 1px solid #d7e0ea !important;
		border-radius: 12px !important;
		padding: 0 !important;
		box-shadow: none !important;
		display: block !important;
		overflow: visible !important;
	}

	html body .sc-jobs-hero form.job_filters .search_jobs .search_keywords input[type="text"] {
		height: 52px !important;
		line-height: 52px !important;
		padding: 0 16px !important;
		color: #333 !important;
		font-family: "Rubik", "Heebo", sans-serif !important;
		font-size: 15px !important;
		font-weight: 400 !important;
		background: transparent !important;
		border: none !important;
		box-shadow: none !important;
		border-radius: 0 !important;
	}

	html body .sc-jobs-hero form.job_filters .search_jobs .search_keywords input[type="text"]::placeholder {
		color: #000 !important;
		font-family: "Rubik", "Heebo", sans-serif !important;
		font-size: 16px !important;
		font-weight: 400 !important;
		opacity: 1 !important;
	}

	html body .sc-jobs-hero form.job_filters .search_jobs .search_location select#search_location {
		height: 52px !important;
		line-height: 52px !important;
		padding: 0 16px !important;
		color: #333 !important;
		font-family: "Rubik", "Heebo", sans-serif !important;
		font-size: 15px !important;
		background: transparent !important;
		border: none !important;
		box-shadow: none !important;
	}

	/* Category / Region use Chosen on mobile too (consistent with desktop).
	   The native <select> is hidden by JS; style the Chosen widget to fill the
	   white cell so it reads as a normal tappable field. */
	html body .sc-jobs-hero form.job_filters .search_jobs .search_categories select,
	html body .sc-jobs-hero form.job_filters .search_jobs .search_region select {
		display: none !important;
	}

	html body .sc-jobs-hero form.job_filters .search_jobs .search_categories .chosen-container,
	html body .sc-jobs-hero form.job_filters .search_jobs .search_region .chosen-container {
		display: block !important;
		visibility: visible !important;
		width: 100% !important;
		background: transparent !important;
		border: none !important;
		box-shadow: none !important;
	}

	/* The Chosen field body fills the 52px cell. Selected tags stay on a single
	   row (never wrap to a second line) with no scrollbar. Plain `row` here —
	   the form is dir="rtl", and row already flows right-to-left under RTL;
	   row-reverse would cancel that out and flow left-to-right instead. Any
	   pill that doesn't fit is simply clipped, oldest-selection-first (it's
	   first in DOM, so it sits nearest the RTL start/right edge and stays
	   put; newer pills pushed toward the end/left edge clip first).
	   This selector already outranks every other rule targeting these elements
	   (base .sc-jobs-hero rule, chosen.css, media-queries.css), so !important
	   is only kept on the two properties (height, padding, border-radius) that
	   would otherwise lose to the base rule's own !important declarations. */
	html body .sc-jobs-hero form.job_filters .search_jobs .chosen-container-single .chosen-single,
	html body .sc-jobs-hero form.job_filters .search_jobs .chosen-container-multi .chosen-choices {
		min-height: 52px;
		height: 52px !important;
		padding: 6px 16px !important;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: flex-start;
		direction: rtl;
		gap: 6px;
		background: transparent;
		border: none;
		box-shadow: none;
		border-radius: 12px !important;
		/* Scrollable (not hidden) so the row can shift to reveal a newly added
		   pill that doesn't fit — custom.js scrolls it into view on selection.
		   No visible scrollbar UI though, per the "no scroller" requirement. */
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none;
		-ms-overflow-style: none;
		max-height: none;
		line-height: normal;
	}

	html body .sc-jobs-hero form.job_filters .search_jobs .chosen-container-multi .chosen-choices::-webkit-scrollbar {
		display: none;
	}

	html body .sc-jobs-hero form.job_filters .search_jobs .chosen-container-multi .chosen-choices li.search-choice {
		flex: 0 0 auto;
		white-space: nowrap;
	}

	/* The free-text search input only earns its keep while the dropdown is
	   open. Closed + at least one choice already selected → its placeholder/
	   typed value is dead weight sitting next to the pills, so hide it. Still
	   shown when the field is empty (its placeholder is the only visible
	   label, since the real <label> is sr-only) or while actively searching.
	   flex/min-width/width keep !important here because the base (non-mobile)
	   rule further up this file forces the same properties !important to
	   guarantee room for the placeholder on desktop — this is the one place
	   that has to out-muscle it, not a reflex. */
	html body .sc-jobs-hero form.job_filters .search_jobs .chosen-container-multi .chosen-choices li.search-field {
		flex: 0 0 auto !important;
		min-width: 40px !important;
	}

	html body .sc-jobs-hero form.job_filters .search_jobs .chosen-container-multi .chosen-choices li.search-field input[type="text"] {
		width: 40px !important;
		min-width: 40px !important;
		white-space: nowrap;
	}

	/* Empty field, nothing selected yet: the input IS the visible label
	   (placeholder text), so let it take the full row width. Keyed off
	   `.has-choices` (JS-toggled, see custom.js) rather than :has() for the
	   same reason as the hide rule above — reliable across Chosen's DOM churn. */
	html body .sc-jobs-hero form.job_filters .search_jobs .chosen-container-multi:not(.has-choices) .chosen-choices li.search-field {
		flex: 1 1 100% !important;
		min-width: 100% !important;
	}

	html body .sc-jobs-hero form.job_filters .search_jobs .chosen-container-multi:not(.has-choices) .chosen-choices li.search-field input[type="text"] {
		width: 100% !important;
		min-width: 100% !important;
	}

	/* Dropdown open: grow the input to fill whatever space the already-
	   selected pills leave, so the user can see what they're typing. */
	html body .sc-jobs-hero form.job_filters .search_jobs .chosen-container-multi.chosen-container-active .chosen-choices li.search-field {
		flex: 1 1 auto !important;
		min-width: 60px !important;
	}

	html body .sc-jobs-hero form.job_filters .search_jobs .chosen-container-multi.chosen-container-active .chosen-choices li.search-field input[type="text"] {
		width: 100% !important;
		min-width: 60px !important;
	}

	/* Dropdown opens directly beneath the field. The desktop pill uses
	   position:fixed (JS-placed); that must NOT leak onto mobile. */
	html body .sc-jobs-hero .search_jobs .search_categories .chosen-container .chosen-drop,
	html body .sc-jobs-hero .search_jobs .search_region .chosen-container .chosen-drop {
		position: absolute !important;
		top: calc(100% + 4px) !important;
		right: 0 !important;
		left: 0 !important;
		width: auto !important;
		min-width: 0 !important;
	}

	html body .sc-jobs-hero form.job_filters .search_jobs .search_location select#search_location:focus,
	html body .sc-jobs-hero form.job_filters .search_jobs .search_keywords input[type="text"]:focus {
		box-shadow: 0 0 0 3px rgba(16, 181, 166, 0.14) !important;
	}

	html body .sc-jobs-hero form.job_filters .search_jobs .search_submit {
		width: 100% !important;
		height: 52px !important;
	}

	html body .sc-jobs-hero form.job_filters .search_jobs .search_submit input[type="submit"] {
		border-radius: 12px !important;
		min-height: 52px !important;
		padding-top: 0.2em;
	}
}

/* =====================================================
   CHOSEN DROPDOWN — FIX OVERFLOW CLIPPING
   joblook.css sets overflow:hidden on .chosen-container-multi
   which clips the absolutely-positioned .chosen-drop.
   We override it here (loaded after joblook.css).
   ===================================================== */

/* Ensure closed dropdowns are completely inactive and do not block touches */
html body .sc-jobs-hero .chosen-container:not(.chosen-with-drop) .chosen-drop,
html body .sc-jobs-hero .select2-container:not(.select2-container--open) .select2-dropdown {
	display: none !important;
	pointer-events: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	z-index: -1 !important;
}

/* --- Beat joblook.css specificity: transparent bg on the Chosen multi-select --- */
/* joblook.css has (0,3,1): form.job_filters .search_jobs .search_categories .chosen-container-multi */
/* We use (0,4,0): html body .sc-jobs-hero .search_jobs .search_categories .chosen-container-multi */
html body .sc-jobs-hero .search_jobs .search_categories .chosen-container-multi,
html body .sc-jobs-hero .search_jobs .search_region .chosen-container-multi {
	overflow: visible !important;
	/* internal layout only; search_categories clips the box */
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

/* ---- Categories dropdown: position:fixed so it escapes overflow:hidden ---- */
/* The containing element .search_categories has overflow:hidden to clip the box.  */
/* position:fixed escapes all overflow:hidden parents (unless a transform ancestor */
/* is present). top/right are set by positionCategoryDrop() in custom.js.          */
.sc-jobs-hero .search_jobs .search_categories .chosen-container .chosen-drop {
	position: fixed !important;
	z-index: 999999 !important;
	min-width: 220px !important;
	border-radius: 12px !important;
	border: 1px solid var(--tq-border) !important;
	background: #fff !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.13) !important;
}

/* Remove clip when categories dropdown is open */
.sc-jobs-hero .search_jobs .search_categories .chosen-container.chosen-with-drop .chosen-drop {
	clip: auto !important;
	clip-path: none !important;
}

/* search_region dropdown: normal absolute (no overflow:hidden ancestor issue) */
.sc-jobs-hero .search_jobs .search_region .chosen-container.chosen-with-drop .chosen-drop {
	position: absolute !important;
	top: calc(100% + 4px) !important;
	right: 0 !important;
	left: auto !important;
	z-index: 999999 !important;
	min-width: 200px !important;
	border-radius: 12px !important;
	background: #fff !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.13) !important;
	clip: auto !important;
	clip-path: none !important;
}

/* Dropdown results list */
.sc-jobs-hero .search_jobs .chosen-container .chosen-results {
	max-height: 260px !important;
	overflow-y: auto !important;
	display: block !important;
	direction: rtl !important;
	text-align: right !important;
}

.sc-jobs-hero .search_jobs .chosen-container .chosen-results li {
	padding: 8px 14px !important;
	font-family: "Rubik", "Heebo", sans-serif !important;
	font-size: 14px !important;
}

/* If Chosen is active, hide Select2 to prevent layout conflicts and touch blocking */
.sc-jobs-hero .search_jobs .search_categories:has(.chosen-container) .select2-container,
.sc-jobs-hero .search_jobs .search_region:has(.chosen-container) .select2-container,
.sc-jobs-hero .search_jobs .search_categories .chosen-container+.select2-container,
.sc-jobs-hero .search_jobs .search_region .chosen-container+.select2-container {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* Raise z-index of open dropdown containers to stack on top of other filters/tags */
html body .sc-jobs-hero .chosen-container.chosen-with-drop,
html body .job_filters .chosen-container.chosen-with-drop,
html body .sc-jobs-hero .select2-container--open,
html body .job_filters .select2-container--open {
	z-index: 100010 !important;
}

/* Elevate the parent wrapper cells when open to prevent overlapping sibling fields */
html body .sc-jobs-hero form.job_filters .search_jobs .search_categories:has(.chosen-with-drop),
html body .sc-jobs-hero form.job_filters .search_jobs .search_region:has(.chosen-with-drop),
html body .sc-jobs-hero form.job_filters .search_jobs .search_categories:has(.select2-container--open),
html body .sc-jobs-hero form.job_filters .search_jobs .search_region:has(.select2-container--open),
html body form.job_filters .search_jobs .search_categories:has(.chosen-with-drop),
html body form.job_filters .search_jobs .search_region:has(.chosen-with-drop) {
	z-index: 100020 !important;
	position: relative !important;
}

/* Force hide "Load more jobs" button if no listings are found to prevent endless clicks */
.job_listings:has(.no_job_listings_found) .load_more_jobs {
	display: none !important;
}

/* Remove default theme content container padding-top on mobile when hero is present */
@media (max-width: 991px) {
	.page-section:has(.sc-jobs-hero) {
		padding-top: 0 !important;
	}

	.page-section:has(.sc-jobs-hero) .entry-header {
		display: none !important;
	}
}