/*
 * BrightFrame Job Listings - front end.
 *
 * Built to survive inside Divi 4/5 and block themes: lists are divs with
 * roles, resets are wrapped in :where() so they never outrank component
 * rules, and [hidden] is forced. Theme it with the custom properties on .bf-jobs.
 */

.bf-jobs,
.bf-jobs-panel {
    --bf-jobs-accent: var(--gcid-primary-color, #1d4ed8);
    --bf-jobs-text: #1f2933;
    --bf-jobs-muted: #66717f;
    --bf-jobs-border: #e2e6eb;
    --bf-jobs-surface: #fff;
    --bf-jobs-soft: #f3f5f8;
    --bf-jobs-radius: 12px;
    --bf-jobs-gap: 24px;
    --bf-jobs-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
    --bf-jobs-shadow-hover: 0 8px 24px rgba(16, 24, 40, .12);
}
.bf-jobs {
    container-type: inline-size;
    color: var(--bf-jobs-text);
    margin: 0 0 2em;
    width: 100%;
    max-width: 100%;
    align-self: stretch;
}
/* Divi's own wrapper around the module. In a Divi 5 flex column (align-items: flex-start) it is the element that
   shrinks to its content — to 0 with inline-size containment inside — and nothing on .bf-jobs can widen a 0-wide
   parent. Documents has had this rule on .bf_documents from the start (Joe, JOBS-02, measured). */
.bf_job_listings { width: 100%; min-width: 0; }
/* A SHORTCODE inside a Divi 5 Text or Code module (2026-10-22, Joe's finding on the design site): Divi's column is a flex
   column with align-items: flex-start, so a module whose only content is the listings is sized to its content — and a grid of
   minmax(0,1fr) tracks has no content width, so the whole list resolved to 0 px. The module wrapper rule above covers the
   MODULE (its own class); a shortcode has no such class, so the Divi module HOLDING it takes the width instead. */
.et_pb_module:has(> .et_pb_text_inner > .bf-jobs), .et_pb_module:has(> .et_pb_code_inner > .bf-jobs), .et_pb_module:has(> .bf-jobs) { width: 100%; min-width: 0; }
/* Inside Divi's wrapper the module's Spacing element owns the gap, not this margin (Joe, JOBS-03 #5). */
.bf_job_listings .bf-jobs { margin-bottom: 0; }
.bf-jobs [hidden],
.bf-jobs-panel[hidden],
.bf-jobs-panel [hidden] { display: none !important; }
:where(.bf-jobs, .bf-jobs-panel) :where(h2, h3, h4, p, fieldset, legend) { margin: 0; padding: 0; }
:where(.bf-jobs, .bf-jobs-panel) :where(*, *::before, *::after) { box-sizing: border-box; }
.bf-jobs-sr {
    position: absolute !important;
    width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.bf-jobs-heading { font-size: 1.5em; margin-bottom: .75em !important; }
.bf-jobs.is-loading .bf-jobs-results { opacity: .5; transition: opacity .15s; }
.bf-jobs-icon { width: 1em; height: 1em; vertical-align: -.15em; margin-right: .3em; color: var(--bf-jobs-accent); flex: none; }

/* ---- Filters ---------------------------------------------------------- */
.bf-jobs-filters {
    display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-start; margin-bottom: 18px;
}
.bf-jobs-search { position: relative; flex: 1 1 240px; max-width: 420px; }
.bf-jobs-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--bf-jobs-muted); pointer-events: none; }
.bf-jobs .bf-jobs-search input[type=search] {
    width: 100%; padding: 10px 12px 10px 38px; border: 1px solid var(--bf-jobs-border); border-radius: 999px;
    background: var(--bf-jobs-surface); font: inherit; font-size: 15px; color: var(--bf-jobs-text); line-height: 1.3; margin: 0; box-shadow: none;
}
.bf-jobs .bf-jobs-search input[type=search]:focus { outline: 2px solid var(--bf-jobs-accent); outline-offset: 1px; border-color: transparent; }
.bf-jobs-facet { border: 0; min-width: 0; }
.bf-jobs-facet legend { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--bf-jobs-muted); margin-bottom: 6px; }
.bf-jobs-pills {
    display: flex; flex-wrap: wrap;
    gap: var(--bf-jobs-filter-row-gap, var(--bf-jobs-filter-gap, 6px)) var(--bf-jobs-filter-gap, 6px);
}
.bf-jobs-pill { position: relative; cursor: pointer; margin: 0; }
.bf-jobs-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bf-jobs-pill span {
    display: inline-block; padding: 6px 12px; border: 1px solid var(--bf-jobs-border); border-radius: 999px;
    background: var(--bf-jobs-surface); font-size: 13.5px; line-height: 1.3; color: var(--bf-jobs-text); transition: background .12s, border-color .12s;
}
.bf-jobs-pill small { color: var(--bf-jobs-muted); font-size: 11.5px; margin-left: 2px; }
.bf-jobs-pill:hover span { border-color: var(--bf-jobs-accent); }
.bf-jobs-pill input:checked + span { background: var(--bf-jobs-accent); border-color: var(--bf-jobs-accent); color: #fff; }
.bf-jobs-pill input:checked + span small { color: rgba(255, 255, 255, .8); }
.bf-jobs-pill input:focus-visible + span { outline: 2px solid var(--bf-jobs-accent); outline-offset: 2px; }
.bf-jobs-select select { padding: 8px 32px 8px 12px; border: 1px solid var(--bf-jobs-border); border-radius: 8px; font: inherit; font-size: 14px; background: var(--bf-jobs-surface); color: var(--bf-jobs-text); }
.bf-jobs-filter-actions { display: flex; gap: 12px; align-items: center; align-self: flex-end; }
.bf-jobs-filters.is-live .bf-jobs-apply { display: none; }
.bf-jobs-reset { font-size: 13.5px; color: var(--bf-jobs-muted); text-decoration: underline; }
.bf-jobs-status { font-size: 13px; color: var(--bf-jobs-muted); margin-bottom: 12px; min-height: 1em; }
.bf-jobs .bf-jobs-empty { padding: 28px 18px; margin: 0; text-align: center; color: var(--bf-jobs-muted); background: var(--bf-jobs-soft); border-radius: var(--bf-jobs-radius); }
.bf-jobs-error { color: #b42318; margin: 8px 0; }

/* ---- Buttons ---------------------------------------------------------- */
.bf-jobs .bf-jobs-button,
.bf-jobs .bf-jobs-action,
.bf-jobs-panel .bf-jobs-action {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--bf-jobs-border); border-radius: 8px;
    background: var(--bf-jobs-surface); color: var(--bf-jobs-text); font: inherit; font-size: 14px; font-weight: 600; line-height: 1.3;
    text-decoration: none; cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
.bf-jobs .bf-jobs-action:hover,
.bf-jobs .bf-jobs-button:hover,
.bf-jobs-panel .bf-jobs-action:hover { border-color: var(--bf-jobs-accent); color: var(--bf-jobs-accent); }
.bf-jobs .bf-jobs-action-primary,
.bf-jobs-panel .bf-jobs-action-primary { background: var(--bf-jobs-accent); border-color: var(--bf-jobs-accent); color: #fff; }
.bf-jobs .bf-jobs-action-primary:hover,
.bf-jobs-panel .bf-jobs-action-primary:hover { color: #fff; filter: brightness(.92); }
.bf-jobs .bf-jobs-action:focus-visible,
.bf-jobs .bf-jobs-button:focus-visible,
.bf-jobs-panel .bf-jobs-action:focus-visible { outline: 2px solid var(--bf-jobs-accent); outline-offset: 2px; }
.bf-jobs-closed-note { font-size: 13.5px; color: var(--bf-jobs-muted); font-style: italic; }

/* ---- Cards ------------------------------------------------------------ */
.bf-jobs-items { display: grid; gap: var(--bf-jobs-row-gap, var(--bf-jobs-gap)) var(--bf-jobs-gap); }
.bf-jobs-grid { grid-template-columns: repeat(var(--bf-jobs-cols, 2), minmax(0, 1fr)); }
.bf-jobs-list { grid-template-columns: minmax(0, 1fr); gap: var(--bf-jobs-row-gap, 14px) var(--bf-jobs-gap); }
.bf-jobs-card {
    display: flex; flex-direction: column; background: var(--bf-jobs-surface); border: 1px solid var(--bf-jobs-border);
    border-radius: var(--bf-jobs-radius); box-shadow: var(--bf-jobs-shadow); overflow: hidden; transition: transform .15s, box-shadow .15s;
}
.bf-jobs-card:hover { box-shadow: var(--bf-jobs-shadow-hover); transform: translateY(-2px); }
.bf-jobs-no-lift .bf-jobs-card:hover { transform: none; }
.bf-jobs-bare .bf-jobs-card { background: transparent; border: 0; box-shadow: none; border-radius: 0; }
.bf-jobs-bare .bf-jobs-card:hover { box-shadow: none; transform: none; }
/* Bare + Featured: the badge marks the card; the 1px ring hugged the words (Joe, JOBS-03 #1). */
.bf-jobs-bare .bf-jobs-card.is-featured { box-shadow: none; }
.bf-jobs-card.is-featured { border-color: var(--bf-jobs-accent); box-shadow: 0 0 0 1px var(--bf-jobs-accent), var(--bf-jobs-shadow); }
/* A closed card is dimmed with colours that still pass 4.5:1 — never with opacity, which took the facts to 3.7:1 and the
   closed note to 2.9:1 on white (Joe, JOBS-01 #3). */
.bf-jobs-card.is-closed { background: var(--bf-jobs-soft); }
.bf-jobs-card.is-closed .bf-jobs-title a { color: var(--bf-jobs-muted); }
.bf-jobs-card.is-closed .bf-jobs-summary { color: var(--bf-jobs-muted); }
.bf-jobs-image { display: block; background: var(--bf-jobs-soft); }
.bf-jobs-image img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; }
.bf-jobs-list .bf-jobs-card { flex-direction: row; align-items: stretch; }
.bf-jobs-list .bf-jobs-image { flex: 0 0 160px; }
.bf-jobs-list .bf-jobs-image img { height: 100%; aspect-ratio: auto; }
.bf-jobs-body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; flex: 1 1 auto; min-width: 0; }
.bf-jobs-bare .bf-jobs-body { padding: 0 0 18px; border-bottom: 1px solid var(--bf-jobs-border); }
.bf-jobs-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.bf-jobs-badge {
    display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
    background: var(--bf-jobs-soft); color: var(--bf-jobs-muted);
}
.bf-jobs-badge-featured { background: var(--bf-jobs-accent); color: #fff; }
.bf-jobs-badge-new { background: #dcfce7; color: #166534; }
.bf-jobs-badge-soon { background: #fef3c7; color: #92400e; }
.bf-jobs-badge-closed { background: #e5e7eb; color: #374151; }
.bf-jobs .bf-jobs-title { font-size: 1.15em; line-height: 1.3; margin: 0; font-weight: 700; }
.bf-jobs .bf-jobs-title a { color: inherit; text-decoration: none; }
.bf-jobs .bf-jobs-title a:hover { color: var(--bf-jobs-accent); text-decoration: underline; }
.bf-jobs .bf-jobs-title a:focus-visible { outline: 2px solid var(--bf-jobs-accent); outline-offset: 2px; }
.bf-jobs-facts { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13.5px; color: var(--bf-jobs-muted); line-height: 1.5; }
.bf-jobs-fact { display: inline-flex; align-items: center; }
.bf-jobs-fact-label { margin-right: .3em; }   /* "Posted" + <time>: a flex item drops its trailing space, so the gap is drawn, not typed */
.bf-jobs-remote { margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--bf-jobs-soft); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.bf-jobs-summary { font-size: 14.5px; line-height: 1.55; color: var(--bf-jobs-text); }
.bf-jobs-files { display: flex; flex-wrap: wrap; gap: 8px; }
.bf-jobs .bf-jobs-file { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; color: var(--bf-jobs-accent); text-decoration: none; }
.bf-jobs .bf-jobs-file:hover { text-decoration: underline; }
.bf-jobs-file small { color: var(--bf-jobs-muted); font-size: 11.5px; }
.bf-jobs-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: auto; padding-top: 6px; }

/* ---- Grouped: tabs and accordion -------------------------------------- */
.bf-jobs-tablist {
    display: flex; flex-wrap: wrap; gap: var(--bf-jobs-filter-row-gap, var(--bf-jobs-filter-gap, 4px)) var(--bf-jobs-filter-gap, 4px);
    border-bottom: 2px solid var(--bf-jobs-border); margin-bottom: 18px;
}
.bf-jobs .bf-jobs-tab {
    padding: 10px 16px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -2px; background: none; font: inherit; font-size: 15px; font-weight: 600;
    color: var(--bf-jobs-muted); cursor: pointer; border-radius: 0;
}
.bf-jobs .bf-jobs-tab:hover { color: var(--bf-jobs-text); }
.bf-jobs .bf-jobs-tab[aria-selected=true] { color: var(--bf-jobs-accent); border-bottom-color: var(--bf-jobs-accent); }
.bf-jobs .bf-jobs-tab:focus-visible { outline: 2px solid var(--bf-jobs-accent); outline-offset: -2px; }
.bf-jobs-count { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--bf-jobs-soft); font-size: 12px; color: var(--bf-jobs-muted); }
.bf-jobs-accordion { display: flex; flex-direction: column; gap: 10px; }
.bf-jobs-group { border: 1px solid var(--bf-jobs-border); border-radius: var(--bf-jobs-radius); padding: 0 18px; background: var(--bf-jobs-surface); }
.bf-jobs-group summary { cursor: pointer; padding: 14px 0; font-weight: 700; font-size: 1.05em; list-style: none; display: flex; align-items: center; gap: 8px; }
.bf-jobs-group summary::-webkit-details-marker { display: none; }
.bf-jobs-group summary::before { content: ''; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.bf-jobs-group[open] summary::before { transform: rotate(45deg); }
.bf-jobs-group .bf-jobs-items { padding: 0 0 18px; }

/* ---- Pager ------------------------------------------------------------ */
.bf-jobs-pager { margin-top: 20px; text-align: center; }
.bf-jobs-pages { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.bf-jobs .bf-jobs-page {
    display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 8px;
    border: 1px solid var(--bf-jobs-border); border-radius: 8px; background: var(--bf-jobs-surface); color: var(--bf-jobs-text); text-decoration: none; font-size: 14px;
}
.bf-jobs .bf-jobs-page:hover { border-color: var(--bf-jobs-accent); color: var(--bf-jobs-accent); }
.bf-jobs .bf-jobs-page.is-current { background: var(--bf-jobs-accent); border-color: var(--bf-jobs-accent); color: #fff; }
.bf-jobs-gap { align-self: center; color: var(--bf-jobs-muted); }
.bf-jobs-footer { margin-top: 16px; font-weight: 600; }

/* ---- Single page ------------------------------------------------------ */
.bf-jobs-single { margin: 0 0 1.5em; }
.bf-jobs-single-facts { font-size: 15px; margin-bottom: 18px !important; padding: 12px 16px; background: var(--bf-jobs-soft); border-radius: var(--bf-jobs-radius); }
.bf-jobs-single-apply-top { margin: 0 0 22px !important; }
.bf-jobs-notice { padding: 12px 16px; border-radius: var(--bf-jobs-radius); background: #fef3c7; color: #78350f; margin-bottom: 18px !important; }
.bf-jobs .bf-jobs-notice a { color: inherit; text-decoration: underline; }   /* the theme's link blue read 2.5:1 on the notice's yellow */
.bf-jobs-description { margin-bottom: 24px; }
.bf-jobs-single-h { font-size: 1.15em; margin: 0 0 10px !important; }
.bf-jobs-single-files { margin-bottom: 24px; }
.bf-jobs-single-foot { border-top: 1px solid var(--bf-jobs-border); padding-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.bf-jobs-single-dates { font-size: 13.5px; color: var(--bf-jobs-muted); }
.bf-jobs-back a { font-weight: 600; text-decoration: none; }
.bf-jobs-panel-open { font-size: 14px; }

/* ---- Details panel ---------------------------------------------------- */
.bf-jobs-panel { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.admin-bar .bf-jobs-panel { top: var(--wp-admin--admin-bar-height, 32px); }   /* logged in on a phone: the close button sat under the admin bar */
.bf-jobs-panel-backdrop { position: absolute; inset: 0; background: rgba(16, 24, 40, .55); }
.bf-jobs-panel-frame {
    position: relative; width: min(760px, 100%); max-height: 100%;   /* of the panel layer, which already stops at the admin bar */ display: flex; flex-direction: column;
    background: var(--bf-jobs-surface); color: var(--bf-jobs-text); border-radius: var(--bf-jobs-radius); box-shadow: 0 24px 60px rgba(16, 24, 40, .3); overflow: hidden;
}
.bf-jobs-panel-bar { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--bf-jobs-border); }
.bf-jobs-panel-title { flex: 1 1 auto; font-size: 1.1em; }
.bf-jobs-panel .bf-jobs-panel-close { border: 0; background: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--bf-jobs-muted); padding: 4px 8px; border-radius: 8px; }
.bf-jobs-panel .bf-jobs-panel-close:hover { color: var(--bf-jobs-text); background: var(--bf-jobs-soft); }
.bf-jobs-panel .bf-jobs-panel-close:focus-visible { outline: 2px solid var(--bf-jobs-accent); }
.bf-jobs-panel-body { overflow: auto; padding: 18px 22px 22px; }
.bf-jobs-panel-body .bf-jobs-single { margin: 0; }
.bf-jobs-panel-body .bf-jobs-description :where(h1, h2, h3) { margin: 1em 0 .4em; font-size: 1.15em; }
.bf-jobs-panel-body .bf-jobs-description :where(p, ul, ol) { margin: 0 0 1em; }
.bf-jobs-panel-body .bf-jobs-description :where(ul, ol) { padding-left: 1.4em; }
body.bf-jobs-panel-open { overflow: hidden; }

/* ---- Responsive ------------------------------------------------------- */
@container (max-width: 820px) {
    .bf-jobs-grid { grid-template-columns: repeat(min(var(--bf-jobs-cols, 2), 2), minmax(0, 1fr)); }
    .bf-jobs-cols-tablet .bf-jobs-grid { grid-template-columns: repeat(var(--bf-jobs-cols-t), minmax(0, 1fr)); }
}
@container (max-width: 640px) {
    .bf-jobs-cols-phone .bf-jobs-grid { grid-template-columns: repeat(var(--bf-jobs-cols-p), minmax(0, 1fr)); }
    .bf-jobs-list .bf-jobs-card { flex-direction: column; }
    .bf-jobs-list .bf-jobs-image img { aspect-ratio: 16 / 7; }
    .bf-jobs-search { max-width: none; }
}
@container (max-width: 480px) {
    .bf-jobs-grid { grid-template-columns: minmax(0, 1fr); }
    .bf-jobs-cols-phone .bf-jobs-grid { grid-template-columns: repeat(var(--bf-jobs-cols-p), minmax(0, 1fr)); }
    .bf-jobs-body { padding: 14px 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .bf-jobs-card, .bf-jobs-card:hover { transition: none; transform: none; }
}