/*
Theme Name: Job Board Factory
Theme URI: https://jobboardfactory.com
Author: Rob Case
Description: Shared block theme for the Job Board Factory WordPress Multisite network. A config-driven design system: per-board content and colour come from board config, never hardcoded here.
Version: 0.7.0
Requires at least: 6.4
Tested up to: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jobboard-factory
*/

/* Small CSS layer. The bulk of styling is theme.json design tokens. */

/* Tables: readable borders and header emphasis for the data patterns. */
.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}
.wp-block-table th,
.wp-block-table td {
	border: 1px solid var(--wp--preset--color--border);
	padding: 0.6rem 0.8rem;
	text-align: left;
}
.wp-block-table thead th {
	background: var(--wp--preset--color--surface);
	font-weight: 700;
}
.wp-block-table figcaption {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* Details (FAQ): pointer affordance and spacing on the summary. */
.wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
}

/* Content-slot sentinels. The content pipeline replaces the span between them
   with the page body; standalone (pattern preview) they must not show. */
.jbf-slot-start,
.jbf-slot-end {
	display: none;
}

/* Keep stat columns from collapsing too narrow on small screens. */
@media (max-width: 599px) {
	.wp-block-columns {
		gap: var(--wp--preset--spacing--30);
	}
}

/* =========================================================================
   DESIGN SYSTEM COMPONENT LAYER
   Reusable, config-driven components shared by every board in the network.
   Colours and spacing reference the theme.json tokens, which per-board config
   overrides, so these styles stay niche-agnostic.
   ========================================================================= */

:root {
	--jbf-shadow: 0 1px 2px rgba(20, 40, 63, 0.04), 0 8px 24px rgba(20, 40, 63, 0.08);
	--jbf-radius: 10px;
	--jbf-maxw: 1200px;
}

/* --- Buttons ------------------------------------------------------------ */
.jbf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.85rem 1.6rem;
	border-radius: 8px;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1;
	text-decoration: none;
	border: 2px solid transparent;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	cursor: pointer;
}
.jbf-btn--accent {
	background: var(--wp--preset--color--accent);
	color: var(--jbf-accent-text, var(--wp--preset--color--contrast));
	border-color: var(--wp--preset--color--accent);
}
.jbf-btn--accent:hover,
.jbf-btn--accent:focus {
	background: var(--wp--preset--color--accent-dark);
	border-color: var(--wp--preset--color--accent-dark);
	color: var(--jbf-accent-text, var(--wp--preset--color--contrast));
}
.jbf-btn--outline {
	background: transparent;
	color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}
.jbf-btn--outline:hover,
.jbf-btn--outline:focus {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* --- Header: utility bar + primary nav ---------------------------------- */
.jbf-utilitybar .jbf-util-link {
	margin: 0;
}
.jbf-utilitybar a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
	opacity: 0.85;
}
.jbf-utilitybar a:hover {
	opacity: 1;
	color: var(--wp--preset--color--accent);
}
.jbf-primary-nav a {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
	text-decoration: none;
}
.jbf-primary-nav a:hover {
	color: var(--wp--preset--color--primary);
}

/* --- Eyebrow label (shared) -------------------------------------------- */
.jbf-eyebrow {
	margin: 0 0 0.6rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--wp--preset--color--accent-dark);
}

/* --- Hero --------------------------------------------------------------- */
.jbf-hero {
	background: var(--wp--preset--color--canvas);
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.jbf-hero__inner {
	max-width: var(--jbf-maxw);
	margin: 0 auto;
	padding: clamp(2.25rem, 4.5vw, 3.75rem) var(--wp--preset--spacing--40) clamp(2.75rem, 5vw, 4.5rem);
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}
.jbf-hero__headline {
	margin: 0 0 0.85rem;
	font-size: clamp(2.4rem, 5vw, 3.4rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--contrast);
}
.jbf-hero__subhead {
	margin: 0 0 1.5rem;
	max-width: 38ch;
	font-size: clamp(1.05rem, 1.6vw, 1.2rem);
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
}
.jbf-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	margin-bottom: 1.75rem;
}
.jbf-hero__trust {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
}
.jbf-hero__trust li {
	position: relative;
	padding-left: 1.5rem;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}
