/*
 * KeyStaff Pro – Job Listings Frontend Styles
 * Brand colors from KeyStaff Professionals logo.
 * Full-width layout, no sidebar.
 */

:root {
	--ksp-plum:         #7B3B6E;
	--ksp-plum-dark:    #5e2c54;
	--ksp-plum-light:   #f5eef3;
	--ksp-steel:        #5B7A9D;
	--ksp-steel-dark:   #44607e;
	--ksp-steel-light:  #eef3f8;
	--ksp-gray:         #9B9B9B;
	--ksp-tan:          #C8B89A;
	--ksp-text:         #2d2d2d;
	--ksp-text-muted:   #666;
	--ksp-white:        #ffffff;
	--ksp-border:       #e2e2e2;
	--ksp-radius:       8px;
	--ksp-radius-sm:    4px;
	--ksp-shadow:       0 2px 8px rgba(0,0,0,0.07);
	--ksp-shadow-hover: 0 6px 20px rgba(123,59,110,0.15);
	--ksp-transition:   0.18s ease;
	--ksp-container:    860px;   /* narrow — no sidebar needed */
}

/* ── Reset ───────────────────────────────────────────────────────────────────── */
.ksp-archive-wrap *,
.ksp-single-wrap * { box-sizing: border-box; }

/* ── Container ───────────────────────────────────────────────────────────────── */
.ksp-container {
	max-width: 1060px;
	margin: 0 auto;
	padding: 0 24px;
}
.ksp-container--narrow {
	max-width: var(--ksp-container);
}

/* ══════════════════════════════════════════════════════════════════
   ARCHIVE
══════════════════════════════════════════════════════════════════ */

.ksp-archive-wrap { padding-bottom: 60px; }

/* ── Page Header ─────────────────────────────────────────────────────────────── */
.ksp-archive-header {
	background: linear-gradient(135deg, var(--ksp-plum) 0%, var(--ksp-steel) 100%);
	color: var(--ksp-white);
	padding: 52px 24px 44px;
	text-align: center;
	margin-bottom: 0;
}
.ksp-archive-title {
	font-size: clamp(26px, 4vw, 40px);
	font-weight: 700;
	color: var(--ksp-white) !important;
	margin: 0 0 10px;
}
.ksp-archive-subtitle {
	font-size: 16px;
	color: rgba(255,255,255,0.85);
	margin: 0 auto;
	max-width: 520px;
}

/* ── Search Panel ────────────────────────────────────────────────────────────── */
.ksp-search-panel {
	background: var(--ksp-white);
	border: 1px solid var(--ksp-border);
	border-radius: var(--ksp-radius);
	padding: 22px 24px;
	margin: 28px 0 24px;
	box-shadow: var(--ksp-shadow);
}
.ksp-search-form { display: flex; flex-direction: column; gap: 14px; }

.ksp-search-fields {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 12px;
}
.ksp-search-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.ksp-search-field label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--ksp-plum);
}
.ksp-search-field input,
.ksp-search-field select {
	width: 100%;
	padding: 9px 13px;
	border: 1px solid var(--ksp-border);
	border-radius: var(--ksp-radius-sm);
	font-size: 14px;
	color: var(--ksp-text);
	background: #fafafa;
	transition: border-color var(--ksp-transition), box-shadow var(--ksp-transition);
	height: 40px;
}
.ksp-search-field input:focus,
.ksp-search-field select:focus {
	outline: none;
	border-color: var(--ksp-plum);
	background: var(--ksp-white);
	box-shadow: 0 0 0 3px rgba(123,59,110,0.1);
}

