/*
 * Sidebar layout for the [jobs] shortcode.
 *
 * div.job_listings is the wrapper the plugin outputs. Its children are:
 *   form.job_filters        (keywords or city, state, job type drawer, category, buttons)
 *   div.wpjm-sort-bar       (sort dropdown, added by this plugin)
 *   ul.job_listings         (results)
 *   a.load_more_jobs / nav.job-manager-pagination
 * so a two-column grid on the wrapper is all that is needed, no template
 * overrides. Only wrappers that contain a filter form get the layout, so
 * [jobs show_filters="false"] and widgets are untouched.
 */

:root {
	--wpjm-sidebar-width: 290px;
	--wpjm-sidebar-gap: 28px;
	/* Raise this if you have a sticky site header. */
	--wpjm-sidebar-top: 24px;
	/* Width of the whole filters + results block on desktop. Breaks out of the
	   theme's content column and centres itself. Use e.g. 1080px for a fixed
	   width, or 100% to stay inside the theme's column. */
	--wpjm-listings-width: min(80vw, 1080px);
	/* How far the Sort by control sits above the filters and results. Lower it
	   to move the dropdown down, raise it to move it up, until it lines up with
	   the bottom of your page heading ("Jobs"). */
	--wpjm-sort-lift: 14px;
	/* Background of the Job type header while the drawer is open or focused.
	   This is the one value that is not a brand colour (you asked for #e7e7e7).
	   Brand neutrals to try: var(--twc-milky) or var(--twc-hazy). */
	--wpjm-drawer-bg: #e7e7e7;
}

/* ---------- Layout ---------- */
@media (min-width: 900px) {
	body div.job_listings:has(> form.job_filters) {
		display: grid;
		grid-template-columns: var(--wpjm-sidebar-width) minmax(0, 1fr);
		column-gap: var(--wpjm-sidebar-gap);
		align-items: start;
		width: var(--wpjm-listings-width);
		max-width: 100vw;
		/* Centre on the page even when the theme column is narrower. */
		margin-inline: calc(50% - var(--wpjm-listings-width) / 2);
	}

	body div.job_listings > form.job_filters {
		grid-column: 1;
		grid-row: 1 / span 20;
		position: sticky;
		top: var(--wpjm-sidebar-top);
		margin: 0;
		max-height: calc(100vh - var(--wpjm-sidebar-top) * 2);
		overflow-y: auto;
	}

	/* The sort bar sits above the block, on the same line as the page heading,
	   so the first listing lines up with the top of the filter card. */
	body div.job_listings:has(> form.job_filters) {
		position: relative;
	}

	body div.job_listings > .wpjm-sort-bar {
		position: absolute;
		right: 0;
		bottom: 100%;
		margin: 0 0 var(--wpjm-sort-lift);
	}

	body div.job_listings > ul.job_listings,
	body div.job_listings > a.load_more_jobs,
	body div.job_listings > nav.job-manager-pagination {
		grid-column: 2;
	}
}

/* ---------- Sidebar card ---------- */
body form.job_filters {
	background: var(--wpjm-surface);
	border: 1px solid var(--wpjm-border);
	border-radius: var(--wpjm-radius);
	padding: 0;
}

/* ul.job_types is a sibling of .search_jobs, not a child, so dissolve
   .search_jobs and lay every group out as one flex column on the form. That
   is what lets Job type sit between Location and the rest. */
body form.job_filters {
	display: flex;
	flex-direction: column;
}

body form.job_filters .search_jobs {
	display: contents;
}

/* Cancel the plugin's floated half-width columns and hidden labels. */
/* :is() raises specificity above the plugin's `.search_jobs div.search_*` rules. */
body form.job_filters .search_jobs > div:is(.search_keywords, .search_location, .search_state, .search_categories, .search_submit, .search_reset) {
	float: none;
	width: 100%;
	box-sizing: border-box; /* the plugin's own CSS does this, but do not depend on it */
	clear: none;
	padding: 16px 18px;
	border-bottom: 1px solid var(--wpjm-border);
}

