/*
 * WP Job Manager custom styles
 * Targets WP Job Manager 2.x markup (verified against 2.4.9).
 *
 * Edit the tokens in :root first, most visual changes can be made there.
 * Each section below maps to one area of the plugin's front end.
 *
 * Selectors are prefixed with `body` so they outrank the plugin's own
 * rules without needing !important.
 */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root {
	/* Brand palette: The Wesleyan Church brand refresh guide. The guide gives
	   print (CMYK) values only, so these are those swatches converted to RGB.
	   If you have official web values, change them here and nothing else. */
	--twc-navy: #08496f;
	--twc-bright-blue: #34a6de;
	--twc-deep-navy: #00344d;
	--twc-mist: #d9eae8;
	--twc-celery: #adbb73;
	--twc-seafoam: #78b4af;
	--twc-scarlet: #cb2d4c;
	--twc-gold: #f1a846;
	--twc-hazy: #cbcaca;
	--twc-milky: #f3f0e9;
	--twc-charcoal: #414042;
	--twc-white: #ffffff;

	/* Roles. Navy (not Bright Blue) carries buttons and links, because white
	   on Bright Blue is only 2.7:1; Navy is 9.6:1. Bright Blue is for accents. */
	--wpjm-accent: var(--twc-navy);
	--wpjm-accent-hover: var(--twc-deep-navy);
	--wpjm-accent-contrast: var(--twc-white);
	--wpjm-text: var(--twc-deep-navy);
	--wpjm-muted: var(--twc-charcoal);
	--wpjm-border: var(--twc-mist);
	--wpjm-input-border: var(--twc-hazy);
	--wpjm-surface: var(--twc-white);
	--wpjm-surface-alt: var(--twc-milky);
	--wpjm-danger: var(--twc-scarlet);
	/* Gold at about 14% on white, for the featured listing background. */
	--wpjm-featured-bg: #fdf3e5;
	--wpjm-featured-border: var(--twc-gold);
	--wpjm-radius: 8px;

	/* Type scale. rem, so it does not depend on how large the theme sets its
	   body text (many themes use 20px or more, which made the listings huge). */
	/* Width of the Post a Job form and its preview on screens 900px and wider.
	   It breaks out of the theme's narrow column and centres itself. Use 80vw to
	   match the Jobs page, or 100% to stay inside the theme's column. */
	--wpjm-form-width: var(--wpjm-listings-width, min(80vw, 1080px));
	/* The single job page uses the same width as the Jobs board, so the two
	   line up. It uses the board's sidebar width and gap for its details card. */
	--wpjm-job-width: var(--wpjm-listings-width, 80vw);

	--wpjm-fs-label: 0.75rem;   /* 12px  small uppercase labels, pills */
	--wpjm-fs-small: 0.8125rem; /* 13px  dates, hints, help text */
	--wpjm-fs-body: 0.9375rem;  /* 15px  most text, buttons, checkbox labels */
	--wpjm-fs-input: 0.9375rem; /* 15px  form fields; 16px under 900px, see below */
	--wpjm-fs-title: 1.125rem;  /* 18px  listing titles, company name */
	--wpjm-fs-reading: 1rem;    /* 16px  job description text */
	--wpjm-lh: 1.5;
	--wpjm-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
	--wpjm-gap: 16px;

	/* Job type colours. Slugs come from your Job Types, add your own below.
	   These are the brand colours as they appear (the sidebar dots). The text
	   on the pills is a darker mix of the same colour, see section 5. */
	--wpjm-type-full-time: var(--twc-seafoam);
	--wpjm-type-part-time: var(--twc-gold);
	--wpjm-type-internship: var(--twc-celery);
	--wpjm-type-freelance: var(--twc-bright-blue);
	--wpjm-type-temporary: var(--twc-scarlet);

	/* Feed the plugin's own UI variables (dashboard, dialogs, newer forms). */
	--jm-ui-accent-color: var(--wpjm-accent);
	--jm-ui-accent-color-contrast: var(--wpjm-accent-contrast);
	--jm-ui-danger-color: var(--twc-scarlet);
	--jm-ui-radius: 4px;
}

/* Phones and tablets zoom the page when a field under 16px is tapped. */
@media (max-width: 899px) {
	:root {
		--wpjm-fs-input: 1rem;
	}
}

/* ==========================================================================
   2. Notices ([job_manager_message] / error / info)
   ========================================================================== */
body .job-manager-message,
body .job-manager-info,
body .job-manager-error {
	border: 1px solid var(--wpjm-border);
	border-left: 4px solid var(--wpjm-accent);
	border-radius: var(--wpjm-radius);
	background: var(--wpjm-surface-alt);
	color: var(--wpjm-text);
	box-shadow: none;
}

body .job-manager-error {
	border-left-color: var(--wpjm-danger);
}

/* ==========================================================================
   3. Search filters  ([jobs] shortcode, form.job_filters)
   ========================================================================== */
body form.job_filters {
	background: var(--wpjm-surface-alt);
	border: 1px solid var(--wpjm-border);
	border-radius: var(--wpjm-radius);
	padding: var(--wpjm-gap);
	margin-bottom: var(--wpjm-gap);
}

