/*
 * JobsFor single-job page.
 * A decision-focused layer on top of the vendor WorkScout template.
 */

.single-job_listing {
	background: var(--jfpub-canvas);
}

.single-job_listing #wrapper,
.single-job_listing #main {
	background: transparent;
}

/* Role header */
.single-job_listing #titlebar.jf-job-hero {
	min-height: 0;
	padding: 0;
	background-position: center !important;
	background-size: cover !important;
}

/*
 * Overrides #titlebar.photo-bg:before's gradient
 * (`linear-gradient(to top, #fff 0%, rgba(22,22,22,.2) 50%)`) - a 2-stop
 * gradient with nothing defined past 50% reads as a hard seam right at the
 * midpoint, not a smooth fade. That gradient exists in TWO places: the
 * vendor's own workscout/style.css, AND a duplicate with its own
 * !important in this child theme's own style.css (removed 2026-09-07 -
 * see that file's own note at the old rule's location) - the child-theme
 * duplicate was the one actually winning live (confirmed via
 * getComputedStyle), since it loaded later in the enqueue order despite
 * matching specificity. This rule's own !important is kept regardless, as
 * a guard against the vendor original re-winning now that the child-theme
 * duplicate is gone - same approach this selector's own
 * background-position/background-size rules directly above already use
 * for the same vendor class. Flat overlay only, no gradient - matches this
 * design system's "flat fills, no decorative gradients" rule
 * (.interface-design/system.md).
 */
.single-job_listing #titlebar.jf-job-hero::before {
	background: rgba(11, 38, 104, .70) !important;
}

.single-job_listing .jf-job-hero__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 16px 40px;
	align-items: end;
	box-sizing: border-box;
	padding-top: 28px;
	padding-bottom: 32px;
}

.single-job_listing #titlebar .jffj-job-back {
	position: static;
	grid-column: 1 / -1;
	justify-self: start;
	min-height: 44px;
	box-sizing: border-box;
	margin: 0;
	padding: 10px 16px;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: var(--jfpub-radius-sm);
	background: rgba(255, 255, 255, .12);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	backdrop-filter: blur(8px);
}

.single-job_listing #titlebar .jffj-job-back:hover {
	border-color: rgba(255, 255, 255, .5);
	background: rgba(255, 255, 255, .2);
}

/* Selector matches the vendor Skeleton-grid classes still present in this
 * element's markup (.eleven.columns / .five.columns) so this reset wins on
 * specificity (4 classes vs the vendor's 3: `.container .eleven.columns`) -
 * without this, the vendor's `@media (min-width: 1700px) { .container
 * .eleven.columns { width: 926px; } }` rule in workscout/css/responsive.min.css
 * silently wins at very wide viewports only, locking the hero title/copy
 * column to a fixed 926px and leaving a large dead gap next to it that
 * doesn't reproduce at any smaller, commonly-tested breakpoint (2026-09-07). */
.single-job_listing .jf-job-hero__copy.eleven.columns,
.single-job_listing .jf-job-hero__save.five.columns {
	float: none;
	min-width: 0;
	width: auto;
	margin: 0;
}

.single-job_listing .jf-job-hero__category,
.single-job_listing .jf-job-hero__category a {
	color: rgba(255, 255, 255, .78);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.single-job_listing #titlebar .jf-job-hero__copy h1 {
	max-width: 760px;
	margin: 6px 0 12px;
	color: #fff;
	font-family: 'Roboto', Arial, sans-serif;
	font-size: clamp(22px, 5vw + 4px, 26px);
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -.02em;
	overflow-wrap: anywhere;
}

.jf-job-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jf-job-hero__meta li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 36px;
	box-sizing: border-box;
	margin: 0;
	padding: 7px 12px;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 999px;
	background: rgba(4, 19, 53, .2);
	color: #fff;
	font-size: 14px;
	line-height: 1.3;
	backdrop-filter: blur(8px);
}

.jf-job-hero__meta i {
	color: #68d7f7;
}

.jf-job-hero__save {
	align-self: center;
}

.single-job_listing #titlebar .jf-job-hero__save .button,
.single-job_listing #titlebar .jf-job-hero__save a {
	position: static;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	box-sizing: border-box;
	margin: 0;
	padding: 10px 16px;
	border: 0;
	border-radius: var(--jfpub-radius-sm);
	background: #fff;
	color: var(--jfpub-navy);
	box-shadow: var(--jfpub-shadow-card);
	font-size: 14px;
	font-weight: 750;
	transform: none !important;
}

.single-job_listing .jf-job-hero__save .wp-job-manager-bookmarks-form {
	overflow: visible;
}

/* Vendor's .bookmark-notice i:before still applies its own
   `position: relative; top: 2px` (style.css:36417) - a nudge tuned for that
   rule's own non-flex button. This button is inline-flex; align-items:center
   above, which already centers the star correctly, so the leftover nudge
   just pushes it back out of alignment (reported 2026-09-08). */
.single-job_listing #titlebar .jf-job-hero__save a i::before {
	position: static;
	top: 0;
}

/* .jf-job-package* (the "Estimated Package" card) removed 2026-09-08 along
 * with its markup - see template-parts/single-job.php's own removal note
 * (Adzuna ToS: undisclosed predicted-salary figures). */

/* Job Snapshot row - real facts only (Location/Job Type/Category), each
 * card conditionally rendered per-job - a job with none of these renders
 * no row at all rather than an empty shell. */
.single-job_listing .jf-job-snapshot {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
	margin: 16px 0 0;
}