body form.job_filters .search_jobs > div:is(.search_keywords, .search_location, .search_state, .search_categories, .search_submit, .search_reset) label {
	display: block;
	margin-bottom: 6px;
	font-size: var(--wpjm-fs-label);
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--wpjm-muted);
}

/* The plugin's `<div style="clear: both">` spacer. */
body form.job_filters .search_jobs > div[style] {
	display: none;
}

body form.job_filters input[type="text"],
body form.job_filters select {
	padding: 0.55em 0.7em;
}

body form.job_filters input[type="text"],
body form.job_filters select,
body form.job_filters .select2-container {
	width: 100% !important;
	box-sizing: border-box;
}

/* ---------- Order of the groups ---------- */
body form.job_filters .search_keywords { order: 1; }
body form.job_filters .search_location { order: 2; }
body form.job_filters .search_state { order: 3; }
body form.job_filters .wpjm-drawer,
body form.job_filters ul.job_types { order: 4; }
body form.job_filters .search_categories { order: 5; }
body form.job_filters .search_submit { order: 6; }
body form.job_filters .search_reset { order: 7; }
body form.job_filters .showing_jobs { order: 8; }

/* Drawer: <details> holding the job types and the remote checkbox. */
body form.job_filters details.wpjm-drawer {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0 !important;
	border-bottom: 1px solid var(--wpjm-border) !important;
	box-shadow: none;
}

body form.job_filters .wpjm-drawer > summary {
	/* Themes often add borders and backgrounds to <summary>. Reset them. */
	margin: 0;
	background: transparent;
	border: 0 !important;
	box-shadow: none;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 16px 18px;
	cursor: pointer;
	list-style: none;
	font-size: var(--wpjm-fs-label);
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--wpjm-muted);
}

body form.job_filters .wpjm-drawer__hint {
	margin: 0 12px 0 auto;
	font-size: var(--wpjm-fs-small);
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wpjm-muted);
}

body form.job_filters .wpjm-drawer__hint.is-active {
	color: var(--wpjm-accent);
	font-weight: 600;
}

body form.job_filters .wpjm-drawer > summary::-webkit-details-marker {
	display: none;
}

/* The caret: points down when closed, up when open. */
body form.job_filters .wpjm-drawer > summary::after {
	content: "";
	width: 7px;
	height: 7px;
	margin: -4px 2px 0 0;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.15s ease, margin 0.15s ease;
}

body form.job_filters .wpjm-drawer[open] > summary::after {
	margin-top: 4px;
	transform: rotate(-135deg);
}

/* Themes draw an outline on :focus, which shows after a mouse click. The
   sidebar scrolls, so the outline is clipped at the sides and only its top and
   bottom edges appear, as dark lines. No outline for mouse clicks, and an inset
   one (kept inside the box, so never clipped) for keyboard users. */
body form.job_filters .wpjm-drawer > summary:focus,
body form.job_filters .wpjm-drawer > summary:active {
	outline: none !important;
	box-shadow: none !important;
}

/* Highlight the header with a background instead of a border. */
body form.job_filters .wpjm-drawer[open] > summary,
body form.job_filters .wpjm-drawer > summary:focus {
	background: var(--wpjm-drawer-bg);
}

body form.job_filters .wpjm-drawer > summary:focus-visible {
	outline: 2px solid var(--wpjm-accent) !important;
	outline-offset: -2px !important;
}

body form.job_filters .wpjm-drawer__body {
	padding: 0 18px 14px;
}

body form.job_filters .wpjm-drawer ul.job_types {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--wpjm-fs-body);
	background: transparent;
	border: 0;
}

/* Remote positions checkbox, below the job types inside the drawer. */
body form.job_filters .wpjm-drawer .search_remote_position {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	padding-top: 12px;
	border-top: 1px solid var(--wpjm-border);
}

body form.job_filters .wpjm-drawer .search_remote_position input {
	width: auto !important;
	margin: 0;
}

body form.job_filters .wpjm-drawer .search_remote_position label {
	font-size: var(--wpjm-fs-body);
	display: inline;
	margin: 0;
	font-weight: 500;
}

body form.job_filters ul.job_types li {
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
}

