/*
 * Job board front end.
 *
 * Implements the content-area redesign in the design handoff: the theme's own
 * vocabulary (Poppins, square corners, gold as the action colour, hairline
 * rules) on a white surface, rather than the rounded-card fallback this file
 * used to carry.
 *
 * Still namespaced under .jb- and still overridable: a theme that wants to own
 * presentation drops files into <theme>/jobs/templates/. The tokens below are
 * the theme's SCSS variables restated as custom properties, because the plugin
 * ships plain CSS and has no access to the theme's Sass build.
 */

.jb-archive,
.jb-single,
.jb-form-page {
    --jb-gold: #EDBD1D;
    --jb-black: #000000;
    --jb-ink: #231F20;
    --jb-muted: #5A5A5A;
    --jb-rule: #D4D4D4;
    --jb-surface: #FFFFFF;
    --jb-field: #FAFAFA;
    --jb-panel: #F7F7F7;
    --jb-hover: #FCF7E7;
    --jb-error: #A4262C;
    --jb-font: 'Poppins', Arial, sans-serif;

    /*
     * The theme's content gutter. `.u-builder-container-width` — what /webinars/
     * and every builder page use — is a 1480px container with this padding, and
     * steps down at 1280px. Matching it is what keeps the job board's content
     * aligned with the rest of the site rather than inset from it.
     */
    --jb-gutter: 40px;

    font-family: var(--jb-font);
    color: var(--jb-black);
}

@media (max-width: 1280px) {
    .jb-archive,
    .jb-single,
    .jb-form-page {
        --jb-gutter: 20px;
    }
}

/*
 * The theme's own white .template surface, for the case where the theme part
 * that normally prints it is unavailable. Matches _general.scss.
 */
.jb-surface {
    display: block;
    width: 1480px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    background-color: #ffffff;
}

/* Measures ----------------------------------------------------------------- */

.jb-shell {
    max-width: 1480px;
    margin: 0 auto;
    padding: 56px var(--jb-gutter) 80px;
}

/* Shared type -------------------------------------------------------------- */

.jb-eyebrow {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--jb-muted);
}

.jb-page-title {
    margin: 0 0 12px;
    font-family: var(--jb-font);
    font-size: 46px;
    line-height: 1.05;
    font-weight: 600;
    letter-spacing: -0.02em;
    text-wrap: pretty;
}

.jb-lede {
    margin: 0;
    max-width: 54ch;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.55;
    color: var(--jb-ink);
}

.jb-lede > :first-child { margin-top: 0; }
.jb-lede > :last-child { margin-bottom: 0; }

/* Buttons ------------------------------------------------------------------ */

.jb-btn {
    display: inline-block;
    border: 1px solid var(--jb-gold);
    border-radius: 0;
    background: var(--jb-gold);
    color: var(--jb-black);
    font-family: var(--jb-font);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.2;
    padding: 15px 26px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all .2s ease-in-out;
}

.jb-btn:hover,
.jb-btn:focus {
    background: var(--jb-black);
    border-color: var(--jb-black);
    color: var(--jb-gold);
    text-decoration: none;
}

.jb-btn--outline {
    background: transparent;
    border-color: var(--jb-black);
    color: var(--jb-black);
    font-weight: 600;
}

.jb-btn--outline:hover,
.jb-btn--outline:focus {
    background: var(--jb-black);
    border-color: var(--jb-black);
    color: #ffffff;
}

.jb-btn--compact { padding: 13px 24px; }
.jb-btn--block { display: block; width: 100%; padding: 16px 20px; font-size: 16px; }

/* Archive: header ---------------------------------------------------------- */

.jb-page-header {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    align-items: flex-end;
    justify-content: space-between;
    border-bottom: 3px solid var(--jb-black);
    padding-bottom: 28px;
}

.jb-page-header__text { flex: 1 1 420px; }
.jb-page-header .jb-btn { flex: 0 0 auto; }

/* Archive: filter bar ------------------------------------------------------ */

/*
 * The dividers between controls are the bar's own background showing through a
 * 1px gap, not borders on the controls. Borders had to be swapped from right to
 * bottom at every width the bar reflows at; a gap is right however it wraps and
 * however many dropdowns there are.
 */
.jb-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    margin: 28px 0 0;
    border: 1px solid var(--jb-black);
    background: var(--jb-rule);
}

.jb-filters__field {
    display: flex;
    min-width: 0;
    margin: 0;
    background: var(--jb-surface);
}