body form.job_filters label {
	font-weight: 600;
	color: var(--wpjm-text);
}

body form.job_filters input[type="text"],
body form.job_filters select {
	border: 1px solid var(--wpjm-input-border);
	border-radius: 6px;
	background: var(--wpjm-surface);
}

body form.job_filters .search_submit input[type="submit"] {
	background: var(--wpjm-accent);
	color: var(--wpjm-accent-contrast);
	border: 0;
	border-radius: 6px;
	cursor: pointer;
}

/* Job type checkboxes ("Full Time", "Part Time", ...) */
body form.job_filters ul.job_types {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ==========================================================================
   4. Listings  (ul.job_listings > li.job_listing)
   ========================================================================== */
body ul.job_listings {
	border-top: 0;
	display: grid;
	gap: 12px;
}

body ul.job_listings li.job_listing {
	border: 1px solid var(--wpjm-border);
	border-radius: var(--wpjm-radius);
	background: var(--wpjm-surface);
	box-shadow: var(--wpjm-shadow);
	overflow: hidden;
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

body ul.job_listings li.job_listing:hover,
body ul.job_listings li.job_listing:focus-within {
	border-color: var(--wpjm-accent);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

body ul.job_listings li.job_listing a {
	color: var(--wpjm-text);
}

body ul.job_listings li.job_listing a:hover,
body ul.job_listings li.job_listing a:focus {
	background: transparent;
}

/* No company logo or placeholder icon beside the title. */
body ul.job_listings li.job_listing a img.company_logo,
body .widget ul.job_listings li.job_listing .image {
	display: none;
}

/* Row layout. The plugin floats three columns by percentage, which wraps badly
   once text is a sensible size. Use a grid instead: title and company, then
   location, then job type and date. On phones the location drops under the title. */
body div.job_listings > ul.job_listings li.job_listing > a {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(130px, 24%) minmax(110px, 18%);
	grid-template-areas: "position location meta";
	column-gap: var(--wpjm-gap);
	align-items: start;
	padding: 14px 18px;
	line-height: var(--wpjm-lh);
}

body div.job_listings > ul.job_listings li.job_listing > a div.position {
	grid-area: position;
	float: none;
	width: auto;
	padding: 0;
}

body div.job_listings > ul.job_listings li.job_listing > a div.location {
	grid-area: location;
	float: none;
	width: auto;
	padding: 0;
	text-align: left;
}

body div.job_listings > ul.job_listings li.job_listing > a ul.meta {
	grid-area: meta;
	float: none;
	width: auto;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	text-align: right;
}

/* Stack the location under the title when the list itself is narrow. This
   looks at the width of the listings column, not the screen, so it also
   applies on a laptop where the sidebar takes up part of the page. */
body div.job_listings > ul.job_listings {
	container: wpjm-list / inline-size;
}

@container wpjm-list (max-width: 640px) {
	body div.job_listings > ul.job_listings li.job_listing > a {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"position meta"
			"location location";
		row-gap: 6px;
		padding: 12px 14px;
	}
}

/* Title / company / location / meta columns */
body ul.job_listings li.job_listing div.position h3 {
	margin: 0;
	font-size: var(--wpjm-fs-title);
	font-weight: 600;
	line-height: 1.3;
}

body ul.job_listings li.job_listing div.position .company {
	margin-top: 2px;
	font-size: var(--wpjm-fs-body);
}

body ul.job_listings li.job_listing div.position .company .tagline {
	font-size: var(--wpjm-fs-small);
}

body ul.job_listings li.job_listing div.location {
	font-size: var(--wpjm-fs-body);
}

/* The date under the job type. */
body ul.job_listings li.job_listing .meta li.date {
	font-size: var(--wpjm-fs-small);
}

body ul.job_listings li.job_listing div.position .company,
body ul.job_listings li.job_listing div.location,
body ul.job_listings li.job_listing .meta {
	color: var(--wpjm-muted);
}

/* Job type label as a pill: a light tint of the type colour behind darker text
   (colours are set per type in section 5). */
body ul.job_listings li.job_listing .meta .job-type {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--wpjm-c) 18%, #fff);
	font-size: var(--wpjm-fs-label);
	font-weight: 600;
	line-height: 1.6;
}

/* Featured listings */
body ul.job_listings li.job_listing.job_position_featured {
	background: var(--wpjm-featured-bg);
	border-color: var(--wpjm-featured-border);
}

body ul.job_listings li.job_listing.job_position_featured a,
body ul.job_listings li.job_listing.job_position_featured a:hover,
body ul.job_listings li.job_listing.job_position_featured a:focus {
	background: transparent;
}

/* Filled listings */
body ul.job_listings li.job_listing.job_position_filled a {
	opacity: 0.45;
}

/* No results */
body ul.job_listings li.no_job_listings_found {
	border: 1px dashed var(--wpjm-border);
	border-radius: var(--wpjm-radius);
	text-align: center;
	color: var(--wpjm-muted);
}

/* "Load more listings" link */
body a.load_more_jobs {
	display: block;
	text-align: center;
	margin-top: var(--wpjm-gap);
	font-weight: 600;
	color: var(--wpjm-accent);
}

/* ==========================================================================
   5. Job type colours
   Applied to .job-type in listings and on the single page. Add a block per
   type slug (Job Listings > Job Types) to colour new types.
   ========================================================================== */
/* Text is the type colour mixed with Deep Navy, so every pill and label clears
   4.5:1 contrast (Celery, Seafoam and Gold are about 2:1 on white as plain
   text). --wpjm-c-mix is how much of the type colour to keep. */
body .job-types .job-type,
body .job_listing .job-type {
	--wpjm-c: var(--twc-charcoal);
	--wpjm-c-mix: 45%;
	color: color-mix(in srgb, var(--wpjm-c) var(--wpjm-c-mix), var(--twc-deep-navy));
}
body .job_listing .job-type.full-time { --wpjm-c: var(--wpjm-type-full-time); }
body .job_listing .job-type.part-time { --wpjm-c: var(--wpjm-type-part-time); }
body .job_listing .job-type.internship { --wpjm-c: var(--wpjm-type-internship); }
body .job_listing .job-type.freelance { --wpjm-c: var(--wpjm-type-freelance); }
body .job_listing .job-type.temporary {
	--wpjm-c: var(--wpjm-type-temporary);
	--wpjm-c-mix: 70%;
}

/* ==========================================================================
   6. Single job page  (.single_job_listing)
   ========================================================================== */
body .single_job_listing ul.job-listing-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	list-style: none;
	margin: 0 0 var(--wpjm-gap);
	padding: 0;
	color: var(--wpjm-muted);
}

body .single_job_listing ul.job-listing-meta li {
	margin: 0;
	padding: 0;
}

body .single_job_listing ul.job-listing-meta li.job-type {
	font-weight: 600;
}

body .single_job_listing ul.job-listing-meta li.salary {
	color: var(--wpjm-text);
	font-weight: 600;
}

body .single_job_listing ul.job-listing-meta li.position-filled,
body .single_job_listing ul.job-listing-meta li.listing-expired {
	color: var(--wpjm-danger);
	font-weight: 600;
}

/* Company box */
body .single_job_listing .company {
	border: 1px solid var(--wpjm-border);
	border-radius: var(--wpjm-radius);
	background: var(--wpjm-surface-alt);
	box-shadow: none;
}

body .single_job_listing .company img {
	border-radius: 6px;
	object-fit: contain;
}

body .single_job_listing .company .name a.website,
body .single_job_listing .company .name a.company_twitter {
	color: var(--wpjm-accent);
}

body .single_job_listing .company .tagline {
	color: var(--wpjm-muted);
}

/* Description */
body .single_job_listing .job_description {
	line-height: 1.7;
	color: var(--wpjm-text);
}

/* Apply button and revealed details */
body .job_application.application .application_button {
	background: var(--wpjm-accent);
	color: var(--wpjm-accent-contrast);
	border: 0;
	border-radius: 6px;
	padding: 0.75em 1.5em;
	font-weight: 600;
	cursor: pointer;
}

body .job_application.application .application_details {
	margin-top: var(--wpjm-gap);
	padding: var(--wpjm-gap);
	border: 1px solid var(--wpjm-border);
	border-radius: var(--wpjm-radius);
	background: var(--wpjm-surface-alt);
}

/* ==========================================================================
   7. Submit / edit listing form  (form.job-manager-form)
   ========================================================================== */
body form.job-manager-form fieldset {
	margin-bottom: var(--wpjm-gap);
}

body form.job-manager-form fieldset label {
	font-weight: 600;
	color: var(--wpjm-text);
}

body form.job-manager-form fieldset .field input.input-text,
body form.job-manager-form fieldset .field textarea,
body form.job-manager-form fieldset .field select {
	border: 1px solid var(--wpjm-input-border);
	border-radius: 6px;
	background: var(--wpjm-surface);
	padding: 0.6em 0.8em;
	width: 100%;
	box-sizing: border-box;
}

body form.job-manager-form fieldset .field input.input-text:focus,
body form.job-manager-form fieldset .field textarea:focus,
body form.job-manager-form fieldset .field select:focus {
	outline: 2px solid var(--wpjm-accent);
	outline-offset: 1px;
	border-color: var(--wpjm-accent);
}

body form.job-manager-form small.description {
	display: block;
	margin-top: 4px;
	color: var(--wpjm-muted);
}

body form.job-manager-form .required-field > label::after,
body form.job-manager-form fieldset .required-field label::after {
	/* Plugin marks optional fields with "(optional)" text; keep that and
	   add your own required-field styling here if you want it. */
}

body form.job-manager-form input[type="submit"].button,
body .job_listing_preview_title input.button {
	background: var(--wpjm-accent);
	color: var(--wpjm-accent-contrast);
	border: 0;
	border-radius: 6px;
	padding: 0.75em 1.5em;
	font-weight: 600;
	cursor: pointer;
}

body form.job-manager-form input[type="submit"].button.secondary,
body form.job-manager-form input.save_draft,
body .job_listing_preview_title input.job-manager-button-edit-listing {
	background: transparent;
	color: var(--wpjm-accent);
	border: 1px solid var(--wpjm-accent);
}

/* ==========================================================================
   8. Job dashboard  ([job_dashboard], 2.x markup with jm- prefix)
   ========================================================================== */
body .jm-dashboard .jm-dashboard__intro {
	gap: var(--wpjm-gap);
}

body .jm-dashboard-table .jm-dashboard-header {
	font-weight: 600;
	color: var(--wpjm-muted);
	text-transform: uppercase;
	font-size: var(--wpjm-fs-label);
	letter-spacing: 0.04em;
}

body .jm-dashboard-table .jm-dashboard-job {
	border: 1px solid var(--wpjm-border);
	border-radius: var(--wpjm-radius);
	background: var(--wpjm-surface);
	box-shadow: var(--wpjm-shadow);
	margin-bottom: 8px;
}

body .jm-dashboard-action {
	color: var(--wpjm-accent);
}

body .jm-dashboard-action.job-dashboard-action-delete {
	color: var(--wpjm-danger);
}

body .jm-dashboard-empty {
	text-align: center;
	color: var(--wpjm-muted);
}

/* ==========================================================================
   9. Pagination
   ========================================================================== */
body nav.job-manager-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	border: 0;
}