.single-job_listing .jf-job-snapshot__card {
	display: flex;
	gap: 12px;
	align-items: center;
	box-sizing: border-box;
	padding: 14px 16px;
	border: 1px solid rgba(16, 24, 40, .08);
	border-radius: var(--jfpub-radius-md);
	background: var(--jfpub-surface);
	box-shadow: var(--jfpub-shadow-card);
}

.single-job_listing .jf-job-snapshot__icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--jfpub-radius-sm);
	background: var(--jfpub-surface-blue);
	color: var(--jfpub-blue-active);
}

.single-job_listing .jf-job-snapshot__label {
	display: block;
	margin-bottom: 2px;
	color: var(--jfpub-muted);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.single-job_listing .jf-job-snapshot__value {
	display: block;
	overflow: hidden;
	color: var(--jfpub-ink);
	font-size: 14px;
	font-weight: 750;
	line-height: 1.3;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Verified Employer badge - real ABN verification only
 * (JFDIR_Company_Fields::is_abn_verified()), same colour tokens as the
 * Business Directory's own .jfdir-badge--verified (directory.css) - kept
 * as its own declaration here rather than a cross-module stylesheet
 * dependency, since this page already doesn't load directory.css. */
.single-job_listing .jf-job-verified-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 4px 0 4px 12px;
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(127, 194, 154, .16);
	color: #286b42;
	font-size: 12px;
	font-weight: 800;
	vertical-align: middle;
	white-space: nowrap;
}

/* Inline-SVG shield-check (no icon-font dependency): inherits the badge's
 * own green via currentColor, fixed 14px so it never stretches the pill. */
.single-job_listing .jf-job-verified-badge svg {
	flex: none;
	width: 14px;
	height: 14px;
}

/* "Already applied" notice - same green-wash confirmation language as the
 * Verified Employer badge above, just spelled out as a small banner since
 * it carries a link rather than a single word. Sits above the Apply button,
 * informational only (doesn't hide/replace it). */
.single-job_listing .jf-already-applied-notice {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
	padding: 10px 14px;
	border-radius: var(--jfpub-radius-sm);
	background: rgba(127, 194, 154, .16);
	color: #286b42;
	font-size: 14px;
	font-weight: 600;
}

.single-job_listing .jf-already-applied-notice i {
	font-size: 16px;
}

.single-job_listing .jf-already-applied-notice a {
	margin-left: auto;
	color: #1d5c38;
	font-weight: 800;
	text-decoration: underline;
}

/* Sidebar Job Location card - matches the Job Summary widget's own card
 * treatment (.job-overview) so the sidebar reads as one consistent set of
 * cards instead of one boxed widget next to a bare map. */
.single-job_listing .jf-job-map-widget {
	/* .jf-job-overview-widget (the Job Summary card directly above) zeroes
	 * its own margin-bottom - harmless when this map widget had no card
	 * boundary of its own, but it's now a separate white card with the
	 * same treatment, so it needs its own top gap or the two cards touch
	 * directly with no visible separation (screenshot, 2026-09-07). */
	margin-top: 24px;
	padding: 20px;
	border: 1px solid rgba(16, 24, 40, .08);
	border-radius: var(--jfpub-radius-lg);
	background: var(--jfpub-surface);
	box-shadow: var(--jfpub-shadow-card);
}

.single-job_listing .jf-job-map-widget > h4 {
	margin: 0 0 12px;
}

.single-job_listing .jf-job-map-widget__area-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 44px;
	margin-top: 12px;
	padding: 10px 16px;
	border: 1px solid rgba(11, 38, 104, .18);
	border-radius: var(--jfpub-radius-sm);
	background: var(--jfpub-surface);
	color: var(--jfpub-navy);
	font-weight: 700;
	text-align: center;
}

.single-job_listing .jf-job-map-widget__area-link:hover {
	border-color: var(--jfpub-blue);
	background: var(--jfpub-surface-blue);
	color: var(--jfpub-navy);
}

/* Background scroll lock while a .small-dialog popup (Bookmark/Message/
   Apply) is open - toggled by apply-dialog-autoopen.js via Magnific
   Popup's own global mfpOpen/mfpClose events (reported 2026-09-08). */
body.jf-modal-open {
	overflow: hidden;
}

/* Page grid - .jf-job-main (see single-job.php) groups the employer card +
 * role content as ONE left-column item beside the sidebar. The previous two
 * rows ("employer sidebar" / "content sidebar") let a sidebar taller than
 * employer + content stretch the shared rows, landing dead space between
 * the two cards (reported 2026-09-08). */
.single-job_listing .jf-job-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	grid-template-areas: "main sidebar";
	gap: 32px 40px;
	align-items: start;
	box-sizing: border-box;
	padding-top: 32px;
	padding-bottom: 32px;
}

.single-job_listing .jf-job-main {
	grid-area: main;
	display: flex;
	flex-direction: column;
	gap: 32px;
	min-width: 0;
	margin: 0;
}

.single-job_listing .jf-job-layout > .columns,
.single-job_listing .jf-job-layout > .company-info-boxed,
.single-job_listing .jf-job-main > .columns,
.single-job_listing .jf-job-main > .company-info-boxed {
	float: none;
	box-sizing: border-box;
	margin: 0;
}

.single-job_listing .jf-job-layout > .sixteen.columns {
	grid-column: 1 / -1;
	width: auto;
}

.single-job_listing .jf-job-layout > .sixteen.columns:empty {
	display: none;
}