/* One row: search, then the dropdowns in equal shares. Narrower widths reflow below. */
.jb-filters__field--search { flex: 1 1 240px; }
.jb-filters__field--select { flex: 1 1 0; }

.jb-filters input,
.jb-filters select {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 17px 20px;
    font-family: var(--jb-font);
    font-size: 15px;
    line-height: 1.3;
    color: var(--jb-black);
    outline: none;
}

.jb-filters select {
    appearance: none;
    -webkit-appearance: none;
    text-overflow: ellipsis;
}

.jb-filters input:focus-visible,
.jb-filters select:focus-visible {
    outline: 2px solid var(--jb-black);
    outline-offset: -2px;
}

.jb-filters__submit {
    flex: 0 0 auto;
    border: none;
    border-radius: 0;
    background: var(--jb-gold);
    color: var(--jb-black);
    font-family: var(--jb-font);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 17px 34px;
    cursor: pointer;
    transition: all .2s ease-in-out;
}

.jb-filters__submit:hover,
.jb-filters__submit:focus {
    background: var(--jb-black);
    color: var(--jb-gold);
}

/* Archive: result / active-filter row -------------------------------------- */

.jb-resultbar {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: baseline;
    justify-content: space-between;
    margin: 22px 0 0;
}

.jb-resultbar--filtered { align-items: center; }

.jb-resultbar p {
    margin: 0;
    font-size: 14px;
    color: var(--jb-muted);
}

.jb-resultbar strong {
    color: var(--jb-black);
    font-weight: 600;
}

.jb-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.jb-chips__label {
    margin-right: 4px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--jb-muted);
}

.jb-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--jb-black);
    padding: 7px 14px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    background: var(--jb-hover);
    transition: all .2s ease-in-out;
}

.jb-chip:hover,
.jb-chip:focus {
    background: var(--jb-gold);
    text-decoration: none;
}

.jb-chip__remove {
    font-size: 15px;
    line-height: 1;
    color: var(--jb-muted);
}

.jb-chips__clear {
    margin-left: 6px;
    font-size: 14px;
    color: var(--jb-muted);
}

/* Archive: job list -------------------------------------------------------- */

.jb-list {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
    border-top: 1px solid var(--jb-rule);
}

.jb-list__item {
    border-bottom: 1px solid var(--jb-rule);
    list-style: none;
}

.jb-row {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 220px;
    gap: 28px;
    align-items: start;
    /* The negative margin lets the hover fill bleed past the text column while
       the hairline rules on the list item stay flush. */
    padding: 26px 20px;
    margin: 0 -20px;
    transition: background .2s ease-in-out;
}

.jb-row:hover { background: var(--jb-hover); }

.jb-row--no-logo { grid-template-columns: minmax(0, 1fr) 220px; }
.jb-row--no-pay { grid-template-columns: 64px minmax(0, 1fr); }
.jb-row--no-logo.jb-row--no-pay { grid-template-columns: minmax(0, 1fr); }

.jb-row__title {
    margin: 0 0 6px;
    font-family: var(--jb-font);
    font-size: 23px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-wrap: pretty;
}

.jb-row__title a { text-decoration: none; }

.jb-row__title a:hover,
.jb-row__title a:focus {
    text-decoration: underline;
    text-decoration-color: var(--jb-gold);
    text-decoration-thickness: 2px;
}

.jb-row__company {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    color: var(--jb-ink);
}

.jb-row__meta {
    margin: 8px 0 0;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--jb-muted);
}

.jb-row__snippet {
    margin: 12px 0 0;
    max-width: 64ch;
    font-size: 15px;
    line-height: 1.6;
    color: var(--jb-muted);
}

.jb-row__aside { text-align: right; }

.jb-row__pay {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
}

.jb-row__period {
    margin: 2px 0 12px;
    font-size: 13px;
    color: var(--jb-muted);
}

.jb-row__link {
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid var(--jb-gold);
    padding-bottom: 2px;
    transition: all .2s ease-in-out;
}

/* Without a pay period line there is nothing holding the link off the amount. */
.jb-row__pay + .jb-row__link { display: inline-block; margin-top: 12px; }

.jb-row__link:hover,
.jb-row__link:focus {
    border-bottom-color: var(--jb-black);
    text-decoration: none;
}

/* Company logo tile -------------------------------------------------------- */

