/**
 * MJ Vacancies frontend styles.
 *
 * Built on top of Blocksy CSS custom properties so the plugin follows the
 * theme palette, typography and the Blocksy Pro color mode switcher.
 * Every variable has a fallback so the markup stays usable on other themes.
 */

.mj-vacancies {
	--mjv-accent: var(--theme-palette-color-1, #2872fa);
	--mjv-accent-hover: var(--theme-palette-color-2, #1559ed);
	--mjv-text: var(--theme-text-color, var(--theme-palette-color-3, #3a4f66));
	--mjv-headings: var(--theme-headings-color, var(--theme-palette-color-4, #192a3d));
	--mjv-border: var(--theme-palette-color-5, #e1e8ed);
	--mjv-surface: var(--theme-palette-color-8, #ffffff);
	--mjv-surface-soft: var(--theme-palette-color-6, #f2f5f7);
	--mjv-radius: var(--theme-border-radius, 6px);
	--mjv-shadow: 0 1px 2px rgba(16, 32, 54, 0.04), 0 6px 18px rgba(16, 32, 54, 0.06);
	--mjv-shadow-hover: 0 2px 4px rgba(16, 32, 54, 0.06), 0 14px 32px rgba(16, 32, 54, 0.12);
	--mjv-badge-bg: rgba(40, 114, 250, 0.1);

	color: var(--mjv-text);
	font-family: inherit;
}

@supports (background: color-mix(in srgb, red 50%, transparent)) {
	.mj-vacancies {
		--mjv-badge-bg: color-mix(in srgb, var(--mjv-accent) 12%, transparent);
	}
}

/* ------------------------------------------------------------------ */
/* Archive page                                                        */
/* ------------------------------------------------------------------ */

.mj-vacancies-archive {
	padding-block: 48px 88px;
}

/* Width fallback for non-Blocksy themes: zero specificity, so the theme's
   own .ct-container (or any container rules) always win. */
:where(.mj-vacancies-archive__container) {
	max-width: 1290px;
	margin-inline: auto;
	padding-inline: 24px;
	box-sizing: border-box;
}

.mj-vacancies-archive__header {
	margin-bottom: 15px;
}

.mj-vacancies-archive__title {
	margin: 0 0 10px;
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 700;
	line-height: 1.2;
	color: var(--theme-headings-color, var(--theme-palette-color-4, #192a3d));
}

.mj-vacancies-archive__subtitle {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--theme-text-color, var(--theme-palette-color-3, #3a4f66));
	opacity: 0.85;
}

/* ------------------------------------------------------------------ */
/* Filters                                                             */
/* ------------------------------------------------------------------ */

.mj-vacancies__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
	margin-bottom: 28px;
	padding: 16px;
	border: 1px solid var(--mjv-border);
	border-radius: var(--mjv-radius);
	background: var(--mjv-surface);
	box-shadow: var(--mjv-shadow);
}

.mj-vacancies__filters-search {
	position: relative;
	flex: 1 1 24px;
	min-width: 200px;
	display: flex;
}

.mj-vacancies__filters-search-icon {
	position: absolute;
	top: 50%;
	inset-inline-start: 14px;
	width: 16px;
	height: 16px;
	transform: translateY(-50%);
	color: var(--mjv-text);
	opacity: 0.55;
	pointer-events: none;
}

.mj-vacancies__filters input[type="search"],
.mj-vacancies__filters select {
	width: 100%;
	min-height: var(--theme-form-field-height, 44px);
	padding: 0 14px;
	border: 1px solid var(--theme-form-field-border-initial-color, var(--mjv-border));
	border-radius: var(--mjv-radius);
	background-color: var(--theme-form-field-background-initial-color, var(--mjv-surface));
	color: var(--theme-form-text-initial-color, var(--mjv-text));
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mj-vacancies__filters input[type="search"] {
	padding-inline-start: 40px;
}

.mj-vacancies__filters select {
	flex: 0 1 auto;
	min-width: 170px;
	max-width: 260px;
	cursor: pointer;
	appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%23838f9d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='m1 1 4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-inline-end: 34px;
}

.mj-vacancies__filters input[type="search"]:focus,
.mj-vacancies__filters select:focus {
	outline: none;
	border-color: var(--theme-form-field-border-focus-color, var(--mjv-accent));
	background-color: var(--theme-form-field-background-focus-color, var(--theme-form-field-background-initial-color, var(--mjv-surface)));
	box-shadow: 0 0 0 3px var(--mjv-badge-bg);
}

.mj-vacancies__filters-submit,
.mj-vacancies__load-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--theme-button-min-height, var(--theme-form-field-height, 44px));
	padding: var(--theme-button-padding, 5px 22px);
	border: none;
	border-radius: var(--mjv-radius);
	background: var(--theme-button-background-initial-color, var(--mjv-accent));
	color: var(--theme-button-text-initial-color, #ffffff);
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.mj-vacancies__filters-submit:hover,
.mj-vacancies__load-more:hover {
	background: var(--theme-button-background-hover-color, var(--mjv-accent-hover));
	color: var(--theme-button-text-hover-color, #ffffff);
}

.mj-vacancies__filters-reset {
	display: none;
	align-items: center;
	justify-content: center;
	min-height: var(--theme-button-min-height, var(--theme-form-field-height, 44px));
	padding: 5px 16px;
	border: 1px solid var(--mjv-border);
	border-radius: var(--mjv-radius);
	background: transparent;
	color: var(--mjv-text);
	font-family: inherit;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.mj-vacancies__filters.has-active-filters .mj-vacancies__filters-reset {
	display: inline-flex;
}

.mj-vacancies__filters-reset:hover {
	border-color: var(--mjv-accent);
	color: var(--mjv-accent);
}

/* ------------------------------------------------------------------ */
/* Multi-select dropdown (cities / raions)                             */
/* ------------------------------------------------------------------ */

.mj-vacancies__filters-multi {
	position: relative;
	flex: 0 1 auto;
	min-width: 190px;
	max-width: 280px;
}

.mj-vacancies__filters-multi-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-height: var(--theme-form-field-height, 44px);
	padding: 0 14px;
	border: 1px solid var(--theme-form-field-border-initial-color, var(--mjv-border));
	border-radius: var(--mjv-radius);
	background-color: var(--theme-form-field-background-initial-color, var(--mjv-surface));
	color: var(--theme-form-text-initial-color, var(--mjv-text));
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
	text-align: start;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mj-vacancies__filters-multi-toggle:focus,
.mj-vacancies__filters-multi.is-open .mj-vacancies__filters-multi-toggle {
	outline: none;
	border-color: var(--theme-form-field-border-focus-color, var(--mjv-accent));
	box-shadow: 0 0 0 3px var(--mjv-badge-bg);
}

.mj-vacancies__filters-multi-label {
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mj-vacancies__filters-multi-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 100px;
	background: var(--mjv-accent);
	color: #ffffff;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
}

.mj-vacancies__filters-multi-count[hidden] {
	display: none;
}

.mj-vacancies__filters-multi-chevron {
	flex: 0 0 auto;
	width: 10px;
	height: 6px;
	opacity: 0.6;
	transition: transform 0.15s ease;
}

.mj-vacancies__filters-multi.is-open .mj-vacancies__filters-multi-chevron {
	transform: rotate(180deg);
}

.mj-vacancies__filters-multi-panel {
	position: absolute;
	top: calc(100% + 6px);
	inset-inline: 0;
	z-index: 30;
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-height: 320px;
	overflow-y: auto;
	padding: 10px;
	border: 1px solid var(--mjv-border);
	border-radius: var(--mjv-radius);
	background: var(--mjv-surface);
	box-shadow: var(--mjv-shadow-hover);
}

.mj-vacancies__filters-multi-panel[hidden] {
	display: none;
}

.mj-vacancies__filters-multi-group {
	margin: 8px 4px 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mjv-text);
	opacity: 0.55;
}

.mj-vacancies__filters-multi-group:first-child {
	margin-top: 2px;
}

.mj-vacancies__filters-multi-option {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	border-radius: var(--mjv-radius);
	font-size: 14px;
	line-height: 1.4;
	cursor: pointer;
	transition: background-color 0.1s ease;
}

.mj-vacancies__filters-multi-option:hover {
	background: var(--mjv-surface-soft);
}

.mj-vacancies__filters-multi-option input[type="checkbox"] {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--mjv-accent);
	cursor: pointer;
}

/* ------------------------------------------------------------------ */
/* Off-canvas filters (tablet / mobile)                                */
/*                                                                     */
/* The panel reuses Blocksy's .ct-panel markup, so on Blocksy the      */
/* open/close mechanics and animations come from the theme itself.     */
/* The :where() blocks below replicate the theme baseline with zero    */
/* specificity, keeping the panel functional on any other theme.       */
/* ------------------------------------------------------------------ */

/* Fixed toggle button: vertically centered at the right screen edge. */
.mj-vacancies__filters-toggle {
	display: none;
}

@media (max-width: 999.98px) {
	.mj-vacancies__filters-toggle {
		position: fixed;
		top: 50%;
		inset-inline-end: 0;
		transform: translateY(-50%);
		z-index: 9999;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 46px;
		height: 56px;
		padding: 0;
		border: none;
		border-start-start-radius: var(--mjv-radius);
		border-end-start-radius: var(--mjv-radius);
		border-start-end-radius: 0;
		border-end-end-radius: 0;
		background: var(--theme-button-background-initial-color, var(--mjv-accent));
		color: var(--theme-button-text-initial-color, #ffffff);
		box-shadow: var(--mjv-shadow-hover);
		cursor: pointer;
		transition: background-color 0.15s ease;
	}

	.mj-vacancies__filters-toggle:hover {
		background: var(--theme-button-background-hover-color, var(--mjv-accent-hover));
	}

	.mj-vacancies__filters-toggle svg {
		width: 20px;
		height: 20px;
	}
}

/* Panel baseline (zero specificity fallback, mirrors Blocksy values). */
:where(#mj-filters-panel) {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: none;
	flex-direction: column;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease-in-out;
}

:where(#mj-filters-panel) :where(.ct-panel-inner) {
	position: absolute;
	inset-block: 0;
	align-self: flex-end;
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
	max-width: var(--side-panel-width, 400px);
	box-shadow: var(--mjv-shadow-hover);
	transform: translate3d(var(--theme-panel-reveal-right, 20%), 0, 0);
	transition: transform 0.25s ease-in-out;
}

:where(#mj-filters-panel) :where(.ct-panel-actions) {
	display: flex;
	align-items: center;
	padding: 30px var(--panel-padding, 35px) 0;
}

:where(#mj-filters-panel) :where(.ct-panel-content) {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

:where(#mj-filters-panel) :where(.ct-panel-content-inner) {
	overflow-y: auto;
	padding: var(--panel-padding, 35px);
}

/* Panel visuals (apply on Blocksy and on the fallback alike). */
#mj-filters-panel {
	--side-panel-width: min(420px, 88vw);
	background: rgba(18, 21, 25, 0.55);
}

#mj-filters-panel .ct-panel-inner {
	background: var(--mjv-surface);
}

#mj-filters-panel .ct-panel-actions {
	justify-content: space-between;
	gap: 12px;
}

#mj-filters-panel .ct-panel-heading {
	font-size: 16px;
	font-weight: 600;
	color: var(--mjv-headings);
}

#mj-filters-panel .ct-toggle-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: none;
	border-radius: 100%;
	background: var(--mjv-surface-soft);
	color: var(--mjv-text);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

#mj-filters-panel .ct-toggle-close:hover {
	background: var(--mjv-badge-bg);
	color: var(--mjv-accent);
}

#mj-filters-panel .ct-toggle-close svg {
	width: 12px;
	height: 12px;
	fill: currentColor;
}

/* Filter form placed inside the panel: vertical, full-width fields. */
#mj-filters-panel .mj-vacancies__filters {
	flex-direction: column;
	align-items: stretch;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

#mj-filters-panel .mj-vacancies__filters select {
	max-width: none;
	min-width: 0;
}

#mj-filters-panel .mj-vacancies__filters-submit,
#mj-filters-panel .mj-vacancies__filters-reset {
	width: 100%;
}

#mj-filters-panel .mj-vacancies__filters-multi {
	max-width: none;
	min-width: 0;
}

/* Inside the off-canvas panel the options list expands in-flow, so it is
   not clipped by the panel's scroll container. */
#mj-filters-panel .mj-vacancies__filters-multi-panel {
	position: static;
	margin-top: 6px;
	max-height: 260px;
}

/* Fallback open state (non-Blocksy themes; toggled by frontend.js). */
#mj-filters-panel.mj-open {
	display: flex;
}

#mj-filters-panel.mj-open.mj-open--in {
	opacity: 1;
	pointer-events: auto;
}

#mj-filters-panel.mj-open.mj-open--in .ct-panel-inner {
	transform: translate3d(0, 0, 0);
}

body.mj-panel-open {
	overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* Toolbar / counter                                                   */
/* ------------------------------------------------------------------ */

.mj-vacancies__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.mj-vacancies__count {
	font-size: 14px;
	font-weight: 500;
	color: var(--mjv-text);
	opacity: 0.75;
}

/* ------------------------------------------------------------------ */
/* Cards grid                                                          */
/* ------------------------------------------------------------------ */

.mj-vacancies__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 20px;
	transition: opacity 0.2s ease;
}

.mj-vacancies.is-loading .mj-vacancies__list {
	opacity: 0.45;
	pointer-events: none;
}

.mj-vacancies__item {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px;
	border: 1px solid var(--mjv-border);
	border-radius: var(--mjv-radius);
	background: var(--mjv-surface);
	box-shadow: var(--mjv-shadow);
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.mj-vacancies__item:hover {
	transform: translateY(-2px);
	border-color: var(--mjv-accent);
	box-shadow: var(--mjv-shadow-hover);
}

.mj-vacancies__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.mj-vacancies__badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 100px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.5;
}

.mj-vacancies__badge--category {
	background: var(--mjv-badge-bg);
	color: var(--mjv-accent);
}

.mj-vacancies__badge--level {
	background: var(--mjv-surface-soft);
	color: var(--mjv-text);
}

.mj-vacancies__title {
	margin: 0;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--mjv-headings);
}