.jbf-hero__trust li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.05em;
	width: 1.05rem;
	height: 1.05rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	/* check mark drawn in CSS, no image asset */
	background-image: linear-gradient(45deg, transparent 45%, var(--wp--preset--color--contrast) 45%, var(--wp--preset--color--contrast) 55%, transparent 55%),
		linear-gradient(-45deg, transparent 45%, var(--wp--preset--color--contrast) 45%, var(--wp--preset--color--contrast) 55%, transparent 55%);
	background-size: 0.34rem 0.16rem, 0.5rem 0.16rem;
	background-position: 0.27rem 0.55rem, 0.42rem 0.5rem;
	background-repeat: no-repeat;
}
/* Hero media: a branded placeholder panel where an image goes later. */
.jbf-hero__media {
	min-height: 280px;
}
.jbf-hero__panel {
	height: 100%;
	min-height: 280px;
	border-radius: var(--jbf-radius);
	background: linear-gradient(150deg, var(--wp--preset--color--primary), var(--wp--preset--color--primary-dark));
	border: 1px solid var(--wp--preset--color--primary-dark);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1rem;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	position: relative;
	overflow: hidden;
}
.jbf-hero__panel::after {
	/* subtle industrial diagonal texture, CSS only */
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 14px);
	pointer-events: none;
}
.jbf-hero__panel-eyebrow {
	position: relative;
	z-index: 1;
	color: var(--wp--preset--color--accent);
	font-weight: 700;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
}
.jbf-hero__panel-points {
	position: relative;
	z-index: 1;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}
.jbf-hero__panel-points li {
	position: relative;
	padding-left: 1.6rem;
	color: #fff;
	font-weight: 600;
	font-size: 1.05rem;
	line-height: 1.35;
}
.jbf-hero__panel-points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 2px;
	background: var(--wp--preset--color--accent);
	transform: rotate(45deg);
}

/* --- Search card -------------------------------------------------------- */
.jbf-search {
	max-width: var(--jbf-maxw);
	margin: 0 auto;
	padding: 0 var(--wp--preset--spacing--40);
}
.jbf-search__card {
	display: grid;
	grid-template-columns: 1.3fr 1fr 0.9fr auto;
	gap: 1rem;
	align-items: end;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--jbf-radius);
	box-shadow: var(--jbf-shadow);
	padding: 1.25rem;
	margin-top: -2.5rem; /* lift the card over the hero's lower edge */
	position: relative;
	z-index: 2;
}
.jbf-search__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}
.jbf-search__field label {
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--muted);
}
.jbf-search__field input,
.jbf-search__field select {
	width: 100%;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	font-size: 1rem;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}
.jbf-search__field input:focus,
.jbf-search__field select:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px rgba(31, 58, 95, 0.12);
}
.jbf-search__submit {
	height: calc(0.7rem * 2 + 1rem + 2px);
	white-space: nowrap;
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 900px) {
	.jbf-hero__inner {
		grid-template-columns: 1fr;
	}
	/* Headline leads on mobile: content stays first, the value panel follows. */
	.jbf-hero__content {
		order: 1;
	}
	.jbf-hero__media {
		order: 2;
		min-height: 0;
	}
	.jbf-hero__panel {
		min-height: 0;
	}
	.jbf-search__card {
		grid-template-columns: 1fr 1fr;
	}
	.jbf-search__submit {
		grid-column: 1 / -1;
		height: auto;
	}
}
@media (max-width: 560px) {
	.jbf-search__card {
		grid-template-columns: 1fr;
		margin-top: -1.5rem;
	}
	.jbf-hero__ctas .jbf-btn {
		flex: 1 1 100%;
	}
}

/* --- Section system (shared by every content section) ------------------- */
.jbf-section {
	padding: clamp(3rem, 6vw, 5rem) 0;
}
.jbf-section--canvas { background: var(--wp--preset--color--canvas); }
.jbf-section--surface { background: var(--wp--preset--color--surface); }
.jbf-section--navy {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}
.jbf-section__inner {
	max-width: var(--jbf-maxw);
	margin: 0 auto;
	padding: 0 var(--wp--preset--spacing--40);
}
.jbf-section__head {
	max-width: 58ch;
	margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.jbf-section__title {
	font-size: clamp(1.7rem, 3vw, 2.2rem);
	font-weight: 800;
	letter-spacing: -0.015em;
	margin: 0 0 0.6rem;
	color: var(--wp--preset--color--contrast);
}
.jbf-section--navy .jbf-section__title { color: var(--wp--preset--color--base); }
.jbf-section__intro {
	font-size: 1.1rem;
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
	margin: 0;
}
.jbf-section--navy .jbf-section__intro { color: rgba(255, 255, 255, 0.82); }

/* --- Cards -------------------------------------------------------------- */
.jbf-cards {
	display: grid;
	gap: clamp(1rem, 2vw, 1.5rem);
}
.jbf-cards--3 { grid-template-columns: repeat(3, 1fr); }
.jbf-cards--2 { grid-template-columns: repeat(2, 1fr); }
.jbf-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--jbf-radius);
	padding: clamp(1.25rem, 2vw, 1.75rem);
}
.jbf-card__title {
	font-size: 1.2rem;
	font-weight: 700;
	margin: 0 0 0.5rem;
	color: var(--wp--preset--color--contrast);
}
.jbf-card__body {
	color: var(--wp--preset--color--muted);
	line-height: 1.6;
	margin: 0;
}
.jbf-card--link {
	display: block;
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.jbf-card--link:hover,
.jbf-card--link:focus {
	border-color: var(--wp--preset--color--primary);
	box-shadow: var(--jbf-shadow);
	transform: translateY(-2px);
}
.jbf-card__more {
	display: inline-block;
	margin-top: 0.9rem;
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}
.jbf-card--link:hover .jbf-card__more { color: var(--wp--preset--color--primary-dark); }

/* --- Employer band (navy) ---------------------------------------------- */
.jbf-employer {
	display: grid;
	grid-template-columns: 1.3fr 0.9fr;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: center;
}
.jbf-employer__title { color: #fff; margin-bottom: 0.75rem; }
.jbf-employer__body {
	color: rgba(255, 255, 255, 0.85);
	font-size: 1.1rem;
	line-height: 1.6;
	max-width: 46ch;
	margin: 0 0 1.5rem;
}
.jbf-employer__bullets {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}
.jbf-employer__bullets li {
	position: relative;
	padding-left: 1.7rem;
	color: #fff;
	font-weight: 600;
	line-height: 1.4;
}
.jbf-employer__bullets li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 1.1rem;
	height: 1.1rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	background-image: linear-gradient(45deg, transparent 45%, var(--wp--preset--color--contrast) 45%, var(--wp--preset--color--contrast) 55%, transparent 55%),
		linear-gradient(-45deg, transparent 45%, var(--wp--preset--color--contrast) 45%, var(--wp--preset--color--contrast) 55%, transparent 55%);
	background-size: 0.36rem 0.16rem, 0.52rem 0.16rem;
	background-position: 0.28rem 0.58rem, 0.44rem 0.52rem;
	background-repeat: no-repeat;
}

/* --- Province grid ------------------------------------------------------ */
.jbf-provinces {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 0.75rem;
}
.jbf-province {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem;
	padding: 0.9rem 1.1rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
	transition: border-color 0.15s ease, color 0.15s ease;
}
.jbf-province:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}
.jbf-province__arrow { color: var(--wp--preset--color--accent-dark); }