/* Page-level alerts (e.g. "This position has been filled") live inside the
 * layout flow, so the layout gap already separates them from the cards -
 * the vendor's own 15px notice margin and 35px spacer double up into dead
 * air (reported 2026-09-08: ~107px of nothing above the employer card on
 * filled listings once the alert is dismissed). The :has() rule folds the
 * row away entirely after its notice is dismissed via the close button
 * (which sets inline display:none). */
.single-job_listing .jf-job-layout > .sixteen.columns .notification {
	margin-bottom: 0;
}

.single-job_listing .jf-job-layout > .sixteen.columns .margin-bottom-35 {
	display: none;
}

.single-job_listing .jf-job-layout > .sixteen.columns:has(> .notification[style*="display: none"]) {
	display: none;
}

/* Employer card */
.single-job_listing .jf-job-employer {
	container: jf-job-employer / inline-size;
	overflow: hidden;
	border: 1px solid rgba(16, 24, 40, .08);
	border-radius: var(--jfpub-radius-lg);
	background: var(--jfpub-surface);
	box-shadow: var(--jfpub-shadow-card);
}

.single-job_listing .jf-job-employer__inner {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	gap: 16px;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	margin: 0 !important;
	padding: 20px 24px;
	border: 0;
	background: transparent;
}

.single-job_listing .jf-job-employer .company-info-boxed-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 0;
	overflow: hidden;
	border-radius: var(--jfpub-radius-md);
	background: var(--jfpub-surface-blue);
}

.single-job_listing .jf-job-employer .company-info-boxed-logo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.single-job_listing .jf-job-employer__eyebrow {
	display: block;
	margin-bottom: 3px;
	color: var(--jfpub-muted);
	font-size: 14px;
	font-weight: 500;
}

.single-job_listing .jf-job-employer .content h4 {
	margin: 0;
	font-size: 18px;
	line-height: 1.35;
}

/* Real-employer contact rows render raw addresses as the link text itself
 * (e.g. #2720 "Delivery Driver (MR Licence)" shows
 * mailto:hello@northbridge-logistics.test - one 32-char unbreakable token
 * inside the card's ~168px text column at 320px viewports). The card's own
 * overflow:hidden would silently clip the tail instead of page-scrolling,
 * so break long tokens here rather than hiding them. Same guard for long
 * company names/taglines - normal words wrap on their own, single-token
 * ones need anywhere. min-width:0 lets the 1fr grid column actually shrink
 * instead of sizing to the longest token (reported 2026-09-08). */
.single-job_listing .jf-job-employer .content,
.single-job_listing .jf-job-employer .content h4,
.single-job_listing .jf-job-employer .company-info-boxed-links,
.single-job_listing .jf-job-employer .company-info-boxed-links a {
	min-width: 0;
	overflow-wrap: anywhere;
}

.single-job_listing .jf-job-employer .content h4 strong,
.single-job_listing .jf-job-employer .content h4 a {
	color: var(--jfpub-navy);
}

.single-job_listing .jf-job-employer .company-info-boxed-links {
	margin-top: 8px;
}

.single-job_listing .jf-job-employer .company-info-boxed-links a {
	color: var(--jfpub-muted);
	font-size: 14px;
}

.single-job_listing .jf-job-employer .send-message-to-owner.button {
	border: 1px solid rgba(16, 24, 40, .10);
	background: var(--jfpub-surface);
	color: var(--jfpub-muted);
	box-shadow: none;
}

.single-job_listing .jf-job-employer .send-message-to-owner.button:hover {
	border-color: rgba(7, 177, 229, .36);
	background: var(--jfpub-surface-blue);
	color: var(--jfpub-navy);
}

.single-job_listing .jf-job-employer .company-info-apply-btn {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
}

.single-job_listing .jf-job-employer .company-info-apply-btn:empty {
	display: none;
}

.single-job_listing .jf-job-employer .company-info-apply-btn .jf-job-employer__profile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin: 0;
	padding: 10px 16px;
	border: 1px solid rgba(11, 38, 104, .18);
	border-radius: var(--jfpub-radius-sm);
	background: var(--jfpub-surface);
	color: var(--jfpub-navy);
	box-shadow: none;
	white-space: nowrap;
}

.single-job_listing .jf-job-employer__actions .button {
	box-sizing: border-box;
	max-width: 100%;
	min-width: 0;
	min-height: 44px;
	margin: 0;
	padding: 10px 14px;
	font-size: 14px;
}

.single-job_listing .jf-job-employer .company-info-apply-btn .jf-job-employer__profile:hover {
	border-color: var(--jfpub-blue);
	background: var(--jfpub-surface-blue);
	color: var(--jfpub-navy);
}

.single-job_listing .jf-apply-external-note {
	margin: 0;
	max-width: 210px;
	margin-inline: auto;
	color: var(--jfpub-muted);
	font-size: 14px;
	line-height: 1.5;
	white-space: normal;
	overflow-wrap: anywhere;
}

/* Same "stack the buttons on their own row" treatment as the max-width:960px
 * block below, but keyed to this card's own rendered width via a container
 * query instead of the viewport. The card sits next to a fixed-width
 * sidebar, so its available width depends on viewport AND sidebar width
 * together - a single viewport breakpoint left a real gap (e.g. 990px
 * viewport) where the card was narrow enough to crush the company name down
 * to a few px (Message/Company profile refuse to shrink) but still wider
 * than 960px, so the existing fix never engaged (2026-09-07). */
