:root {
  --fj-ink: var(--wp--preset--color--contrast, #111);
  --fj-bg: var(--wp--preset--color--base, #fff);
  --fj-soft: var(--wp--preset--color--accent-5, #f6f5f0);
  --fj-mute: var(--wp--preset--color--accent-4, #686868);
  --fj-accent: var(--wp--preset--color--accent-3, #503aa8);
  --fj-line: color-mix(in srgb, var(--fj-ink) 12%, transparent);
  --fj-radius: 14px;
}

div.job_listings { margin-top: 1.5rem; }

div.job_listings .job_filters { background: var(--fj-soft); border: 1px solid var(--fj-line); border-radius: var(--fj-radius); overflow: hidden; margin-bottom: 1.5rem; }
div.job_listings .job_filters .search_jobs { background: transparent; padding: 1.25rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: .75rem 1rem; align-items: end; }
div.job_listings .job_filters .search_jobs > div { float: none; width: auto; padding: 0; margin: 0; }
div.job_listings .job_filters .search_jobs > div[style], div.job_listings .job_filters .search_jobs::before, div.job_listings .job_filters .search_jobs::after { display: none; }
div.job_listings .job_filters .search_jobs label { position: static; width: auto; height: auto; clip: auto; overflow: visible; display: block; font-size: .8rem; letter-spacing: .02em; color: var(--fj-mute); margin-bottom: .35rem; }
div.job_listings .job_filters .search_jobs .search_remote_position { display: flex; align-items: center; gap: .5rem; padding-bottom: .6rem; }
div.job_listings .job_filters .search_jobs .search_remote_position label { display: inline; margin: 0; font-size: 1rem; color: var(--fj-ink); }
div.job_listings .job_filters input[type=text],
div.job_listings .job_filters .select2-container--default .select2-selection--single { box-sizing: border-box; width: 100%; height: 2.75rem; padding: 0 .9rem; font: inherit; font-size: 1rem; color: var(--fj-ink); background: var(--fj-bg); border: 1px solid var(--fj-line); border-radius: 10px; }
div.job_listings .job_filters .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 2.7rem; padding: 0; color: var(--fj-ink); }
div.job_listings .job_filters .select2-container--default .select2-selection--single .select2-selection__arrow { height: 2.7rem; right: .5rem; }
div.job_listings .job_filters input[type=text]:focus { outline: 2px solid var(--fj-accent); outline-offset: 1px; }
div.job_listings .job_filters .search_submit input { width: 100%; height: 2.75rem; font: inherit; font-weight: 600; color: var(--fj-bg); background: var(--fj-ink); border: 0; border-radius: 999px; cursor: pointer; transition: transform .15s ease, opacity .15s ease; }
div.job_listings .job_filters .search_submit input:hover { opacity: .88; transform: translateY(-1px); }
div.job_listings .job_filters ul.job_types { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0 1.25rem 1.25rem; margin: 0; border: 0; background: transparent; }
div.job_listings .job_filters ul.job_types li { float: none; width: auto; border: 0; padding: 0; margin: 0; }
div.job_listings .job_filters ul.job_types li label { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .85rem; border: 1px solid var(--fj-line); border-radius: 999px; background: var(--fj-bg); cursor: pointer; font-size: .95rem; }
div.job_listings .job_filters ul.job_types li label:has(input:checked) { border-color: var(--fj-ink); }
div.job_listings .job_filters ul.job_types input { accent-color: var(--fj-ink); margin: 0; }
div.job_listings .showing_jobs { background: transparent; border: 0; padding: 0 1.25rem 1rem; font-size: .9rem; color: var(--fj-mute); }
div.job_listings .showing_jobs a { color: var(--fj-mute); }

ul.job_listings { border: 0; display: grid; gap: .75rem; }
ul.job_listings li.job_listing { border: 0; background: none; }
ul.job_listings li.job_listing a { display: grid; grid-template-columns: 1fr auto; gap: .35rem 1.5rem; align-items: center; padding: 1.25rem 1.5rem; line-height: 1.4; background: var(--fj-bg); border: 1px solid var(--fj-line); border-radius: var(--fj-radius); box-shadow: 0 1px 2px color-mix(in srgb, var(--fj-ink) 6%, transparent); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
ul.job_listings li.job_listing a:hover, ul.job_listings li.job_listing a:focus-visible { background: var(--fj-bg); border-color: color-mix(in srgb, var(--fj-ink) 30%, transparent); box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--fj-ink) 35%, transparent); transform: translateY(-2px); }
ul.job_listings li.job_listing a img.company_logo, ul.job_listings li.job_listing .position .company { display: none; }
ul.job_listings li.job_listing a div.position, ul.job_listings li.job_listing a div.location, ul.job_listings li.job_listing a ul.meta { float: none; width: auto; padding: 0; margin: 0; position: static; text-align: left; line-height: 1.4; }
ul.job_listings li.job_listing a div.position { grid-column: 1; }
ul.job_listings li.job_listing a div.position h3 { font-size: 1.2rem; font-weight: 600; margin: 0; }
ul.job_listings li.job_listing a div.location { grid-column: 1; grid-row: 2; color: var(--fj-mute); font-size: .95rem; }
ul.job_listings li.job_listing a div.location::before { content: "\25CF"; font-size: .55em; vertical-align: middle; margin-right: .5em; color: var(--fj-accent); }
ul.job_listings li.job_listing a ul.meta { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; list-style: none; max-width: 22rem; }
ul.job_listings li.job_listing a ul.meta li { display: inline-block; margin: 0; padding: .25rem .7rem; font-size: .82rem; line-height: 1.3; border-radius: 999px; color: var(--fj-ink); background: var(--fj-soft); border: 1px solid var(--fj-line); }
ul.job_listings li.job_listing a ul.meta li.job-type { color: var(--fj-bg); background: var(--fj-ink); border-color: var(--fj-ink); font-weight: 600; }
ul.job_listings li.job_listing a ul.meta li.date { background: transparent; border-color: transparent; color: var(--fj-mute); padding-inline: .2rem; order: 3; }
ul.job_listings li.job_listing.job_position_filled a { opacity: .55; }
ul.job_listings li.job_listing.job_position_filled a div.position h3::after { content: "Closed"; margin-left: .6rem; font-size: .75rem; font-weight: 600; padding: .15rem .55rem; border-radius: 999px; border: 1px solid currentColor; vertical-align: middle; }
ul.job_listings li.no_job_listings_found { border: 1px dashed var(--fj-line); border-radius: var(--fj-radius); padding: 1.5rem; text-align: center; color: var(--fj-mute); }
div.job_listings .load_more_jobs, div.job_listings .job-manager-pagination { border-radius: 999px; }

@media (max-width: 640px) {
  ul.job_listings li.job_listing a { grid-template-columns: 1fr; padding: 1.1rem 1.15rem; }
  ul.job_listings li.job_listing a ul.meta { grid-column: 1; grid-row: 3; justify-content: flex-start; max-width: none; margin-top: .4rem; }
}

.single_job_listing ul.job-listing-meta { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; padding: 0; margin: 0 0 2rem; }
.single_job_listing ul.job-listing-meta li { margin: 0; padding: .3rem .8rem; font-size: .9rem; line-height: 1.3; border-radius: 999px; background: var(--fj-soft); border: 1px solid var(--fj-line); color: var(--fj-ink); }
.single_job_listing ul.job-listing-meta li::before { display: none; }
.single_job_listing ul.job-listing-meta li.job-type { color: var(--fj-bg); background: var(--fj-ink); border-color: var(--fj-ink); font-weight: 600; }
.single_job_listing ul.job-listing-meta li a { color: inherit; text-decoration: none; }
.single_job_listing ul.job-listing-meta li.fj-closes { background: transparent; color: var(--fj-mute); }
.single_job_listing .job_description { font-size: 1.1rem; }

.fj-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1rem; margin: 2rem 0; }
.fj-list { padding: 1.4rem 1.5rem; background: var(--fj-soft); border: 1px solid var(--fj-line); border-radius: var(--fj-radius); }
.fj-list h3 { margin: 0 0 .8rem; font-size: 1rem; letter-spacing: .02em; }
.fj-list ul { list-style: none; padding: 0; margin: 0; }
.fj-list li { position: relative; padding-left: 1.4rem; }
.fj-list li + li { margin-top: .55rem; }
.fj-list li::before { content: ""; position: absolute; left: 0; top: .5em; width: .55rem; height: .55rem; border-radius: 50%; background: var(--fj-accent); }
.fj-list + .fj-list li::before { background: transparent; border: 2px solid var(--fj-accent); box-sizing: border-box; }

.fj-apply { margin-top: 2.5rem; padding: clamp(1.25rem, 4vw, 2.25rem); background: var(--fj-bg); border: 1px solid var(--fj-line); border-radius: calc(var(--fj-radius) + 4px); box-shadow: 0 18px 40px -28px color-mix(in srgb, var(--fj-ink) 45%, transparent); }
.fj-apply h2 { margin-top: 0; }
.fj-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; max-width: 40rem; }
.fj-form > * { min-width: 0; }
.fj-form p { margin: 0; }
.fj-field label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: .4rem; }
.fj-field input:not([type=file]), .fj-field textarea { box-sizing: border-box; width: 100%; padding: .75rem .9rem; font: inherit; color: inherit; background: var(--fj-bg); border: 1px solid color-mix(in srgb, var(--fj-ink) 22%, transparent); border-radius: 10px; transition: border-color .15s ease, box-shadow .15s ease; }
.fj-field input:not([type=file]):focus, .fj-field textarea:focus { outline: none; border-color: var(--fj-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fj-accent) 25%, transparent); }
.fj-field input[type=file] { box-sizing: border-box; width: 100%; max-width: 100%; padding: 1rem; font: inherit; background: var(--fj-soft); border: 1.5px dashed color-mix(in srgb, var(--fj-ink) 28%, transparent); border-radius: 10px; cursor: pointer; }
.fj-field input[type=file] { font-size: .95rem; }
.fj-field input[type=file]::file-selector-button { font: inherit; font-size: .9rem; font-weight: 600; margin-right: .8rem; padding: .45rem 1rem; color: var(--fj-bg); background: var(--fj-ink); border: 0; border-radius: 999px; cursor: pointer; }
.fj-field .fj-msg { display: block; margin-top: .35rem; font-size: .88rem; color: #b32d2e; }
.fj-field.fj-bad input, .fj-field.fj-bad textarea { border-color: #b32d2e; }
.fj-form button[type=submit] { border-radius: 999px; padding: .85rem 1.8rem; }
.fj-notice { padding: 1rem 1.2rem; border-radius: 10px; margin-bottom: 1.2rem; border: 1px solid; }
.fj-notice p { margin: .2em 0; }
.fj-notice-ok { border-color: #00a32a; background: color-mix(in srgb, #00a32a 8%, transparent); }
.fj-notice-error { border-color: #b32d2e; background: color-mix(in srgb, #b32d2e 7%, transparent); }
.fj-hp { position: absolute; left: -9999px; }
.fj-closed { margin-top: 2rem; padding: 1rem 1.2rem; font-weight: 600; background: var(--fj-soft); border: 1px solid var(--fj-line); border-radius: 10px; }

@media (prefers-reduced-motion: reduce) {
  ul.job_listings li.job_listing a, div.job_listings .job_filters .search_submit input { transition: none; transform: none !important; }
}

div.job_listings .job_filters .search_jobs { grid-template-columns: 1fr 1fr; grid-template-areas: "kw loc" "dept remote" "go go"; }
div.job_listings .job_filters .search_jobs .search_keywords { grid-area: kw; }
div.job_listings .job_filters .search_jobs .search_location { grid-area: loc; }
div.job_listings .job_filters .search_jobs .search_categories { grid-area: dept; }
div.job_listings .job_filters .search_jobs .search_remote_position { grid-area: remote; }
div.job_listings .job_filters .search_jobs .search_submit { grid-area: go; }
div.job_listings .job_filters .search_submit input { font-size: 1rem; }
@media (max-width: 640px) {
  div.job_listings .job_filters .search_jobs { grid-template-columns: 1fr; grid-template-areas: "kw" "loc" "remote" "dept" "go"; }
}