.ksp-search-actions {
	display: flex;
	align-items: center;
	gap: 12px;
}
.ksp-btn-search {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--ksp-plum);
	color: var(--ksp-white);
	border: none;
	padding: 10px 24px;
	border-radius: var(--ksp-radius-sm);
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: background var(--ksp-transition), transform var(--ksp-transition);
	letter-spacing: 0.02em;
}
.ksp-btn-search svg { width: 16px; height: 16px; fill: currentColor; }
.ksp-btn-search:hover {
	background: var(--ksp-plum-dark);
	transform: translateY(-1px);
}
.ksp-btn-clear {
	font-size: 13px;
	color: var(--ksp-text-muted);
	text-decoration: none;
}
.ksp-btn-clear:hover { color: var(--ksp-plum); text-decoration: underline; }

/* ── Results Count ───────────────────────────────────────────────────────────── */
.ksp-results-count {
	font-size: 14px;
	color: var(--ksp-text-muted);
	margin: 0 0 16px;
}

/* ── Jobs List (row layout) ──────────────────────────────────────────────────── */
.ksp-jobs-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 36px;
}

/* ── Job Row ─────────────────────────────────────────────────────────────────── */
.ksp-job-row {
	background: var(--ksp-white);
	border: 1px solid var(--ksp-border);
	border-radius: var(--ksp-radius);
	padding: 20px 24px;
	display: flex;
	align-items: center;
	gap: 20px;
	box-shadow: var(--ksp-shadow);
	transition: box-shadow var(--ksp-transition), transform var(--ksp-transition);
}
.ksp-job-row:hover {
	box-shadow: var(--ksp-shadow-hover);
	transform: translateY(-2px);
}
.ksp-job-row--featured {
	border-left: 4px solid var(--ksp-plum);
}

.ksp-job-row__main { flex: 1; min-width: 0; }

.ksp-job-row__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 7px;
}
.ksp-job-row__title {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 8px;
	line-height: 1.3;
}
.ksp-job-row__title a {
	color: var(--ksp-text);
	text-decoration: none;
	transition: color var(--ksp-transition);
}
.ksp-job-row__title a:hover { color: var(--ksp-plum); }

.ksp-job-row__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin-bottom: 8px;
}
.ksp-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	color: var(--ksp-text-muted);
}
.ksp-meta-item svg { width: 14px; height: 14px; fill: var(--ksp-plum); opacity: 0.7; flex-shrink: 0; }
.ksp-meta-item--date { color: #999; }

.ksp-job-row__excerpt {
	font-size: 13px;
	color: var(--ksp-text-muted);
	line-height: 1.55;
	margin: 0;
}

.ksp-job-row__actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex-shrink: 0;
	min-width: 130px;
	align-items: stretch;
}

/* ── No Jobs ─────────────────────────────────────────────────────────────────── */
.ksp-no-jobs {
	text-align: center;
	padding: 60px 20px;
	color: var(--ksp-text-muted);
}
.ksp-no-jobs svg { width: 44px; height: 44px; fill: var(--ksp-gray); margin-bottom: 14px; }
.ksp-no-jobs h2 { font-size: 20px; color: var(--ksp-text); margin: 0 0 8px; }
.ksp-no-jobs a { color: var(--ksp-plum); }

/* ── Pagination ──────────────────────────────────────────────────────────────── */
.ksp-pagination { text-align: center; margin-top: 8px; }
.ksp-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	margin: 0 2px;
	border-radius: var(--ksp-radius-sm);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	border: 1px solid var(--ksp-border);
	color: var(--ksp-text);
	transition: all var(--ksp-transition);
}
.ksp-pagination .page-numbers:hover,
.ksp-pagination .page-numbers.current {
	background: var(--ksp-plum);
	color: var(--ksp-white);
	border-color: var(--ksp-plum);
}

/* ══════════════════════════════════════════════════════════════════
   SINGLE JOB – FULL WIDTH
══════════════════════════════════════════════════════════════════ */

.ksp-single-wrap { padding: 32px 0 60px; }

/* ── Breadcrumb ──────────────────────────────────────────────────────────────── */
.ksp-breadcrumb { margin-bottom: 18px; }
.ksp-breadcrumb a {
	font-size: 14px;
	color: var(--ksp-steel);
	text-decoration: none;
}
.ksp-breadcrumb a:hover { color: var(--ksp-plum); text-decoration: underline; }