@container jf-job-employer (max-width: 480px) {
	.single-job_listing .jf-job-employer__inner {
		grid-template-columns: 64px minmax(0, 1fr);
	}

	.single-job_listing .jf-job-employer .company-info-apply-btn {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: 100%;
		grid-column: 1 / -1;
		justify-content: stretch;
	}

	.single-job_listing .jf-job-employer__actions .button,
	.single-job_listing .jf-job-employer .company-info-apply-btn .jf-job-employer__profile {
		width: 100%;
		white-space: normal;
	}
}

/* Job brief - no grid-area: this is a flex item inside .jf-job-main now,
 * so the old "content" area name is inert (kept width to beat the vendor
 * Skeleton column widths as before). */
.single-job_listing .jf-job-content,
.single-job_listing .jf-job-content.eleven.columns {
	width: auto;
}

.single-job_listing .jf-job-content .padding-right {
	padding: 0;
}

.single-job_listing .jf-job-content .single_job_listing {
	border: 0;
	background: transparent;
}

.single-job_listing .jf-job-content .job_description {
	padding: 32px 36px 36px;
	border: 1px solid rgba(16, 24, 40, .08);
	border-radius: var(--jfpub-radius-lg);
	background: var(--jfpub-surface);
	box-shadow: var(--jfpub-shadow-card);
}

.single-job_listing .jf-job-section-title,
.single-job_listing .jf-job-content .job_description h2:first-child {
	margin: 0 0 20px;
	color: var(--jfpub-navy);
	font-size: 22px;
	font-weight: 750;
	line-height: 1.25;
}

.single-job_listing .jf-job-content .job_description p,
.single-job_listing .jf-job-content .job_description li {
	color: #344054;
	font-size: 16px;
	line-height: 1.7;
}

