/*
 * JobsFor homepage - hand-coded replica of the original Elementor design.
 * Loaded only on the front page (see functions.php). Consumes the shared
 * --jfpub-* tokens from jobsfor-public-ui.css so brand colors/spacing stay
 * consistent with the rest of the site.
 */

html:has(.jfh) {
	scroll-behavior: smooth;
}

.jfh {
	--jfh-dark-blue: #26368d;
	overflow: hidden;
	background: #fff;
	color: var(--jfpub-ink);
}

.jfh *,
.jfh *::before,
.jfh *::after {
	box-sizing: border-box;
}

.jfh .container {
	width: calc(100% - 40px);
	max-width: 1180px;
	margin: 0 auto;
}

.jfh h1,
.jfh h2,
.jfh h3 {
	font-family: var(--jfpub-font);
	margin: 0;
}

.jfh p {
	font-family: var(--jfpub-font);
	font-weight: 500;
}

/* ---------- Hero ---------- */

.jfh-hero {
	position: relative;
	padding: clamp(64px, 9vw, 130px) 20px 60px;
	text-align: center;
	background:
		linear-gradient(180deg, rgba(234, 246, 253, .55) 0%, rgba(255, 255, 255, .85) 70%),
		url('../images/hero-bg.webp') bottom center / cover no-repeat;
}

.jfh-hero__inner {
	position: relative;
	z-index: 1;
}

.jfh-hero__title {
	font-size: clamp(43px, 5.2vw, 75px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.01em;
	color: var(--jfpub-ink);
	text-wrap: balance;
}

.jfh-hero__title span {
	color: var(--jfpub-blue);
}

.jfh-hero__lede {
	max-width: 800px;
	margin: 30px auto 0;
	text-align: center;
	font-size: clamp(16px, 1.6vw, 20px);
	font-weight: 500;
	line-height: 1.6;
	/* color: var(--jfpub-muted); */
}

.jfh-hero__lede-break {
	display: block;
	content: "";
}

.jfh-hero__lede strong {
	display: block;
	margin-top: 18px;
	color: var(--jfpub-ink);
	font-weight: 700;
	font-size: 25px;
}

.jfh-hero__strong-break {
	display: none;
	content: "";
}

.jfh-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin: 30px 0 0;
}

.jfh .jfh-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 14px 26px;
	border-radius: 8px;
	border: 1px solid transparent;
	font-family: var(--jfpub-font);
	font-size: 15.5px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: transform .18s var(--jfpub-ease), box-shadow .18s var(--jfpub-ease), background-color .18s var(--jfpub-ease), color .18s var(--jfpub-ease);
}

.jfh .jfh-btn--primary {
	background: var(--jfh-dark-blue);
	border-color: var(--jfh-dark-blue);
	color: #fff;
	box-shadow: 0 10px 22px rgba(38, 54, 141, .22);
}

.jfh .jfh-btn--primary:hover {
	background: var(--jfpub-blue);
	border-color: var(--jfpub-blue);
	transform: translateY(-2px);
	box-shadow: 0 14px 28px rgba(7, 177, 229, .28);
	color: #fff;
}

.jfh .jfh-btn--ghost {
	background: #fff;
	border-color: var(--jfh-dark-blue);
	color: var(--jfh-dark-blue);
}

.jfh .jfh-btn--ghost:hover {
	background: var(--jfpub-blue);
	border-color: var(--jfpub-blue);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 14px 28px rgba(7, 177, 229, .28);
}

.jfh-hero__more {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin-top: 56px;
	color: var(--jfpub-blue);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	scroll-behavior: smooth;
}
.jfh-hero__more:hover {
	color: var(--jfpub-blue-active);
}

.jfh-hero__more-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--jfpub-blue);
	border-radius: 50%;
	color: var(--jfpub-blue);
	transition: transform .2s var(--jfpub-ease), background-color .2s var(--jfpub-ease), color .2s var(--jfpub-ease);
	padding-top: 4px;
	padding-right: 1px;
}

