/* ==========================================================================
   WP JOB MANAGER
   The plugin ships deliberately minimal CSS so themes can take over. This
   theme's own reset — img { display:block; max-width:100%; height:auto } —
   overrides the plugin's fixed 40px company logo and inflates it to the full
   column width, and the search form falls back to raw browser controls. This
   file restyles the plugin's templates in the theme's design language.
   Loaded only when the plugin is active.
   ========================================================================== */

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

.job_filters {
	background: var(--card, #fff);
	border: 1px solid var(--line, rgba(15, 23, 42, .1));
	border-radius: var(--radius-lg, 18px);
	box-shadow: var(--shadow-sm, 0 2px 10px rgba(15, 23, 42, .05));
	padding: 22px;
	margin-bottom: 30px;
	overflow: hidden;
}

.job_filters .search_jobs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
	align-items: end;
}

.job_filters .search_jobs > div { min-width: 0; }

.job_filters label {
	display: block;
	margin-bottom: 7px;
	font-family: var(--font-body);
	font-size: var(--text-xs, .78rem);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--muted, #64748b);
}

.job_filters input[type="text"],
.job_filters input[type="search"],
.job_filters select {
	width: 100%;
	padding: 12px 14px;
	font-family: var(--font-body);
	font-size: var(--text-sm, .92rem);
	color: var(--ink, #0b1f3a);
	background: var(--bg, #fff);
	border: 1px solid var(--line, rgba(15, 23, 42, .14));
	border-radius: var(--radius-sm, 10px);
	transition: border-color .16s ease, box-shadow .16s ease;
}

.job_filters input:focus,
.job_filters select:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), .16);
}

/* The remote checkbox sits on its own row and should not stretch. */
.job_filters .search_remote_position {
	display: flex;
	align-items: center;
	gap: 9px;
	padding-bottom: 12px;
}

.job_filters .search_remote_position label {
	margin: 0;
	font-size: var(--text-sm, .9rem);
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink-2, #475569);
	cursor: pointer;
}

.job_filters .input-checkbox {
	width: 17px;
	height: 17px;
	accent-color: var(--color-primary);
	cursor: pointer;
}

.job_filters .search_submit {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--line-soft, rgba(15, 23, 42, .07));
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

.job_filters input[type="submit"],
.job_filters button[type="submit"] {
	padding: 12px 26px;
	font-family: var(--font-body);
	font-size: var(--text-sm, .9rem);
	font-weight: 700;
	color: #fff;
	background: var(--color-primary);
	border: 0;
	border-radius: var(--radius-full, 999px);
	cursor: pointer;
	transition: background-color .16s ease, transform .16s ease;
}

.job_filters input[type="submit"]:hover,
.job_filters button[type="submit"]:hover {
	background: var(--color-primary-dark, var(--color-primary));
	transform: translateY(-1px);
}