.jb-logo {
    width: 64px;
    height: 64px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-family: var(--jb-font);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1;
    overflow: hidden;
}

.jb-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.jb-logo--lg {
    width: 80px;
    height: 80px;
    font-size: 28px;
}

/* Archive: pagination ------------------------------------------------------ */

.jb-pagination {
    margin-top: 36px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.jb-pagination .page-numbers {
    min-width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 1px solid var(--jb-rule);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: all .2s ease-in-out;
}

.jb-pagination a.page-numbers:hover,
.jb-pagination a.page-numbers:focus {
    border-color: var(--jb-black);
    text-decoration: none;
}

.jb-pagination .page-numbers.current {
    background: var(--jb-gold);
    border-color: var(--jb-black);
    font-weight: 700;
}

.jb-pagination .page-numbers.dots {
    border-color: transparent;
    color: var(--jb-muted);
}

.jb-pagination .prev.page-numbers,
.jb-pagination .next.page-numbers {
    padding: 0 20px;
    font-weight: 600;
}

.jb-pagination .next.page-numbers { margin-left: 4px; }

/* Archive: no results ------------------------------------------------------ */

.jb-empty {
    margin-top: 24px;
    border-left: 4px solid var(--jb-gold);
    background: var(--jb-panel);
    padding: 36px 40px;
}

.jb-empty__title {
    margin: 0 0 8px;
    font-family: var(--jb-font);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.jb-empty__body {
    margin: 0 0 20px;
    max-width: 56ch;
    font-size: 16px;
    color: var(--jb-ink);
}

.jb-empty__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Single listing ----------------------------------------------------------- */

.jb-single .jb-shell { padding-top: 40px; }

.jb-back {
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    color: var(--jb-muted);
}

.jb-back:hover,
.jb-back:focus {
    color: var(--jb-black);
    text-decoration: none;
}

.jb-single__header {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-start;
    margin: 24px 0 0;
    border-bottom: 3px solid var(--jb-black);
    padding-bottom: 32px;
}

.jb-single__heading {
    flex: 1 1 380px;
    min-width: 0;
}

.jb-single__title {
    margin: 0 0 8px;
    font-family: var(--jb-font);
    font-size: 40px;
    line-height: 1.08;
    font-weight: 600;
    letter-spacing: -0.02em;
    text-wrap: pretty;
}

.jb-single__company {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    color: var(--jb-ink);
}

.jb-single__location {
    font-weight: 400;
    color: var(--jb-muted);
}

.jb-single__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 56px;
    align-items: start;
    margin-top: 40px;
}

.jb-single__grid--full { grid-template-columns: minmax(0, 1fr); }

/* Single listing: body sections -------------------------------------------- */

.jb-section { margin-bottom: 40px; }
.jb-section:last-child { margin-bottom: 0; }

.jb-section__rule {
    width: 32px;
    height: 4px;
    background: var(--jb-gold);
    margin-bottom: 14px;
}

.jb-section__title {
    margin: 0 0 14px;
    font-family: var(--jb-font);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-wrap: pretty;
}

.jb-prose {
    max-width: 68ch;
    font-size: 17px;
    line-height: 1.75;
}

.jb-prose > :first-child { margin-top: 0; }
.jb-prose > :last-child { margin-bottom: 0; }
.jb-prose p { margin: 0 0 16px; }

.jb-bullets {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
    max-width: 68ch;
}

.jb-bullets li {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 12px;
    font-size: 17px;
    line-height: 1.6;
    margin: 0;
}

.jb-bullets li::before {
    content: '\2014';
    color: var(--jb-gold);
    font-weight: 700;
}

/* Single listing: sticky detail panel -------------------------------------- */

.jb-panel {
    position: sticky;
    top: 24px;
    border: 1px solid var(--jb-black);
    background: var(--jb-surface);
}

.jb-panel__cap {
    height: 6px;
    background: var(--jb-gold);
}

.jb-panel__inner { padding: 26px 24px; }

.jb-panel__eyebrow {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--jb-muted);
}

.jb-panel__pay {
    margin: 0 0 22px;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.25;
}

.jb-panel__period {
    font-size: 14px;
    font-weight: 400;
    color: var(--jb-muted);
    /* A wide range fills the 320px panel; keep "per year" from splitting in two. */
    white-space: nowrap;
}

.jb-facts {
    margin: 0 0 24px;
    display: grid;
    gap: 14px;
}