body nav.job-manager-pagination ul li {
	border: 1px solid var(--wpjm-border);
	border-radius: 6px;
	overflow: hidden;
}

body nav.job-manager-pagination ul li a,
body nav.job-manager-pagination ul li span {
	padding: 6px 12px;
}

body nav.job-manager-pagination ul li span.current,
body nav.job-manager-pagination ul li a:hover {
	background: var(--wpjm-accent);
	color: var(--wpjm-accent-contrast);
}

/* ==========================================================================
   10. Widgets (recent / featured jobs)
   ========================================================================== */
body .widget ul.job_listings {
	display: block;
}

body .widget ul.job_listings li.job_listing {
	border: 0;
	border-bottom: 1px solid var(--wpjm-border);
	border-radius: 0;
	box-shadow: none;
}

/* ==========================================================================
   11. Responsive
   ========================================================================== */
@media (max-width: 767px) {
	body form.job_filters {
		padding: 12px;
	}

	body .single_job_listing ul.job-listing-meta {
		flex-direction: column;
	}
}

/* ==========================================================================
   12. Button hover: Deep Navy
   ========================================================================== */
body .job_application.application .application_button:hover,
body form.job-manager-form input[type="submit"].button:hover,
body form.job-manager-form input[type="submit"].button:focus-visible,
body .job_listing_preview_title input.button:hover,
body .job_listing_preview_title input.button:focus-visible,
body form.job_filters .search_submit input[type="submit"]:hover {
	background: var(--wpjm-accent-hover);
	border-color: var(--wpjm-accent-hover);
	/* The outlined buttons (Save Draft, Edit listing) have navy text, which
	   would vanish on the dark hover background. */
	color: var(--wpjm-accent-contrast);
}