/* --- Split final CTA (navy) -------------------------------------------- */
.jbf-ctasplit {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 4vw, 3rem);
}
.jbf-ctasplit__side--employer {
	padding-left: clamp(1.5rem, 4vw, 3rem);
	border-left: 1px solid rgba(255, 255, 255, 0.15);
}
.jbf-ctasplit__heading {
	color: #fff;
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	font-weight: 800;
	margin: 0 0 0.6rem;
}
.jbf-ctasplit__body {
	color: rgba(255, 255, 255, 0.8);
	line-height: 1.6;
	margin: 0 0 1.25rem;
}
.jbf-btn--outline-light {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.5);
}
.jbf-btn--outline-light:hover,
.jbf-btn--outline-light:focus {
	background: #fff;
	color: var(--wp--preset--color--primary);
	border-color: #fff;
}

/* --- Section responsive ------------------------------------------------- */
@media (max-width: 900px) {
	.jbf-cards--3 { grid-template-columns: 1fr; }
	.jbf-cards--2 { grid-template-columns: 1fr; }
	.jbf-employer { grid-template-columns: 1fr; }
	.jbf-ctasplit { grid-template-columns: 1fr; }
	.jbf-ctasplit__side--employer {
		padding-left: 0;
		border-left: 0;
		padding-top: clamp(1.5rem, 4vw, 2.5rem);
		border-top: 1px solid rgba(255, 255, 255, 0.15);
	}
}

/* =========================================================================
   INNER PAGES (Jobs, Post a Job, articles/resources)
   ========================================================================= */

/* --- Compact page hero -------------------------------------------------- */
.jbf-pagehero {
	background: var(--wp--preset--color--primary);
	color: #fff;
}
.jbf-pagehero__inner {
	max-width: var(--jbf-maxw);
	margin: 0 auto;
	padding: clamp(2.25rem, 4vw, 3.25rem) var(--wp--preset--spacing--40);
}
.jbf-pagehero__title {
	margin: 0;
	color: #fff;
	font-size: clamp(1.9rem, 3.5vw, 2.6rem);
	font-weight: 800;
	letter-spacing: -0.02em;
}
.jbf-pagehero__subtitle {
	margin: 0.6rem 0 0;
	color: rgba(255, 255, 255, 0.82);
	font-size: 1.1rem;
	max-width: 60ch;
}
/* Slim variant for later submit steps (preview, package): title only. */
.jbf-pagehero--slim .jbf-pagehero__inner {
	padding-top: clamp(1.1rem, 2.5vw, 1.6rem);
	padding-bottom: clamp(1.1rem, 2.5vw, 1.6rem);
}
.jbf-pagehero--slim .jbf-pagehero__title {
	font-size: clamp(1.4rem, 2.5vw, 1.8rem);
}

