/* =========================================================================
   JobsKhabri — inner pages

   Companion to home-premium.css, which carries the design tokens and the
   shared components (.jk-wrap, .jk-btn, .jk-post, .jk-chip, the footer). Both
   files are scoped under .jk-home, so the inner-page templates open with
   `<main class="jk-home jk-inner">` and inherit the lot.

   Covers: the page hero, long-form content, the blog archive and single post,
   the single job listing, and the Explore page.
   ========================================================================= */


/* Shared chevron mask, used wherever a Select2 caret is rebuilt. */
:root {
	--jk-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E");
}

/* =========================================================================
   Page hero
   ========================================================================= */

.jk-phero {
	position: relative;
	isolation: isolate;
	padding: 128px 0 60px;
	background: var(--jk-ink);
	color: #fff;
	overflow: hidden;
}

.jk-phero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
}

/* The homepage glows are sized for a 92px-tall hero; scaled down they sit at
   the right weight behind a band this short. */
.jk-phero .jk-hero__glow { transform: scale(.62); opacity: .42; }

.jk-phero__inner { position: relative; }

.jk-phero__eyebrow {
	display: inline-block;
	margin-bottom: 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--jk-brand-300);
}

.jk-phero__title {
	max-width: 22ch;
	font-size: clamp(30px, 4.2vw, 48px);
	font-weight: 800;
	letter-spacing: -.032em;
	line-height: 1.1;
	color: #fff;
}

.jk-phero__sub {
	margin-top: 16px;
	max-width: 62ch;
	font-size: clamp(15px, 1.3vw, 17px);
	line-height: 1.7;
	color: #a9b4c8;
}

/* An article title runs long, so it gets the full column. */
.jk-article .jk-phero__title { max-width: 26ch; }

/* ---- Breadcrumbs ---- */

.jk-crumbs { margin-bottom: 20px; }

.jk-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
}

.jk-crumbs li {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #7f8ba3;
}

/* Chevron separator, drawn before every crumb but the first. */
.jk-crumbs li + li::before {
	content: "";
	width: 5px;
	height: 5px;
	border-right: 1.5px solid #5c6880;
	border-bottom: 1.5px solid #5c6880;
	transform: rotate(-45deg);
}

.jk-crumbs a { color: #9aa5bb; transition: color .18s; }
.jk-crumbs a:hover { color: #fff; }

.jk-crumbs [aria-current] {
	color: #d7deeb;
	max-width: 42ch;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---- Hero meta row (post date, reading time) ---- */

.jk-phero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin-top: 22px;
	font-size: 14px;
	color: #97a3ba;
}

.jk-amet__i {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.jk-phero__meta .jk-i { width: 16px; height: 16px; color: var(--jk-brand-300); }

/* =========================================================================
   Inner page body
   ========================================================================= */

.jk-inner__body { padding: 56px 0 88px; }

/* =========================================================================
   Long-form content

   .jk-prose wraps the_content(), so it has to style whatever the editor —
   classic or Elementor — produced. Selectors stay as plain descendants for
   that reason, and the heading rules restate font-family and text-transform
   because the parent theme sets a condensed display face on every h1–h6.
   ========================================================================= */

.jk-prose {
	max-width: 880px;
	margin: 0 auto;
	padding: 52px 56px;
	background: var(--jk-card);
	border: 1px solid var(--jk-line);
	border-radius: 22px;
	box-shadow: var(--jk-sh-1);
	font-size: 16.5px;
	line-height: 1.8;
	color: #3d4859;
}

.jk-prose > :first-child { margin-top: 0 !important; }
.jk-prose > :last-child { margin-bottom: 0 !important; }

.jk-prose p {
	margin: 0 0 20px;
	font-size: 16.5px;
	line-height: 1.8;
	color: #3d4859;
}

.jk-prose h1,
.jk-prose h2,
.jk-prose h3,
.jk-prose h4,
.jk-prose h5,
.jk-prose h6 {
	margin: 42px 0 14px;
	font-family: var(--jk-font);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.28;
	text-transform: none;
	color: var(--jk-text);
}

.jk-prose h1 { font-size: 32px; }
.jk-prose h2 { font-size: 26px; }
.jk-prose h3 { font-size: 21px; }
.jk-prose h4 { font-size: 18px; }
.jk-prose h5,
.jk-prose h6 { font-size: 16px; }

/* A heading straight after another needs the gap closed, not doubled. */
.jk-prose h2 + h3,
.jk-prose h3 + h4 { margin-top: 22px; }

.jk-prose a {
	color: var(--jk-brand);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color .18s;
}

.jk-prose a:hover { color: var(--jk-brand-600); }

.jk-prose strong, .jk-prose b { font-weight: 700; color: var(--jk-text); }

.jk-prose ul,
.jk-prose ol {
	margin: 0 0 22px;
	padding-left: 24px;
	list-style: revert;
}

.jk-prose li { margin-bottom: 9px; }
.jk-prose li::marker { color: var(--jk-brand-300); }
.jk-prose ul ul, .jk-prose ol ol { margin: 9px 0 0; }

.jk-prose blockquote {
	margin: 30px 0;
	padding: 4px 0 4px 24px;
	border-left: 3px solid var(--jk-brand);
	font-size: 18px;
	line-height: 1.7;
	color: var(--jk-text);
}

.jk-prose blockquote p:last-child { margin-bottom: 0; }

.jk-prose img {
	height: auto;
	border-radius: 14px;
}

.jk-prose figure { margin: 30px 0; }

.jk-prose figcaption {
	margin-top: 10px;
	font-size: 13.5px;
	color: var(--jk-faint);
	text-align: center;
}

.jk-prose hr {
	height: 1px;
	margin: 40px 0;
	background: var(--jk-line);
	border: 0;
}

/* Tables get their own scroll container — a wide table must never widen the
   page. */
.jk-prose table {
	width: 100%;
	margin: 26px 0;
	border-collapse: collapse;
	font-size: 15px;
}

.jk-prose th,
.jk-prose td {
	padding: 12px 14px;
	text-align: left;
	border: 1px solid var(--jk-line);
}

.jk-prose th { background: var(--jk-bg); font-weight: 700; color: var(--jk-text); }

.jk-prose code {
	padding: 2px 6px;
	font-size: .9em;
	background: var(--jk-bg);
	border: 1px solid var(--jk-line);
	border-radius: 6px;
}

.jk-prose pre {
	margin: 26px 0;
	padding: 18px 20px;
	overflow-x: auto;
	background: var(--jk-ink);
	border-radius: 14px;
	color: #dbe3f2;
	font-size: 14px;
	line-height: 1.65;
}

.jk-prose pre code { padding: 0; background: none; border: 0; }

/* ---- Elementor inside .jk-prose -----------------------------------------
   About, Contact and Privacy are stacks of Elementor text-editor widgets, and
   every one of them carries typography baked in at build time — Roboto 14px,
   colour #000000, a 22px Bebas Neue face standing in for the headings — as
   per-element rules in Elementor's generated stylesheet. Those out-specify a
   plain descendant selector and would keep the pages looking exactly as they
   did, so they are overridden outright.

   The container chrome goes too: section > container > widget each bring their
   own padding and max-width, which is dead weight inside a column that is
   already sized and padded. */

.jk-prose .elementor-section,
.jk-prose .elementor-container,
.jk-prose .elementor-column,
.jk-prose .elementor-widget-wrap,
.jk-prose .elementor-widget-container,
.jk-prose .e-con,
.jk-prose .e-con-inner {
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
	background: none !important;
}

.jk-prose .elementor-widget { margin: 0 0 20px !important; }
.jk-prose .elementor-widget:last-child { margin-bottom: 0 !important; }

.jk-prose .elementor-widget-text-editor,
.jk-prose .elementor-widget-text-editor p,
.jk-prose .elementor-widget-text-editor li,
.jk-prose .elementor-widget-text-editor span {
	font-family: var(--jk-font) !important;
	font-size: 16.5px !important;
	font-weight: 400 !important;
	line-height: 1.8 !important;
	color: #3d4859 !important;
}

/* The stand-in headings. jk_tag_elementor_headings() adds .jk-eh to the
   widgets the page author styled as titles — see jk_elementor_heading_ids(). */
.jk-prose .jk-eh { margin: 44px 0 6px !important; }
.jk-prose .jk-eh:first-child { margin-top: 0 !important; }

.jk-prose .jk-eh,
.jk-prose .jk-eh p,
.jk-prose .jk-eh span,
.jk-prose .jk-eh .elementor-widget-container {
	font-family: var(--jk-font) !important;
	font-size: 25px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	letter-spacing: -.02em;
	text-transform: none !important;
	color: var(--jk-text) !important;
}

/* Two stacked headings — "Contact us" then "Follow us on social media" — must
   not double their gap. */
.jk-prose .jk-eh + .jk-eh { margin-top: 30px !important; }

/* =========================================================================
   Blog feed widget (the Blogs page)

   MyListing's feed widget prints Bootstrap columns wrapped around its own
   .single-blog-feed card. The columns are floated, so cards of unequal height
   snag on each other and leave the grid ragged. Everything is unwound to a CSS
   grid, and the card is rebuilt to match .jk-post used everywhere else.
   ========================================================================= */

.jk-pagefeed .elementor-section,
.jk-pagefeed .elementor-container,
.jk-pagefeed .elementor-widget-wrap,
.jk-pagefeed .elementor-widget-container,
.jk-pagefeed .e-con,
.jk-pagefeed .e-con-inner,
.jk-pagefeed .i-section,
.jk-pagefeed .container-fluid {
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
}

.jk-pagefeed .row.grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	margin: 0;
}

.jk-pagefeed .row.grid::before,
.jk-pagefeed .row.grid::after { content: none; }

.jk-pagefeed [class*="col-md-"],
.jk-pagefeed [class*="col-sm-"],
.jk-pagefeed [class*="col-xs-"] {
	float: none;
	width: 100%;
	max-width: none;
	padding: 0;
}

.jk-pagefeed .single-blog-feed,
.jk-pagefeed .sbf-container {
	height: 100%;
	margin: 0;
	box-shadow: none;
}

.jk-pagefeed .sbf-container {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--jk-card);
	border: 1px solid var(--jk-line);
	border-radius: var(--jk-r);
	box-shadow: var(--jk-sh-1);
	transition: transform .2s, box-shadow .2s;
}

.jk-pagefeed .single-blog-feed:hover .sbf-container { transform: translateY(-3px); box-shadow: var(--jk-sh-2); }

/* ---- Thumbnail ---- */

.jk-pagefeed .sbf-thumb {
	position: relative;
	order: -2;
	height: auto;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #eceff6;
}

.jk-pagefeed .sbf-thumb a { display: block; height: 100%; }

.jk-pagefeed .sbf-background {
	height: 100%;
	background-size: cover;
	background-position: center;
	transition: transform .4s ease;
}

.jk-pagefeed .single-blog-feed:hover .sbf-background { transform: scale(1.04); }
.jk-pagefeed .sbf-thumb .overlay { display: none; }

/* ---- Date badge, lifted onto the image ---- */

.jk-pagefeed .lf-head {
	position: absolute;
	left: 12px;
	top: 12px;
	z-index: 2;
	height: auto;
	padding: 0;
	background: none;
}

.jk-pagefeed .lf-head-btn.event-date {
	display: flex;
	align-items: baseline;
	gap: 5px;
	position: static;
	width: auto;
	height: auto;
	padding: 6px 12px;
	color: #fff;
	background: rgba(12, 17, 32, .72);
	backdrop-filter: blur(8px);
	border: 0;
	border-radius: 999px;
	box-shadow: none;
}

.jk-pagefeed .e-month,
.jk-pagefeed .e-day {
	display: inline;
	float: none;
	width: auto;
	padding: 0;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .07em;
	line-height: 1;
	text-transform: uppercase;
	color: #fff;
	background: none;
}

/* The badge sits over the image, so it must be inside the thumb's stacking
   context — which the theme puts it before, not inside. Absolute positioning
   against .sbf-container gets it there. */
.jk-pagefeed .sbf-container { position: relative; }

/* ---- Copy ---- */

.jk-pagefeed .sbf-title {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 22px 22px 0;
	text-align: left;
	border: 0;
}

.jk-pagefeed .sbf-title > a {
	font-family: var(--jk-font);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.38;
	color: var(--jk-text) !important;
	text-decoration: none;
	text-align: left;
	transition: color .18s;
}

.jk-pagefeed .sbf-title > a:hover { color: var(--jk-brand) !important; }

.jk-pagefeed .sbf-title p {
	flex: 1;
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 1.65;
	text-align: left;
	color: var(--jk-muted);
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---- Category chip ---- */

.jk-pagefeed .listing-details {
	padding: 16px 22px 22px;
	border: 0;
	background: none;
}

.jk-pagefeed .c27-listing-preview-category-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jk-pagefeed .c27-listing-preview-category-list a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 12px 5px 6px;
	font-size: 12.5px;
	font-weight: 600;
	color: #4b5670 !important;
	background: var(--jk-bg);
	border: 1px solid var(--jk-line);
	border-radius: 999px;
	text-decoration: none;
	transition: border-color .18s, color .18s;
}

.jk-pagefeed .c27-listing-preview-category-list a:hover { color: var(--jk-brand) !important; border-color: var(--jk-brand-300); }

.jk-pagefeed .cat-icon {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
}

.jk-pagefeed .cat-icon i { font-size: 13px; }

/* =========================================================================
   Single post
   ========================================================================= */

.jk-article__media {
	max-width: 880px;
	margin: 0 auto 30px;
	border-radius: 22px;
	overflow: hidden;
	aspect-ratio: 16 / 8;
	background: #e7ebf3;
	box-shadow: var(--jk-sh-2);
}

.jk-article__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.jk-article__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	max-width: 880px;
	margin: 26px auto 0;
}