/* ==========================================================================
   13. Type scale
   Sizes for everything outside the listing rows (those are in section 4 and
   the sidebar sizes are in wpjm-sidebar.css). All use the --wpjm-fs-* tokens
   at the top, so changing the scale in one place resizes the whole layout.
   Form fields, selects and buttons are set to inherit the theme font: the
   browser default is a small system font that did not match the page.
   ========================================================================== */

/* Fields and buttons in the filters, the submit form and the apply box. */
body form.job_filters input[type="text"],
body form.job_filters select,
body form.job-manager-form input.input-text,
body form.job-manager-form textarea,
body form.job-manager-form select,
body .wpjm-sort-bar select {
	font-family: inherit;
	font-size: var(--wpjm-fs-input);
	line-height: 1.4;
}

body form.job_filters input[type="submit"],
body form.job_filters button,
body form.job-manager-form input[type="submit"],
body .job_listing_preview_title input.button,
body .job_application.application .application_button {
	font-family: inherit;
	font-size: var(--wpjm-fs-body);
	line-height: 1.3;
}

/* Notices */
body .job-manager-message,
body .job-manager-info,
body .job-manager-error {
	font-size: var(--wpjm-fs-body);
	line-height: var(--wpjm-lh);
}

/* "Load more listings" and pagination */
body a.load_more_jobs,
body nav.job-manager-pagination {
	font-size: var(--wpjm-fs-body);
}

/* Single job page */
body .single_job_listing ul.job-listing-meta {
	font-size: var(--wpjm-fs-body);
}

body .single_job_listing .company .name,
body .single_job_listing .company .name strong {
	font-size: var(--wpjm-fs-title);
	line-height: 1.3;
}

body .single_job_listing .company .name a.website,
body .single_job_listing .company .name a.company_twitter,
body .single_job_listing .company .tagline {
	font-size: var(--wpjm-fs-body);
}

body .single_job_listing .job_description {
	font-size: var(--wpjm-fs-reading);
}

body .job_application.application .application_details {
	font-size: var(--wpjm-fs-body);
}

/* Submit and edit form */
body form.job-manager-form fieldset label {
	font-size: var(--wpjm-fs-body);
}