.single-job_listing .jf-job-content .job_description a[href*="/land/ad/"] {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	margin-left: 4px;
	color: var(--jfpub-blue-active);
	font-weight: 750;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.single-job_listing .jf-job-content .job_description p:last-child {
	margin-bottom: 0;
}

/* Employer-pasted rich content - the seeded samples are one-liners, but a
 * real employer pasting a Word table, a 1200px photo, an embed, or a bare
 * long URL must not break the 320px layout. Tables get a fixed layout at
 * full width (columns share the space instead of page-scrolling - this
 * page follows the no-horizontal-scroll rule, and pasted tables carry no
 * data-labels to stack into cards with). Media never exceeds its box,
 * pre/code wraps instead of running off-screen (reported 2026-09-08). */
.single-job_listing .jf-job-content .job_description {
	overflow-wrap: anywhere;
}

.single-job_listing .jf-job-content .job_description img,
.single-job_listing .jf-job-content .job_description figure,
.single-job_listing .jf-job-content .job_description video,
.single-job_listing .jf-job-content .job_description iframe {
	max-width: 100%;
}

.single-job_listing .jf-job-content .job_description img,
.single-job_listing .jf-job-content .job_description video {
	height: auto;
}

.single-job_listing .jf-job-content .job_description table {
	width: 100% !important;
	table-layout: fixed;
}

.single-job_listing .jf-job-content .job_description th,
.single-job_listing .jf-job-content .job_description td {
	overflow-wrap: anywhere;
}

.single-job_listing .jf-job-content .job_description pre,
.single-job_listing .jf-job-content .job_description code {
	max-width: 100%;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.single-job_listing .jf-job-content .job_description h2,
.single-job_listing .jf-job-content .job_description h3,
.single-job_listing .jf-job-content .job_description h4 {
	color: var(--jfpub-navy);
}

/* One quiet utility strip: useful, but intentionally below the role itself. */
.single-job_listing .jf-job-after-description {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 16px 0 0;
	padding: 12px 16px;
	border: 1px solid rgba(16, 24, 40, .08);
	border-radius: var(--jfpub-radius-md);
	background: rgba(255, 255, 255, .58);
}

.single-job_listing .jf-job-after-description__label {
	margin-right: 4px;
	color: var(--jfpub-ink);
	font-size: 14px;
	font-weight: 750;
}

.single-job_listing .jf-job-after-description > .jfmod-report,
.single-job_listing .jf-job-after-description > .job-manager-single-alert-link,
.single-job_listing .jf-job-after-description > ul.share-post {
	margin: 0;
}

.single-job_listing .jf-job-after-description > .clearfix {
	display: none;
}

.single-job_listing .jfmod-report__trigger,
.single-job_listing .jfmod-report__login-hint a,
.single-job_listing .job-manager-single-alert-link a,
.single-job_listing ul.share-post li a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 44px;
	margin: 0;
	padding: 9px 12px;
	border: 1px solid rgba(16, 24, 40, .10);
	border-radius: var(--jfpub-radius-sm);
	background: transparent !important;
	color: var(--jfpub-muted);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.25;
	text-decoration: none;
}

.single-job_listing .jfmod-report__trigger:hover,
.single-job_listing .jfmod-report__login-hint a:hover,
.single-job_listing .job-manager-single-alert-link a:hover,
.single-job_listing ul.share-post li a:hover {
	border-color: rgba(7, 177, 229, .36);
	background: var(--jfpub-surface-blue);
	color: var(--jfpub-navy);
}

.single-job_listing ul.share-post li a svg path {
	fill: currentColor;
	stroke: currentColor;
}

.single-job_listing .job-manager-single-alert-link a::before {
	color: var(--jfpub-blue-active);
	/* Vendor's p.job-manager-single-alert-link a:before still applies its own
	   `position: relative; top: 3px` (style.css:3330) - a manual nudge tuned
	   for that rule's own non-flex button layout. This button is now
	   display:inline-flex; align-items:center (above), which already
	   centers the icon correctly, so the leftover nudge just pushes it back
	   out of alignment (reported 2026-09-08). */
	position: relative;
	top: 0;
}

/* Decision rail */
.single-job_listing .jf-job-sidebar,
.single-job_listing .jf-job-sidebar.five.columns {
	grid-area: sidebar;
	width: auto;
}

.single-job_listing .jf-job-sidebar > .widget {
	margin-bottom: 24px;
}

.single-job_listing .jf-job-sidebar > .widget > h4,
.single-job_listing .jf-job-map-widget > h4 {
	margin: 0 0 12px;
	color: var(--jfpub-navy);
	font-size: 18px;
	font-weight: 750;
}

.single-job_listing .jf-job-sidebar > .jf-job-overview-widget {
	margin-bottom: 0;
}

.single-job_listing .jf-job-sidebar .job-overview {
	padding: 20px;
	border: 1px solid rgba(16, 24, 40, .08);
	border-radius: var(--jfpub-radius-lg);
	background: var(--jfpub-surface);
	box-shadow: var(--jfpub-shadow-card);
}

.single-job_listing .jf-job-overview__title {
	margin: 0 0 16px;
	color: var(--jfpub-navy);
	font-size: 18px;
	font-weight: 750;
	line-height: 1.3;
}

.single-job_listing .jf-job-sidebar .job-overview ul {
	margin: 0;
}

.single-job_listing .jf-job-decision {
	display: grid;
	gap: 8px;
	margin-bottom: 15px;
	padding-bottom: 18px;
	border-bottom: 1px solid rgba(16, 24, 40, .08);
}

.single-job_listing .jf-job-sidebar .job-overview li {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	margin: 0;
	padding: 14px 0;
	border-bottom: 1px solid rgba(16, 24, 40, .08);
}

.single-job_listing .jf-job-sidebar .job-overview li:last-child {
	border-bottom: 0;
}

.single-job_listing .jf-job-sidebar .job-overview li > i,
.single-job_listing .jf-job-sidebar .job-overview li > svg {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	box-sizing: border-box;
	margin: 0;
	border-radius: var(--jfpub-radius-sm);
	background: var(--jfpub-surface-blue);
	color: var(--jfpub-blue-active);
}

.single-job_listing .jf-job-sidebar .job-overview li strong,
.single-job_listing .jf-job-sidebar .job-overview li span {
	display: block;
	font-size: 14px;
	line-height: 1.4;
}

.single-job_listing .jf-job-sidebar .job-overview li strong {
	margin-bottom: 2px;
	color: var(--jfpub-ink);
	font-weight: 750;
}

.single-job_listing .jf-job-sidebar .job-overview li span {
	color: var(--jfpub-muted);
	/* Location/salary values are free text - a single long token (URL,
	 * reference code) must wrap inside the 280px sidebar card, not push it
	 * past the viewport (reported 2026-09-08). */
	overflow-wrap: anywhere;
}

.single-job_listing .jf-job-sidebar .job-overview .button {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	margin: 0;
	background: var(--jfpub-blue);
	box-shadow: none;
}

.single-job_listing .jf-job-sidebar .job-overview .button:hover {
	background: var(--jfpub-blue-hover);
}

.single-job_listing .jf-job-sidebar .job-overview .jf-apply-external-note {
	padding: 0 4px;
	text-align: center;
}

/* On-site apply form (WP Job Manager Applications' email-method form) -
 * reachable only on this site's normal (non-Adzuna) listings, e.g. #2745
 * "Local Delivery Driver". 2026-09-08: moved from an inline expand (which
 * pushed the whole sidebar card taller) into a real popup, matching
 * "Bookmark This Job"/"Message"'s existing .small-dialog pattern on this
 * same page - the trigger link already inherits the sidebar's
 * .job-overview .button styling via its own .button class. The field
 * markup itself was bare vendor structure (<fieldset>/<label>/<div
 * class="field">) with no theme styling at all - still covered below,
 * unchanged from the inline version. */
.single-job_listing #apply-dialog.small-dialog {
	/* Matches #small-dialog/#bookmark-dialog's own width (Message/Bookmark) -
	   480px read as cramped for a 4-field form with a file upload and
	   reCAPTCHA (reported 2026-09-08). */
	max-width: 610px;
}

/* Scroll only the form body, not the whole dialog - the header uses the
   vendor's own left:-40px/width:calc(100%+80px) bleed technique (same as
   Bookmark/Message's headers) to span edge-to-edge, and clipping overflow
   on the outer dialog cut that bleed off, pushing the heading text flush
   against the clipped edge instead of sitting with its intended inset
   (reported 2026-09-08). Scoping the scroll to just this inner div leaves
   the header exactly like Bookmark/Message's, unclipped. */
.single-job_listing .jf-job-apply__details {
	margin-top: 0;
	/* Header switched from .small-dialog-header (Message's class - its
	   width:calc(100%+80px)/left:-40px bleed trick only lands flush when the
	   parent has #small-dialog's own ID-specific 40px padding to compensate
	   for, which #apply-dialog doesn't get, so the header overhung both
	   sides - reported 2026-09-08 as "looks like a mushroom") to
	   .small-dialog-headline (Bookmark's class - plain, no overhang, safe
	   regardless of the parent's own padding). That class has no
	   margin-bottom of its own, unlike small-dialog-header, so this restores
	   a modest top gap instead of the 40px .small-dialog-content padding
	   this element also carries (still needed for its own left/right/bottom). */
	padding-top: 24px;
	max-height: 60vh;
	overflow-y: auto;
}