.job_filters .showing_jobs {
	font-size: var(--text-sm, .9rem);
	color: var(--muted, #64748b);
}

.job_filters .showing_jobs a { color: var(--color-primary); }

/* --------------------------------------------------------------------------
   The listing cards
   -------------------------------------------------------------------------- */

ul.job_listings {
	margin: 0 0 30px;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 14px;
	border: 0;
}

ul.job_listings li.job_listing,
ul.job_listings li.no_job_listings_found {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--line, rgba(15, 23, 42, .1));
	border-radius: var(--radius-lg, 16px);
	background: var(--card, #fff);
	overflow: hidden;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

ul.job_listings li.job_listing:hover {
	border-color: var(--color-primary);
	box-shadow: var(--shadow-md, 0 10px 30px rgba(15, 23, 42, .08));
	transform: translateY(-2px);
}

ul.job_listings li.job_listing a {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) auto;
	grid-template-areas: "logo position meta";
	align-items: center;
	gap: 6px 18px;
	padding: 20px 22px;
	text-decoration: none;
	color: inherit;
}

/*
 * The important one. The theme's global img reset stretches the company logo
 * to the full column width, which is what turned each card into a 450px grey
 * placeholder block.
 */
ul.job_listings li.job_listing img.company_logo {
	grid-area: logo;
	width: 56px;
	height: 56px;
	max-width: 56px;
	object-fit: contain;
	margin: 0;
	padding: 6px;
	background: var(--bg-alt, #f6f8fb);
	border: 1px solid var(--line-soft, rgba(15, 23, 42, .07));
	border-radius: var(--radius-sm, 10px);
}

ul.job_listings li.job_listing .position {
	grid-area: position;
	min-width: 0;
}

ul.job_listings li.job_listing .position h3 {
	margin: 0 0 5px;
	font-family: var(--font-display);
	font-size: var(--text-lg, 1.08rem);
	font-weight: 700;
	line-height: 1.3;
	color: var(--ink, #0b1f3a);
}

ul.job_listings li.job_listing:hover .position h3 { color: var(--color-primary); }

ul.job_listings li.job_listing .company {
	font-size: var(--text-sm, .88rem);
	color: var(--muted, #64748b);
}

ul.job_listings li.job_listing .company strong { font-weight: 600; }
ul.job_listings li.job_listing .company .tagline { margin-left: 6px; opacity: .85; }

ul.job_listings li.job_listing .location {
	grid-area: meta;
	justify-self: end;
	font-size: var(--text-sm, .88rem);
	color: var(--ink-2, #475569);
	text-align: right;
}

ul.job_listings li.job_listing ul.meta {
	grid-area: meta;
	grid-row: 2;
	justify-self: end;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--text-xs, .78rem);
}

ul.job_listings li.job_listing ul.meta li {
	margin: 0;
	padding: 4px 11px;
	list-style: none;
	border-radius: var(--radius-full, 999px);
	background: var(--bg-alt, #f1f5f9);
	color: var(--muted, #64748b);
	white-space: nowrap;
}

ul.job_listings li.job_listing ul.meta li.job-type {
	background: rgba(var(--color-primary-rgb), .1);
	color: var(--color-primary);
	font-weight: 700;
}

ul.job_listings li.job_listing ul.meta li.job-type.full-time { background: rgba(var(--color-primary-rgb), .1); }

ul.job_listings li.job_listing ul.meta li.job-type.part-time,
ul.job_listings li.job_listing ul.meta li.job-type.freelance,
ul.job_listings li.job_listing ul.meta li.job-type.internship {
	background: rgba(var(--color-secondary-rgb, 0, 194, 168), .12);
	color: var(--color-secondary, #00907c);
}

/* A filled or expired listing should read as closed. */
ul.job_listings li.job_listing.job_position_filled { opacity: .6; }

ul.job_listings li.job_listing.job_position_filled .position h3::after {
	content: " — " attr(data-filled-label);
}

ul.job_listings li.no_job_listings_found,
p.no_job_listings_found {
	padding: 34px 22px;
	text-align: center;
	color: var(--muted, #64748b);
	font-size: var(--text-md, 1rem);
}

/* --------------------------------------------------------------------------
   Load more / pagination
   -------------------------------------------------------------------------- */

.load_more_jobs {
	display: block;
	width: 100%;
	padding: 14px 24px;
	font-family: var(--font-body);
	font-size: var(--text-sm, .92rem);
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	color: var(--color-primary);
	background: var(--card, #fff);
	border: 1px solid var(--color-primary);
	border-radius: var(--radius-full, 999px);
	transition: background-color .16s ease, color .16s ease;
}

.load_more_jobs:hover { background: var(--color-primary); color: #fff; }
.load_more_jobs.loading { opacity: .6; pointer-events: none; }

.job-manager-pagination ul,
.job-manager-pagination { list-style: none; margin: 26px 0 0; padding: 0; }

.job-manager-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.job-manager-pagination a,
.job-manager-pagination span {
	display: grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	font-size: var(--text-sm, .9rem);
	font-weight: 600;
	text-decoration: none;
	color: var(--ink-2, #475569);
	border: 1px solid var(--line, rgba(15, 23, 42, .12));
	border-radius: var(--radius-sm, 10px);
}

.job-manager-pagination .current,
.job-manager-pagination a:hover {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}

/* --------------------------------------------------------------------------
   Single job listing
   -------------------------------------------------------------------------- */

.single_job_listing .company {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px 22px;
	margin-bottom: 26px;
	background: var(--card, #fff);
	border: 1px solid var(--line, rgba(15, 23, 42, .1));
	border-radius: var(--radius-lg, 16px);
}

.single_job_listing .company img.company_logo {
	width: 64px;
	height: 64px;
	max-width: 64px;
	object-fit: contain;
	margin: 0;
	padding: 6px;
	background: var(--bg-alt, #f6f8fb);
	border-radius: var(--radius-sm, 10px);
}

.single_job_listing .company .name {
	font-family: var(--font-display);
	font-size: var(--text-lg, 1.1rem);
	font-weight: 700;
	color: var(--ink, #0b1f3a);
}

.single_job_listing .company .name a { color: inherit; text-decoration: none; }
.single_job_listing .company .tagline { display: block; font-size: var(--text-sm, .9rem); color: var(--muted, #64748b); }

.single_job_listing .job-listing-meta,
ul.job-listing-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
}

.single_job_listing .job-listing-meta li,
ul.job-listing-meta li {
	margin: 0;
	padding: 7px 15px;
	list-style: none;
	font-size: var(--text-sm, .85rem);
	color: var(--ink-2, #475569);
	background: var(--bg-alt, #f1f5f9);
	border-radius: var(--radius-full, 999px);
}

.single_job_listing .job-listing-meta li.job-type,
ul.job-listing-meta li.job-type {
	background: rgba(var(--color-primary-rgb), .1);
	color: var(--color-primary);
	font-weight: 700;
}

.single_job_listing .job_description { margin-bottom: 32px; }

.single_job_listing .job_description h2,
.single_job_listing .job_description h3 {
	font-family: var(--font-display);
	color: var(--ink, #0b1f3a);
}

/* Application box */
.single_job_listing .job_application,
.job_application.application {
	padding: 24px;
	background: var(--card, #fff);
	border: 1px solid var(--line, rgba(15, 23, 42, .1));
	border-radius: var(--radius-lg, 16px);
	box-shadow: var(--shadow-sm, 0 2px 10px rgba(15, 23, 42, .05));
}

.job_application .application_button,
input.application_button,
a.application_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 28px;
	font-family: var(--font-body);
	font-size: var(--text-sm, .92rem);
	font-weight: 700;
	color: #fff;
	background: var(--color-primary);
	border: 0;
	border-radius: var(--radius-full, 999px);
	text-decoration: none;
	cursor: pointer;
	transition: background-color .16s ease, transform .16s ease;
}

.job_application .application_button:hover,
input.application_button:hover,
a.application_button:hover {
	background: var(--color-primary-dark, var(--color-primary));
	transform: translateY(-1px);
	color: #fff;
}

.job_application .application_details {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--line-soft, rgba(15, 23, 42, .07));
	font-size: var(--text-sm, .9rem);
	color: var(--ink-2, #475569);
}

.job_application .application_details a { color: var(--color-primary); }

.job-manager-info,
.job-manager-error,
.job-manager-message {
	padding: 14px 18px;
	margin: 0 0 22px;
	border-radius: var(--radius-sm, 10px);
	font-size: var(--text-sm, .92rem);
	border-left: 3px solid var(--color-primary);
	background: rgba(var(--color-primary-rgb), .07);
	color: var(--ink-2, #475569);
}

.job-manager-error {
	border-left-color: #DC2626;
	background: rgba(220, 38, 38, .07);
}

.listing-expired,
.position-filled {
	border-left-color: #D97706;
	background: rgba(217, 119, 6, .09);
}

/* --------------------------------------------------------------------------
   Submit form and dashboard
   -------------------------------------------------------------------------- */

.job-manager-form fieldset {
	margin: 0 0 20px;
	padding: 0;
	border: 0;
}

.job-manager-form fieldset label {
	display: block;
	margin-bottom: 7px;
	font-size: var(--text-sm, .88rem);
	font-weight: 600;
	color: var(--ink, #0b1f3a);
}

.job-manager-form .field input[type="text"],
.job-manager-form .field input[type="email"],
.job-manager-form .field input[type="url"],
.job-manager-form .field input[type="tel"],
.job-manager-form .field input[type="password"],
.job-manager-form .field select,
.job-manager-form .field textarea {
	width: 100%;
	padding: 12px 14px;
	font-family: var(--font-body);
	font-size: var(--text-sm, .92rem);
	color: var(--ink, #0b1f3a);
	background: var(--bg, #fff);
	border: 1px solid var(--line, rgba(15, 23, 42, .14));
	border-radius: var(--radius-sm, 10px);
}

.job-manager-form .field input:focus,
.job-manager-form .field select:focus,
.job-manager-form .field textarea:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), .16);
}

.job-manager-form small.description {
	display: block;
	margin-top: 6px;
	font-size: var(--text-xs, .78rem);
	color: var(--muted, #64748b);
}

.job-manager-form input[type="submit"],
.job-manager-form button {
	padding: 13px 28px;
	font-family: var(--font-body);
	font-size: var(--text-sm, .92rem);
	font-weight: 700;
	color: #fff;
	background: var(--color-primary);
	border: 0;
	border-radius: var(--radius-full, 999px);
	cursor: pointer;
}

.job-manager-form input[type="submit"]:hover,
.job-manager-form button:hover { background: var(--color-primary-dark, var(--color-primary)); }

table.job-manager-jobs {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--text-sm, .9rem);
}

table.job-manager-jobs th,
table.job-manager-jobs td {
	padding: 13px 14px;
	text-align: left;
	border-bottom: 1px solid var(--line, rgba(15, 23, 42, .1));
}

table.job-manager-jobs th {
	font-size: var(--text-xs, .76rem);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--muted, #64748b);
}

table.job-manager-jobs td a { color: var(--color-primary); text-decoration: none; }

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
	.job_filters { padding: 18px; }
	.job_filters .search_jobs { grid-template-columns: minmax(0, 1fr); }
	.job_filters .search_submit { flex-direction: column; align-items: stretch; }
	.job_filters input[type="submit"] { width: 100%; }

	/*
	 * The three-column card would squeeze the job title to a couple of words,
	 * so on a phone the logo sits beside the title and the location and meta
	 * drop underneath, full width.
	 */
	ul.job_listings li.job_listing a {
		grid-template-columns: 44px minmax(0, 1fr);
		grid-template-areas:
			"logo position"
			"meta meta";
		gap: 12px 14px;
		padding: 16px;
	}

	ul.job_listings li.job_listing img.company_logo {
		width: 44px;
		height: 44px;
		max-width: 44px;
	}

	ul.job_listings li.job_listing .position h3 { font-size: var(--text-md, 1rem); }

	ul.job_listings li.job_listing .location,
	ul.job_listings li.job_listing ul.meta {
		grid-area: meta;
		justify-self: start;
		justify-content: flex-start;
		text-align: left;
	}

	ul.job_listings li.job_listing .location {
		grid-row: 2;
		font-size: var(--text-xs, .8rem);
		color: var(--muted, #64748b);
	}

	ul.job_listings li.job_listing ul.meta { grid-row: 3; }

	.single_job_listing .company { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* --------------------------------------------------------------------------
   Dark mode
   -------------------------------------------------------------------------- */

[data-theme="dark"] ul.job_listings li.job_listing,
[data-theme="dark"] .job_filters,
[data-theme="dark"] .single_job_listing .company,
[data-theme="dark"] .job_application.application {
	background: var(--card, #101a2c);
	border-color: var(--line, rgba(255, 255, 255, .1));
}

[data-theme="dark"] ul.job_listings li.job_listing .position h3 { color: #fff; }
[data-theme="dark"] ul.job_listings li.job_listing img.company_logo { background: rgba(255, 255, 255, .05); }

[data-theme="dark"] .job_filters input[type="text"],
[data-theme="dark"] .job_filters select,
[data-theme="dark"] .job-manager-form .field input,
[data-theme="dark"] .job-manager-form .field textarea {
	background: rgba(255, 255, 255, .05);
	border-color: rgba(255, 255, 255, .14);
	color: #fff;
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	ul.job_listings li.job_listing,
	.load_more_jobs,
	.application_button { transition: none; }

	ul.job_listings li.job_listing:hover { transform: none; }
}