body form.job-manager-form small.description {
	font-size: var(--wpjm-fs-small);
	line-height: var(--wpjm-lh);
}

/* Dashboard */
body .jm-dashboard-table,
body .jm-dashboard-action {
	font-size: var(--wpjm-fs-body);
}

/* ==========================================================================
   14. Single job page extras
   ========================================================================== */

/* Single job page: the job type as the same soft pill used in the listings
   (the plugin default is white text on a bright block). */
body .single_job_listing ul.job-listing-meta li.job-type {
	--wpjm-c: var(--twc-charcoal);
	--wpjm-c-mix: 45%;
	padding: 4px 12px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--wpjm-c) 18%, #fff);
	color: color-mix(in srgb, var(--wpjm-c) var(--wpjm-c-mix), var(--twc-deep-navy));
	font-size: var(--wpjm-fs-label);
	line-height: 1.5;
}
body .single_job_listing ul.job-listing-meta li.job-type.full-time { --wpjm-c: var(--wpjm-type-full-time); }
body .single_job_listing ul.job-listing-meta li.job-type.part-time { --wpjm-c: var(--wpjm-type-part-time); }
body .single_job_listing ul.job-listing-meta li.job-type.internship { --wpjm-c: var(--wpjm-type-internship); }
body .single_job_listing ul.job-listing-meta li.job-type.freelance { --wpjm-c: var(--wpjm-type-freelance); }
body .single_job_listing ul.job-listing-meta li.job-type.temporary {
	--wpjm-c: var(--wpjm-type-temporary);
	--wpjm-c-mix: 70%;
}

/* Company box. The plugin sizes the logo and the text indent in em, so the
   whole box has to use one font size or the text runs under the logo. */
body .single_job_listing .company {
	font-size: var(--wpjm-fs-body);
}

body .single_job_listing .company .company_header {
	margin-left: 3.75em;
}

body .single_job_listing .company .name,
body .single_job_listing .company .tagline {
	margin-left: 0;
	padding-left: 0;
}

/* "Sign in" / "Sign out" on the submit form */
body form.job-manager-form .account-sign-in a {
	font-size: var(--wpjm-fs-body);
}

/* ==========================================================================
   15. Submit form refinements  ([submit_job_form]: the form, preview, notices)
   ========================================================================== */

/* Notices were wider than the page column: the plugin pads them but sizes
   them as content-box, so the padding was added on top of the width. */
body .job-manager-message,
body .job-manager-info,
body .job-manager-error {
	box-sizing: border-box;
}

/* Section headings in the form, such as "Company Details". Themes make these
   very large and thin next to 15px labels. */
body form.job-manager-form h2 {
	margin: 2rem 0 0.5rem;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wpjm-text);
}

/* Labels get a little more room, so "X / Twitter username (optional)" stays on
   one line. The plugin stacks label over field on small screens, so leave
   those alone. */
@media (min-width: 783px) {
	body form.job-manager-form fieldset label:not(.full-line-checkbox-field label) {
		width: 34%;
	}

	body form.job-manager-form fieldset div.field:not(.full-line-checkbox-field) {
		width: 65%;
	}
}

/* "(optional)" next to a label: smaller and lighter, on the same line. */
body form.job-manager-form fieldset label small {
	font-size: var(--wpjm-fs-small);
	font-weight: 400;
	opacity: 1;
	color: var(--wpjm-muted);
}

/* "Have an account? Sign in" as a soft panel instead of a divider row. */
body form.job-manager-form fieldset.fieldset-login_required,
body form.job-manager-form fieldset.fieldset-logged_in {
	padding: 12px 16px;
	background: var(--wpjm-surface-alt);
	border: 1px solid var(--wpjm-border);
	border-radius: var(--wpjm-radius);
}

body form.job-manager-form .account-sign-in a {
	font-weight: 600;
	color: var(--wpjm-accent);
}

/* File upload (company logo): the browser default looks out of place. */
body form.job-manager-form input[type="file"] {
	box-sizing: border-box;
	width: 100%;
	padding: 8px;
	font-family: inherit;
	font-size: var(--wpjm-fs-body);
	color: var(--wpjm-muted);
	background: var(--wpjm-surface-alt);
	border: 1px dashed var(--wpjm-input-border);
	border-radius: 6px;
}

body form.job-manager-form input[type="file"]::file-selector-button {
	margin-right: 12px;
	padding: 6px 14px;
	font-family: inherit;
	font-size: var(--wpjm-fs-body);
	font-weight: 600;
	color: var(--wpjm-accent);
	background: var(--wpjm-surface);
	border: 1px solid var(--wpjm-accent);
	border-radius: 6px;
	cursor: pointer;
}

body form.job-manager-form input[type="file"]::file-selector-button:hover {
	color: var(--wpjm-accent-contrast);
	background: var(--wpjm-accent);
}

/* Preview step: a soft title bar joined to a box with a light border, instead
   of heavy grey. The bar and the box are siblings in the plugin's markup. */