.single-job_listing .job-manager-application-form fieldset {
	margin: 0 0 16px;
	padding: 0;
	border: 0;
}

.single-job_listing .job-manager-application-form label {
	display: block;
	margin-bottom: 6px;
	color: var(--jfpub-ink);
	font-size: 14px;
	font-weight: 750;
}

.single-job_listing .job-manager-application-form label small {
	color: var(--jfpub-muted);
	font-weight: 400;
}

.single-job_listing .job-manager-application-form input[type="text"],
.single-job_listing .job-manager-application-form input[type="email"],
.single-job_listing .job-manager-application-form input[type="tel"],
.single-job_listing .job-manager-application-form input[type="url"],
.single-job_listing .job-manager-application-form textarea,
.single-job_listing .job-manager-application-form select {
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid rgba(16, 24, 40, .16);
	border-radius: var(--jfpub-radius-sm);
	background: var(--jfpub-surface);
	color: var(--jfpub-ink);
	font-size: 14px;
}

.single-job_listing .job-manager-application-form textarea {
	min-height: 110px;
	resize: vertical;
}

.single-job_listing .job-manager-application-form input:focus-visible,
.single-job_listing .job-manager-application-form textarea:focus-visible,
.single-job_listing .job-manager-application-form select:focus-visible {
	outline: 3px solid rgba(7, 177, 229, .38);
	outline-offset: 1px;
	border-color: var(--jfpub-blue);
}

.single-job_listing .job-manager-application-form .field {
	margin: 0;
}

.single-job_listing .job-manager-application-form input[type="file"] {
	width: 100%;
	padding: 8px 0;
	font-size: 14px;
}

.single-job_listing .job-manager-application-form .wp_job_manager_send_application_button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 46px;
	margin: 4px 0 0;
	border: 0;
	border-radius: var(--jfpub-radius-sm);
	background: var(--jfpub-blue);
	color: #fff;
	font-size: 14px;
	font-weight: 750;
	cursor: pointer;
}

.single-job_listing .job-manager-application-form .wp_job_manager_send_application_button:hover {
	background: var(--jfpub-blue-hover);
}

.single-job_listing .job-manager-message,
.single-job_listing .job-manager-applications-error {
	margin: 0 0 16px !important;
	padding: 12px 14px;
	border-radius: var(--jfpub-radius-sm);
	font-size: 14px;
}

.single-job_listing .jf-job-sidebar #job_map {
	height: 184px !important;
	overflow: hidden;
	border: 1px solid rgba(16, 24, 40, .08);
	border-radius: var(--jfpub-radius-md);
	box-shadow: var(--jfpub-shadow-card);
}

/* The hero owns saving and the utility strip owns sharing. Suppress the
 * legacy duplicate widget without changing other sidebar widgets. */
.single-job_listing .jf-job-sidebar [id^="widget_bookmarks_share-"] {
	display: none;
}

/* Discovery is one deliberately secondary zone, after the full role flow. */
.single-job_listing .jf-job-discovery {
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid rgba(16, 24, 40, .10);
}

.single-job_listing .jf-job-discovery__title {
	margin: 0;
	color: var(--jfpub-navy);
	font-size: 22px;
	font-weight: 750;
	line-height: 1.3;
}

.single-job_listing .jffj-related-jobs {
	margin: 0;
	padding: 20px;
	border-color: rgba(16, 24, 40, .08);
	border-radius: var(--jfpub-radius-md);
	box-shadow: none;
}

.single-job_listing .jffj-related-jobs h4 {
	font-size: 18px;
}

.single-job_listing ul.share-post {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 0;
}

.single-job_listing ul.share-post li,
.single-job_listing ul.share-post li a {
	margin: 0;
	border-radius: var(--jfpub-radius-sm);
}

.single-job_listing .related-jobs {
	margin-top: 0;
}

.single-job_listing .jf-related-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-top: 16px;
}

/* One related role shouldn't leave a half-empty dead row - a lone card
   spans the full row instead of sitting in the left column only. */
.single-job_listing .jf-related-grid:has(> :only-child) {
	grid-template-columns: minmax(0, 1fr);
}

.single-job_listing .jf-related-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 248px;
	box-sizing: border-box;
	padding: 24px;
	border: 1px solid rgba(16, 24, 40, .08);
	border-radius: var(--jfpub-radius-lg);
	background: var(--jfpub-surface);
	box-shadow: var(--jfpub-shadow-card);
}

.single-job_listing .jf-related-card__heading {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	justify-content: space-between;
}

.single-job_listing .jf-related-card__heading h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 750;
	line-height: 1.4;
}

.single-job_listing .jf-related-card__heading h3 a {
	color: var(--jfpub-navy);
}

.single-job_listing .jf-related-card__type {
	flex: 0 0 auto;
	padding: 3px 7px;
	border: 1px solid rgba(7, 177, 229, .42);
	border-radius: 6px;
	color: var(--jfpub-blue-active);
	font-size: 14px;
	line-height: 1.25;
}

.single-job_listing .jf-related-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin-top: 14px;
	color: var(--jfpub-muted);
	font-size: 14px;
}

.single-job_listing .jf-related-card__meta span {
	display: inline-flex;
	gap: 6px;
	align-items: center;
}

.single-job_listing .jf-related-card__meta i {
	color: var(--jfpub-faint);
}

.single-job_listing .jf-related-card > p {
	margin: 20px 0;
	color: #344054;
	font-size: 14px;
	line-height: 1.6;
}