/* .jk-chip is built for the dark hero; on the light body it needs inverting. */
.jk-inner__body .jk-chip {
	color: #4b5670;
	background: #fff;
	border-color: var(--jk-line);
}

.jk-inner__body .jk-chip:hover {
	color: var(--jk-brand);
	border-color: var(--jk-brand-300);
	background: #fff;
}

/* ---- Previous / next ---- */

.jk-article__nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	max-width: 880px;
	margin: 34px auto 0;
}

.jk-pnav {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px 22px;
	background: var(--jk-card);
	border: 1px solid var(--jk-line);
	border-radius: 16px;
	transition: border-color .18s, transform .18s, box-shadow .18s;
}

.jk-pnav:hover { border-color: var(--jk-brand-300); transform: translateY(-2px); box-shadow: var(--jk-sh-2); }

/* A lone "next" link should sit on the right, where it belongs. */
.jk-pnav--next { grid-column: 2; text-align: right; }

.jk-pnav__l {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--jk-brand);
}

.jk-pnav--next .jk-pnav__l { justify-content: flex-end; }
.jk-pnav__l .jk-i { width: 15px; height: 15px; }

.jk-pnav__t {
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--jk-text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.jk-article__comments { max-width: 880px; margin: 44px auto 0; }

.jk-related { background: #fff; border-top: 1px solid var(--jk-line); }

/* =========================================================================
   Archive / blog feed
   ========================================================================= */

.jk-post__media { position: relative; }

.jk-post__cat {
	position: absolute;
	left: 12px;
	top: 12px;
	padding: 6px 12px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: #fff;
	background: rgba(12, 17, 32, .72);
	backdrop-filter: blur(8px);
	border-radius: 999px;
}

.jk-post__more {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 16px;
	font-size: 14px;
	font-weight: 600;
	color: var(--jk-brand);
	transition: gap .2s;
}

.jk-post__more .jk-i { width: 16px; height: 16px; }
.jk-post:hover .jk-post__more { gap: 11px; }

/* The card is a flex column; letting the body grow keeps every "Read article"
   on the same line across a row of uneven excerpts. */
.jk-post__body { display: flex; flex-direction: column; flex: 1; }
.jk-post__ex { flex: 1; }

/* ---- Pagination ---- */

.jk-pager { margin-top: 48px; }

.jk-pager ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	list-style: none;
	padding: 0;
}

.jk-pager a,
.jk-pager span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-width: 42px;
	height: 42px;
	padding: 0 14px;
	justify-content: center;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--jk-muted);
	background: var(--jk-card);
	border: 1px solid var(--jk-line);
	border-radius: 12px;
	transition: color .18s, border-color .18s, background .18s;
}

.jk-pager a:hover { color: var(--jk-brand); border-color: var(--jk-brand-300); }

.jk-pager .current {
	color: #fff;
	background: linear-gradient(135deg, var(--jk-brand) 0%, #8b3cff 100%);
	border-color: transparent;
	box-shadow: 0 8px 18px rgba(108, 28, 255, .28);
}

.jk-pager .dots { background: transparent; border-color: transparent; }
.jk-pager .jk-i { width: 15px; height: 15px; }

/* =========================================================================
   Single job listing

   The parent theme owns this template, so everything here is a reskin of its
   markup: a cover section, the title block, a tab strip, a row of quick
   actions, then "elements" — the white detail cards. The three top bands are
   pulled together into one dark hero so the page opens the way every other
   page on the site now does.
   ========================================================================= */

.single-listing #c27-single-listing {
	--jk-brand:     #6c1cff;
	--jk-brand-300: #9a6bff;
	--jk-bg:        #f5f6fb;
	--jk-card:      #fff;
	--jk-line:      #e6e9f2;
	--jk-text:      #0f172a;
	--jk-muted:     #64748b;
	--jk-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	background: var(--jk-bg);
}

/* ---- Hero ---- */

/* The site header sits over the top of the cover, and a script lifts the title
   block into the cover where it is pinned 40px off the bottom. So the cover has
   to be tall enough for the whole title block — breadcrumb, title, meta row —
   to clear the header beneath it. */
.single-listing .profile-cover.profile-cover-no-img {
	height: 340px;
	min-height: 0;
	background:
		radial-gradient(120% 140% at 50% -40%, #1c2b52 0%, transparent 62%),
		linear-gradient(180deg, #0b1225 0%, #0a0f1f 100%);
}

.single-listing .profile-cover .overlay { display: none; }

.single-listing .main-info-mobile { background: #0a0f1f; }

/* Four pieces share the title row: the breadcrumb and the meta row come from
   the child override of cover-details.php, and sit above and below the
   title/CTA pair. Grid areas keep them in that order whichever way the theme's
   script shuffles the DOM between desktop and mobile. */
.single-listing .listing-main-info {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"crumbs crumbs"
		"name   cta"
		"meta   meta";
	align-items: center;
	gap: 0 24px;
	max-width: 1200px;
	width: 100%;
	padding: 0 24px;
}

.single-listing .listing-main-info > .col-md-6:first-child { grid-area: name; }
.single-listing .listing-main-info > .col-md-6:last-of-type { grid-area: cta; }
.single-listing .jk-lcrumbs { grid-area: crumbs; margin-bottom: 16px; }
.single-listing .jk-lmeta { grid-area: meta; }

/* ---- Hero meta row ---- */

.single-listing .jk-lmeta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.single-listing .jk-lmeta li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 7px 15px;
	font-size: 13.5px;
	font-weight: 500;
	color: #d3dbea;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .13);
	border-radius: 999px;
}

.single-listing .jk-lmeta .jk-i { width: 15px; height: 15px; color: var(--jk-brand-300); }

.single-listing .listing-main-info > .col-md-6 {
	float: none;
	width: auto;
	max-width: 100%;
	padding: 0;
}

/* The theme reserves 90px of left padding for an absolutely positioned avatar.
   The avatar is a flex item here, so that padding is just a dent in the
   alignment against every other container on the page. */
.single-listing .profile-name {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 0;
	min-height: 0;
}

.single-listing .profile-avatar {
	position: static !important;
	flex: none;
	width: 84px;
	height: 84px;
	margin: 0;
	border: 3px solid rgba(255, 255, 255, .14);
	border-radius: 20px;
	background-color: #fff;
	background-size: cover;
	background-position: center;
	box-shadow: 0 12px 30px rgba(2, 6, 16, .5);
}

.single-listing .profile-name h1 {
	width: auto;
	max-width: 22ch;
	margin: 0;
	padding: 0;
	font-family: var(--jk-font);
	font-size: clamp(23px, 2.4vw, 31px);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.2;
	white-space: normal;
	text-transform: none;
	color: #fff !important;
}

.single-listing .verified-badge { vertical-align: middle; }

/* ---- Primary call to action ---- */

/* Both halves of the title row are centred inside their column by the theme,
   which leaves the logo floating in from the left and the CTA in from the
   right. Push them out to the edges of the content column instead. */
.single-listing .listing-main-info .profile-name { justify-content: flex-start; text-align: left; }
.single-listing .listing-main-buttons { justify-content: flex-end; min-height: 0; }

.single-listing .listing-main-buttons ul { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; }

/* Secondary hero action, next to the theme's configured call-to-action. */
.single-listing .jk-lwa a {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 13px 22px;
	font-size: 15px;
	font-weight: 600;
	color: #fff !important;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 999px;
	transition: background .18s, border-color .18s, transform .18s;
}

.single-listing .jk-lwa a:hover {
	background: rgba(255, 255, 255, .15);
	border-color: rgba(255, 255, 255, .4);
	transform: translateY(-1px);
}

.single-listing .jk-lwa .jk-i { width: 18px; height: 18px; }

/* The button variants in home-premium.css are scoped to .jk-home, which this
   page is not inside — the parent theme owns the template. */
.single-listing .jk-btn--primary {
	color: #fff !important;
	background: linear-gradient(135deg, var(--jk-brand) 0%, #8b3cff 100%);
	box-shadow: 0 8px 20px rgba(108, 28, 255, .28);
}

.single-listing .jk-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(108, 28, 255, .36); }

.single-listing .jk-btn--ghost {
	color: var(--jk-text) !important;
	background: #fff;
	border-color: var(--jk-line);
}

.single-listing .jk-btn--ghost:hover { color: var(--jk-brand) !important; border-color: var(--jk-brand); }

.single-listing .jk-btn--outline {
	color: #fff !important;
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .28);
}

.single-listing .jk-btn--outline:hover { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .5); }