/* --- Jobs page (WP Job Manager listings) -------------------------------- */
.jbf-jobs .job_filters {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--jbf-radius);
	box-shadow: var(--jbf-shadow);
	padding: 1.25rem;
	margin-bottom: 1.5rem;
}
.jbf-jobs .job_filters .search_jobs > div { margin-bottom: 0.5rem; }
.jbf-jobs .job_filters input[type="text"],
.jbf-jobs .job_filters select {
	padding: 0.65rem 0.8rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	font-size: 1rem;
}
.jbf-jobs ul.job_listings {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
	display: grid;
	gap: 0.85rem;
}
.jbf-jobs li.job_listing {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--jbf-radius);
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.jbf-jobs li.job_listing:hover {
	border-color: var(--wp--preset--color--primary);
	box-shadow: var(--jbf-shadow);
	transform: translateY(-2px);
}
.jbf-jobs li.job_listing a {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.35rem 1rem;
	align-items: center;
	padding: 1.15rem 1.35rem;
	text-decoration: none;
	color: inherit;
}
.jbf-jobs li.job_listing .company_logo { display: none; } /* no placeholder imagery */
.jbf-jobs li.job_listing .position {
	grid-column: 1;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}
.jbf-jobs li.job_listing .position h3 {
	margin: 0;
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
}
.jbf-jobs li.job_listing .company { color: var(--wp--preset--color--muted); font-size: 0.95rem; }
.jbf-jobs li.job_listing .company .tagline { display: none; }
.jbf-jobs li.job_listing .location {
	grid-column: 1;
	color: var(--wp--preset--color--muted);
	font-size: 0.9rem;
}
.jbf-jobs li.job_listing ul.meta {
	grid-column: 2;
	grid-row: 1 / span 3;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.4rem;
	text-align: right;
}
.jbf-jobs li.job_listing ul.meta li { font-size: 0.85rem; color: var(--wp--preset--color--muted); }
.jbf-jobs li.job_listing ul.meta li.job-type {
	display: inline-block;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	text-transform: capitalize;
}
.jbf-jobs li.job_listing.featured { border-color: var(--wp--preset--color--accent); }
.jbf-jobs .job_listings .load_more_jobs {
	display: inline-block;
	margin-top: 1.25rem;
}
/* Contain the no-JS fallback rather than letting it shout. */
.jbf-jobs .job_listings li.no_job_listings_found,
.jbf-jobs noscript {
	display: block;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--jbf-radius);
	padding: 1rem 1.25rem;
	color: var(--wp--preset--color--muted);
}

/* --- Post a Job: employer landing + steps + submit ---------------------- */
.jbf-landing { display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3rem); }
.jbf-landing__wholist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}
.jbf-landing__wholist li {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	padding: 0.5rem 1rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}
.jbf-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	counter-reset: jbf-step;
}
.jbf-step {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.jbf-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.2rem;
	height: 2.2rem;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-weight: 800;
}
.jbf-step__text { color: var(--wp--preset--color--contrast); font-weight: 600; line-height: 1.4; }
.jbf-submit .account-sign-in,
.jbf-submit .job_listing_preview,
.jbf-submit form.job_manager_form {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--jbf-radius);
	box-shadow: var(--jbf-shadow);
	padding: clamp(1.25rem, 3vw, 2rem);
}
.jbf-submit input[type="text"],
.jbf-submit input[type="email"],
.jbf-submit input[type="password"],
.jbf-submit textarea,
.jbf-submit select {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	padding: 0.7rem 0.85rem;
}