.single-job_listing .jf-related-card__link {
	align-self: flex-start;
	width: auto;
	min-width: 140px;
	min-height: 44px;
	box-sizing: border-box;
	margin-top: auto;
	border: 1px solid rgba(11, 38, 104, .18);
	background: var(--jfpub-surface);
	color: var(--jfpub-navy);
	text-align: center;
	box-shadow: none;
}

.single-job_listing .jf-related-card__link:hover {
	border-color: var(--jfpub-blue);
	background: var(--jfpub-surface-blue);
	color: var(--jfpub-navy);
}

.single-job_listing .jf-job-nearby {
	margin-top: 16px;
	border: 1px solid rgba(16, 24, 40, .10);
	border-radius: var(--jfpub-radius-md);
	background: rgba(255, 255, 255, .5);
}

.single-job_listing .jf-job-nearby > summary {
	display: flex;
	align-items: center;
	min-height: 48px;
	box-sizing: border-box;
	padding: 12px 16px;
	color: var(--jfpub-navy);
	font-size: 14px;
	font-weight: 750;
	cursor: pointer;
}

.single-job_listing .jf-job-nearby > summary::after {
	content: '+';
	margin-left: auto;
	color: var(--jfpub-blue-active);
	font-size: 18px;
}

.single-job_listing .jf-job-nearby[open] > summary::after {
	content: '\2212';
}

/* Pure-CSS expand/collapse, two layers:
 * 1. Fallback: grid-template-rows 0fr -> 1fr. `display: grid` stays constant
 *    across [open]/closed states to override the UA stylesheet's
 *    `details:not([open]) > *{display:none}`, which would otherwise make the
 *    element unrenderable (and thus untransitionable) while closed. The
 *    explicit 0px minimum (not a bare `0fr`, really `minmax(auto, 0fr)`)
 *    overrides the auto floor at the child's min-content size - otherwise a
 *    visible sliver survives while "collapsed".
 * 2. Progressive enhancement: where `::details-content` is supported, it
 *    takes over (block-size 0 -> auto + content-visibility kept rendered
 *    through the animation). The grid trick jumps on the very first open
 *    there - unrendered content has no laid-out size to interpolate from
 *    (measured: first open instant, later opens animated) - while this one
 *    animates every toggle including the first. */
.single-job_listing .jf-job-nearby {
	interpolate-size: allow-keywords;
}

.single-job_listing .jf-job-nearby > .jf-job-nearby__content {
	display: grid;
	grid-template-rows: minmax(0px, 0fr);
	overflow: hidden;
	transition: grid-template-rows .25s ease;
}

.single-job_listing .jf-job-nearby[open] > .jf-job-nearby__content {
	grid-template-rows: minmax(0px, 1fr);
}

@supports selector(::details-content) {
	.single-job_listing .jf-job-nearby > .jf-job-nearby__content,
	.single-job_listing .jf-job-nearby[open] > .jf-job-nearby__content {
		display: block;
		grid-template-rows: none;
		overflow: visible;
		transition: none;
	}

	.single-job_listing .jf-job-nearby::details-content {
		block-size: 0;
		overflow: clip;
		interpolate-size: allow-keywords;
		transition: block-size .25s ease, content-visibility .25s ease allow-discrete;
	}

	.single-job_listing .jf-job-nearby[open]::details-content {
		block-size: auto;
	}
}

.single-job_listing .jf-job-nearby__content > * {
	min-height: 0;
	overflow: hidden;
	/* No side padding here: the summary text already starts at 16px, and
	   padding that only exists while open made the whole panel visibly jump
	   inward on every toggle (reported 2026-09-08). Bottom gap only. */
	padding: 0 0 16px;
}

@media (prefers-reduced-motion: reduce) {
	.single-job_listing .jf-job-nearby > .jf-job-nearby__content {
		transition: none;
	}

	.single-job_listing .jf-job-nearby::details-content {
		transition: none;
	}
}

/* The panel's own `> *` rule ties this widget's padding on specificity and
   sits later in this file, so without this the widget's 20px gutters lost
   and the cards + heading + link touched the outline (reported 2026-09-08).
   Wins outright instead of depending on source order again. */
.single-job_listing .jf-job-nearby .jffj-related-jobs {
	margin: 0;
	padding: 20px;
}

.single-job_listing .jf-job-nearby .jffj-related-jobs h4 {
	margin-top: 0;
}

.single-job_listing .jf-job-page-end-spacer {
	height: 16px;
}

.single-job_listing a:focus-visible,
.single-job_listing button:focus-visible,
.single-job_listing summary:focus-visible {
	outline: 3px solid rgba(7, 177, 229, .38);
	outline-offset: 3px;
}

/* NOTE: summary:active is deliberately NOT scaled - the press-shrink made
   the whole "Browse more jobs" toggle visibly jump inward on every tap
   (reported 2026-09-08). Buttons keep their press feedback below. */
.single-job_listing .button:active {
	transform: scale(.97);
}

@media (max-width: 960px) {
	.single-job_listing .jf-job-layout {
		grid-template-columns: minmax(0, 1fr) 280px;
		gap: 24px;
	}

	.single-job_listing .jf-job-employer__inner {
		grid-template-columns: 64px minmax(0, 1fr);
	}

	.single-job_listing .jf-job-employer .company-info-apply-btn {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: 100%;
		grid-column: 1 / -1;
		justify-content: stretch;
	}

	.single-job_listing .jf-job-employer__actions .button,
	.single-job_listing .jf-job-employer .company-info-apply-btn .jf-job-employer__profile {
		width: 100%;
		white-space: normal;
	}
}