.single-listing .listing-main-buttons li { margin: 0; }

/* Scoped to the theme's own call-to-action item so the secondary actions added
   alongside it keep their own treatment. */
.single-listing .listing-main-buttons .lmb-calltoaction a {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 14px 26px;
	font-size: 15px;
	font-weight: 600;
	color: #fff !important;
	background: linear-gradient(135deg, var(--jk-brand) 0%, #8b3cff 100%);
	border: 0;
	border-radius: 999px;
	box-shadow: 0 10px 26px rgba(108, 28, 255, .38);
	transition: transform .18s ease, box-shadow .18s ease;
}

.single-listing .listing-main-buttons .lmb-calltoaction a:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 34px rgba(108, 28, 255, .46);
}

/* ---- Tab strip, carried on the dark band ---- */

.single-listing .profile-header {
	background: #0a0f1f;
	border: 0;
	box-shadow: none;
}

.single-listing .profile-header .container {
	max-width: 1200px;
	padding: 0 24px;
}

.single-listing .profile-header .col-md-12 { padding: 0; }

.single-listing .profile-menu ul {
	display: flex;
	gap: 4px;
	justify-content: flex-start;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}

/* The theme centres the tabs with `::before`/`::after { margin: auto }`. */
.single-listing .profile-menu ul::before,
.single-listing .profile-menu ul::after { content: none !important; display: none !important; }

.single-listing .profile-menu li { margin: 0; }
.single-listing .profile-menu .cts-prev,
.single-listing .profile-menu .cts-next { display: none !important; }

.single-listing .profile-menu li > a {
	display: block;
	position: relative;
	padding: 16px 20px;
	font-size: 15px;
	font-weight: 600;
	color: #93a0b7 !important;
	border: 0 !important;
	background: none !important;
	transition: color .18s;
}

.single-listing .profile-menu li > a:hover { color: #fff !important; }
.single-listing .profile-menu li.active > a { color: #fff !important; }

.single-listing .profile-menu li.active > a::after {
	content: "";
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: -1px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--jk-brand), #8b3cff);
}

/* Flush the first tab with the content column, so the strip lines up with the
   logo above it and the cards below. */
.single-listing .profile-menu li:first-child > a { padding-left: 0; }
.single-listing .profile-menu li:first-child.active > a::after { left: 0; }

/* ---- Quick actions ---- */

.single-listing .qla-container {
	max-width: 1200px;
	padding: 28px 24px 0;
	margin: 0 auto;
}

.single-listing .quick-listing-actions ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 10px;
	margin: 0;
	padding: 0;
	border: 0;
}

.single-listing .quick-listing-actions li { margin: 0; border: 0; }
.single-listing .quick-listing-actions .cts-prev,
.single-listing .quick-listing-actions .cts-next { display: none !important; }

/* Bookmark, Share and Report are useful; Call now and Send an email repeat the
   hero and the sidebar. The whole row is kept but played down to a utility
   strip so it stops competing with the actual call to action. */
.single-listing .quick-listing-actions li > a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 15px;
	font-size: 13.5px;
	font-weight: 500;
	color: #64748b !important;
	background: var(--jk-card);
	border: 1px solid var(--jk-line);
	border-radius: 999px;
	transition: color .18s, border-color .18s, transform .18s;
}

.single-listing .quick-listing-actions li > a:hover {
	color: var(--jk-brand) !important;
	border-color: var(--jk-brand-300);
	transform: translateY(-1px);
}

.single-listing .quick-listing-actions i { font-size: 17px; }

/* ---- Detail cards ---- */

.single-listing .listing-tabs .container {
	max-width: 1200px;
	padding: 28px 24px 72px;
}

.single-listing .profile-body .element {
	margin-bottom: 22px;
	background: var(--jk-card);
	border: 1px solid var(--jk-line);
	border-radius: 18px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 3px rgba(15, 23, 42, .04);
	overflow: hidden;
}

.single-listing .profile-body .pf-head {
	padding: 18px 24px 0;
	border: 0;
	background: none;
}

.single-listing .profile-body .title-style-1 {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0;
	border: 0;
}

.single-listing .profile-body .title-style-1 i {
	font-size: 17px;
	color: var(--jk-brand);
}

.single-listing .profile-body .title-style-1 h5 {
	margin: 0;
	font-family: var(--jk-font);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--jk-muted);
}

.single-listing .profile-body .pf-body { padding: 14px 24px 22px; }

/* Employers paste addresses and email addresses straight in, so long unbroken
   strings have to wrap rather than run out of the card. */
.single-listing .wp-editor-content .pf-body { overflow-wrap: anywhere; }

.single-listing .wp-editor-content .pf-body p {
	margin: 0 0 14px;
	font-size: 15.5px;
	line-height: 1.75;
	color: #3d4859;
}

.single-listing .wp-editor-content .pf-body p:last-child { margin-bottom: 0; }

/* Detail chips — location, categories, qualification, vacancy type. */
.single-listing .pf-body .listing-details ul,
.single-listing .pf-body .details-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
}

/* The theme lays these out as full-width rows; as a wrapping chip row they
   have to shrink to their content instead. */
.single-listing .pf-body .listing-details li,
.single-listing .pf-body .details-list li {
	flex: 0 0 auto;
	width: auto !important;
	max-width: 100%;
	margin: 0;
	padding: 0;
	float: none !important;
	border: 0 !important;
	background: none !important;
}

.single-listing .pf-body .listing-details a,
.single-listing .pf-body .details-list a {
	/* The theme sets `display: flex`, which fills the row — a chip has to be
	   inline so the list item shrinks to it. */
	display: inline-flex !important;
	align-items: center;
	gap: 9px;
	width: auto !important;
	padding: 7px 16px 7px 7px;
	font-size: 14px;
	font-weight: 600;
	color: #3d4859 !important;
	background: var(--jk-bg);
	border: 1px solid var(--jk-line);
	border-radius: 999px;
	transition: color .18s, border-color .18s;
}

.single-listing .pf-body .listing-details a:hover,
.single-listing .pf-body .details-list a:hover {
	color: var(--jk-brand) !important;
	border-color: var(--jk-brand-300);
}

.single-listing .pf-body .cat-icon {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
}

.single-listing .pf-body .social-nav a { padding-left: 16px; }

/* ---- Job overview panel --------------------------------------------------
   The theme's sidebar is four cards holding one chip each — Categories,
   Qualification, Vacancy type, and a Location that repeats the hero. They are
   hidden in favour of one panel (partials/listing-sidebar.php) that says the
   same thing in a quarter of the height, and the left column widens into the
   space that frees up.

   Every `terms` block goes, wherever it sits: they are all single chips now
   carried by the panel and the hero meta row. */

.single-listing .profile-body .block-type-terms,
.single-listing .cts-right-column > .col-md-12:not(.jk-lsidebar-wrap) { display: none; }

.single-listing .tab-template-content-sidebar > .row > .col-md-7 { width: 66.66666667%; }
.single-listing .tab-template-content-sidebar > .row > .col-md-5 { width: 33.33333333%; }

.single-listing .jk-lsidebar-wrap { padding: 0; }

.single-listing .jk-lsidebar {
	position: sticky;
	top: 110px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.single-listing .jk-lcard {
	padding: 24px;
	background: var(--jk-card);
	border: 1px solid var(--jk-line);
	border-radius: 18px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 3px rgba(15, 23, 42, .04);
}

.single-listing .jk-lcard__h {
	margin: 0 0 4px;
	font-family: var(--jk-font);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--jk-muted);
}

.single-listing .jk-ldl { margin: 0; }

.single-listing .jk-ldl__row {
	display: grid;
	grid-template-columns: minmax(0, 118px) minmax(0, 1fr);
	gap: 16px;
	align-items: baseline;
	padding: 14px 0;
	border-bottom: 1px solid var(--jk-line-soft, #eef0f7);
}

.single-listing .jk-ldl__row:last-child { border-bottom: 0; padding-bottom: 0; }

.single-listing .jk-ldl dt {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--jk-muted);
}

.single-listing .jk-ldl__icon { display: inline-flex; color: var(--jk-brand); }
.single-listing .jk-ldl__icon .jk-i { width: 16px; height: 16px; }

.single-listing .jk-ldl dd {
	margin: 0;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--jk-text);
}

.single-listing .jk-ldl dd a { color: var(--jk-text) !important; transition: color .18s; }
.single-listing .jk-ldl dd a:hover { color: var(--jk-brand) !important; }
.single-listing .jk-ldl__sep { color: var(--jk-faint, #94a3b8); }

/* ---- Apply card ---- */

.single-listing .jk-lcard--apply {
	background: linear-gradient(180deg, #fff 0%, #faf8ff 100%);
	border-color: rgba(108, 28, 255, .16);
}

.single-listing .jk-lcard__p {
	margin: 6px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--jk-muted);
}

.single-listing .jk-lcard__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 18px;
}

.single-listing .jk-lcard__actions .jk-btn { width: 100%; }

.single-listing .jk-btn--wa {
	color: #fff !important;
	background: #25d366;
	box-shadow: 0 8px 18px rgba(37, 211, 102, .26);
}

.single-listing .jk-btn--wa:hover { transform: translateY(-2px); box-shadow: 0 14px 26px rgba(37, 211, 102, .34); }

.single-listing .jk-lcard__note {
	display: flex;
	gap: 9px;
	margin: 18px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--jk-line);
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--jk-muted);
}