/* --- Article / resource pages ------------------------------------------- */
.jbf-article__head { background: var(--wp--preset--color--canvas); }
.jbf-article__head .wp-block-post-title {
	font-size: clamp(2rem, 4vw, 2.9rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0;
}
.jbf-article__meta .wp-block-post-terms a {
	color: var(--wp--preset--color--accent-dark);
	text-decoration: none;
}
.jbf-article__body { background: var(--wp--preset--color--base); }
.jbf-article__body .wp-block-post-content > * { margin-top: 1.4rem; }
.jbf-article__body h2 { margin-top: 2.4rem; }
.jbf-article__body h3 { margin-top: 1.8rem; }
.jbf-article__body p,
.jbf-article__body li { font-size: 1.075rem; line-height: 1.7; }
.jbf-article__body blockquote {
	margin: 2rem 0;
	padding: 0.5rem 0 0.5rem 1.4rem;
	border-left: 4px solid var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	font-size: 1.2rem;
	font-style: normal;
}

/* --- CTA band (article bottom) ----------------------------------------- */
.jbf-ctaband {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	align-items: center;
	justify-content: space-between;
}
.jbf-ctaband__heading { color: #fff; font-size: clamp(1.4rem, 2.5vw, 1.9rem); font-weight: 800; margin: 0 0 0.35rem; }
.jbf-ctaband__body { color: rgba(255, 255, 255, 0.8); margin: 0; }
.jbf-ctaband__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

@media (max-width: 760px) {
	.jbf-steps { grid-template-columns: 1fr 1fr; }
	.jbf-jobs li.job_listing a { grid-template-columns: 1fr; }
	.jbf-jobs li.job_listing ul.meta {
		grid-column: 1;
		grid-row: auto;
		align-items: flex-start;
		text-align: left;
		flex-direction: row;
		flex-wrap: wrap;
	}
}

/* --- Footer ------------------------------------------------------------- */
.jbf-footer__top {
	display: grid;
	grid-template-columns: 1.2fr 2fr;
	gap: clamp(2rem, 4vw, 4rem);
	padding-bottom: 2.5rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.jbf-footer__brand {
	display: block;
	font-size: 1.3rem;
	font-weight: 800;
	color: #fff;
	margin-bottom: 0.6rem;
	letter-spacing: -0.01em;
}
.jbf-footer__blurb {
	color: rgba(255, 255, 255, 0.78);
	margin: 0;
	max-width: 36ch;
	line-height: 1.6;
}
.jbf-footer__cols {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}
.jbf-footer__heading {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--accent);
	margin: 0 0 0.85rem;
	font-weight: 700;
}
.jbf-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.jbf-footer__col a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
}
.jbf-footer__col a:hover { color: #fff; }
.jbf-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 1.5rem;
}
.jbf-footer__copy { color: rgba(255, 255, 255, 0.6); font-size: 0.85rem; }
.jbf-footer__legal { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.jbf-footer__legal a {
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	font-size: 0.85rem;
}
.jbf-footer__legal a:hover { color: #fff; }

@media (max-width: 900px) {
	.jbf-footer__top { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.jbf-footer__cols { grid-template-columns: 1fr 1fr; }
	.jbf-footer__bottom { flex-direction: column; }
}

/* --- Header account links (auth-aware) ---------------------------------- */
.jbf-account {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	flex-wrap: wrap;
}
.jbf-account a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
	opacity: 0.85;
	font-weight: 600;
}
.jbf-account a:hover { opacity: 1; color: var(--wp--preset--color--accent); }
.jbf-account__who { color: rgba(255, 255, 255, 0.7); }
.jbf-account__who strong { color: #fff; font-weight: 700; }
.jbf-account__cta { color: var(--wp--preset--color--accent) !important; opacity: 1 !important; }
.jbf-account__cta:hover { color: #fff !important; }

/* --- Post a Job submit buttons: clear forward action -------------------- */
.jbf-submit input[type="submit"],
.jbf-submit button[type="submit"],
.jbf-submit .job-manager-form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.85rem 1.7rem;
	border-radius: 8px;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1;
	border: 2px solid transparent;
	cursor: pointer;
	margin: 0 0.5rem 0.5rem 0;
}
/* Forward / proceed = prominent accent. */
.jbf-submit input[type="submit"]:not(.save_draft):not([name="edit_job"]),
.jbf-submit #job_preview_submit_button {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--accent);
}
.jbf-submit input[type="submit"]:not(.save_draft):not([name="edit_job"]):hover,
.jbf-submit #job_preview_submit_button:hover {
	background: var(--wp--preset--color--accent-dark);
	border-color: var(--wp--preset--color--accent-dark);
}
/* Secondary / side actions = muted outline. */
.jbf-submit input.save_draft,
.jbf-submit input[name="save_draft"],
.jbf-submit input[name="edit_job"] {
	background: transparent;
	color: var(--wp--preset--color--muted);
	border-color: var(--wp--preset--color--border);
	font-weight: 600;
}
.jbf-submit input.save_draft:hover,
.jbf-submit input[name="save_draft"]:hover,
.jbf-submit input[name="edit_job"]:hover {
	border-color: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--contrast);
}

/* =========================================================================
   POLISH PASS — credibility + visual refinement (v2)
   Additive layer on top of the component system above: a refined elevation
   scale, calmer hovers, stronger product chrome, and more intentional cards.
   Tokens only, no niche content, so every board inherits it. Tunable after a
   visual review without touching the components themselves.
   ========================================================================= */
:root {
	--jbf-radius: 12px;
	--jbf-radius-sm: 8px;
	--jbf-shadow-xs: 0 1px 2px rgba(20, 40, 63, 0.05);
	--jbf-shadow-sm: 0 1px 2px rgba(20, 40, 63, 0.05), 0 1px 3px rgba(20, 40, 63, 0.06);
	--jbf-shadow: 0 1px 2px rgba(20, 40, 63, 0.05), 0 6px 18px rgba(20, 40, 63, 0.07);
	--jbf-shadow-lg: 0 2px 4px rgba(20, 40, 63, 0.06), 0 18px 40px rgba(20, 40, 63, 0.12);
	--jbf-ring: 0 0 0 3px rgba(31, 58, 95, 0.14);
}

/* --- Header: reads as product chrome, not a coloured band ---------------- */
header.wp-block-group.has-base-background-color {
	box-shadow: 0 1px 0 var(--wp--preset--color--border), 0 6px 18px rgba(20, 40, 63, 0.04);
	position: relative;
	z-index: 50;
}
.jbf-primary-nav a { letter-spacing: -0.005em; }
.jbf-primary-nav a:hover { color: var(--wp--preset--color--accent-dark); }
/* "Post a Job" in the utility bar = an unmistakable button. */
.jbf-account__cta {
	background: var(--wp--preset--color--accent);
	color: var(--jbf-accent-text, var(--wp--preset--color--contrast)) !important;
	padding: 0.42rem 0.95rem;
	border-radius: 999px;
	font-weight: 700;
	line-height: 1;
	transition: background-color 0.15s ease;
}
.jbf-account__cta:hover {
	background: var(--wp--preset--color--accent-dark);
	color: var(--jbf-accent-text, var(--wp--preset--color--contrast)) !important;
}

/* --- Buttons: a little more presence + depth ---------------------------- */
.jbf-btn { border-radius: var(--jbf-radius-sm); }
.jbf-btn--accent { box-shadow: 0 1px 2px rgba(217, 106, 18, 0.22); }
.jbf-btn--accent:hover,
.jbf-btn--accent:focus { box-shadow: 0 4px 14px rgba(217, 106, 18, 0.28); }

/* --- Hero: more substance, refined panel -------------------------------- */
.jbf-hero { background: linear-gradient(180deg, var(--wp--preset--color--canvas) 0%, var(--wp--preset--color--base) 100%); }
.jbf-hero__panel { border-radius: var(--jbf-radius); box-shadow: var(--jbf-shadow-lg); }

/* --- Search: a deliberate product component ----------------------------- */
.jbf-search__card { border-radius: var(--jbf-radius); box-shadow: var(--jbf-shadow-lg); padding: 1.4rem; }
.jbf-search__field input,
.jbf-search__field select { padding: 0.8rem 0.95rem; border-radius: var(--jbf-radius-sm); }
.jbf-search__field input:focus,
.jbf-search__field select:focus { box-shadow: var(--jbf-ring); }

/* --- Cards: resting elevation + calm, crisp hover ----------------------- */
.jbf-card { border-radius: var(--jbf-radius); box-shadow: var(--jbf-shadow-sm); transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; }
.jbf-card__title { letter-spacing: -0.01em; }
.jbf-card--link:hover,
.jbf-card--link:focus { box-shadow: var(--jbf-shadow-lg); transform: translateY(-3px); border-color: var(--wp--preset--color--border); }
.jbf-cards--2 .jbf-card { padding: clamp(1.5rem, 2.5vw, 2rem); }
.jbf-card__more::after { content: " \2192"; }

/* --- Employer band + final CTA: a richer dark panel --------------------- */
.jbf-section--navy { background: linear-gradient(155deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--primary-dark) 100%); }