.mj-vacancies__title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease;
}

.mj-vacancies__title a:hover {
	color: var(--theme-link-hover-color, var(--mjv-accent));
}

.mj-vacancies__meta-row {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	font-size: 14px;
	line-height: 1.45;
	color: var(--mjv-text);
	opacity: 0.85;
}

.mj-vacancies__meta-row svg {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	margin-top: 2px;
	opacity: 0.7;
}

.mj-vacancies__details {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 2px;
}

.mj-vacancies__detail {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--mjv-text);
	opacity: 0.8;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mj-vacancies__footer {
	margin-top: auto;
	padding-top: 12px;
}

.mj-vacancies__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--theme-link-initial-color, var(--mjv-accent));
	text-decoration: none;
	transition: gap 0.15s ease, color 0.15s ease;
}

.mj-vacancies__link svg {
	width: 14px;
	height: 14px;
	transition: transform 0.15s ease;
}

.mj-vacancies__link:hover {
	color: var(--theme-link-hover-color, var(--mjv-accent-hover));
}

.mj-vacancies__link:hover svg {
	transform: translateX(3px);
}

/* ------------------------------------------------------------------ */
/* Empty state                                                         */
/* ------------------------------------------------------------------ */

.mj-vacancies__empty {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 56px 24px;
	border: 1px dashed var(--mjv-border);
	border-radius: var(--mjv-radius);
	background: var(--mjv-surface-soft);
	text-align: center;
}