.single-listing .jk-lcard__note .jk-i { flex: none; width: 16px; height: 16px; color: var(--jk-brand-300); }

/* ---- Closing call to action ---- */

.jk-lapply { padding: 0 0 12px; background: #f5f6fb; }

/* 1152px is the 1200px page column less its 24px gutters, so the band lines up
   with the cards above it rather than sitting proud of them. */
.jk-lapply__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
	max-width: 1152px;
	margin: 0 auto 60px;
	padding: 38px 44px;
	background:
		radial-gradient(120% 180% at 12% -40%, #2a1b6b 0%, transparent 60%),
		linear-gradient(135deg, #0e1630 0%, #0a0f1f 100%);
	border-radius: 24px;
	box-shadow: 0 24px 50px rgba(6, 10, 24, .25);
}

.jk-lapply__kicker {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #9a6bff;
}

.jk-lapply__h {
	margin: 0;
	max-width: 24ch;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: clamp(22px, 2.3vw, 30px);
	font-weight: 700;
	letter-spacing: -.025em;
	line-height: 1.22;
	text-transform: none;
	color: #fff !important;
}

.jk-lapply__p {
	margin: 12px 0 0;
	max-width: 46ch;
	font-size: 14.5px;
	line-height: 1.65;
	color: #a9b4c8;
}

.jk-lapply__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---- Similar listings ---- */

.single-listing .similar-listings { padding: 8px 0 80px; background: var(--jk-bg); }

.single-listing .similar-listings .container { max-width: 1200px; padding: 0 24px; }

.single-listing .similar-listings .section-title {
	margin: 0 0 28px;
	text-align: left;
}

.single-listing .similar-listings .section-title h2 {
	margin: 0;
	font-family: var(--jk-font);
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 700;
	letter-spacing: -.025em;
	text-transform: none;
	color: var(--jk-text) !important;
}

/* =========================================================================
   Listing preview cards

   MyListing lays these out with Isotope, which absolutely positions every card
   and sets a fixed height on the row — which is why cards of unequal height
   overlap. Isotope writes those as inline styles, so unwinding it back to a
   grid needs !important throughout.
   ========================================================================= */

.jk-home .row.grid,
.single-listing .similar-listings .row.grid,
.cts-explore .results-view {
	display: grid !important;
	/* auto-fill rather than a fixed count: the results column is a different
	   width on every one of these layouts, and a card narrower than ~290px
	   cannot hold a job title. */
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: 20px;
	position: static !important;
	height: auto !important;
	margin: 0;
}

/* Bootstrap's .row carries a ::before/::after clearfix pair. Harmless while the
   row is floated, but as a grid container they become two anonymous items that
   eat the first and last cells — which is why the first card used to start in
   column two. */
.jk-home .row.grid::before,
.jk-home .row.grid::after,
.single-listing .similar-listings .row.grid::before,
.single-listing .similar-listings .row.grid::after,
.cts-explore .results-view::before,
.cts-explore .results-view::after { content: none !important; }

.jk-home .row.grid > .grid-item,
.single-listing .similar-listings .grid-item,
.cts-explore .grid-item {
	position: static !important;
	left: auto !important;
	top: auto !important;
	float: none !important;
	width: 100% !important;
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Between 992px and 1200px explore-widget.css halves the card
   (`.explore-type-2 .results-view .col-md-4 { width: 50% !important }`) for its
   own two-up float layout. In a grid cell that just leaves the card at half its
   column, so the override has to be more specific than three classes. */
.jk-explorepage .cts-explore .results-view .grid-item,
.jk-explorepage .cts-explore .results-view [class*="col-"] {
	width: 100% !important;
	max-width: none !important;
}

.jk-jobwrap .lf-item-container,
.similar-listings .lf-item-container,
.cts-explore .lf-item-container {
	/* Between roughly 990px and 1200px the theme halves the card's width for
	   its own two-up float layout; in a grid cell that leaves it at 50%. */
	width: 100% !important;
	height: 100%;
	overflow: hidden;
	background: #fff;
	border: 1px solid #e6e9f2 !important;
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 3px rgba(15, 23, 42, .04);
	transition: transform .2s, box-shadow .2s;
}

.jk-jobwrap .lf-item-container:hover,
.similar-listings .lf-item-container:hover,
.cts-explore .lf-item-container:hover {
	transform: translateY(-3px);
	box-shadow: 0 4px 12px rgba(15, 23, 42, .06), 0 12px 28px rgba(15, 23, 42, .05);
}

.jk-jobwrap .lf-item,
.similar-listings .lf-item,
.cts-explore .lf-item { border: 0 !important; box-shadow: none; }

/* The template emits the avatar, the title and the contact list as three
   siblings. A grid puts the logo in its own column with the text stacked
   beside it, without touching the markup. */
.jk-jobwrap .lf-item-container .lf-item-info,
.similar-listings .lf-item-container .lf-item-info,
.cts-explore .lf-item-container .lf-item-info {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		"avatar title"
		"avatar contact";
	align-items: start;
	gap: 4px 14px;
	/* The theme reserves 75px on the left for the absolutely positioned logo,
	   and paints the "featured" flag as a left border here. Both rules come
	   from a stylesheet loaded after this one at matching specificity. */
	padding: 20px 20px 16px !important;
	border: 0 !important;
	text-align: left;
}

/* The theme absolutely positions the logo and reserves room for it with
   padding; as a grid cell it has to come back into flow. */
.jk-jobwrap .lf-avatar,
.similar-listings .lf-avatar,
.cts-explore .lf-avatar {
	position: static !important;
	grid-area: avatar;
	flex: none;
	width: 52px !important;
	height: 52px !important;
	margin: 0 !important;
	border-radius: 13px;
	border: 1px solid #e6e9f2;
	background-color: #fff;
	background-size: cover;
	background-position: center;
}

.jk-jobwrap .listing-preview-title,
.similar-listings .listing-preview-title,
.cts-explore .listing-preview-title {
	grid-area: title;
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	text-transform: none;
	color: #0f172a !important;
}

.jk-jobwrap .lf-contact,
.similar-listings .lf-contact,
.cts-explore .lf-contact {
	grid-area: contact;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 4px 18px;
	margin: 6px 0 0;
	padding: 0;
}

.jk-jobwrap .lf-contact li,
.similar-listings .lf-contact li,
.cts-explore .lf-contact li {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	font-size: 13.5px;
	color: #64748b;
}

.jk-jobwrap .c27-footer-section,
.similar-listings .c27-footer-section,
.cts-explore .c27-footer-section {
	padding: 12px 20px;
	background: #f8f9fd;
	border-top: 1px solid #eef0f7;
}

/* =========================================================================
   Explore page

   The Explore widget is a whole application, so the shell is left alone and
   only the surface is reworked: the results align to the same 1200px column as
   the rest of the site, and the Isotope grid is unwound (see above).
   ========================================================================= */

.cts-explore {
	--jk-brand:     #6c1cff;
	--jk-brand-300: #9a6bff;
	--jk-line:      #e6e9f2;
	--jk-text:      #0f172a;
	--jk-muted:     #64748b;
	--jk-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	background: #f5f6fb;
}

/* The hero above the widget already carries the page's dark band, so the
   widget starts straight into the results. */
.jk-explorepage .cts-explore { background: transparent; }
.jk-explorepage .cts-explore .mobile-explore-head-top { margin-top: 34px; }

.cts-explore .explore-type-2 { padding: 34px 0 80px; }

.cts-explore .explore-type-2 > .container {
	max-width: 1200px;
	width: 100%;
	padding: 0 24px;
}

/* ---- Results header ---- */

.cts-explore .fl-head { margin: 0 0 22px; }

.cts-explore .explore-desktop-head {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
}

.cts-explore .fl-results-no {
	flex: 1;
	font-size: 15px;
	color: var(--jk-muted);
}

.cts-explore .fl-results-no b { font-weight: 700; color: var(--jk-text); }

.cts-explore .load-batch-icon a {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	color: var(--jk-muted);
	background: #fff;
	border: 1px solid var(--jk-line);
	border-radius: 11px;
	transition: color .18s, border-color .18s;
}

.cts-explore .load-batch-icon a:hover { color: var(--jk-brand); border-color: var(--jk-brand-300); }
.cts-explore .batch-unavailable { opacity: .4; pointer-events: none; }

/* ---- Search / filter bar ---- */

.cts-explore .mobile-explore-head-top {
	display: flex !important;
	align-items: center;
	gap: 12px;
	max-width: 1200px;
	padding: 0 24px;
	margin: 26px auto 0;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* On a term archive the widget swaps the keyword input for a chip naming the
   active term, so that needs the same treatment as the search bar it replaces. */
.cts-explore .primary-category {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	height: 56px;
	padding: 0 22px 0 8px;
	font-size: 15px;
	font-weight: 600;
	color: var(--jk-text);
	background: #fff;
	border: 1px solid var(--jk-line);
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 3px rgba(15, 23, 42, .04);
}

.cts-explore .primary-category .cat-icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
}

.cts-explore .primary-category .cat-icon i { font-size: 18px; }

/* The theme floats the filters trigger out of flow at 25% width. */
.cts-explore .explore-head-top-filters {
	position: static !important;
	flex: 0 0 auto !important;
	width: auto !important;
	background: none !important;
}

.cts-explore .explore-head-search {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
	height: 56px;
	padding: 0 20px;
	background: #fff;
	border: 1px solid var(--jk-line);
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 3px rgba(15, 23, 42, .04);
	transition: border-color .18s, box-shadow .18s;
}

.cts-explore .explore-head-search:focus-within {
	border-color: var(--jk-brand-300);
	box-shadow: 0 0 0 4px rgba(108, 28, 255, .1);
}

.cts-explore .explore-head-search i { font-size: 20px; color: var(--jk-muted); }

.cts-explore .explore-head-search input {
	flex: 1;
	min-width: 0;
	height: 100%;
	padding: 0;
	font-size: 15px;
	font-weight: 500;
	color: var(--jk-text);
	background: none;
	border: 0;
	box-shadow: none;
}

.cts-explore .explore-head-top-filters a {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: 56px;
	padding: 0 22px;
	font-size: 15px;
	font-weight: 600;
	color: #fff !important;
	background: linear-gradient(135deg, var(--jk-brand) 0%, #8b3cff 100%);
	border: 0;
	border-radius: 16px;
	box-shadow: 0 8px 20px rgba(108, 28, 255, .28);
	transition: transform .18s, box-shadow .18s;
}

.cts-explore .explore-head-top-filters a:hover {
	transform: translateY(-1px);
	box-shadow: 0 14px 28px rgba(108, 28, 255, .36);
}

/* ---- No results ---- */

.cts-explore .no-results-wrapper {
	padding: 56px 32px;
	text-align: center;
	color: var(--jk-muted);
	background: #fff;
	border: 1px solid var(--jk-line);
	border-radius: 20px;
}

.cts-explore .no-results-icon { font-size: 40px; color: var(--jk-brand); }

.cts-explore .no_job_listings_found {
	display: block;
	margin-top: 14px;
	font-size: 16px;
	list-style: none;
}

.cts-explore .reset-results-27 {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: auto !important;
	margin-top: 18px;
	padding: 11px 22px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--jk-brand) !important;
	background: rgba(108, 28, 255, .09);
	border: 1px solid rgba(108, 28, 255, .18);
	border-radius: 999px;
}

/* ---- Pagination ---- */

.cts-explore .c27-explore-pagination { justify-content: center; margin-top: 36px; }

/* =========================================================================
   Empty state / 404
   ========================================================================= */

.jk-inner .jk-empty {
	max-width: 660px;
	margin: 0 auto;
	padding: 56px 44px;
	background: var(--jk-card);
	border: 1px solid var(--jk-line);
	border-radius: 22px;
	box-shadow: var(--jk-sh-1);
	text-align: center;
}

.jk-empty__icon {
	display: grid;
	place-items: center;
	width: 62px;
	height: 62px;
	margin: 0 auto 22px;
	color: var(--jk-brand);
	background: rgba(108, 28, 255, .09);
	border-radius: 20px;
}

.jk-empty__icon .jk-i { width: 28px; height: 28px; }

.jk-inner .jk-empty h2 {
	font-family: var(--jk-font);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -.02em;
	text-transform: none;
	color: var(--jk-text);
}

.jk-inner .jk-empty > p {
	max-width: 46ch;
	margin: 12px auto 26px;
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--jk-muted);
}

.jk-empty__search {
	display: flex;
	gap: 10px;
	max-width: 480px;
	margin: 0 auto;
}

.jk-empty__search input {
	flex: 1;
	min-width: 0;
	height: 48px;
	padding: 0 18px;
	font-size: 15px;
	color: var(--jk-text);
	background: var(--jk-bg);
	border: 1px solid var(--jk-line);
	border-radius: 999px;
	transition: border-color .18s, box-shadow .18s;
}

.jk-empty__search input:focus {
	outline: none;
	border-color: var(--jk-brand-300);
	box-shadow: 0 0 0 4px rgba(108, 28, 255, .12);
}

.jk-empty__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 9px;
	margin-top: 28px;
}

/* =========================================================================
   Responsive
   ========================================================================= */

@media (max-width: 1100px) {
	.jk-inner .jk-grid--3,
	.jk-pagefeed .row.grid,
	.jk-home .row.grid,
	.single-listing .similar-listings .row.grid { grid-template-columns: repeat(2, 1fr); }
}

/* Below this width the theme drops the title block out of the cover and back
   into .main-info-mobile, where it repaints the row white and the title dark —
   which on our dark hero band means white text on white. The band stays dark,
   so the theme's light treatment has to be undone. */
@media (max-width: 991px) {
	.single-listing .profile-cover.profile-cover-no-img { height: 120px; }

	/* Single column, but still a grid — dropping to `display: block` would fall
	   back to DOM order, which puts the breadcrumb after the title. */
	.single-listing .listing-main-info {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"crumbs"
			"name"
			"cta"
			"meta";
		align-items: start;
		background: transparent !important;
		padding: 0 20px 26px;
		transform: none;
	}

	/* Bootstrap's .col-md-* only carry widths from 992px up; the overrides that
	   widen the reading column have to stop here too. */
	.single-listing .tab-template-content-sidebar > .row > .col-md-7,
	.single-listing .tab-template-content-sidebar > .row > .col-md-5 { width: 100%; }

	.single-listing .jk-lsidebar { position: static; }

	.single-listing .listing-main-info .profile-name h1,
	.single-listing .listing-main-info .profile-name h2 { color: #fff !important; }

	.single-listing .listing-main-buttons {
		justify-content: flex-start;
		margin-top: 18px;
	}

	.single-listing .listing-main-buttons ul,
	.single-listing .listing-main-buttons li,
	.single-listing .listing-main-buttons a { width: 100%; justify-content: center; }

	.single-listing .profile-header .container,
	.single-listing .qla-container { padding-left: 20px; padding-right: 20px; }

	.single-listing .listing-tabs .container { padding: 24px 20px 60px; }
	.single-listing .similar-listings .container { padding: 0 20px; }
}

@media (max-width: 880px) {
	.jk-phero { padding: 108px 0 48px; }

	.single-listing .listing-main-info { justify-content: flex-start; }
	.single-listing .profile-avatar { width: 64px; height: 64px; border-radius: 16px; }
	.single-listing .profile-menu ul { overflow-x: auto; }
	.single-listing .profile-menu li > a { padding: 14px 16px; }
	.jk-inner__body { padding: 44px 0 68px; }
	.jk-prose { padding: 36px 28px; border-radius: 18px; }
	.jk-article__nav { grid-template-columns: 1fr; }
	.jk-pnav--next { grid-column: 1; text-align: left; }
	.jk-pnav--next .jk-pnav__l { justify-content: flex-start; }
}

@media (max-width: 620px) {
	.jk-phero { padding: 96px 0 40px; }
	.jk-inner .jk-grid--3,
	.jk-pagefeed .row.grid,
	.jk-home .row.grid,
	.single-listing .similar-listings .row.grid { grid-template-columns: 1fr; }
	.jk-prose { padding: 28px 20px; font-size: 16px; }
	.single-listing .profile-name { gap: 14px; }
	.single-listing .listing-main-buttons a { padding: 12px 20px; }
	.jk-prose p { font-size: 16px; }
	.jk-prose h2 { font-size: 22px; }
	.jk-prose h3 { font-size: 19px; }
	.jk-article__media { border-radius: 16px; aspect-ratio: 16 / 10; }
	.jk-empty__search { flex-direction: column; }
	.jk-empty__search .jk-btn { justify-content: center; }
	.jk-inner .jk-empty { padding: 40px 22px; }
}

/* =========================================================================
   Site header

   The parent theme's header is a flat dark strip: a logo sitting on its own
   white JPEG background, a search box with no field to speak of, and "Sign in
   or Register" as running text. It is the one component on every page, so it
   is reskinned here to match the rest — glass over the dark hero, a real
   search field, and a proper primary action.
   ========================================================================= */

.c27-main-header.header-dark-skin,
.c27-main-header .header-skin {
	background: rgba(9, 13, 27, .72) !important;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	box-shadow: none;
}

.c27-main-header .header-top {
	/* The theme runs the header edge to edge with `position: absolute; left: 0;
	   right: 0`, so a max-width here just pins a narrower box to the left. The
	   insets are set instead, to the same 1152px column (1200px less its 24px
	   gutters) that every hero, section and the footer sits in — that is what
	   lines the logo up with the page title beneath it. */
	/* Centred on an explicit width rather than left/right insets: .container-fluid
	   forces width: 100% at some breakpoints, which over-constrains the box and
	   silently drops the right inset. */
	left: max(18px, calc(50% - 576px)) !important;
	right: auto !important;
	width: min(calc(100% - 36px), 1152px) !important;
	max-width: none;
	/* The theme adds its own gutter as a margin, which would stack on top of
	   the inset above. */
	margin: 0 !important;
	padding: 0;
}

/* ---- Logo ---- */

.c27-main-header .logo a { display: inline-flex; align-items: center; }

/* The footer mark is the same file; the two are sized to relate (footer about
   1.25x the header) instead of the footer being twice the header.
   header.css sets `.header .logo img { height: 38px }` and is printed after
   this file, so the selector has to out-specify it. */
.c27-main-header .header-container .header-top .logo img {
	height: 46px;
	width: auto;
	padding: 4px 8px;
	background: #fff;
	border-radius: 11px;
	box-shadow: 0 2px 10px rgba(2, 6, 16, .3);
}

/* ---- Search ---- */

.c27-main-header .header-search {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 178px;
	height: 44px;
	padding: 0 15px;
	margin-left: 14px;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .13);
	border-radius: 12px;
	transition: border-color .18s, background .18s, box-shadow .18s;
}

.c27-main-header .header-search:focus-within {
	background: rgba(255, 255, 255, .1);
	border-color: rgba(154, 107, 255, .55);
	box-shadow: 0 0 0 4px rgba(108, 28, 255, .14);
}

.c27-main-header .header-search > i {
	position: static;
	font-size: 19px;
	color: #8996b0;
}

.c27-main-header .header-search input[type="search"] {
	flex: 1;
	min-width: 0;
	height: 100%;
	padding: 0;
	font-size: 14.5px;
	font-weight: 500;
	color: #fff;
	background: none;
	border: 0;
	box-shadow: none;
}

.c27-main-header .header-search input::placeholder { color: #8996b0; font-weight: 500; }

/* ---- Navigation ---- */

/* The theme spaces menu items with 15px margins either side — 200px of air
   across six items, which is what pushed the account links past the edge of
   the column. The links carry their own padding, so the margins go. */
.c27-main-header .main-menu > li { margin: 0; }
.c27-main-header .header-center { margin-right: 0; }
.c27-main-header .user-area { margin-right: 0; }

.c27-main-header .main-menu > li > a {
	padding: 9px 11px;
	font-size: 14px;
	font-weight: 500;
	color: #b6c0d3;
	border-radius: 10px;
	transition: color .18s, background .18s;
}

.c27-main-header .main-menu > li > a:hover { color: #fff; background: rgba(255, 255, 255, .07); }

.c27-main-header .main-menu > li.current-menu-item > a,
.c27-main-header .main-menu > li.current_page_item > a { color: #fff; background: rgba(255, 255, 255, .09); }

/* ---- "Post a job" ---- */

.c27-main-header .jk-navcta > a {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	margin-left: 8px;
	padding: 9px 16px !important;
	font-weight: 600 !important;
	color: #fff !important;
	background: linear-gradient(135deg, #6c1cff 0%, #8b3cff 100%) !important;
	border-radius: 999px !important;
	box-shadow: 0 8px 20px rgba(108, 28, 255, .3);
	transition: transform .18s, box-shadow .18s;
}

.c27-main-header .jk-navcta > a:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(108, 28, 255, .4); }
.c27-main-header .jk-navcta .jk-i { width: 16px; height: 16px; }

/* ---- Sign in ---- */

.c27-main-header .user-area {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14.5px;
	color: #93a0b7;
}

.c27-main-header .user-area .user-area-icon { font-size: 20px; color: #8996b0; }

.c27-main-header .user-area a {
	color: #d7deeb;
	font-weight: 500;
	transition: color .18s;
}

.c27-main-header .user-area a:hover { color: #fff; }
.c27-main-header .user-area span { color: #64748b; }

/* Everything in the bar competes for the same row: logo, search, six menu
   items, the CTA and the account links. These steps keep the account links on
   screen as the viewport narrows, before the search field drops out entirely. */
@media (max-width: 1330px) {
	.c27-main-header .main-menu > li > a { padding: 9px 9px; font-size: 13.5px; }
	.c27-main-header .header-search { width: 190px; margin-left: 14px; }
}

/* Below this the six menu items plus the CTA need the whole row, so the search
   collapses to its icon — the hero on every page carries a full search anyway. */
@media (max-width: 1180px) {
	.c27-main-header .header-search {
		width: 44px;
		padding: 0;
		justify-content: center;
	}

	.c27-main-header .header-search input[type="search"] { display: none; }
}

@media (max-width: 991px) {
	.c27-main-header .header-search { display: none; }
	.c27-main-header .jk-navcta > a { margin-left: 0; }

	/* Below this the theme's own mobile rules re-enter, so the column is set
	   outright rather than derived from the desktop calc. */
	.c27-main-header .header-top {
		left: 16px !important;
		width: calc(100% - 32px) !important;
	}
}

/* =========================================================================
   Footer additions
   ========================================================================= */

/* ---- Employer strip ---- */

.jk-fhire {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap;
	margin-bottom: 56px;
	padding: 32px 38px;
	background:
		radial-gradient(120% 200% at 10% -60%, rgba(108, 28, 255, .45) 0%, transparent 62%),
		rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 22px;
}

.jk-fhire__k {
	margin-bottom: 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #9a6bff;
}

.jk-fhire__h {
	margin: 0;
	max-width: 26ch;
	font-family: var(--jk-font);
	font-size: clamp(20px, 2.1vw, 27px);
	font-weight: 700;
	letter-spacing: -.025em;
	line-height: 1.25;
	color: #fff;
}

.jk-fhire__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---- Contact block ---- */

.jk-fcontact {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 22px;
}

.jk-fcontact a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 14px;
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .09);
	border-radius: 14px;
	transition: border-color .18s, background .18s;
}

.jk-fcontact a:hover { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .18); }

.jk-fcontact__i {
	display: grid;
	place-items: center;
	flex: none;
	width: 36px;
	height: 36px;
	color: var(--jk-brand-300);
	background: rgba(108, 28, 255, .16);
	border-radius: 11px;
}

.jk-fcontact__i--wa { color: #34d17c; background: rgba(37, 211, 102, .14); }
.jk-fcontact__i .jk-i { width: 17px; height: 17px; }

.jk-fcontact strong { display: block; font-size: 13px; font-weight: 600; color: #fff; }
.jk-fcontact em { font-style: normal; font-size: 13px; color: #93a0b7; }

@media (max-width: 880px) {
	.jk-fhire { padding: 26px 24px; margin-bottom: 44px; }
	.jk-fhire__actions .jk-btn { flex: 1 1 auto; justify-content: center; }
}

/* =========================================================================
   Explore — desktop filter sidebar

   The widget renders every filter (keyword, location, category, vacancy type,
   salary, sort) into #finderSearch, then collapses it behind a "Filters"
   button. On a job board that is the wrong default for desktop: the filters
   are the page. Below 1100px the off-canvas panel stays exactly as the theme
   built it, including its open/close script.
   ========================================================================= */

/* 1200px, not a round number of my own choosing: explore-widget.css switches
   the whole widget to its tablet behaviour below that — the panel becomes a
   drawer, the header row goes relative, and the widget's script scrolls the
   page to the results. Forcing a desktop sidebar into that produced a page
   that opened part-scrolled with the header sitting inside the hero. Below
   1200 the theme's own layout is left completely alone. */
@media (min-width: 1200px) {
	.jk-explorepage .cts-explore {
		display: grid;
		grid-template-columns: 296px minmax(0, 1fr);
		grid-template-areas:
			"head head"
			"side main";
		column-gap: 28px;
		max-width: 1152px;
		margin: 0 auto;
		padding: 32px 0 84px;
	}

	.jk-explorepage .cts-explore .mobile-explore-head-top {
		grid-area: head;
		max-width: none;
		padding: 0;
		margin: 0 0 22px;
	}

	.jk-explorepage .finder-container { grid-area: side; }
	.jk-explorepage .explore-type-2 { grid-area: main; padding: 0; }

	.jk-explorepage .explore-type-2 > .container {
		max-width: none;
		width: 100%;
		padding: 0;
	}

	/* Two columns of cards next to the sidebar; three would leave them too
	   narrow to read a job title in. */

	/* ---- Panel out of the drawer ---- */

	/* The drawer itself is `position: fixed; z-index: 9999`, so it has to come
	   back into flow before the grid can place it. MyListing prints
	   explore-widget.css inside the <body>, after this file, so matching its
	   specificity is not enough — the selector has to beat it outright. */
	.jk-explorepage .cts-explore .finder-container.fc-type-2 {
		position: static !important;
		top: auto !important;
		z-index: auto !important;
		width: auto !important;
		height: auto !important;
		box-shadow: none !important;
		background: none !important;
	}

	.jk-explorepage .cts-explore #finderSearch { z-index: auto !important; }

	/* Below 1200px explore-widget.css hides the panel with
	   `.finder-container .finder-search.visible-lg { display: none !important }`
	   — the same specificity as a two-class override, and it is printed after
	   this file, so the tie goes to the theme. Matching its selector and adding
	   the page scope is what actually wins between 1100 and 1200. */
	.jk-explorepage .finder-container .finder-search.collapse,
	.jk-explorepage .finder-container .finder-search.visible-lg {
		display: block !important;
		position: static !important;
		height: auto !important;
		max-height: none !important;
		width: 100% !important;
		visibility: visible !important;
		overflow: visible !important;
		transform: none !important;
		background: none !important;
		box-shadow: none !important;
	}

	.jk-explorepage .finder-overlay,
	.jk-explorepage .explore-head-top-filters,
	.jk-explorepage .explore-mobile-nav,
	.jk-explorepage .fc-search .close-filters-27 { display: none !important; }



	.jk-explorepage .finder-tabs-wrapper {
		position: sticky;
		top: 110px;
		padding: 18px;
		background: #fff;
		border: 1px solid var(--jk-line);
		border-radius: 18px;
		box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 3px rgba(15, 23, 42, .04);
	}

	.jk-explorepage .finder-tabs {
		width: 100%;
		padding: 0;
		float: none;
	}

	.jk-explorepage .finder-tabs-wrapper,
	.jk-explorepage .search-filters,
	.jk-explorepage .filter-wrapper,
	.jk-explorepage .listing-type-filters { width: 100%; }

	/* ---- Filters / Categories switch ---- */

	.jk-explorepage .sidebar-tabs {
		display: flex;
		gap: 4px;
		margin: 0 0 18px;
		padding: 4px;
		background: var(--jk-bg);
		border: 1px solid var(--jk-line);
		border-radius: 12px;
	}

	.jk-explorepage .sidebar-tabs li { flex: 1; margin: 0; }

	.jk-explorepage .sidebar-tabs li > a {
		display: block;
		padding: 9px 10px;
		font-size: 13.5px;
		font-weight: 600;
		text-align: center;
		color: var(--jk-muted) !important;
		background: none;
		border: 0 !important;
		border-radius: 9px;
		transition: color .18s, background .18s;
	}

	.jk-explorepage .sidebar-tabs li.active > a {
		color: var(--jk-text) !important;
		background: #fff;
		box-shadow: 0 1px 3px rgba(15, 23, 42, .1);
	}

	/* ---- Fields ---- */

	/* Some groups emit the label before the field and some after it. A column
	   flexbox with the label ordered first makes both come out the same way. */
	.jk-explorepage .filter-wrapper > .form-group,
	.jk-explorepage .filter-wrapper > .cts-term-hierarchy {
		display: flex;
		flex-direction: column;
		height: auto;
		margin: 0 0 16px !important;
		padding: 0;
	}

	.jk-explorepage .filter-wrapper > .form-group > label,
	.jk-explorepage .filter-wrapper > .cts-term-hierarchy > label { order: -1; }

	/* The keyword box at the top of the page drives the same filter, so the
	   panel's copy of it is redundant. Declared after the group rules above,
	   which would otherwise put the display back. */
	.jk-explorepage .cts-explore .filter-wrapper > .wp-search-filter { display: none !important; }

	/* The theme floats these labels over the field; stacked in a narrow panel
	   they read better as plain captions above it. */
	.jk-explorepage .filter-wrapper .md-group > label,
	.jk-explorepage .filter-wrapper .form-group > label {
		position: static;
		display: block;
		width: 100%;
		margin: 0 0 7px;
		transform: none;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: .08em;
		text-transform: uppercase;
		color: var(--jk-muted);
	}

	.jk-explorepage .filter-wrapper .select-wrapper.term-select,
	.jk-explorepage .filter-wrapper .form-group .select2-container {
		position: static !important;
		width: 100% !important;
	}

	.jk-explorepage .filter-wrapper .select2-selection--single {
		display: flex;
		align-items: center;
		height: 44px !important;
		padding: 0 34px 0 14px !important;
		background: var(--jk-bg) !important;
		border: 1px solid var(--jk-line) !important;
		border-radius: 11px !important;
		box-shadow: none !important;
	}

	.jk-explorepage .filter-wrapper .select2-selection__rendered {
		padding: 0 !important;
		font-size: 14.5px !important;
		font-weight: 500 !important;
		line-height: 1.3 !important;
		color: var(--jk-text) !important;
	}

	.jk-explorepage .filter-wrapper .select2-selection__arrow {
		top: 50% !important;
		bottom: auto !important;
		right: 12px !important;
		width: 11px !important;
		height: 11px !important;
		transform: translateY(-50%);
	}

	.jk-explorepage .filter-wrapper .select2-selection__arrow::before { content: none !important; }
	.jk-explorepage .filter-wrapper .select2-selection__arrow b { display: none !important; }

	.jk-explorepage .filter-wrapper .select2-selection__arrow::after {
		content: "";
		position: absolute;
		inset: 0;
		background: #8996b0;
		-webkit-mask: var(--jk-chev) center / 11px 11px no-repeat;
		mask: var(--jk-chev) center / 11px 11px no-repeat;
	}

	.jk-explorepage .filter-wrapper .select2-container--open .select2-selection__rendered::after { content: none !important; }

	/* ---- Checkbox filters ---- */

	.jk-explorepage .filter-wrapper .tags-nav {
		display: flex;
		flex-direction: column;
		gap: 2px;
		max-height: 188px;
		overflow-y: auto;
		margin: 0;
		padding: 0;
		scrollbar-width: thin;
	}

	.jk-explorepage .filter-wrapper .tags-nav li { margin: 0; }

	.jk-explorepage .filter-wrapper .md-checkbox {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 6px 8px;
		border-radius: 8px;
		transition: background .15s;
	}

	.jk-explorepage .filter-wrapper .md-checkbox:hover { background: var(--jk-bg); }

	/* The theme hides the real box and draws its own with ::before, which does
	   not survive being re-laid-out here — so the native control comes back. */
	.jk-explorepage .cts-explore .md-checkbox input[type="checkbox"] {
		position: static !important;
		display: inline-block !important;
		flex: none;
		width: 16px !important;
		height: 16px !important;
		margin: 0 !important;
		opacity: 1 !important;
		visibility: visible !important;
		-webkit-appearance: checkbox;
		appearance: checkbox;
		accent-color: var(--jk-brand);
	}

	.jk-explorepage .filter-wrapper .md-checkbox label {
		position: static;
		margin: 0;
		padding: 0;
		font-size: 14px;
		font-weight: 500;
		line-height: 1.4;
		text-transform: none;
		letter-spacing: 0;
		color: #3d4859;
		cursor: pointer;
	}

	.jk-explorepage .filter-wrapper .md-checkbox label::before,
	.jk-explorepage .filter-wrapper .md-checkbox label::after { content: none !important; }

	/* ---- Search / reset ---- */

	.jk-explorepage .fc-search {
		display: flex;
		flex-direction: column;
		gap: 9px;
		margin: 4px 0 0 !important;
		padding-top: 16px;
		border-top: 1px solid var(--jk-line);
	}

	.jk-explorepage .c27-explore-search-button {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 9px;
		width: 100%;
		height: 46px;
		font-size: 15px;
		font-weight: 600;
		color: #fff !important;
		background: linear-gradient(135deg, var(--jk-brand) 0%, #8b3cff 100%) !important;
		border: 0 !important;
		border-radius: 999px !important;
		box-shadow: 0 8px 20px rgba(108, 28, 255, .28);
	}

	.jk-explorepage .fc-search .reset-results-27 {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		width: 100% !important;
		height: 42px;
		margin: 0;
		font-size: 14px;
		font-weight: 600;
		color: var(--jk-muted) !important;
		background: none;
		border: 1px solid var(--jk-line);
		border-radius: 999px;
	}

	.jk-explorepage .fc-search .reset-results-27:hover { color: var(--jk-brand) !important; border-color: var(--jk-brand-300); }
}

/* Results header — the count reads as a heading for the grid, so it belongs at
   the start of the row, not centred between two disabled arrows. */
.jk-explorepage .explore-desktop-head { justify-content: flex-start; }
.jk-explorepage .fl-results-no { flex: 0 1 auto; font-size: 15px; }
.jk-explorepage .load-batch-icon.batch-unavailable { display: none; }

/* =========================================================================
   Post a job

   The theme's listing-type chooser is one card in a Bootstrap row, left
   aligned under two centred headings, followed by 600px of nothing. The
   headings are dropped — the page hero above already says all of it — and the
   chooser is centred and sized like a real choice.
   ========================================================================= */

.jk-addlisting .elementor-widget-heading { display: none; }

/* The theme zeroes the section padding, and paints the flip card's reverse
   face as a cyan bar under the front one. */
.jk-addlisting .choose-type { padding: 56px 0 88px !important; }
.jk-addlisting .cat-card .ac-back-side { display: none !important; }

.jk-addlisting .choose-type .container-fluid {
	max-width: 1152px;
	margin: 0 auto;
	padding: 0 24px;
}

.jk-addlisting .choose-type .section-body {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 260px));
	justify-content: center;
	gap: 20px;
	margin: 0;
}

.jk-addlisting .choose-type .section-body::before,
.jk-addlisting .choose-type .section-body::after { content: none; }

.jk-addlisting .ac-category {
	float: none;
	width: 100%;
	max-width: none;
	padding: 0;
}

.jk-addlisting .cat-card {
	height: auto;
	background: var(--jk-card);
	border: 1px solid var(--jk-line);
	border-radius: 20px;
	box-shadow: var(--jk-sh-1);
	overflow: hidden;
	transition: transform .2s, box-shadow .2s, border-color .2s;
}

.jk-addlisting .cat-card:hover {
	transform: translateY(-3px);
	border-color: var(--jk-brand-300);
	box-shadow: var(--jk-sh-2);
}

/* The flip card draws its own inner panel, which inside our card reads as a
   box in a box. */
.jk-addlisting .cat-card .face,
.jk-addlisting .cat-card .hovering-c {
	position: static !important;
	transform: none !important;
	width: auto !important;
	height: auto !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}

.jk-addlisting .cat-card > a {
	display: block;
	padding: 34px 24px;
	text-align: center;
}

.jk-addlisting .cat-card .cat-icon {
	display: grid;
	place-items: center;
	width: 62px;
	height: 62px;
	margin: 0 auto 16px;
	font-size: 26px;
	color: #fff !important;
	background: linear-gradient(135deg, var(--jk-brand) 0%, #8b3cff 100%);
	border-radius: 20px;
	box-shadow: 0 10px 22px rgba(108, 28, 255, .3);
}

.jk-addlisting .cat-card .category-name {
	display: block;
	font-size: 17px;
	font-weight: 700;
	color: var(--jk-text);
}

/* =========================================================================
   Sign in / Register

   The theme drops the form into a full-width wrapper with no card and no
   centring, so it sits in the middle-left of an empty screen. It becomes one
   centred card with the site's field styling.
   ========================================================================= */

.jk-account .sign-in-wrapper {
	max-width: 1152px;
	padding: 56px 24px 88px;
	margin: 0 auto;
	background: none;
}

/* The theme gives this a viewport-height minimum and centres the form inside
   it, which is where the 400px of white space above and below came from. */
.jk-account .login-container {
	display: block;
	min-height: 0 !important;
	height: auto !important;
}

.jk-account--auth .login-container {
	max-width: 460px;
	width: 100%;
	margin: 0 auto;
	padding: 36px 36px 32px;
	background: var(--jk-card);
	border: 1px solid var(--jk-line);
	border-radius: 22px;
	box-shadow: var(--jk-sh-2);
}

/* The theme sizes the form to a fixed width and lets the container centre it,
   which inside a card leaves the padding uneven left to right. */
.jk-account .login-content,
.jk-account .sign-in-box,
.jk-account .sign-in-form,
.jk-account .primary-role-fields,
.jk-account .fields-wrapper {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0;
	margin-right: 0;
	padding: 0;
}

/* ---- Sign in / Register switch ---- */

.jk-account .login-tabs {
	display: flex;
	gap: 4px;
	margin: 0 0 24px;
	padding: 4px;
	background: var(--jk-bg);
	border: 1px solid var(--jk-line);
	border-radius: 12px;
}

.jk-account .login-tabs li { flex: 1; margin: 0; }

.jk-account .login-tabs h3 { margin: 0; }

.jk-account .login-tabs a {
	display: block;
	padding: 10px 12px;
	font-family: var(--jk-font);
	font-size: 14.5px;
	font-weight: 600;
	text-align: center;
	text-transform: none;
	letter-spacing: 0;
	color: var(--jk-muted) !important;
	border-radius: 9px;
	transition: color .18s, background .18s;
}

.jk-account .login-tabs li.active a {
	color: var(--jk-text) !important;
	background: #fff;
	box-shadow: 0 1px 3px rgba(15, 23, 42, .1);
}

/* ---- Fields ----
   Both forms share .sign-in-box; only the login one also carries .form-box, so
   selecting on that styled the sign-in fields and left register's untouched. */

.jk-account .sign-in-box .form-group {
	position: relative;
	height: auto;
	margin: 0 0 16px;
	padding: 0;
}

.jk-account .sign-in-box .form-group > input {
	width: 100%;
	height: 48px;
	padding: 20px 14px 6px;
	font-size: 15px;
	font-weight: 500;
	color: var(--jk-text);
	background: var(--jk-bg);
	border: 1px solid var(--jk-line) !important;
	border-radius: 12px;
	box-shadow: none !important;
	transition: border-color .18s, box-shadow .18s, background .18s;
}

.jk-account .sign-in-box .form-group > input:focus {
	background: #fff;
	border-color: var(--jk-brand-300) !important;
	box-shadow: 0 0 0 4px rgba(108, 28, 255, .12) !important;
}

/* Float label, sized to sit inside the field's top padding. */
.jk-account .sign-in-box .form-group > label {
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
	font-size: 14.5px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--jk-faint);
	pointer-events: none;
	transition: top .16s ease, font-size .16s ease, color .16s ease;
}

.jk-account .sign-in-box .form-group > input:focus ~ label,
.jk-account .sign-in-box .form-group > input:not(:placeholder-shown) ~ label {
	top: 13px;
	transform: none;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--jk-muted);
}

.jk-account .toggle-password { display: block; position: relative; }

.jk-account .show-toggle-password {
	position: absolute;
	right: 14px;
	top: 24px;
	transform: translateY(-50%);
	color: var(--jk-faint);
	cursor: pointer;
}

/* ---- Submit and the row under it ---- */

.jk-account .sign-in-box button[type="submit"] {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	height: 50px;
	margin: 4px 0 0;
	font-size: 15.5px;
	font-weight: 600;
	color: #fff !important;
	background: linear-gradient(135deg, var(--jk-brand) 0%, #8b3cff 100%) !important;
	border: 0 !important;
	border-radius: 999px !important;
	box-shadow: 0 8px 20px rgba(108, 28, 255, .28);
	transition: transform .18s, box-shadow .18s;
}

.jk-account .sign-in-box button[type="submit"]:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(108, 28, 255, .36); }

.jk-account .form-info,
.jk-account .forgot-password,
.jk-account .lost_password {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	font-size: 14px;
	color: var(--jk-muted);
}

.jk-account .form-info .md-checkbox { display: flex; align-items: center; gap: 9px; }

.jk-account .form-info .md-checkbox input[type="checkbox"] {
	position: static !important;
	display: inline-block !important;
	flex: none;
	width: 16px !important;
	height: 16px !important;
	margin: 0 !important;
	opacity: 1 !important;
	visibility: visible !important;
	-webkit-appearance: checkbox;
	appearance: checkbox;
	accent-color: var(--jk-brand);
}

.jk-account .form-info .md-checkbox label {
	position: static;
	margin: 0;
	padding: 0;
	font-size: 14px;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	color: var(--jk-muted);
	cursor: pointer;
}

.jk-account .form-info .md-checkbox label::before,
.jk-account .form-info .md-checkbox label::after { content: none !important; }

.jk-account .forgot-password a,
.jk-account .lost_password a { color: var(--jk-brand) !important; font-weight: 600; }

.jk-account .google-recaptcha { margin: 4px 0 18px; }
.jk-account .google-recaptcha > div { max-width: 100%; }

.jk-account .auth-notices:empty { display: none; }

@media (max-width: 620px) {
	.jk-account--auth .login-container { padding: 26px 20px 24px; border-radius: 18px; }
	.jk-account .sign-in-wrapper { padding: 40px 18px 64px; }
	.jk-addlisting .choose-type { padding: 40px 0 64px; }
}

/* =========================================================================
   About and Contact

   Both pages are a stack of text widgets. The prose styling makes them
   readable; these blocks give them something to look at — live figures on
   About, tappable contact methods on Contact.
   ========================================================================= */

/* ---- About: trust figures ---- */

.jk-abstats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	max-width: 880px;
	margin: 0 auto 26px;
	padding: 0;
	list-style: none;
}

.jk-abstats li {
	padding: 22px 18px;
	text-align: center;
	background: var(--jk-card);
	border: 1px solid var(--jk-line);
	border-radius: 18px;
	box-shadow: var(--jk-sh-1);
}

.jk-abstats__n {
	display: block;
	font-size: clamp(24px, 2.6vw, 32px);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.1;
	background: linear-gradient(135deg, var(--jk-brand) 0%, #8b3cff 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.jk-abstats__l {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--jk-muted);
}

/* ---- Contact: two columns ---- */

.jk-inner__body--contact > .jk-wrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	align-items: start;
	gap: 24px;
}

.jk-inner__body--contact .jk-prose {
	max-width: none;
	margin: 0;
	padding: 40px 42px;
}

/* The two lines holding the email address and phone number — the cards next to
   them say the same thing, but tappable. See jk_contact_duplicate_ids(). */
.jk-inner__body--contact .jk-dupe { display: none !important; }

.jk-contact {
	display: flex;
	flex-direction: column;
	gap: 18px;
	position: sticky;
	top: 110px;
}

.jk-contact__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jk-contactm {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px;
	background: var(--jk-card);
	border: 1px solid var(--jk-line);
	border-radius: 18px;
	box-shadow: var(--jk-sh-1);
	transition: transform .18s, box-shadow .18s, border-color .18s;
}

.jk-contactm:hover {
	transform: translateY(-2px);
	border-color: var(--jk-brand-300);
	box-shadow: var(--jk-sh-2);
}

.jk-contactm__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	color: var(--jk-brand);
	background: rgba(108, 28, 255, .1);
}

.jk-contactm--wa .jk-contactm__icon { color: #1fae59; background: rgba(37, 211, 102, .12); }
.jk-contactm__icon .jk-i { width: 21px; height: 21px; }

.jk-contactm__body { flex: 1; min-width: 0; }

.jk-contactm__label {
	display: block;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--jk-muted);
}

.jk-contactm__value {
	display: block;
	margin-top: 3px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--jk-text);
	overflow-wrap: anywhere;
}

.jk-contactm__note {
	display: block;
	margin-top: 5px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--jk-muted);
}

.jk-contactm__go {
	flex: none;
	color: var(--jk-faint);
	transition: color .18s, transform .18s;
}

.jk-contactm__go .jk-i { width: 18px; height: 18px; }
.jk-contactm:hover .jk-contactm__go { color: var(--jk-brand); transform: translateX(3px); }

/* ---- Social + reassurance ---- */

.jk-contact__social {
	padding: 20px;
	background: var(--jk-card);
	border: 1px solid var(--jk-line);
	border-radius: 18px;
}

.jk-contact__social p {
	margin: 0 0 12px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--jk-muted);
}