/* --- Province: intentional browse cards --------------------------------- */
.jbf-province { border-radius: var(--jbf-radius-sm); box-shadow: var(--jbf-shadow-sm); padding: 1rem 1.15rem; transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; }
.jbf-province:hover { box-shadow: var(--jbf-shadow); transform: translateY(-2px); border-color: var(--wp--preset--color--border); color: var(--wp--preset--color--primary); }
.jbf-province__arrow { transition: transform 0.15s ease; }
.jbf-province:hover .jbf-province__arrow { transform: translateX(3px); }

/* --- Jobs list: match the card elevation system ------------------------- */
.jbf-jobs li.job_listing { box-shadow: var(--jbf-shadow-sm); border-radius: var(--jbf-radius); }
.jbf-jobs li.job_listing:hover { box-shadow: var(--jbf-shadow-lg); }
.jbf-jobs .job_filters { border-radius: var(--jbf-radius); box-shadow: var(--jbf-shadow); }

/* --- Submit / search inputs: consistent focus ring ---------------------- */
.jbf-submit input:focus,
.jbf-submit textarea:focus,
.jbf-submit select:focus,
.jbf-jobs .job_filters input:focus,
.jbf-jobs .job_filters select:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: var(--jbf-ring);
}

/* --- Article: comfortable reading + refined headings -------------------- */
.jbf-article__body h2 { letter-spacing: -0.015em; }
.jbf-article__body .wp-block-table { box-shadow: var(--jbf-shadow-sm); border-radius: var(--jbf-radius-sm); overflow: hidden; }

/* --- Cards/sections respect the elevation scale on cta band too --------- */
.jbf-card,
.jbf-search__card,
.jbf-province { background-clip: padding-box; }

/* =========================================================================
   PHASE 2 — WP JOB MANAGER FORMS
   Bring the plugin's default forms (Post a Job, Create Candidate Profile, the
   Jobs search/filter) up to the site's standard. Targets the WPJM form
   framework classes (.job-manager-form, .job_filters) so BOTH submit forms and
   the search inherit it, in any wrapper. Stacked labels-above-fields, consistent
   controls, brand-orange focus rings, real primary buttons, styled file inputs
   and the description editor. Tokens only; field names/ids/behaviour unchanged.
   ========================================================================= */