.jb-fact {
    display: grid;
    gap: 2px;
    border-top: 1px solid var(--jb-rule);
    padding-top: 12px;
}

.jb-fact dt {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--jb-muted);
}

.jb-fact dd {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}

/* Under an imported listing's summary: where the role was found. */
.jb-source {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    /* The prose's own size and measure, so the rule ends where the text above it does. */
    max-width: 68ch;
    font-size: 17px;
    margin: 24px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--jb-rule);
    line-height: 1.4;
}

.jb-source__label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--jb-muted);
}

.jb-source__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--jb-black);
    text-decoration: none;
    border-bottom: 2px solid var(--jb-gold);
    padding-bottom: 2px;
    overflow-wrap: anywhere;
    transition: all .2s ease-in-out;
}

.jb-source__link:hover,
.jb-source__link:focus {
    border-bottom-color: var(--jb-black);
    text-decoration: none;
}

/* Box with an arrow leaving it: the link goes off the site. */
.jb-source__icon {
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.jb-panel__note {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--jb-muted);
}

/* Single listing: footer CTA ----------------------------------------------- */

.jb-single__footer {
    margin-top: 56px;
    border-top: 1px solid var(--jb-rule);
    padding-top: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
}

.jb-single__footer p {
    margin: 0;
    font-size: 15px;
    color: var(--jb-muted);
}

.jb-single__footer p a {
    color: var(--jb-black);
    font-weight: 600;
}

/* Post a job: page header --------------------------------------------------- */

/*
 * The theme already styles Gravity Forms site-wide, from `_forms.scss`, through
 * selectors seven levels deep and a `button-default()` mixin that marks almost
 * every declaration !important. Overriding that needs the same reach, so the
 * rules below repeat the theme's own chain and match its !important where it
 * used one. Every selector starts at .jb-form-page, so no other form on the site
 * is affected — only the job board's intake page.
 *
 * The five steps are Gravity Forms page breaks. It renders every page's markup
 * and shows one, so each page's own footer bar exists in the DOM from the start;
 * moving between them is a real request, not a client-side swap.
 */

.jb-form-page .jb-shell { padding: 48px var(--jb-gutter) 72px; }

.jb-form-head {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    align-items: flex-end;
    justify-content: space-between;
}

.jb-form-head__main { flex: 1 1 460px; }

.jb-form-page .jb-page-title {
    font-size: 40px;
    line-height: 1.08;
}

.jb-form-page .jb-lede { max-width: 60ch; }

.jb-form-page .jb-note {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--jb-muted);
    text-align: right;
}

.jb-form-page .jb-required,
.jb-form-page .gfield_required { color: var(--jb-error); }

/* Post a job: step rail ----------------------------------------------------- */

/*
 * Replaces Gravity Forms' own `.gf_page_steps`, which is why none of its classes
 * are reused — see Frontend::renderStepRail(). A completed step is a <button>
 * that posts back to itself; the current and upcoming ones are <span>s, because
 * Gravity Forms only validates the page being left and would walk past the
 * required fields on any page a forward jump skipped.
 */

.jb-form-page .jb-rail {
    display: flex;
    flex-wrap: wrap;
    border-top: 2px solid var(--jb-black);
    border-bottom: 1px solid var(--jb-rule);
    margin: 28px 0 40px;
}

/*
 * A completed step is a <button>, and Gravity Forms' framework theme styles every
 * button inside its wrapper as one of its own — blue fill, white text, rounded,
 * shadowed, its own padding and min-height — with a priority no ordinary selector
 * of ours outranks. So the properties it takes over are marked !important here,
 * the same bargain the footer buttons make further down. The upcoming and current
 * steps are <span>s and need none of it; declaring it once for both keeps the two
 * looking identical, which is the point.
 */
.jb-form-page .jb-rail__step {
    flex: 1 1 200px;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 18px 20px !important;
    min-height: 0 !important;
    background: transparent !important;
    border: none !important;
    border-right: 1px solid var(--jb-rule) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: var(--jb-font);
    font-size: inherit;
    color: var(--jb-black) !important;
    text-align: left;
    transition: all .2s ease-in-out !important;
}

.jb-form-page .jb-rail__step:last-child { border-right: none !important; }

.jb-form-page button.jb-rail__step { cursor: pointer; }

.jb-form-page button.jb-rail__step:hover,
.jb-form-page button.jb-rail__step:focus {
    background: var(--jb-hover) !important;
    color: var(--jb-black) !important;
}