/* ── Job Header Card ─────────────────────────────────────────────────────────── */
.ksp-single-header {
	background: var(--ksp-white);
	border: 1px solid var(--ksp-border);
	border-top: 4px solid var(--ksp-plum);
	border-radius: var(--ksp-radius);
	padding: 28px 32px;
	margin-bottom: 20px;
	box-shadow: var(--ksp-shadow);
}
.ksp-single-header__top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 10px;
}
.ksp-single-header__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.ksp-job-title {
	font-size: clamp(22px, 3vw, 32px) !important;
	font-weight: 700;
	color: var(--ksp-text) !important;
	margin: 0 0 18px !important;
	line-height: 1.25;
}
.ksp-job-highlights {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
}
.ksp-highlight-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	color: var(--ksp-text-muted);
}
.ksp-highlight-item svg { width: 16px; height: 16px; fill: var(--ksp-plum); flex-shrink: 0; }
.ksp-highlight-item--date { color: #999; font-size: 13px; }

/* ── Details Grid ────────────────────────────────────────────────────────────── */
.ksp-details-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 1px;
	background: var(--ksp-border);
	border: 1px solid var(--ksp-border);
	border-radius: var(--ksp-radius);
	overflow: hidden;
	margin-bottom: 20px;
}
.ksp-details-grid__item {
	background: var(--ksp-white);
	padding: 14px 18px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.ksp-details-grid__label {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ksp-plum);
}
.ksp-details-grid__value {
	font-size: 14px;
	font-weight: 600;
	color: var(--ksp-text);
}

/* ── Content Sections ────────────────────────────────────────────────────────── */
.ksp-single-section {
	background: var(--ksp-white);
	border: 1px solid var(--ksp-border);
	border-radius: var(--ksp-radius);
	padding: 26px 32px;
	margin-bottom: 20px;
	box-shadow: var(--ksp-shadow);
}
.ksp-single-section h2 {
	font-size: 17px !important;
	font-weight: 700;
	color: var(--ksp-plum) !important;
	margin: 0 0 14px !important;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--ksp-plum-light);
}
.ksp-job-content { font-size: 15px; line-height: 1.75; color: var(--ksp-text); }
.ksp-job-content p { margin: 0 0 14px; }
.ksp-job-content ul,
.ksp-job-content ol { margin: 0 0 14px; padding-left: 22px; }
.ksp-job-content li { margin-bottom: 5px; }

/* ── Skills ──────────────────────────────────────────────────────────────────── */
.ksp-skills-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.ksp-skills-list li {
	background: var(--ksp-steel-light);
	color: var(--ksp-steel-dark);
	border: 1px solid #c9d9e8;
	border-radius: 20px;
	padding: 5px 14px;
	font-size: 13px;
	font-weight: 500;
}

/* ── Apply CTA ───────────────────────────────────────────────────────────────── */
.ksp-apply-section {
	background: var(--ksp-plum-light);
	border: 1px solid rgba(123,59,110,0.15);
	border-radius: var(--ksp-radius);
	padding: 30px 32px;
	text-align: center;
	margin-bottom: 20px;
}
.ksp-apply-section h2 {
	font-size: 20px !important;
	font-weight: 700;
	color: var(--ksp-plum) !important;
	margin: 0 0 8px !important;
}
.ksp-apply-section p {
	font-size: 15px;
	color: var(--ksp-text-muted);
	margin: 0 0 20px;
}
.ksp-apply-section__actions {
	display: flex;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════════════════
   SHARED COMPONENTS
══════════════════════════════════════════════════════════════════ */

/* ── Badges ──────────────────────────────────────────────────────────────────── */
.ksp-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 3px 10px;
	border-radius: 20px;
}
.ksp-badge--type {
	background: var(--ksp-plum-light);
	color: var(--ksp-plum);
	border: 1px solid rgba(123,59,110,0.2);
}
.ksp-badge--cat {
	background: var(--ksp-steel-light);
	color: var(--ksp-steel-dark);
	border: 1px solid rgba(91,122,157,0.2);
}
.ksp-badge--featured {
	background: #fff8e1;
	color: #856404;
	border: 1px solid #f0c040;
}