.jk-contact__social .jk-socials { margin: 0; }

.jk-contact__social .jk-socials a {
	color: var(--jk-muted);
	background: var(--jk-bg);
	border-color: var(--jk-line);
}

.jk-contact__social .jk-socials a:hover { color: #fff; background: var(--jk-brand); border-color: transparent; }

.jk-contact__note {
	display: flex;
	gap: 10px;
	padding: 0 4px;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--jk-muted);
}

.jk-contact__note .jk-i { flex: none; width: 16px; height: 16px; color: var(--jk-brand-300); }

@media (max-width: 980px) {
	.jk-inner__body--contact > .jk-wrap { grid-template-columns: minmax(0, 1fr); }
	.jk-contact { position: static; }
	.jk-abstats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
	.jk-inner__body--contact .jk-prose { padding: 28px 20px; }
	.jk-abstats li { padding: 18px 12px; }
}

/* ---- About: the founder's letter ----------------------------------------
   The page runs two sections through one card — the mission statement, then a
   signed letter — with nothing to tell them apart. There is no wrapper around
   either (they are a flat run of Elementor widgets), so the break is marked on
   the second heading, which a sibling selector can reach. */

.jk-inner__body--about .jk-eh ~ .jk-eh {
	margin: 46px 0 22px !important;
	padding: 18px 0 18px 22px !important;
	background: linear-gradient(90deg, rgba(108, 28, 255, .06), rgba(108, 28, 255, 0) 72%);
	border-left: 3px solid var(--jk-brand-300);
	border-radius: 0 14px 14px 0;
}