.jb-form-page .jb-rail__num {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--jb-black);
    background: #ffffff;
    color: var(--jb-muted);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.jb-form-page .jb-rail__step--current .jb-rail__num {
    background: var(--jb-gold);
    color: var(--jb-black);
}

.jb-form-page .jb-rail__step--done .jb-rail__num {
    background: var(--jb-black);
    color: var(--jb-gold);
}

/* Not in the design file, which does not draw an error state; the handoff asks
   for the numeral box to carry it. */
.jb-form-page .jb-rail__step--error .jb-rail__num {
    background: var(--jb-error);
    border-color: var(--jb-error);
    color: #ffffff;
}

.jb-form-page .jb-rail__name {
    font-size: 15px;
    font-weight: 600;
}

/* Shown only where the rail has dropped its step names — see Responsive. */
.jb-form-page .jb-rail__now {
    display: none;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--jb-muted);
}

@media (max-width: 640px) {
    .jb-form-page .jb-rail__now { display: block; }
}

/* Post a job: fields -------------------------------------------------------- */

.jb-form-page .gform_wrapper { margin: 0; }

.jb-form-page .gform_wrapper form .gform_body .gform_fields { gap: 24px; }

/* Label, then help text, then the input — whichever way the form stores its
   description placement. The theme lays each field out as a wrapping flex row
   with full-width children, which is kept; only the order changes. */
.jb-form-page .gform_wrapper form .gform_body .gform_fields .gfield .gfield_label {
    order: 1;
    flex: 1 1 100%;
    margin: 0 0 7px !important;
    padding: 0;
    font-family: var(--jb-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--jb-black);
}

.jb-form-page .gform_wrapper form .gform_body .gform_fields .gfield .gfield_description {
    order: 2;
    flex: 1 1 100%;
    margin: 0 0 7px;
    padding: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--jb-muted);
}

.jb-form-page .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container {
    order: 3;
    flex: 1 1 100%;
}

.jb-form-page .gform_wrapper form .gform_body .gform_fields .gfield .gfield_description.validation_message,
.jb-form-page .gform_wrapper form .gform_body .gform_fields .gfield .validation_message {
    order: 4;
    flex: 1 1 100%;
    margin: 7px 0 0;
    color: var(--jb-error);
    font-weight: 500;
    background: transparent;
    border: none;
}

.jb-form-page .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container input,
.jb-form-page .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container textarea,
.jb-form-page .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 13px 14px;
    border: 1px solid var(--jb-rule);
    border-radius: 0;
    background-color: var(--jb-field);
    font-family: var(--jb-font);
    font-size: 15px !important;
    line-height: 1.4 !important;
    font-weight: 400;
    color: var(--jb-black);
    outline: none;
    transition: all .2s ease-in-out;
}

/* The theme caps textareas at 100px, which clips a seven-row job description. */
.jb-form-page .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container_textarea textarea {
    height: auto;
    max-height: none;
    resize: vertical;
}

.jb-form-page .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container input:focus,
.jb-form-page .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container textarea:focus,
.jb-form-page .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container select:focus {
    border-color: var(--jb-black);
    background-color: #ffffff;
}

.jb-form-page .gform_wrapper form .gform_body .gform_fields .gfield_error .ginput_container input,
.jb-form-page .gform_wrapper form .gform_body .gform_fields .gfield_error .ginput_container textarea,
.jb-form-page .gform_wrapper form .gform_body .gform_fields .gfield_error .ginput_container select {
    border-color: var(--jb-error);
}

/* Step heading and intro line. These are a Gravity Forms section field — one at
   the top of each page — rather than markup of ours, so the copy stays in the
   form where the rest of it lives. The rail carries the step number now, so the
   counter and rule this used to draw are gone. */
.jb-form-page .gform_wrapper form .gform_body .gform_fields .gfield.gsection {
    display: block;
    border: none;
    margin: 0;
    padding: 0;
}

.jb-form-page .gform_wrapper form .gform_body .gform_fields .gsection_title {
    display: block;
    margin: 0 0 6px;
    padding: 0;
    border: none;
    font-family: var(--jb-font);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--jb-black);
}

/* 4px, not the design's 28px: the field stack's own 24px grid gap supplies the
   rest of the distance to the first field. */
.jb-form-page .gform_wrapper form .gform_body .gform_fields .gsection_description {
    display: block;
    margin: 0 0 4px;
    padding: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--jb-muted);
}