/* ── Buttons ─────────────────────────────────────────────────────────────────── */
.ksp-btn-apply {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--ksp-plum);
	color: var(--ksp-white) !important;
	text-decoration: none;
	font-size: 13px;
	font-weight: 700;
	padding: 9px 20px;
	border-radius: var(--ksp-radius-sm);
	border: 2px solid var(--ksp-plum);
	transition: background var(--ksp-transition), transform var(--ksp-transition);
	letter-spacing: 0.02em;
	white-space: nowrap;
	cursor: pointer;
}
.ksp-btn-apply:hover {
	background: var(--ksp-plum-dark);
	border-color: var(--ksp-plum-dark);
	color: var(--ksp-white) !important;
	transform: translateY(-1px);
}
.ksp-btn-apply--large { font-size: 15px; padding: 12px 28px; }

.ksp-btn-outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	padding: 9px 18px;
	border-radius: var(--ksp-radius-sm);
	border: 2px solid var(--ksp-steel);
	color: var(--ksp-steel) !important;
	background: transparent;
	transition: all var(--ksp-transition);
	white-space: nowrap;
}
.ksp-btn-outline:hover {
	background: var(--ksp-steel);
	color: var(--ksp-white) !important;
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════════ */

@media ( max-width: 900px ) {
	.ksp-search-fields {
		grid-template-columns: 1fr 1fr;
	}
	.ksp-search-field--keyword {
		grid-column: 1 / -1;
	}
}

@media ( max-width: 640px ) {
	.ksp-archive-header { padding: 36px 16px 30px; }
	.ksp-search-fields { grid-template-columns: 1fr; }
	.ksp-search-field--keyword { grid-column: auto; }
	.ksp-btn-search { width: 100%; justify-content: center; }

	.ksp-job-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}
	.ksp-job-row__actions {
		flex-direction: row;
		width: 100%;
		min-width: 0;
	}
	.ksp-job-row__actions a { flex: 1; text-align: center; }

	.ksp-single-header { padding: 20px; }
	.ksp-single-header__top { flex-direction: column; }
	.ksp-single-section { padding: 20px; }
	.ksp-apply-section { padding: 22px 20px; }
	.ksp-apply-section__actions { flex-direction: column; }
	.ksp-apply-section__actions a { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════
   JUPITERX SIDEBAR SUPPRESSION SAFETY NET
   Hides any residual sidebar column JupiterX may still render
   on the jobs archive and single job pages.
══════════════════════════════════════════════════════════════════ */

.ksp-no-sidebar .jupiterx-sidebar,
.ksp-no-sidebar #jupiterx-sidebar,
.ksp-no-sidebar .jupiterx-sidebar-col,
.ksp-no-sidebar aside.jupiterx-sidebar,
.ksp-no-sidebar .raven-sidebar,
.ksp-no-sidebar [class*="jupiterx-sidebar"],
.ksp-no-sidebar [id*="jupiterx-sidebar"] {
	display: none !important;
}

/* Expand the main content column to full width */
.ksp-no-sidebar .jupiterx-main,
.ksp-no-sidebar #jupiterx-main,
.ksp-no-sidebar .jupiterx-content,
.ksp-no-sidebar #jupiterx-content,
.ksp-no-sidebar .jupiterx-main-col,
.ksp-no-sidebar [class*="jupiterx-main"] {
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 100% !important;
}

/* ══════════════════════════════════════════════════════════════════
   JUPITERX FULL-WIDTH OVERRIDES (aggressive)
   Targets JupiterX 4.x grid structure to force full-width layout
   on ksp_job archive and single pages.
══════════════════════════════════════════════════════════════════ */

/* Hide the "Archives: Jobs" duplicate title bar JupiterX injects */
.post-type-archive-ksp_job .jupiterx-page-title,
.post-type-archive-ksp_job .jupiterx-breadcrumb,
.post-type-archive-ksp_job .raven-page-title,
.single-ksp_job .jupiterx-page-title,
.single-ksp_job .jupiterx-breadcrumb,
.single-ksp_job .raven-page-title,
.ksp-no-sidebar .jupiterx-page-title,
.ksp-no-sidebar .jupiterx-breadcrumb,
.ksp-no-sidebar .raven-page-title {
	display: none !important;
}

/* Remove top padding gap left by hidden title bar */
.post-type-archive-ksp_job .jupiterx-main-content,
.single-ksp_job .jupiterx-main-content {
	padding-top: 0 !important;
}

/* Force the JupiterX row/grid to full width */
.post-type-archive-ksp_job .jupiterx-row,
.single-ksp_job .jupiterx-row,
.ksp-no-sidebar .jupiterx-row {
	display: block !important;
}

/* Kill every sidebar widget area */
.post-type-archive-ksp_job .jupiterx-sidebar,
.post-type-archive-ksp_job .jupiterx-sidebar-col,
.post-type-archive-ksp_job [class*="col-"][class*="sidebar"],
.post-type-archive-ksp_job aside,
.single-ksp_job .jupiterx-sidebar,
.single-ksp_job .jupiterx-sidebar-col,
.single-ksp_job [class*="col-"][class*="sidebar"],
.single-ksp_job aside,
.ksp-no-sidebar .jupiterx-sidebar,
.ksp-no-sidebar .jupiterx-sidebar-col,
.ksp-no-sidebar aside {
	display: none !important;
	width: 0 !important;
	flex: none !important;
}

/* Expand the primary content column */
.post-type-archive-ksp_job .jupiterx-primary,
.post-type-archive-ksp_job .jupiterx-primary-col,
.post-type-archive-ksp_job [class*="col-"][class*="primary"],
.post-type-archive-ksp_job [class*="col-"][class*="content"],
.post-type-archive-ksp_job .jupiterx-main,
.single-ksp_job .jupiterx-primary,
.single-ksp_job .jupiterx-primary-col,
.single-ksp_job [class*="col-"][class*="primary"],
.single-ksp_job [class*="col-"][class*="content"],
.single-ksp_job .jupiterx-main,
.ksp-no-sidebar .jupiterx-primary,
.ksp-no-sidebar .jupiterx-primary-col,
.ksp-no-sidebar .jupiterx-main {
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 100% !important;
	padding-right: 0 !important;
}

/* JupiterX uses Bootstrap-style col-* classes — override them */
.post-type-archive-ksp_job .col-md-8,
.post-type-archive-ksp_job .col-md-9,
.post-type-archive-ksp_job .col-lg-8,
.post-type-archive-ksp_job .col-lg-9,
.single-ksp_job .col-md-8,
.single-ksp_job .col-md-9,
.single-ksp_job .col-lg-8,
.single-ksp_job .col-lg-9 {
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 100% !important;
	padding-right: 15px !important;
}

.post-type-archive-ksp_job .col-md-4,
.post-type-archive-ksp_job .col-md-3,
.post-type-archive-ksp_job .col-lg-4,
.post-type-archive-ksp_job .col-lg-3,
.single-ksp_job .col-md-4,
.single-ksp_job .col-md-3,
.single-ksp_job .col-lg-4,
.single-ksp_job .col-lg-3 {
	display: none !important;
}

/* Push content down so it clears the fixed nav */
.post-type-archive-ksp_job .ksp-archive-wrap,
.single-ksp_job .ksp-single-wrap {
	padding-top: 30px;
}