@media (max-width: 780px) {
	.single-job_listing .jf-job-hero__inner {
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 28px 20px 36px;
	}

	.single-job_listing #titlebar .jffj-job-back,
	.single-job_listing .jf-job-hero__copy,
	.single-job_listing .jf-job-hero__save {
		grid-column: 1;
	}

	.single-job_listing .jf-job-hero__save {
		justify-self: stretch;
	}

	.single-job_listing #titlebar .jf-job-hero__save .button,
	.single-job_listing #titlebar .jf-job-hero__save a {
		width: 100%;
	}

	.single-job_listing .jf-job-layout {
		display: flex;
		flex-direction: column;
		gap: 24px;
		padding: 24px 20px 48px;
	}

	/* Dissolve the desktop wrapper so employer / sidebar / content stack as
	 * direct flex items with the existing order rules below (employer 1,
	 * sidebar 2, content 3) and the same 24px gaps - mobile behavior is
	 * byte-for-byte what it was before the wrapper existed. */
	.single-job_listing .jf-job-main {
		display: contents;
	}

	.single-job_listing .jf-job-layout > .columns,
	.single-job_listing .jf-job-layout > .company-info-boxed,
	.single-job_listing .jf-job-main > .columns,
	.single-job_listing .jf-job-main > .company-info-boxed,
	.single-job_listing .jf-job-content,
	.single-job_listing .jf-job-sidebar {
		width: 100% !important;
	}

	.single-job_listing .jf-job-employer {
		order: 1;
	}

	.single-job_listing .jf-job-content {
		order: 3;
	}

	.single-job_listing .jf-job-sidebar {
		order: 2;
	}

	/* Location is already stated in the summary. Keep the interactive map out
	 * of the narrow reading flow rather than placing it before the role copy. */
	.single-job_listing .jf-job-map-widget {
		display: none;
	}

	.single-job_listing .jf-job-employer__inner {
		grid-template-columns: 56px minmax(0, 1fr);
		gap: 16px;
		padding: 20px;
	}

	.single-job_listing .jf-job-employer .content {
		text-align: left;
	}

	.single-job_listing .jf-job-employer .company-info-boxed-links {
		justify-content: flex-start;
	}

	.single-job_listing .jf-job-employer .company-info-boxed-logo {
		width: 56px;
		height: 56px;
	}

	.single-job_listing .jf-job-employer .company-info-apply-btn {
		display: grid;
	}

	.single-job_listing .jf-job-employer .company-info-apply-btn .jf-job-employer__profile {
		width: 100%;
	}

	.single-job_listing .jf-job-content .job_description {
		padding: 24px 20px;
	}

	.single-job_listing .jf-job-discovery {
		margin-top: 28px;
		padding-top: 24px;
	}

}

@media (max-width: 480px) {
	/* Pills size to content and wrap only when needed - forcing a 1fr grid
	   stacked short pills (Wyndham / Posted 2 weeks ago) into two tall
	   full-width rows and pushed the hero ~600px tall on phones. */
	.jf-job-hero__meta {
		display: flex;
		flex-wrap: wrap;
	}

	.jf-job-hero__meta li {
		border-radius: var(--jfpub-radius-sm);
	}

	/* Phones stack the employer card vertically - logo on top, identity and
	 * contact rows beneath with real rhythm (requested 2026-09-08: the 56px
	 * + text side-by-side was cramped under ~480px). Centered stack so
	 * nothing hugs an edge. These sit later in source than the card-width
	 * container query at the same specificity, so they win ties there. */
	.single-job_listing .jf-job-employer__inner {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		gap: 14px;
		padding: 22px 20px;
		text-align: center;
	}

	.single-job_listing .jf-job-employer .company-info-apply-btn {
		grid-template-columns: 1fr;
	}

	.single-job_listing .jf-job-employer .company-info-boxed-logo {
		width: 60px;
		height: 60px;
		margin: 0;
	}

	.single-job_listing .jf-job-employer .content {
		min-width: 0;
		max-width: 100%;
		text-align: center;
	}

	.single-job_listing .jf-job-employer .content h4 {
		margin-top: 4px;
	}

	.single-job_listing .jf-job-employer .content p.company-data__content--list-item {
		margin: 6px 0 0;
	}

	.single-job_listing .jf-job-employer .company-info-boxed-links {
		justify-content: center;
		gap: 8px;
		margin-top: 12px;
	}

	.single-job_listing .jf-job-after-description {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.single-job_listing .jf-related-grid {
		grid-template-columns: 1fr;
	}

	.single-job_listing .jf-job-after-description > .jfmod-report,
	.single-job_listing .jf-job-after-description > .job-manager-single-alert-link,
	.single-job_listing .jf-job-after-description > ul.share-post {
		width: 100%;
	}

	.single-job_listing .jfmod-report__login-hint a,
	.single-job_listing .job-manager-single-alert-link a {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.single-job_listing .jf-job-sidebar > .jf-job-overview-widget {
		scroll-behavior: auto;
	}
}

/* "Send Message" popup textarea (ws-private-message.php's #contact-message)
   was falling back to its bare cols="40" HTML attribute - no width rule in
   the vendor CSS targets it here (the width:100% rule at style.css:35628
   only scopes .messages-container .message-reply, the dashboard inbox
   thread, not this single-job popup's own .message-reply). */
#small-dialog.apply-popup #contact-message {
	width: 100%;
	min-height: 180px;
	box-sizing: border-box;
}