.mj-vacancies__empty-icon {
	width: 40px;
	height: 40px;
	color: var(--mjv-text);
	opacity: 0.4;
	margin-bottom: 4px;
}

.mj-vacancies__empty-title {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--mjv-headings);
}

.mj-vacancies__empty-hint {
	margin: 0;
	font-size: 14px;
	color: var(--mjv-text);
	opacity: 0.7;
}

/* ------------------------------------------------------------------ */
/* Load more                                                           */
/* ------------------------------------------------------------------ */

.mj-vacancies__actions {
	display: flex;
	justify-content: center;
	margin-top: 28px;
}

.mj-vacancies__actions[hidden] {
	display: none;
}

.mj-vacancies__load-more:disabled {
	opacity: 0.6;
	cursor: wait;
}

/* ------------------------------------------------------------------ */
/* Dark mode (Blocksy Pro color mode switcher)                         */
/*                                                                     */
/* Blocksy swaps the palette variables automatically, these rules only */
/* adjust what the palette cannot express: shadows and translucent     */
/* badge backgrounds.                                                  */
/* ------------------------------------------------------------------ */

[data-color-mode*="dark"] .mj-vacancies {
	--mjv-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 6px 18px rgba(0, 0, 0, 0.3);
	--mjv-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.3), 0 14px 32px rgba(0, 0, 0, 0.45);
	--mjv-badge-bg: rgba(255, 255, 255, 0.08);
}