.jfh-hero__more:hover .jfh-hero__more-icon {
	background: var(--jfpub-blue);
	color: #fff;
}

/* ---------- Search / Jobs section ---------- */

.jfh-search {
	position: relative;
	padding: 64px 20px 40px;
	background: #032a7f;
	text-align: center;
}

/* Specificity note: `.jfh h2` (0,1,1) otherwise beats a bare
 * `.jfh-search__title` class selector (0,1,0) and wins the margin, even
 * declared later in the file - scope this to its section to out-rank it. */
.jfh-search .jfh-search__title {
	margin: 0 auto 34px;
	font-size: clamp(24px, 3.4vw, 34px);
	font-weight: 700;
	color: #fff;
	text-wrap: balance;
	text-align: center;
}

.jfh-searchbox {
	width: 100%;
	margin: 0 auto;
	text-align: left;
}

.jfh-searchbox__main {
	display: flex;
	align-items: stretch;
	gap: 0;
	min-height: 68px;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 20px 44px rgba(2, 20, 60, .35);
	outline: 2px solid transparent;
	outline-offset: 3px;
	overflow: hidden;
	transition: box-shadow .18s var(--jfpub-ease), outline-color .18s var(--jfpub-ease);
}

/* Highlight the whole search box on focus, not the individual input -
 * no per-field border/ring, the container itself lights up. */
.jfh-searchbox__main:focus-within {
	outline-color: var(--jfpub-blue);
	box-shadow: 0 20px 44px rgba(2, 20, 60, .35), 0 0 0 4px rgba(7, 177, 229, .22);
}

.jfh-searchbox__pillfield {
	display: flex;
	align-items: center;
	flex: 1 1 42%;
	min-width: 0;
	gap: 10px;
	padding: 0 15px;
	margin: 0;
}

.jfh-searchbox__pillfield:nth-of-type(2) {
	flex: 1 1 38%;
}

.jfh-searchbox__pillfield svg {
	color: #4a4c4a;
	flex: 0 0 auto;
}

.jfh-searchbox__pillfield input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0;
	height: 68px;
	font-family: var(--jfpub-font);
	font-size: 15px;
	color: var(--jfpub-ink);
	background: transparent;
}

.jfh-searchbox__pillfield input::placeholder {
	color: #8a8788;
}

/* jobsfor-public-ui.css puts a border-color + focus-visible outline on
 * every text input sitewide (higher specificity than a plain class rule,
 * see its body:not(.wp-admin) input[type="text"] block) - out-specificity
 * both here, since this box shows no per-field border/ring at all; the
 * whole box highlights as a unit via .jfh-searchbox__main:focus-within. */
.jfh .jfh-searchbox__main .jfh-searchbox__pillfield input {
	border: 0;
	box-shadow: none;
}

.jfh .jfh-searchbox__main .jfh-searchbox__pillfield input:focus,
.jfh .jfh-searchbox__main .jfh-searchbox__pillfield input:focus-visible {
	outline: none;
	border: 0;
	box-shadow: none;
}

.jfh-searchbox__divider {
	flex: 0 0 auto;
	width: 1px;
	margin: 16px 0;
	background: #e5e5e6;
}

.jfh .jfh-searchbox__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex: 0 0 auto;
	align-self: center;
	margin-right: 8px;
	border: 0;
	border-radius: 10px;
	padding: 0 34px;
	height: 52px;
	background: #009de4;
	color: #fff;
	font-family: var(--jfpub-font);
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .15s var(--jfpub-ease);
}

.jfh .jfh-searchbox__submit:hover {
	background: var(--jfpub-blue-hover);
}

.jfh-refine[hidden] {
	display: none;
}

.jfh-refine {
	margin-top: 12px;
	animation: jfh-filters-in .22s var(--jfpub-ease);
}