body .job_listing_preview_title,
body .entry-content .job_listing_preview_title {
	margin: 0;
	padding: 12px 1.25rem;
	background: var(--wpjm-surface-alt);
	border: 1px solid var(--wpjm-border);
	border-radius: var(--wpjm-radius) var(--wpjm-radius) 0 0;
}

body .job_listing_preview {
	padding: 1.25rem;
	border: 1px solid var(--wpjm-border);
	border-top: 0;
	border-radius: 0 0 var(--wpjm-radius) var(--wpjm-radius);
}

body .job_listing_preview_title h2 {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 2.4rem;
	color: var(--wpjm-text);
}

/* Preview and Submit buttons fill the row on phones. */
@media (max-width: 782px) {
	body form.job-manager-form input[type="submit"].button,
	body .job_listing_preview_title input.button {
		width: 100%;
		margin: 0 0 8px;
		float: none;
	}
}

/* Wider form and preview. The plugin's markup is a form directly inside the
   theme's column, so size it and centre it on the page, as the Jobs page does. */
@media (min-width: 900px) {
	body form#submit-job-form,
	body form#job_preview {
		width: var(--wpjm-form-width);
		max-width: 100vw;
		margin-inline: calc(50% - var(--wpjm-form-width) / 2);
	}
}

/* ---- Single job page: two columns, like the Jobs board ------------------------
   Details card on the left (the board's sidebar width), title, description and
   Apply on the right. The markup is built in includes/job-page.php. */

/* The theme's own title is hidden once ours is on the page. */
body.single-job_listing:has(.wpjm-job-title) :is(h1.wp-block-post-title, h1.entry-title, .entry-header h1) {
	display: none;
}

body .single_job_listing .wpjm-job-title {
	margin: 0 0 1.25rem;
	font-size: clamp(1.75rem, 3.2vw, 2.25rem);
	font-weight: 600;
	line-height: 1.2;
	color: var(--wpjm-text);
}

/* Details card */
body .single_job_listing .wpjm-job-aside {
	margin: 0 0 1.5rem;
}

/* "View All Listings" under the details card: the primary button, full width. */
body .single_job_listing a.button.wpjm-job-all {
	display: block;
	box-sizing: border-box;
	margin: 12px 0 0;
	padding: 0.75em 1.5em;
	font-family: inherit;
	font-size: var(--wpjm-fs-body);
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	color: var(--wpjm-accent-contrast);
	background: var(--wpjm-accent);
	border: 1px solid var(--wpjm-accent);
	border-radius: 6px;
}

body .single_job_listing a.button.wpjm-job-all:hover,
body .single_job_listing a.button.wpjm-job-all:focus-visible {
	color: var(--wpjm-accent-contrast);
	background: var(--wpjm-accent-hover);
	border-color: var(--wpjm-accent-hover);
}

body .single_job_listing .wpjm-job-side {
	margin: 0;
	padding: 18px;
	background: var(--wpjm-surface);
	border: 1px solid var(--wpjm-border);
	border-radius: var(--wpjm-radius);
}

body .single_job_listing .wpjm-job-side ul.job-listing-meta {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body .single_job_listing .wpjm-job-side ul.job-listing-meta li {
	float: none;
	margin: 0;
	padding: 0;
	font-size: var(--wpjm-fs-body);
	line-height: 1.4;
	color: var(--wpjm-text);
}

/* Small label above each detail. The job type is the pill and the date already
   says "Posted ...", so neither has one. The plugin puts an icon-font glyph on
   these same spots, so reset its font and sizing or the label shows as garbage. */
body .single_job_listing .wpjm-job-side ul.job-listing-meta li.location::before,
body .single_job_listing .wpjm-job-side ul.job-listing-meta li.salary::before {
	display: block;
	width: auto;
	height: auto;
	margin: 0 0 2px;
	/* The plugin sets its icon font with !important, so this needs it too. */
	font-family: inherit !important;
	font-style: normal;
	font-size: var(--wpjm-fs-label);
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--wpjm-muted);
}

body .single_job_listing .wpjm-job-side ul.job-listing-meta li.location::before { content: "Location"; }
body .single_job_listing .wpjm-job-side ul.job-listing-meta li.salary::before { content: "Salary"; }

body .single_job_listing .wpjm-job-side ul.job-listing-meta li.date-posted {
	order: 1; /* last, after salary */
	font-size: var(--wpjm-fs-small);
	color: var(--wpjm-muted);
}

body .single_job_listing .wpjm-job-side ul.job-listing-meta li.date-posted::before {
	content: none;
}

/* The job type pill (the card's general li rule above would flatten it). */
body .single_job_listing .wpjm-job-side ul.job-listing-meta li.job-type {
	justify-self: start;
	padding: 4px 12px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--wpjm-c) 18%, #fff);
	color: color-mix(in srgb, var(--wpjm-c) var(--wpjm-c-mix), var(--twc-deep-navy));
	font-size: var(--wpjm-fs-label);
	font-weight: 600;
	line-height: 1.5;
}

/* The location links to a map; keep it plain and readable. */
body .single_job_listing .wpjm-job-side ul.job-listing-meta li.location a {
	color: var(--wpjm-text);
	text-decoration: none;
}