:root { --jbf-ring-accent: 0 0 0 3px rgba(245, 130, 31, 0.22); }

/* The submit forms get the same card surface as the rest of the site (the
   resume form lives on the default template, so style the form itself, not just
   the .jbf-submit wrapper). */
form.job-manager-form {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--jbf-radius);
	box-shadow: var(--jbf-shadow-sm);
	padding: clamp(1.35rem, 3vw, 2rem);
}

/* Stacked, full-width fields with labels above. */
.job-manager-form fieldset {
	border: 0;
	margin: 0 0 1.3rem;
	padding: 0;
	display: block;
}
.job-manager-form fieldset > label {
	display: block;
	margin: 0 0 0.4rem;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--wp--preset--color--contrast);
}
.job-manager-form fieldset .field {
	display: block;
	width: 100%;
	margin: 0;
	float: none;
}
.job-manager-form small,
.job-manager-form .description {
	color: var(--wp--preset--color--muted);
	font-weight: 400;
}

/* All text-like controls + selects + textareas: one consistent treatment. */
.job-manager-form input[type="text"],
.job-manager-form input[type="email"],
.job-manager-form input[type="url"],
.job-manager-form input[type="password"],
.job-manager-form input[type="tel"],
.job-manager-form input[type="number"],
.job-manager-form input[type="date"],
.job-manager-form textarea,
.job-manager-form select,
.jbf-jobs .job_filters input[type="text"],
.jbf-jobs .job_filters select {
	width: 100%;
	box-sizing: border-box;
	padding: 0.8rem 0.95rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--jbf-radius-sm);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-size: 1rem;
	line-height: 1.4;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.job-manager-form textarea { min-height: 8rem; resize: vertical; }
/* Brand-orange focus ring across every form control. */
.job-manager-form input:focus,
.job-manager-form textarea:focus,
.job-manager-form select:focus,
.jbf-jobs .job_filters input:focus,
.jbf-jobs .job_filters select:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
	box-shadow: var(--jbf-ring-accent);
}

/* File upload: a clear dropzone with a styled "Choose File" button instead of the
   raw browser control. */
.job-manager-form input[type="file"] {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 0.7rem 0.85rem;
	border: 1px dashed var(--wp--preset--color--border);
	border-radius: var(--jbf-radius-sm);
	background: var(--wp--preset--color--canvas);
	color: var(--wp--preset--color--muted);
	font-size: 0.95rem;
	cursor: pointer;
}
.job-manager-form input[type="file"]::file-selector-button {
	margin-right: 0.9rem;
	padding: 0.5rem 1rem;
	border: 0;
	border-radius: var(--jbf-radius-sm);
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-weight: 700;
	font-size: 0.9rem;
	cursor: pointer;
}
.job-manager-form input[type="file"]::file-selector-button:hover { background: var(--wp--preset--color--primary-dark); }

/* Checkboxes: tidy inline rows in the brand colour. */
.job-manager-form input[type="checkbox"],
.job-manager-form input[type="radio"],
.jbf-jobs .job_filters input[type="checkbox"] {
	width: auto;
	margin-right: 0.5rem;
	accent-color: var(--wp--preset--color--accent);
	transform: translateY(1px);
}

/* The description / resume rich-text editor: framed like an input, calm toolbar. */
.job-manager-form .wp-editor-container {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--jbf-radius-sm);
	overflow: hidden;
}
.job-manager-form .wp-editor-tools,
.job-manager-form .mce-toolbar-grp,
.job-manager-form .quicktags-toolbar {
	background: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--border) !important;
}
.job-manager-form .wp-editor-area { border: 0 !important; }
.job-manager-form .mce-panel { border-color: var(--wp--preset--color--border) !important; }

/* Primary / secondary buttons, matching the homepage primary button exactly. */
.job-manager-form input[type="submit"],
.job-manager-form button[type="submit"],
.job-manager-form .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.85rem 1.7rem;
	border-radius: var(--jbf-radius-sm);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1;
	border: 2px solid transparent;
	cursor: pointer;
	margin: 0 0.5rem 0.5rem 0;
	transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.job-manager-form input[type="submit"]:not(.save_draft):not([name="edit_job"]),
.job-manager-form button[type="submit"]:not(.save_draft) {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 1px 2px rgba(217, 106, 18, 0.22);
}
.job-manager-form input[type="submit"]:not(.save_draft):not([name="edit_job"]):hover,
.job-manager-form button[type="submit"]:not(.save_draft):hover {
	background: var(--wp--preset--color--accent-dark);
	border-color: var(--wp--preset--color--accent-dark);
	box-shadow: 0 4px 14px rgba(217, 106, 18, 0.28);
}
.job-manager-form input.save_draft,
.job-manager-form input[name="edit_job"],
.job-manager-form .button.secondary {
	background: transparent;
	color: var(--wp--preset--color--muted);
	border-color: var(--wp--preset--color--border);
	font-weight: 600;
}
.job-manager-form input.save_draft:hover,
.job-manager-form .button.secondary:hover {
	border-color: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--contrast);
}