body form.job_filters ul.job_types label {
	font-size: var(--wpjm-fs-body);
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 0;
	cursor: pointer;
	font-weight: 500;
}

body form.job_filters ul.job_types label input {
	order: -2;
	width: auto !important;
	margin: 0;
}

body form.job_filters ul.job_types label::after {
	/* Colour dot, matched to the job type colours in wpjm-custom.css. */
	content: "";
	order: -1;
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--wpjm-muted);
}

body form.job_filters ul.job_types label.full-time::after { background: var(--wpjm-type-full-time); }
body form.job_filters ul.job_types label.part-time::after { background: var(--wpjm-type-part-time); }
body form.job_filters ul.job_types label.internship::after { background: var(--wpjm-type-internship); }
body form.job_filters ul.job_types label.freelance::after { background: var(--wpjm-type-freelance); }
body form.job_filters ul.job_types label.temporary::after { background: var(--wpjm-type-temporary); }

/* ---------- Submit + reset ---------- */
body form.job_filters .search_jobs div.search_submit {
	border-bottom: 0;
}

body form.job_filters .search_submit input[type="submit"] {
	width: 100%;
	padding: 0.7em 1em;
}

/* ---------- Small screens: filters stack above the results ---------- */
@media (max-width: 899px) {
	body div.job_listings > form.job_filters {
		position: static;
		max-height: none;
		margin-bottom: var(--wpjm-gap);
	}

	/* Two-up for the short fields so the stack is not endless. */
	body form.job_filters {
		flex-direction: row;
		flex-wrap: wrap;
	}

	body div.job_listings > .wpjm-sort-bar {
		justify-content: flex-end;
	}

	body form.job_filters .search_jobs > div,
	body form.job_filters .wpjm-drawer,
	body form.job_filters ul.job_types {
		flex: 1 1 100%;
		box-sizing: border-box;
	}

	body form.job_filters .search_jobs div.search_keywords,
	body form.job_filters .search_jobs div.search_location {
		flex: 1 1 50%;
		width: 50%;
		box-sizing: border-box;
	}
}

@media (max-width: 560px) {
	body form.job_filters .search_jobs div.search_keywords,
	body form.job_filters .search_jobs div.search_location {
		flex-basis: 100%;
		width: 100%;
	}
}

/* The "Showing N jobs" message is not used. Hidden here as well, because the
   plugin's JS shows it again with an inline style after each search. */
body form.job_filters .showing_jobs {
	display: none !important;
}

/* Search Jobs sits right above Reset Filters. */
body form.job_filters .search_jobs div.search_submit {
	padding-bottom: 8px;
}

body form.job_filters .search_jobs div.search_reset {
	padding-top: 0;
	border-bottom: 0;
}

body form.job_filters .search_reset button.reset {
	width: 100%;
	padding: 0.7em 1em;
	background: transparent;
	color: var(--wpjm-accent);
	border: 1px solid var(--wpjm-accent);
	border-radius: 6px;
	font-weight: 600;
	cursor: pointer;
}

body form.job_filters .search_reset button.reset:hover,
body form.job_filters .search_reset button.reset:focus-visible {
	background: var(--wpjm-accent);
	color: var(--wpjm-accent-contrast);
}

/* ---------- Sort by (top right of the results) ---------- */
body .wpjm-sort-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
}

body .wpjm-sort-bar label {
	font-size: var(--wpjm-fs-label);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wpjm-muted);
}

body .wpjm-sort-bar select {
	width: auto;
	min-width: 170px;
	padding: 0.45em 2em 0.45em 0.7em;
	border: 1px solid var(--wpjm-input-border);
	border-radius: 6px;
	background-color: var(--wpjm-surface);
	color: var(--wpjm-text);
}

/* Remote checkbox when there is no job type list (e.g. a job type archive),
   so it is not inside the drawer. */
body form.job_filters > .search_remote_position {
	order: 4;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 16px 18px;
	border-bottom: 1px solid var(--wpjm-border);
}

body form.job_filters > .search_remote_position input {
	width: auto !important;
	margin: 0;
}