/* The closing line under step 5, as an HTML field. */
.jb-form-page .jb-form-note {
    margin: 0;
    max-width: 60ch;
    font-size: 14px;
    line-height: 1.55;
    color: var(--jb-muted);
}

/* File upload */
.jb-form-page .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container_fileupload {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    border: 1px dashed var(--jb-rule);
    background: var(--jb-field);
    padding: 16px;
}

/*
 * Chrome forces `overflow: clip` on a file input and will not let CSS say
 * otherwise, and the ::file-selector-button below is exactly as tall as the box
 * that clips it — so its 1px top border lands on the boundary and gets shaved.
 * The 1px of vertical padding here is what holds the button off that edge.
 */
.jb-form-page .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container_fileupload input[type="file"] {
    width: auto;
    height: auto;
    border: none;
    background: transparent;
    padding: 1px 0;
    font-size: 14px !important;
    color: var(--jb-muted);
}

.jb-form-page .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container_fileupload input[type="file"]::file-selector-button {
    background: #ffffff;
    border: 1px solid var(--jb-black);
    border-radius: 0;
    padding: 8px 16px;
    margin-right: 14px;
    font-family: var(--jb-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--jb-black);
    cursor: pointer;
}

.jb-form-page .gform_wrapper form .gform_body .gform_fields .gfield .gform_fileupload_rules {
    flex: 1 1 100%;
    margin: 0;
    font-size: 14px;
    color: var(--jb-muted);
}

/* Post a job: repeaters ----------------------------------------------------- */

/*
 * Responsibilities, Requirements and Benefits are Gravity Forms List fields. GF
 * renders a row as [ input ][ Add ][ Remove ] and repeats the pair on every row;
 * the design draws [ number ][ input ][ x ] with a single Add underneath. Both
 * are the same DOM — `display: contents` on GF's icon wrapper lets its two
 * buttons become grid items of the row, so the Add on the last row can drop to a
 * line of its own and the rest can be hidden. Nothing is moved with script, so
 * GF's own add/remove handlers keep working on the markup they expect.
 *
 * Row numbers are a CSS counter rather than markup, which is what renumbers them
 * after a delete without GF being involved.
 */

.jb-form-page .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container_list .gfield_list_groups {
    display: grid;
    gap: 8px;
    counter-reset: jb-row;
}

.jb-form-page .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container_list .gfield_list_group {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) 40px;
    align-items: center;
    gap: 8px;
    counter-increment: jb-row;
}

.jb-form-page .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container_list .gfield_list_group::before {
    content: counter(jb-row);
    font-size: 13px;
    line-height: 1;
    color: var(--jb-muted);
    text-align: right;
}

.jb-form-page .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container_list .gfield_list_group_item {
    min-width: 0;
    padding: 0;
}

.jb-form-page .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container_list .gfield_list_group_item input {
    padding: 12px 14px;
}

.jb-form-page .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container_list .gfield_list_icons {
    display: contents;
}

.jb-form-page .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container_list .delete_list_item {
    grid-column: 3;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 1px solid var(--jb-rule);
    border-radius: 0;
    background: #ffffff;
    color: var(--jb-muted);
    font-family: var(--jb-font);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: all .2s ease-in-out;
}

/*
 * Gravity Forms puts its own icon in a ::before on both buttons. Ours carry real
 * labels instead, but that pseudo-element is still there as an empty 20x20 flex
 * item — enough to push the glyph a clear 10px off centre. `display: none`
 * rather than `content: none`, because the theme sets the content through a
 * custom property and would win.
 */
.jb-form-page .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container_list .add_list_item::before,
.jb-form-page .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container_list .delete_list_item::before {
    display: none;
}

.jb-form-page .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container_list .delete_list_item:hover {
    border-color: var(--jb-error);
    color: var(--jb-error);
}

/* One Add button, under the rows: every row carries one, so all but the last
   row's are hidden. */
.jb-form-page .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container_list .gfield_list_group:not(:last-child) .add_list_item {
    display: none;
}

.jb-form-page .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container_list .add_list_item {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
    /* Gravity Forms' framework theme sizes both list buttons to a square icon
       (`--gf-field-list-btn-size`); this one is a labelled button, so it takes
       its size from its own padding and text instead. */
    width: auto;
    height: auto;
    margin: 2px 0 0;
    padding: 10px 18px;
    border: 1px solid var(--jb-black);
    border-radius: 0;
    background: transparent;
    color: var(--jb-black);
    font-family: var(--jb-font);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: all .2s ease-in-out;
}

