/* =========================================================
   KiaraHub Jobs — job-portal layer on top of the parent
   KiaraHub design system (colors/typography come from the
   parent theme's assets/css/theme.css custom properties).
   ========================================================= */

/* ---------- Logo text fallback (no custom logo set) ---------- */
.kiarajobs-logo-text {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 22px;
	color: var(--kh-navy);
}
.kiarajobs-logo-text span { color: var(--kh-saffron); }
.kiarajobs-logo-footer { color: #fff; font-size: 20px; }
.kiarajobs-logo-footer span { color: var(--kh-saffron); }

/* ---------- Hero search (two inputs + button) ---------- */
.kiarajobs-search-form {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.kiarajobs-search-form input[type="text"] {
	flex: 1 1 200px;
	padding: 14px 16px;
	border: 1px solid var(--kh-border);
	border-radius: var(--kh-radius);
	font-family: var(--font-body);
	font-size: 15px;
}
.kiarajobs-search-form button { flex: 0 0 auto; }
.kiarajobs-inline-stats { margin: 20px 0; }

/* ---------- Category grid ---------- */
.kiarajobs-category-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 16px;
	margin-top: 24px;
}
.kiarajobs-category-card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 20px;
	background: var(--kh-surface);
	border: 1px solid var(--kh-border);
	border-radius: var(--kh-radius);
	box-shadow: var(--kh-shadow);
	transition: box-shadow .2s ease, transform .2s ease;
}
.kiarajobs-category-card:hover { box-shadow: var(--kh-shadow-hover); transform: translateY(-2px); }
.kiarajobs-category-name { font-family: var(--font-display); font-weight: 600; color: var(--kh-navy); }
.kiarajobs-category-count { font-size: 13px; color: var(--kh-muted); }