body form.job_filters > .search_remote_position label {
	font-size: var(--wpjm-fs-body);
	display: inline;
	margin: 0;
	font-weight: 500;
}

/* The Location box is hidden: city and ZIP are searched through Keywords, and
   State / Province has its own dropdown. The field stays in the form, empty, so
   the plugin's search still works. Delete this rule to show it again. */
body form.job_filters .search_jobs div.search_location {
	display: none;
}

/* ---------- Category drawer ----------
   includes/category-filter.php prints a drawer of checkboxes like Job type. The
   plugin's own category dropdown stays in the page (the plugin's JavaScript reads
   it, and js/sidebar.js keeps it in step with the checkboxes) but is hidden. */
body form.job_filters .search_jobs div.search_categories {
	display: none;
}

body form.job_filters .wpjm-drawer ul.wpjm-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--wpjm-fs-body);
}

body form.job_filters .wpjm-drawer ul.wpjm-checklist li {
	margin: 0;
	padding: 0;
}

body form.job_filters .wpjm-drawer ul.wpjm-checklist label {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 0;
	cursor: pointer;
	font-size: var(--wpjm-fs-body);
	font-weight: 500;
	line-height: 1.4;
}

body form.job_filters .wpjm-drawer ul.wpjm-checklist input {
	flex: none;
	width: auto !important;
	margin: 0;
}

/* The number of listings, pushed to the right edge. */
body form.job_filters .wpjm-checklist__count {
	margin-left: auto;
	font-size: var(--wpjm-fs-small);
	color: var(--wpjm-muted);
}

/* ---------- "Filter" bar on small screens ----------
   includes/sidebar-filters.php prints the bar before the form, and js/sidebar.js
   adds .wpjm-filters-open to the listings wrapper when it is opened. Closed to
   start with. On wider screens the bar is hidden and the sidebar always shows. */
body div.job_listings > .wpjm-filter-toggle {
	display: none;
}

@media (max-width: 899px) {
	body div.job_listings > .wpjm-filter-toggle {
		display: flex;
		align-items: center;
		width: 100%;
		margin: 0 0 12px;
		padding: 14px 18px;
		font-family: inherit;
		text-align: left;
		color: var(--wpjm-muted);
		background: var(--wpjm-surface);
		border: 1px solid var(--wpjm-border);
		border-radius: var(--wpjm-radius);
		cursor: pointer;
	}

	body div.job_listings > .wpjm-filter-toggle .wpjm-filter-toggle__label {
		font-size: var(--wpjm-fs-label);
		font-weight: 700;
		letter-spacing: 0.06em;
		line-height: 1.3;
		text-transform: uppercase;
	}

	body div.job_listings > .wpjm-filter-toggle .wpjm-filter-toggle__hint {
		margin: 0 12px 0 auto;
		font-size: var(--wpjm-fs-small);
		font-weight: 500;
		color: var(--wpjm-accent);
	}

	/* The caret, down when closed and up when open, like the drawers. */
	body div.job_listings > .wpjm-filter-toggle::after {
		content: "";
		width: 7px;
		height: 7px;
		margin: -4px 2px 0 0;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		transition: transform 0.15s ease, margin 0.15s ease;
	}

	body div.job_listings.wpjm-filters-open > .wpjm-filter-toggle {
		margin-bottom: 0;
		background: var(--wpjm-drawer-bg);
		border-radius: var(--wpjm-radius) var(--wpjm-radius) 0 0;
	}

	body div.job_listings.wpjm-filters-open > .wpjm-filter-toggle::after {
		margin-top: 4px;
		transform: rotate(-135deg);
	}

	body div.job_listings > .wpjm-filter-toggle:focus-visible {
		outline: 2px solid var(--wpjm-accent);
		outline-offset: -2px;
	}

	/* The filters themselves: hidden until the bar is opened, then joined to it. */
	body div.job_listings:has(> .wpjm-filter-toggle) > form.job_filters {
		display: none;
	}

	body div.job_listings.wpjm-filters-open > form.job_filters {
		display: flex;
		margin-top: 0;
		border-top: 0;
		border-radius: 0 0 var(--wpjm-radius) var(--wpjm-radius);
	}
}