/* ---- About: closing call to action ---- */

.jk-aboutcta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	flex-wrap: wrap;
	max-width: 880px;
	margin: 26px auto 0;
	padding: 26px 32px;
	background: var(--jk-card);
	border: 1px solid var(--jk-line);
	border-radius: 20px;
	box-shadow: var(--jk-sh-1);
}

.jk-aboutcta__h {
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--jk-text);
}

.jk-aboutcta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---- Contact: the page's own social icons ----
   Elementor renders them in each network's brand colour, which is the one
   thing on the page not using the site's palette. */
.jk-inner__body--contact .elementor-social-icon {
	background: var(--jk-bg) !important;
	border: 1px solid var(--jk-line);
	border-radius: 12px !important;
	color: var(--jk-muted) !important;
	transition: color .18s, background .18s, transform .18s;
}

.jk-inner__body--contact .elementor-social-icon:hover {
	color: #fff !important;
	background: var(--jk-brand) !important;
	border-color: transparent;
	transform: translateY(-2px);
}

.jk-inner__body--contact .elementor-social-icon i,
.jk-inner__body--contact .elementor-social-icon svg { fill: currentColor; color: inherit !important; }

@media (max-width: 620px) {
	.jk-aboutcta { padding: 22px 20px; }
	.jk-aboutcta__actions .jk-btn { flex: 1 1 auto; justify-content: center; }
}

