/**
 * Hudson Atlas API — [hudson_atlas_jobs] shortcode styles.
 *
 * Colors are exposed as custom properties so the accent color can be
 * overridden from a theme stylesheet without editing this file, e.g.:
 *   .hudson-atlas-jobs { --hudson-atlas-accent: #7cb342; }
 */

.hudson-atlas-jobs {
	--hudson-atlas-accent: #8bc53f;
	--hudson-atlas-accent-shade: #6fa62a;
	--hudson-atlas-accent-text: #2f4f0f;
	--hudson-atlas-text: #333333;
	--hudson-atlas-muted: #666666;
	--hudson-atlas-border: #dcdcdc;
	--hudson-atlas-card-bg: #f7f8f7;

	max-width: 100%;
	font-family: inherit;
	color: var(--hudson-atlas-text);
	box-sizing: border-box;
}

.hudson-atlas-jobs *,
.hudson-atlas-jobs *::before,
.hudson-atlas-jobs *::after {
	box-sizing: inherit;
}

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

.hudson-atlas-jobs__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 20px;
}

.hudson-atlas-jobs__keyword {
	flex: 1 1 320px;
	min-width: 0;
	padding: 12px 14px;
	font-size: 1rem;
	border: 1px solid var(--hudson-atlas-border);
	border-radius: 2px;
}

.hudson-atlas-jobs__submit {
	flex: 0 0 auto;
	padding: 12px 28px;
	background: var(--hudson-atlas-accent);
	color: var(--hudson-atlas-accent-text);
	font-weight: 700;
	border: none;
	border-radius: 2px;
	cursor: pointer;
}

.hudson-atlas-jobs__submit:hover,
.hudson-atlas-jobs__submit:focus-visible {
	filter: brightness(0.95);
}

.hudson-atlas-jobs__selects {
	flex: 1 0 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.hudson-atlas-jobs__category,
.hudson-atlas-jobs__job-type {
	flex: 1 1 260px;
	min-width: 0;
	padding: 12px 14px;
	font-size: 1rem;
	border: 1px solid var(--hudson-atlas-border);
	border-radius: 2px;
	background: #fff;
}

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

.hudson-atlas-jobs__results {
	display: flex;
	flex-direction: column;
	gap: 2px;
	transition: opacity 0.15s ease;
}

.hudson-atlas-jobs.is-loading .hudson-atlas-jobs__results {
	opacity: 0.5;
}

.hudson-atlas-jobs__empty {
	padding: 24px;
	text-align: center;
	color: var(--hudson-atlas-muted);
	background: var(--hudson-atlas-card-bg);
}

.hudson-atlas-jobs__load-more-wrap {
	text-align: center;
	margin-top: 20px;
}

.hudson-atlas-jobs__load-more {
	padding: 10px 24px;
	background: transparent;
	color: var(--hudson-atlas-text);
	border: 1px solid var(--hudson-atlas-border);
	border-radius: 2px;
	cursor: pointer;
}

.hudson-atlas-jobs__load-more:hover,
.hudson-atlas-jobs__load-more:focus-visible {
	background: var(--hudson-atlas-card-bg);
}

.hudson-atlas-jobs__load-more[disabled] {
	opacity: 0.6;
	cursor: default;
}

/* ---- Job card ---- */

.hudson-atlas-job-card {
	padding: 20px 24px;
	background: var(--hudson-atlas-card-bg);
}

.hudson-atlas-job-card__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}

.hudson-atlas-job-card__title {
	margin: 0;
	font-size: 1.15rem;
	line-height: 1.3;
}

.hudson-atlas-job-card__title a {
	color: var(--hudson-atlas-text);
	text-decoration: none;
}

.hudson-atlas-job-card__title a:hover,
.hudson-atlas-job-card__title a:focus-visible {
	text-decoration: underline;
}

.hudson-atlas-job-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	flex-shrink: 0;
}

.hudson-atlas-job-card__badge {
	display: inline-flex;
	align-items: center;
	padding: 8px 18px;
	/* Fallback values matter here: this class also renders on a single job's
	   own page (Single_Job_View), outside the .hudson-atlas-jobs wrapper
	   that otherwise defines these custom properties. */
	background: linear-gradient(135deg, var(--hudson-atlas-accent, #8bc53f), var(--hudson-atlas-accent-shade, #6fa62a));
	color: var(--hudson-atlas-accent-text, #1f3a08);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	border-radius: 999px;
	white-space: nowrap;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.hudson-atlas-job-card__excerpt {
	margin: 0;
	color: var(--hudson-atlas-muted);
	font-size: 0.95rem;
	line-height: 1.5;
}

@media (max-width: 640px) {
	.hudson-atlas-job-card__header {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ---- Single job page (Settings → Frontend Display) ---- */

.hudson-atlas-single-job__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}

.hudson-atlas-single-job__apply {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--hudson-atlas-border, #dcdcdc);
}

.hudson-atlas-single-job__apply-heading {
	margin: 0 0 16px;
}

/*
 * Atlas job descriptions often carry inline font-size/line-height on their
 * own paragraphs and spans (leftovers from whatever rich-text editor
 * produced them upstream), which otherwise overrides this site's normal
 * typography and makes the description look inconsistent with everything
 * else on the page. An external stylesheet rule can't out-specificity an
 * inline style attribute — only !important can — so this targets elements
 * that actually carry one of those two inline properties (leaving anything
 * else Atlas styled inline, like the "Apply by email" link's color, alone)
 * and forces them back to whatever this theme's own CSS already says a
 * plain <p>/<li>/<span> should look like.
 */
.hudson-atlas-single-job__description [style*="font-size"],
.hudson-atlas-single-job__description [style*="line-height"] {
	font-size: inherit !important;
	line-height: inherit !important;
}

/*
 * The job title and "published" date immediately above are rendered by the
 * theme's own single.php, not by this plugin — the_content() only controls
 * what comes after them. :has() lets us dress those up specifically on job
 * pages (detected via the .hudson-atlas-single-job wrapper the_content()
 * adds right after them) without editing any theme template file. Browsers
 * without :has() support simply keep the theme's default title/date styling
 * — a harmless progressive enhancement, not a broken layout.
 */
.container.blog:has(> .hudson-atlas-single-job) > h1:first-child {
	display: inline-block;
	margin-bottom: 12px;
	padding-bottom: 14px;
	border-bottom: 4px solid var(--hudson-atlas-accent, #8bc53f);
}

.container.blog:has(> .hudson-atlas-single-job) > p:has(> em > i) {
	margin-bottom: 24px;
	color: var(--hudson-atlas-muted, #666666);
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}