@keyframes jfh-filters-in {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Pill row - collapsed refinement toggles, JobStreet-style. Each pill
 * expands its own panel below rather than showing every field at once. */
.jfh-refine__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.jfh-refine__pill {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 10px 16px;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 999px;
	background: rgba(255, 255, 255, .06);
	color: #fff;
	font-family: var(--jfpub-font);
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .15s var(--jfpub-ease), border-color .15s var(--jfpub-ease);
}

.jfh-refine__pill i {
	font-size: 10px;
	transition: transform .18s var(--jfpub-ease);
}

.jfh-refine__pill:hover {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .4);
}

.jfh-refine__pill[aria-expanded="true"] {
	background: #fff;
	border-color: #fff;
	color: var(--jfh-dark-blue);
}

.jfh-refine__pill[aria-expanded="true"] i {
	transform: rotate(180deg);
}

.jfh-refine__pill[data-jfh-pill-active="true"]::after {
	content: "";
	width: 6px;
	height: 6px;
	margin-left: -2px;
	border-radius: 50%;
	background: var(--jfpub-blue);
}

/* Expanded panel - a checkbox/radio option grid, not a bare <select>,
 * so multiple values (job types) are scannable at a glance like the
 * reference site's refine-by-salary/type panels. */
.jfh-refine__panel[hidden] {
	display: none;
}

.jfh-refine__panel {
	margin-top: 10px;
	padding: 18px 20px;
	background: #fff;
	border-radius: var(--jfpub-radius-md);
	box-shadow: 0 16px 32px rgba(2, 20, 60, .22);
	animation: jfh-filters-in .18s var(--jfpub-ease);
}

.jfh-refine__legend {
	margin: 0 0 12px;
	padding: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--jfpub-muted);
}

.jfh-refine__options {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 4px 16px;
	margin: 0;
	padding: 0;
	border: 0;
	max-height: 260px;
	overflow-y: auto;
}

.jfh-refine__option {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 7px 4px;
	font-family: var(--jfpub-font);
	font-size: 14px;
	font-weight: 500;
	color: var(--jfpub-ink);
	cursor: pointer;
}

.jfh-refine__option input {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	accent-color: var(--jfpub-blue);
}

.jfh-search__helpers {
	display: flex;
	max-width: 100%;
	justify-content: flex-end;
	gap: 22px;
	margin: 14px 0 0;
}

.jfh .jfh-search__helper {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border: 0;
	background: transparent;
	padding: 4px 0;
	color: #dae9f7;
	font-family: var(--jfpub-font);
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	transition: color .15s var(--jfpub-ease);
}

.jfh-search__helper i {
	font-size: 13px;
}

.jfh-search__helper:hover {
	color: var(--jfpub-blue);
}

/* Once the refine pills are revealed, the toggle itself has done its
 * job - hide it rather than leaving a redundant "collapse" control. */
.jfh-search__helper[aria-expanded="true"] {
	display: none;
}


.jfh-hiring {
	margin: 35px 0 0;
	color: #fff;
	font-size: 20px;
	font-weight: 500;
	text-align: center;
}

.jfh-hiring i {
	margin-right: 6px;
}

.jfh-hiring a {
	color: #fff;
	font-weight: 700;
	text-decoration: underline;
	font-size: 16px;
}

.jfh-hiring a:hover {
	color: var(--jfpub-blue);
	font-weight: 700;
	text-decoration: underline;
	font-size: 16px;
}

.jfh-anchor {
	display: block;
	position: relative;
	top: -84px;
	visibility: hidden;
}

/* ---------- Categories ---------- */

.jfh-categories {
	padding: 44px 20px 64px;
	background: var(--jfpub-blue);
	text-align: center;
}

.jfh-categories h2 {
	margin-bottom: 30px;
	font-size: clamp(22px, 2.8vw, 28px);
	font-weight: 700;
	color: #fff;
}

.jfh-categories__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 4px 28px;
	text-align: left;
}

.jfh-categories__col {
	list-style: none;
	margin: 0;
	padding: 0;
}

.jfh-categories__col li {
	margin: 0;
}