/* Company, as a section of the card rather than its own box. */
body .single_job_listing .wpjm-job-side .company {
	margin: 16px 0 0;
	padding: 16px 0 0;
	background: transparent;
	border: 0;
	border-top: 1px solid var(--wpjm-border);
	border-radius: 0;
	box-shadow: none;
}

body .single_job_listing .wpjm-job-side .company::before {
	content: "Church / Company";
	display: block;
	margin-bottom: 2px;
	font-size: var(--wpjm-fs-label);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wpjm-muted);
}

/* The name first, then the website link under it (the plugin floats the link right). */
body .single_job_listing .wpjm-job-side .company .name {
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-start;
	gap: 6px;
	margin: 0;
	padding: 0;
}

body .single_job_listing .wpjm-job-side .company .name a.website,
body .single_job_listing .wpjm-job-side .company .name a.company_twitter {
	float: none;
	margin: 0;
	font-size: var(--wpjm-fs-body);
}

/* Blog-post leftovers from the theme (Twenty Twenty-Five): the empty "Written by
   ... in ..." line under the title, the previous / next post links and the "More
   posts" list. They mean nothing on a job. Only on job pages that have our title,
   and only rules for this theme's block classes, so on another theme they do
   nothing. */
body.single-job_listing:has(.wpjm-job-title) h1.wp-block-post-title + .wp-block-group,
body.single-job_listing:has(.wpjm-job-title) .wp-block-post-navigation-link,
body.single-job_listing:has(.wpjm-job-title) nav.wp-block-group:has(.wp-block-post-navigation-link),
body.single-job_listing:has(.wpjm-job-title) .wp-block-group:has(> .wp-block-query) {
	display: none;
}

/* No icon glyph before the website link, so it lines up with the name above. */
body .single_job_listing .wpjm-job-side .company .name a.website::before,
body .single_job_listing .wpjm-job-side .company .name a.company_twitter::before {
	display: none;
}

/* Headings written inside a description, in the same style as the form headings. */
body .single_job_listing .wpjm-job-main .job_description :is(h2, h3, h4) {
	margin: 1.75rem 0 0.5rem;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wpjm-text);
}

/* Main column text stays at a comfortable line length. */
body .single_job_listing .wpjm-job-main .job_description {
	max-width: 46rem;
}

@media (min-width: 900px) {
	/* Two columns when the page has the structure above. */
	body div.single_job_listing:not(.job_listing_preview):has(> .wpjm-job-aside) {
		display: grid;
		grid-template-columns: var(--wpjm-sidebar-width, 290px) minmax(0, 1fr);
		/* Title row sized to the title; the left column's height goes to the
		   second row, so the description sits right under the title. */
		grid-template-rows: auto 1fr;
		grid-template-areas:
			"side title"
			"side main";
		column-gap: var(--wpjm-sidebar-gap, 28px);
		align-items: start;
	}

	body .single_job_listing .wpjm-job-title { grid-area: title; }
	body .single_job_listing .wpjm-job-main { grid-area: main; }

	body .single_job_listing .wpjm-job-aside {
		grid-area: side;
		position: sticky;
		top: var(--wpjm-sidebar-top, 24px);
		margin: 0;
	}

	/* Wider than the theme's narrow column, centred on the page. Not applied to
	   the preview step, which is already inside the wider form. */
	body div.single_job_listing:not(.job_listing_preview) {
		width: var(--wpjm-job-width);
		max-width: 100vw;
		margin-inline: calc(50% - var(--wpjm-job-width) / 2);
	}
}

/* Checkbox fields (Remote Position): the help text goes to the right of the
   box instead of underneath it. */
body form.job-manager-form fieldset.fieldset-type-checkbox div.field {
	display: flex;
	align-items: center;
	gap: 10px;
	/* As tall as a text field, so the label beside it lines up with the box. */
	min-height: 40px;
}

body form.job-manager-form fieldset.fieldset-type-checkbox input[type="checkbox"] {
	flex: none;
	width: auto;
	margin: 0;
}

body form.job-manager-form fieldset.fieldset-type-checkbox small.description {
	display: inline;
	margin: 0;
}

/* The logo upload is gone from the form, so no listing has a logo: hide the
   placeholder icon in the company box on the job page and the preview, and give
   the text back the space reserved for it. */
body .single_job_listing .company img.company_logo {
	display: none;
}

body .single_job_listing .company {
	min-height: 0;
}

body .single_job_listing .company .company_header {
	margin: 0;
	min-height: 0;
}

/* Job description PDF link, under the description on the job page. */
body .single_job_listing .job_description p.wpjm-pdf {
	margin: 1.25rem 0 0;
}

body .single_job_listing .job_description p.wpjm-pdf a {
	display: inline-block;
	padding: 8px 16px;
	font-size: var(--wpjm-fs-body);
	font-weight: 600;
	line-height: 1.3;
	color: var(--wpjm-accent);
	text-decoration: none;
	background: var(--wpjm-surface);
	border: 1px solid var(--wpjm-accent);
	border-radius: 6px;
}

body .single_job_listing .job_description p.wpjm-pdf a:hover,
body .single_job_listing .job_description p.wpjm-pdf a:focus-visible {
	color: var(--wpjm-accent-contrast);
	background: var(--wpjm-accent);
}