/* =========================================================================
   Privacy policy

   The policy arrives as 34 paragraphs in a single text editor with its section
   titles buried at the start of each one — see jk_structure_policy(), which
   promotes them to headings. With real headings there is an outline to put
   beside the text.
   ========================================================================= */

/* Two columns only when there is a contents list to put in the first one —
   without that guard the article would be squeezed into a 264px column. */
.jk-inner__body--hastoc > .jk-wrap {
	display: grid;
	grid-template-columns: 264px minmax(0, 1fr);
	align-items: start;
	gap: 28px;
}

.jk-inner__body--privacy .jk-prose {
	max-width: none;
	margin: 0;
	padding: 44px 48px;
}

/* ---- Table of contents ---- */

.jk-toc__inner {
	position: sticky;
	top: 110px;
	padding: 22px;
	background: var(--jk-card);
	border: 1px solid var(--jk-line);
	border-radius: 18px;
	box-shadow: var(--jk-sh-1);
}

.jk-toc__h {
	margin: 0 0 14px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--jk-muted);
}

.jk-toc ol {
	max-height: min(58vh, 520px);
	overflow-y: auto;
	margin: 0;
	padding: 0 4px 0 0;
	list-style: none;
	counter-reset: jk-toc;
	scrollbar-width: thin;
	scrollbar-color: var(--jk-line) transparent;
}