.jfh-categories__col a {
	display: block;
	padding: 7px 0;
	color: rgba(255, 255, 255, .92);
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
	transition: color .15s var(--jfpub-ease), transform .15s var(--jfpub-ease);
}

.jfh-categories__col a:hover {
	color: #fff;
	transform: translateX(3px);
	text-decoration: underline;
}

/* ---------- Why work locally ---------- */

.jfh-why {
	position: relative;
	padding: 70px 20px 76px;
	text-align: center;
	overflow: hidden;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .9) 100%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .9) 100%),
		url('../images/why-bg.webp') bottom center / cover no-repeat;
}

.jfh-why .container {
	position: relative;
}

.jfh-why__intro {
	max-width: 700px;
	margin: 0 auto 90px;
	font-size: 16px;
	/* color: var(--jfpub-muted); */
	line-height: 1.6;
	text-align: center;
}

.jfh-why h2 {
	margin: 6px 0 25px;
	font-size: clamp(40px, 3.4vw, 55px);
	font-weight: 800;
	color: var(--jfpub-ink);
}

.jfh-why__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px 45px;
	text-align: center;
}

.jfh-why__card {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.jfh-why__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 16px;
	border-radius: 50%;
	background: var(--jfpub-surface-blue);
	color: var(--jfpub-blue-active);
	font-size: 22px;
}

.jfh-why__card h3 {
	margin-bottom: 8px;
	font-size: 20px;
	font-weight: 700;
	color: var(--jfpub-ink);
	line-height: calc(100% + 7px);
}

.jfh-why__card p {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--jfpub-muted);
	text-align: center;
}

/* ---------- Newsletter ---------- */

.jfh-newsletter {
	padding: 52px 20px;
	background: var(--jfpub-navy);
	text-align: center;
}

.jfh-newsletter h2 {
	max-width: 640px;
	margin: 0 auto 26px;
	font-size: clamp(20px, 2.6vw, 26px);
	font-weight: 700;
	color: #fff;
	text-wrap: balance;
}

.jfh-newsletter__form {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: start;
	gap: 12px;
	margin: 0 auto;
}

.jfh-newsletter__field {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 8px;
	height: 44px;
	font-size: 14px;
	white-space: nowrap;
}

.jfh-newsletter__field span {
	color: #fff;
	font-size: 14px;
	font-weight: 600;
}

.jfh-newsletter__field select {
	height: 44px;
	padding: 0 12px;
	border: 0;
	border-radius: 8px;
	font-family: var(--jfpub-font);
	font-size: 14px;
	color: var(--jfpub-ink);
}

.newsletter_btn_con {
	display: flex;
	justify-content: start;
	gap: 12px;
	flex:1;
}

.jfh-newsletter__email {
	flex: 1 1 220px;
	height: 44px;
	padding: 0 16px;
	border: 0;
	border-radius: 8px;
	font-family: var(--jfpub-font);
	font-size: 14.5px;
	color: var(--jfpub-ink);
}

.jfh-newsletter__form .jfh-btn {
	height: 44px;
	padding: 0 24px;
	outline: 1px solid rgba(255,255,255,0.3) !important;
}

.jfh-newsletter .workscout-newsletter-message,
.jfh-newsletter__form + .workscout-newsletter-message {
	margin-top: 14px;
	color: rgba(255, 255, 255, .92);
	font-size: 13.5px;
	font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
	.jfh-hero__more-icon {
		animation: none;
	}

	.jfh-btn,
	.jfh-why__card,
	.jfh-categories__col a {
		transition: none;
	}
}

/* ---------- Responsive ---------- */