/* ---------- Job grid + card ---------- */
.kiarajobs-job-grid,
ul.job_listings.kiarajobs-job-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
}
li.job_listing.kiarajobs-job-card {
	list-style: none;
	background: var(--kh-surface);
	border: 1px solid var(--kh-border);
	border-radius: var(--kh-radius);
	box-shadow: var(--kh-shadow);
	overflow: hidden;
	transition: box-shadow .2s ease, transform .2s ease;
	position: relative;
}
li.job_listing.kiarajobs-job-card:hover { box-shadow: var(--kh-shadow-hover); transform: translateY(-2px); }
.kiarajobs-job-card a { display: block; padding: 20px; color: inherit; text-decoration: none; }
.kiarajobs-job-card-top { display: flex; align-items: flex-start; gap: 12px; }
.kiarajobs-job-card .company_logo,
.kiarajobs-company-logo {
	width: 48px; height: 48px; border-radius: 10px; object-fit: cover; flex: 0 0 auto;
	background: var(--kh-bg);
}
.kiarajobs-logo-fallback {
	display: flex; align-items: center; justify-content: center;
	font-family: var(--font-display); font-weight: 700; color: #fff;
	background: var(--kh-navy);
}
.kiarajobs-job-card .position h3 {
	margin: 0 0 4px; font-family: var(--font-display); font-size: 17px; color: var(--kh-navy);
}
.kiarajobs-job-card .company { font-size: 13px; color: var(--kh-muted); }
.kiarajobs-job-card .company .tagline { display: block; opacity: .8; }
.kiarajobs-job-location { margin-top: 10px; font-size: 13px; color: var(--kh-muted); }
.kiarajobs-job-location .google_map_link { color: inherit; }
.kiarajobs-job-salary {
	margin-top: 8px; font-family: var(--font-mono); font-weight: 600; color: var(--kh-teal); font-size: 14px;
}
.kiarajobs-job-meta {
	display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none;
}
.kiarajobs-job-meta li {
	background: var(--kh-bg); border-radius: 999px; padding: 4px 10px; font-size: 12px; color: var(--kh-navy);
}
.kiarajobs-job-meta li.date { background: transparent; padding-left: 0; color: var(--kh-muted); }
.kiarajobs-featured-tag {
	position: absolute; top: 14px; right: 14px;
	background: var(--kh-saffron); color: #fff; font-family: var(--font-mono);
	font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
}
.kiarajobs-job-featured { border-color: var(--kh-saffron); }
.kiarajobs-filled-tag { background: var(--kh-muted); color: #fff; }
.kiarajobs-empty-state { padding: 40px 0; text-align: center; color: var(--kh-muted); }

/* ---------- Page banners ---------- */
.kiarajobs-page-banner {
	background: var(--kh-navy);
	color: #fff;
	padding: 56px 0;
	text-align: center;
}
.kiarajobs-page-banner .kiara-title { color: #fff; margin-bottom: 8px; }
.kiarajobs-page-banner p { color: rgba(255,255,255,0.75); margin: 0; }
.kiarajobs-employer-banner { background: var(--kh-navy); }
.kiarajobs-candidate-banner { background: var(--kh-teal); }
.kiarajobs-job-banner-inner { display: flex; align-items: center; gap: 20px; text-align: left; }
.kiarajobs-job-banner-logo .kiarajobs-company-logo { width: 72px; height: 72px; border-radius: 14px; }
.kiarajobs-job-banner-meta { margin-top: 6px; color: rgba(255,255,255,0.8); font-size: 14px; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Archive / find-jobs layout ---------- */
.kiarajobs-archive-wrap,
.kiarajobs-single-job-wrap {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 40px;
	padding: 48px 0;
	align-items: start;
}
.kiarajobs-archive-sidebar,
.kiarajobs-single-job-sidebar { display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 900px) {
	.kiarajobs-archive-wrap, .kiarajobs-single-job-wrap { grid-template-columns: 1fr; }
}

/* ---------- Dashboard / form layouts ---------- */
.kiarajobs-dashboard-wrap,
.kiarajobs-form-wrap {
	display: grid;
	grid-template-columns: 1fr 280px;
	gap: 32px;
	padding: 40px 0 64px;
	align-items: start;
}
@media (max-width: 900px) {
	.kiarajobs-dashboard-wrap, .kiarajobs-form-wrap { grid-template-columns: 1fr; }
}
.kiarajobs-dashboard-actions { margin-bottom: 20px; }
.kiarajobs-widget {
	background: var(--kh-surface); border: 1px solid var(--kh-border); border-radius: var(--kh-radius);
	padding: 20px; box-shadow: var(--kh-shadow);
}
.kiarajobs-widget ul { margin: 8px 0 0; padding: 0; list-style: none; }
.kiarajobs-widget ul li { margin-bottom: 8px; }
.kiarajobs-trust-list { padding-left: 18px; list-style: disc; }
.kiarajobs-addon-notice {
	background: var(--kh-bg); border: 1px dashed var(--kh-border); border-radius: var(--kh-radius);
	padding: 24px; color: var(--kh-muted);
}

/* ---------- WP Job Manager form styling (submit job / dashboard / filters) ---------- */
.kiarajobs-submit-job-form form,
.kiarajobs-submit-resume-form form,
.job-manager-form {
	background: var(--kh-surface);
	border: 1px solid var(--kh-border);
	border-radius: var(--kh-radius);
	padding: 28px;
	box-shadow: var(--kh-shadow);
}
.job-manager-form-field { margin-bottom: 18px; }
.job-manager-form label,
.job-manager-form legend { font-family: var(--font-display); font-weight: 600; color: var(--kh-navy); margin-bottom: 6px; display: block; }
.job-manager-form input[type="text"],
.job-manager-form input[type="email"],
.job-manager-form input[type="password"],
.job-manager-form input[type="number"],
.job-manager-form input[type="url"],
.job-manager-form select,
.job-manager-form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--kh-border);
	border-radius: 10px;
	font-family: var(--font-body);
	font-size: 15px;
}
.job-manager-form .button,
.job-manager-form input[type="submit"],
.job-manager-form button {
	background: var(--kh-saffron);
	color: #fff;
	border: none;
	padding: 12px 24px;
	border-radius: 999px;
	font-family: var(--font-display);
	font-weight: 600;
	cursor: pointer;
}
.job-manager-form .button:hover,
.job-manager-form input[type="submit"]:hover { background: var(--kh-saffron-dark); }

/* Job filters / search bar rendered by the [jobs] shortcode */
.job_filters,
.job-manager-filters {
	background: var(--kh-surface);
	border: 1px solid var(--kh-border);
	border-radius: var(--kh-radius);
	padding: 20px;
	box-shadow: var(--kh-shadow);
	margin-bottom: 24px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.job_filters input, .job_filters select { padding: 10px 12px; border-radius: 8px; border: 1px solid var(--kh-border); }

/* Job dashboard table (employer's list of posted jobs) */
.job_dashboard table.job_dashboard,
.job-manager-jobs-dashboard table {
	width: 100%;
	border-collapse: collapse;
	background: var(--kh-surface);
	border: 1px solid var(--kh-border);
	border-radius: var(--kh-radius);
	overflow: hidden;
}
.job_dashboard table.job_dashboard th,
.job-manager-jobs-dashboard table th {
	background: var(--kh-bg);
	font-family: var(--font-display);
	text-align: left;
	padding: 12px 16px;
}
.job_dashboard table.job_dashboard td,
.job-manager-jobs-dashboard table td {
	padding: 12px 16px;
	border-top: 1px solid var(--kh-border);
}

/* Single job listing content (application box etc. injected by WPJM) */
.kiarajobs-single-job-content .application,
.single_job_listing .application {
	margin-top: 24px;
	padding: 20px;
	background: var(--kh-bg);
	border-radius: var(--kh-radius);
}
.kiarajobs-single-job-content .application_button,
.single_job_listing .application_button {
	background: var(--kh-saffron);
	color: #fff;
	border-radius: 999px;
	padding: 12px 28px;
	font-family: var(--font-display);
	font-weight: 600;
}

/* Pagination */
.job-manager-pagination,
.job-manager-pagination-trigger { text-align: center; margin-top: 24px; }
.job-manager-pagination a, .load_more_jobs {
	display: inline-block; padding: 10px 20px; border-radius: 999px;
	border: 1px solid var(--kh-border); font-family: var(--font-display); font-weight: 600; color: var(--kh-navy);
}

.kiarajobs-page-intro { margin-bottom: 24px; }

/* =========================================================
   JobBoardWP support — its exact internal class names can't
   be confirmed without the plugin's PHP source in hand, so
   these selectors are intentionally broad (wrapper classes we
   control + generic form/list/element selectors) rather than
   guesses at JobBoardWP's specific internal markup. Open
   devtools on a live /find-jobs/ page and add 1-2 lines here
   for pixel-perfect job-card styling if you want it.
   ========================================================= */

/* ---------- Category "chips" ([jb_job_categories_list]) ---------- */
.kiarajobs-categories-section ul { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 20px 0 0; }
.kiarajobs-categories-section a {
	display: inline-block;
	padding: 10px 18px;
	background: var(--kh-surface);
	border: 1px solid var(--kh-border);
	border-radius: 999px;
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--kh-navy);
	text-decoration: none;
	transition: box-shadow .2s ease, transform .2s ease;
}
.kiarajobs-categories-section a:hover { box-shadow: var(--kh-shadow-hover); transform: translateY(-2px); }

/* ---------- Job listing wrapper ([jb_jobs] output) ---------- */
.kiarajobs-job-grid-wrap,
.kiarajobs-jobs-list {
	margin-top: 12px;
}
.kiarajobs-job-grid-wrap ul,
.kiarajobs-jobs-list ul {
	list-style: none;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
	margin: 24px 0 0;
}
.kiarajobs-job-grid-wrap li,
.kiarajobs-jobs-list li {
	background: var(--kh-surface);
	border: 1px solid var(--kh-border);
	border-radius: var(--kh-radius);
	box-shadow: var(--kh-shadow);
	padding: 20px;
	transition: box-shadow .2s ease, transform .2s ease;
}
.kiarajobs-job-grid-wrap li:hover,
.kiarajobs-jobs-list li:hover { box-shadow: var(--kh-shadow-hover); transform: translateY(-2px); }
.kiarajobs-job-grid-wrap li a,
.kiarajobs-jobs-list li a { color: var(--kh-navy); text-decoration: none; }
.kiarajobs-job-grid-wrap h3, .kiarajobs-job-grid-wrap h2,
.kiarajobs-jobs-list h3, .kiarajobs-jobs-list h2 { font-family: var(--font-display); color: var(--kh-navy); }

/* JobBoardWP's own forms ([jb_post_job], [jb_jobs_dashboard]) reuse the
   same visual treatment as WP Job Manager's forms above via generic
   form-element selectors, so nothing extra is required here. */

/* =========================================================
   Candidate profile / resume system (this theme's own, works
   with either job plugin — see inc/candidate-resumes.php).
   ========================================================= */
.kiarajobs-resume-form { margin-bottom: 8px; }
.kiarajobs-checkbox-field label { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.kiarajobs-current-file { margin-top: 8px; font-size: 13px; color: var(--kh-muted); }
.kiarajobs-candidate-dashboard-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
@media (max-width: 700px) {
	.kiarajobs-candidate-dashboard-grid { grid-template-columns: 1fr; }
}
.kiarajobs-skills { color: var(--kh-muted); font-size: 14px; }
.kiarajobs-visibility-status { font-size: 13px; color: var(--kh-teal); font-weight: 600; }
.kiarajobs-saved-jobs-list { list-style: none; padding: 0; margin: 8px 0 0; }
.kiarajobs-saved-jobs-list li { margin-bottom: 8px; }
.kiarajobs-save-job-wrap { margin-top: 16px; }
.kiarajobs-save-job-btn[data-saved="1"] { border-color: var(--kh-saffron); color: var(--kh-saffron); }
.kiarajobs-inline-notice { margin-bottom: 20px; }

/* =========================================================
   STICKY HEADER + ELEMENTOR CUSTOM-HEADER COMPATIBILITY
   =========================================================
   Sticky by default. If Elementor Pro's Theme Builder is used
   to design a custom header (registered as the "header"
   location — see inc/enqueue.php / functions.php), header.php
   skips its own markup entirely and Elementor's own header
   section renders instead; the rules below then also apply to
   that Elementor wrapper so it sticks correctly and layers
   above page content without fighting the WP admin bar or
   Elementor's own popups/toolbars. */
.kiara-header,
.elementor-location-header {
	position: sticky;
	top: 0;
	z-index: 999; /* below the WP admin bar (99999) and Elementor's editor UI, above page content */
	transition: box-shadow .25s ease, background-color .25s ease;
}
/* Offset for the WP admin bar so the sticky header doesn't sit under it. */
body.admin-bar .kiara-header,
body.admin-bar .elementor-location-header { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .kiara-header,
	body.admin-bar .elementor-location-header { top: 46px; }
}
/* Subtle shadow once the page has scrolled — toggled by assets/js/jobs.js. */
.kiara-header.kiarajobs-header--scrolled,
.elementor-location-header.kiarajobs-header--scrolled {
	box-shadow: 0 2px 16px rgba(15, 23, 42, 0.08);
}
@media (prefers-reduced-motion: reduce) {
	.kiara-header, .elementor-location-header { transition: none; }
}
/* If an Elementor header section has its own "Sticky" effect enabled in
   the editor, Elementor adds this class and manages position itself —
   defer to it instead of double-stacking sticky rules. */
.elementor-sticky--active.elementor-location-header {
	position: fixed;
}