.jk-toc li { counter-increment: jk-toc; }

.jk-toc a {
	display: flex;
	gap: 10px;
	padding: 7px 8px;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--jk-muted);
	border-radius: 8px;
	transition: color .16s, background .16s;
}

.jk-toc a::before {
	content: counter(jk-toc);
	flex: none;
	width: 18px;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.7;
	text-align: right;
	color: var(--jk-faint);
}

.jk-toc a:hover { color: var(--jk-brand); background: var(--jk-bg); }
.jk-toc a:hover::before { color: var(--jk-brand-300); }

.jk-toc__updated {
	margin: 14px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--jk-line);
	font-size: 12.5px;
	color: var(--jk-faint);
}

/* ---- Section headings ---- */

.jk-prose .jk-policy__h {
	margin: 40px 0 12px;
	font-family: var(--jk-font);
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.3;
	text-transform: none;
	color: var(--jk-text);
	/* The fixed header would otherwise sit over a section jumped to. */
	scroll-margin-top: 110px;
}

.jk-prose .jk-policy__h:first-of-type { margin-top: 8px; }

.jk-inner__body--privacy .jk-prose p { margin-bottom: 16px; }

@media (max-width: 1000px) {
	.jk-inner__body--hastoc > .jk-wrap { grid-template-columns: minmax(0, 1fr); }

	.jk-toc__inner { position: static; }
	.jk-toc ol { max-height: 220px; }
}

@media (max-width: 620px) {
	.jk-inner__body--privacy .jk-prose { padding: 28px 20px; }
}