@media (max-width: 991px) {
	.jfh-categories__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 4px 24px;
		max-width: fit-content;
		margin: 0 auto;
	}

	.jfh-why__grid {
		grid-template-columns: repeat(2, 1fr);
		row-gap: 40px;
	}

	/* Tablet/mobile search: separate rounded fields (not one joined bar),
	 * refine pills shown directly (no "More filters" click-to-reveal step),
	 * a bold full-width submit pill - matches the reference layout, in
	 * visual order fields -> pills -> button.
	 *
	 * .jfh-searchbox__main unwraps via `display: contents` so its children
	 * (the two fields, divider, submit button) become direct flex items of
	 * .jfh-searchbox alongside .jfh-refine - letting `order` place the
	 * button after the pills despite the button living inside .main in the
	 * markup (kept there so the desktop joined-bar layout is untouched). */
	.jfh-searchbox {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.jfh-searchbox__main {
		display: contents;
	}

	.jfh-searchbox__pillfield,
	.jfh-searchbox__pillfield:nth-of-type(2) {
		order: 1;
		flex: 1 1 auto;
		width: 100%;
		background: #fff;
		border-radius: 14px;
		box-shadow: 0 10px 24px rgba(2, 20, 60, .22);
	}

	.jfh .jfh-searchbox__pillfield:focus-within {
		box-shadow: 0 10px 24px rgba(2, 20, 60, .22), 0 0 0 3px rgba(7, 177, 229, .3);
	}

	.jfh-searchbox__pillfield input {
		height: auto;
		padding: 15px 0;
	}

	.jfh-searchbox__divider {
		display: none;
	}

	/* Refine pills are always visible on tablet/mobile - skip the
	 * "More filters" toggle step entirely and hide it. */
	.jfh-search__helpers {
		display: none;
	}

	.jfh-refine[hidden] {
		display: block;
	}

	.jfh-refine {
		order: 2;
		margin-top: 0;
		animation: none;
	}

	.jfh-refine__pills {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 2px;
		scrollbar-width: none;
	}

	.jfh-refine__pills::-webkit-scrollbar {
		display: none;
	}

	.jfh-refine__pill {
		flex: 0 0 auto;
	}


	.newsletter_btn_con {
		flex: auto;
		width: 100%;
		max-width: 520px;
	}

	.jfh .jfh-searchbox__submit {
		order: 3;
		width: 100%;
		flex: auto;
		margin: 0;
		height: 56px;
		padding: 0;
		border-radius: 10px;
		font-size: 16px;
		letter-spacing: .01em;
	}
}

@media (max-width: 767px) {
	.jfh-hero {
		padding-top: 75px;
	}

	.jfh-hero__lede-break {
		display: none;
	}

	.jfh-hero__lede-break::after {
		content: " ";
	}

	.jfh-hero__strong-break {
	display: block;
	}


	.jfh-hero__actions {
		flex-direction: column;
		align-items: stretch;
		max-width: 480px;
		margin-inline: auto;
	}

	.jfh-btn {
		justify-content: center;
	}

	.jfh-search {
		padding: 40px 0 28px;
	}

	.jfh-refine__options {
		grid-template-columns: 1fr;
		max-height: 220px;
	}

	.jfh-categories {
		padding: 36px 0 48px;
	}

	.jfh-categories__grid {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.jfh-categories__col a {
		text-align: center;
	}


	.jfh-why {
		padding: 48px 0 40px;
	}

	.jfh-why__grid {
		grid-template-columns: 1fr;
		row-gap: 32px;
	}

	.jfh-newsletter__form {
		flex-direction: column;
		align-items: stretch;
	}

	.newsletter_btn_con {
		max-width: 100%;
	}

	.jfh-newsletter__field {
		justify-content: space-between;
	}

	.jfh-newsletter__field select {
		flex: 1 1 auto;
	}
}

@media (max-width: 420px) {
	.jfh-hero__title {
		font-size: 38px;
	}

	.jfh .container {
		width: calc(100% - 28px);
	}

	.jfh-hero__lede strong {
	font-size: 23px;
	}


	.jfh-why h2 {
	font-size: 33px;
	}


}

/* The WorkScout parent theme (footer.php) inserts an empty spacer div
 * above the footer widgets on every page. Not wanted on the homepage. */
body.home .margin-top-45 {
	display: none;
}