/* --- Jobs search/filter: a deliberate horizontal search bar ------------- */
/* WPJM frontend.css floats the inputs as its desktop default:
     .job_filters .search_jobs div.search_keywords {float:left;  width:50%}   (0,3,1)
     .job_filters .search_jobs div.search_location {float:right; width:50%}   (0,3,1)
   Those div-qualified selectors out-specify a plain class rule, so the inputs
   sat at half-width (clipping placeholders) with float dead space. Match the div
   qualifier under .jbf-jobs (0,4,1 > 0,3,1) to win without !important, and lay
   the row out with flex so keywords + location share flexible equal width. The
   Search Jobs button keeps its existing treatment. */
.jbf-jobs .job_filters .search_jobs {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 1rem;
	padding: 0;
}
.jbf-jobs .job_filters .search_jobs > div:empty { display: none; } /* WPJM's clear:both spacer */
.jbf-jobs .job_filters .search_jobs div.search_keywords,
.jbf-jobs .job_filters .search_jobs div.search_location {
	float: none;
	width: auto;
	flex: 1 1 240px;
	min-width: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}
.jbf-jobs .job_filters .search_keywords label,
.jbf-jobs .job_filters .search_location label {
	display: block;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--muted);
}
.jbf-jobs .job_filters .search_jobs div.search_submit {
	float: none;
	width: auto;
	flex: 0 0 auto;
	padding: 0;
}
.jbf-jobs .job_filters .search_submit input[type="submit"] { height: calc(0.8rem * 2 + 1rem + 2px); white-space: nowrap; }
.jbf-jobs .job_filters .search_jobs div.search_remote_position,
.jbf-jobs .job_filters .search_jobs div.search_categories {
	float: none;
	width: 100%;
	flex: 1 1 100%;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 0.4rem;
}
.jbf-jobs .job_filters .search_categories { flex-direction: column; align-items: stretch; gap: 0.35rem; }

@media (max-width: 760px) {
	.jbf-jobs .job_filters .search_jobs div.search_keywords,
	.jbf-jobs .job_filters .search_jobs div.search_location { flex-basis: 100%; }
	.jbf-jobs .job_filters .search_submit input[type="submit"] { width: 100%; }
}

/* Single-column stacked at ALL widths. WPJM frontend.css floats the label left
   (29%) and the field right (70%) as its DESKTOP DEFAULT (the two-column render);
   single-column is only its <=782px fallback. Its :not() selectors out-specify a
   plain .job-manager-form rule, so we prefix with form.job-manager-form to win at
   any width and source order. Layout only — input border/padding/radius and the
   file button are untouched. Centered column, fields full width up to ~560px. */
form.job-manager-form {
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
}
form.job-manager-form fieldset label:not(.full-line-checkbox-field label) {
	float: none;
	width: 100%;
	display: block;
	margin: 0 0 0.4rem;
}
form.job-manager-form fieldset div.field:not(.full-line-checkbox-field) {
	float: none;
	width: 100%;
}

/* =========================================================================
   PHASE 3 (step 1) — TYPOGRAPHY: Inter on headings
   Self-hosted Inter heavy weights for headings ONLY. Body text, the Phase 2
   form styling, the search bar, buttons, and the background are untouched (later
   steps). Loaded with font-display:swap, so it is not render-blocking: the
   heading shows in the system fallback until Inter loads, then swaps. Typeface
   only — weights, sizes, and colours are unchanged. Template-level.
   ========================================================================= */
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("assets/fonts/inter-latin-700-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("assets/fonts/inter-latin-800-normal.woff2") format("woff2");
}

/* theme.json sets the heading font via ":root :where(h1..h6){font-family:system}"
   — :where() contributes 0 specificity, so that rule is effectively 0,1,0. A
   ":root h1.." selector (0,1,1) wins without !important. The brand site title is
   a <p> (wp:site-title level 0), so it is named explicitly to match the headings.
   All jbf-* heading classes sit on real h1-h3 elements, so they are covered. */
:root h1,
:root h2,
:root h3,
:root h4,
:root h5,
:root h6,
:root .wp-block-site-title {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Header brand: a board with a logo set (branding.logo -> custom_logo) shows the
   logo; a board without one renders no site-logo element on the front end and
   keeps the text site-title. The sibling rule hides the redundant text title only
   when a logo is actually present, so this is a config-driven capability, not a
   per-board template edit. */
.jbf-header-main .wp-block-site-logo img {
	height: 72px;
	width: auto;
	max-width: 420px;
	display: block;
}
.wp-block-site-logo ~ .wp-block-site-title {
	display: none;
}
@media (max-width: 600px) {
	.jbf-header-main .wp-block-site-logo img { height: 54px; }
}