.jb-form-page .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container_list .add_list_item:hover {
    background: var(--jb-black);
    color: #ffffff;
}

/* Post a job: footer bar ---------------------------------------------------- */

/*
 * Every page ends in the same bar: Back, Continue (or Submit on the last page),
 * the step counter, and the reviewer note pushed to the right. The buttons are
 * Gravity Forms'; the two lines of copy are appended to them by
 * Frontend::noteBesideNextButton() and noteBesideSubmitButton(), because the
 * button filters are the only seam GF offers into this markup.
 *
 * The theme centres the footer and marks its layout !important.
 */
.jb-form-page .gform_wrapper form .gform_page_footer,
.jb-form-page .gform_wrapper form .gform_footer {
    display: flex !important;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    margin: 44px 0 0 !important;
    border-top: 2px solid var(--jb-black);
    padding: 24px 0 0 !important;
}

/* button-default() marks each of these !important, so matching it is the only
   way to reach them. */
.jb-form-page .gform_wrapper form .gform_button,
.jb-form-page .gform_wrapper form .gform_next_button,
.jb-form-page .gform_wrapper form .gform_previous_button {
    display: inline-block !important;
    width: auto !important;
    border-radius: 0 !important;
    font-family: var(--jb-font) !important;
    letter-spacing: .02em !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    cursor: pointer !important;
    transition: all .2s ease-in-out !important;
}

.jb-form-page .gform_wrapper form .gform_button,
.jb-form-page .gform_wrapper form .gform_next_button {
    border: 1px solid var(--jb-gold) !important;
    background-color: var(--jb-gold) !important;
    color: var(--jb-black) !important;
    font-weight: 700 !important;
}

.jb-form-page .gform_wrapper form .gform_next_button {
    font-size: 15px !important;
    padding: 15px 30px !important;
}

.jb-form-page .gform_wrapper form .gform_button {
    font-size: 16px !important;
    padding: 15px 32px !important;
}

.jb-form-page .gform_wrapper form .gform_button:hover,
.jb-form-page .gform_wrapper form .gform_button:focus,
.jb-form-page .gform_wrapper form .gform_next_button:hover,
.jb-form-page .gform_wrapper form .gform_next_button:focus {
    background-color: var(--jb-black) !important;
    border-color: var(--jb-black) !important;
    color: var(--jb-gold) !important;
}

.jb-form-page .gform_wrapper form .gform_previous_button {
    border: 1px solid var(--jb-black) !important;
    background-color: transparent !important;
    color: var(--jb-black) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 15px 26px !important;
}

.jb-form-page .gform_wrapper form .gform_previous_button:hover,
.jb-form-page .gform_wrapper form .gform_previous_button:focus {
    background-color: var(--jb-black) !important;
    border-color: var(--jb-black) !important;
    color: #ffffff !important;
}

/* Appended to the last button in the bar by Frontend. */
.jb-form-page .gform_wrapper form .jb-step-count {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--jb-muted);
}

.jb-form-page .gform_wrapper form .jb-submit-note {
    margin: 0 0 0 auto;
    max-width: 44ch;
    font-size: 14px;
    line-height: 1.5;
    text-align: right;
    color: var(--jb-muted);
}

/* The summary is the first thing in the form, so it lands directly under the
   page lede. 28px is the rail's own top margin, which it displaces. */
.jb-form-page .gform_wrapper .gform_validation_errors {
    margin: 28px 0 0;
    border: 1px solid var(--jb-error);
    border-radius: 0;
    background: #ffffff;
    color: var(--jb-error);
    box-shadow: none;
}

/* Post a job: confirmation ------------------------------------------------- */

.jb-form-page .gform_confirmation_wrapper,
.jb-form-page .gform_confirmation_message { margin: 0; }

.jb-confirm__eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--jb-muted);
}

.jb-confirm__eyebrow img {
    width: 32px;
    height: auto;
}

.jb-confirm__title {
    margin: 0 0 16px;
    max-width: 24ch;
    font-family: var(--jb-font);
    font-size: 40px;
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: -0.02em;
    text-wrap: pretty;
}

.jb-confirm__lede {
    margin: 0 0 40px;
    max-width: 58ch;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.6;
    color: var(--jb-ink);
}