@supports (background: color-mix(in srgb, red 50%, transparent)) {
	[data-color-mode*="dark"] .mj-vacancies {
		--mjv-badge-bg: color-mix(in srgb, var(--mjv-accent) 22%, transparent);
	}
}

@media (prefers-color-scheme: dark) {
	[data-color-mode="os-default"] .mj-vacancies {
		--mjv-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 6px 18px rgba(0, 0, 0, 0.3);
		--mjv-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.3), 0 14px 32px rgba(0, 0, 0, 0.45);
		--mjv-badge-bg: rgba(255, 255, 255, 0.08);
	}

	@supports (background: color-mix(in srgb, red 50%, transparent)) {
		[data-color-mode="os-default"] .mj-vacancies {
			--mjv-badge-bg: color-mix(in srgb, var(--mjv-accent) 22%, transparent);
		}
	}
}

/* Smooth color transition while Blocksy animates the mode switch. */
html[data-color-mode*="updating"] .mj-vacancies__item,
html[data-color-mode*="updating"] .mj-vacancies__filters {
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

@media (max-width: 689px) {
	.mj-vacancies__filters {
		flex-direction: column;
	}

	.mj-vacancies__filters select {
		max-width: none;
		min-width: 0;
	}

	.mj-vacancies__filters-submit,
	.mj-vacancies__filters-reset {
		width: 100%;
	}

	.mj-vacancies__list {
		grid-template-columns: 1fr;
	}
}