/* Job category on the form: a checklist (templates/form-fields/term-multiselect-field.php).
   Two columns that fill top to bottom, so the list reads down the left column and
   then down the right, and "Other" (always last) ends at the bottom of the right. */
body form.job-manager-form .wpjm-checks {
	column-count: 2;
	column-gap: 20px;
	padding: 6px 0;
}

/* The plugin gives every label in a form row a fixed width and floats it left, and
   that rule is quite specific, so this one has to be at least as specific. */
body form.job-manager-form fieldset div.field .wpjm-checks label.wpjm-check {
	display: flex;
	align-items: center;
	gap: 8px;
	float: none;
	width: auto;
	margin: 0 0 8px;
	break-inside: avoid;
	font-size: var(--wpjm-fs-body);
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
}

body form.job-manager-form fieldset div.field .wpjm-checks input {
	flex: none;
	width: auto;
	margin: 0;
}

@media (max-width: 560px) {
	body form.job-manager-form .wpjm-checks {
		column-count: 1;
	}
}

/* Apply for job: a link now (website or email), styled like the primary button. */
body .job_application.application .wpjm-apply {
	display: inline-block;
	padding: 0.75em 1.5em;
	font-family: inherit;
	font-size: var(--wpjm-fs-body);
	font-weight: 600;
	line-height: 1.3;
	color: var(--wpjm-accent-contrast);
	text-decoration: none;
	background: var(--wpjm-accent);
	border: 1px solid var(--wpjm-accent);
	border-radius: 6px;
	cursor: pointer;
}

body .job_application.application .wpjm-apply:hover,
body .job_application.application .wpjm-apply:focus-visible {
	color: var(--wpjm-accent-contrast);
	background: var(--wpjm-accent-hover);
	border-color: var(--wpjm-accent-hover);
}

/* Under an email Apply button: the address, for when the mail app does not open. */
body .job_application.application .wpjm-apply-fallback {
	margin: 0.75rem 0 0;
	font-size: var(--wpjm-fs-small);
	line-height: 1.5;
	color: var(--wpjm-muted);
	overflow-wrap: anywhere;
}

body .job_application.application .wpjm-apply-fallback a {
	color: var(--wpjm-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* After submitting: the "in review" confirmation */
body .wpjm-submitted {
	padding: 1.5rem 1.75rem;
	border: 0;
	background: var(--wpjm-surface-alt, #f3f0e9);
	color: var(--wpjm-text);
	font-size: var(--wpjm-fs-body, 0.9375rem);
	line-height: 1.6;
}

body .wpjm-submitted p {
	margin: 0 0 0.75rem;
}

body .wpjm-submitted p:last-child {
	margin-bottom: 0;
}

body .wpjm-submitted .wpjm-submitted__actions {
	margin-top: 1.25rem;
	text-align: center;
}

body .wpjm-submitted a.button {
	display: inline-block;
	padding: 0.75em 1.5em;
	font-family: inherit;
	font-size: var(--wpjm-fs-body);
	font-weight: 600;
	line-height: 1.3;
	color: var(--wpjm-accent-contrast);
	text-decoration: none;
	background: var(--wpjm-accent);
	border: 1px solid var(--wpjm-accent);
	border-radius: 6px;
}

body .wpjm-submitted a.button:hover,
body .wpjm-submitted a.button:focus-visible {
	color: var(--wpjm-accent-contrast);
	background: var(--wpjm-accent-hover);
	border-color: var(--wpjm-accent-hover);
}

body .wpjm-submitted a:not(.button) {
	color: var(--wpjm-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

body .wpjm-submitted a:not(.button):hover {
	color: var(--wpjm-accent-hover);
}

body .wpjm-submitted .wpjm-submitted__title {
	margin: 0 0 0.75rem;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wpjm-text);
}

/* Bullets: some themes put a bullet on every list item (often on the item
   itself, with a more specific selector than the plugin's list reset). None of
   the board's own interface wants one: job details, listing rows, filters,
   forms, the dashboard and the apply panel. The job description is the
   exception, so bulleted lists written into a listing keep their bullets. */
body :is(.single_job_listing, .job_listings, .job-manager, .job-manager-form, .job_filters, .job_listing_preview, .job_application, .wpjm-job-side) :is(ul, ol, li):not(.job_description *):not(.wpjm-job-description *) {
	list-style: none !important;
}

body :is(.single_job_listing, .job_listings, .job-manager, .job-manager-form, .job_filters, .job_listing_preview, .job_application, .wpjm-job-side) li:not(.job_description *):not(.wpjm-job-description *)::marker {
	content: none;
}

/* The company name in the job details: some themes make <strong> bold grey. */
body .single_job_listing .wpjm-job-side .company .name,
body .single_job_listing .wpjm-job-side .company .name strong {
	font-family: inherit;
	font-weight: 500;
	color: var(--wpjm-text);
}

/* ==========================================================================
   16. Your overrides
   Add anything site-specific below this line. It is the last thing in the
   file, so it wins over everything above.
   ========================================================================== */