.jb-confirm__next {
    border-top: 2px solid var(--jb-black);
    padding-top: 28px;
}

.jb-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 20px;
    max-width: 60ch;
}

.jb-steps li {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 16px;
    align-items: start;
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
    counter-increment: jb-step;
}

.jb-steps { counter-reset: jb-step; }

.jb-steps li::before {
    content: counter(jb-step);
    width: 32px;
    height: 32px;
    background: var(--jb-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
}

.jb-confirm__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 36px;
}

.jb-confirm__actions .jb-btn { padding: 14px 26px; }

.jb-form-page--confirm .jb-shell { padding: 72px var(--jb-gutter) 88px; }

/* Accessibility ------------------------------------------------------------ */

/* !important for the same reason as the rail and the footer buttons: Gravity
   Forms rings its own focus in blue, and would otherwise put the one off-palette
   colour on the page onto whatever a keyboard user has selected. */
.jb-archive a:focus-visible,
.jb-archive button:focus-visible,
.jb-single a:focus-visible,
.jb-single button:focus-visible,
.jb-form-page a:focus-visible,
.jb-form-page button:focus-visible {
    outline: 2px solid var(--jb-black) !important;
    outline-offset: 3px !important;
}

.jb-archive .screen-reader-text,
.jb-single .screen-reader-text,
.jb-form-page .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

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

/* Five controls and a button no longer fit abreast: search takes the first row. */
@media (max-width: 1360px) {
    .jb-filters__field--search { flex: 1 1 100%; }
}

/* Dropdowns two abreast, the button beneath them. */
@media (max-width: 900px) {
    .jb-filters__field--select { flex: 1 1 calc(50% - 1px); }
    .jb-filters__submit { flex: 1 1 100%; }
}

@media (max-width: 1024px) {
    .jb-single__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    .jb-panel {
        position: static;
        order: -1;
    }
}

@media (max-width: 640px) {
    .jb-shell { padding: 40px var(--jb-gutter) 56px; }

    .jb-form-page .jb-shell { padding: 40px var(--jb-gutter) 56px; }
    .jb-form-page .gform_wrapper form .gform_body .gform_fields { gap: 20px; }
    .jb-single .jb-shell { padding-top: 28px; }

    /* The header stacks, so the note is no longer opposite anything. */
    .jb-form-head { gap: 16px; }
    .jb-form-page .jb-note { text-align: left; }

    /*
     * The rail keeps its numerals and drops the names, which will not fit five
     * across; the step being filled is named by .jb-rail__now instead.
     */
    .jb-form-page .jb-rail {
        gap: 10px;
        padding: 14px 0;
        margin: 24px 0 32px;
    }

    .jb-form-page .jb-rail__step {
        flex: 0 0 auto;
        padding: 0;
        border-right: none;
    }

    .jb-form-page button.jb-rail__step:hover { background: transparent; }

    .jb-form-page .jb-rail__name { display: none; }

    .jb-form-page .jb-rail__now {
        flex: 1 1 100%;
        order: 1;
    }

    /* Full-width buttons, then the two lines of copy under them. */
    .jb-form-page .gform_wrapper form .gform_page_footer,
    .jb-form-page .gform_wrapper form .gform_footer {
        gap: 12px;
        margin-top: 32px !important;
    }

    .jb-form-page .gform_wrapper form .gform_button,
    .jb-form-page .gform_wrapper form .gform_next_button,
    .jb-form-page .gform_wrapper form .gform_previous_button {
        width: 100% !important;
    }

    .jb-form-page .gform_wrapper form .jb-submit-note {
        margin-left: 0;
        max-width: none;
        text-align: left;
    }

    .jb-page-title,
    /* Beats .jb-form-page .jb-page-title, which sets the intake page's 40px. */
    .jb-form-page .jb-page-title { font-size: 30px; }
    .jb-single__title,
    .jb-confirm__title { font-size: 30px; }

    /* Stack the filter bar. */
    .jb-filters__field--select { flex: 1 1 100%; }

    .jb-row,
    .jb-row--no-pay { grid-template-columns: 64px minmax(0, 1fr); gap: 20px; }
    .jb-row--no-logo,
    .jb-row--no-logo.jb-row--no-pay { grid-template-columns: minmax(0, 1fr); }

    .jb-row__aside {
        grid-column: 1 / -1;
        text-align: left;
    }

    .jb-row__period { margin-bottom: 8px; }

    .jb-empty { padding: 28px 24px; }
}