/**
 * Job Board - Figma redesign layer
 * Board node 522:4844 ("Homepage Redesign").
 *
 * Loads LAST, after job-board-base/layout/cards/filters/mobile, and only on
 * template-main-jobs.php. Its job is to restyle the header and search bar,
 * which are currently spread across six stylesheets, without editing all six.
 *
 * Values normalized by the 1.008907 scale Figma reports that frame at
 * (63.4px -> 63px, 15.9px -> 16px, and so on).
 *
 * Scope note: everything here is nested under #job-board-wrapper so nothing
 * leaks into taxonomy archives or the course board, which share these classes.
 */

/* ========================================
   PAGE SHELL
   Figma: container 1486 wide with 20px side padding -> 1250 content column,
   which is also the filter row and card grid width.
   ======================================== */

/* ========================================
   SIGNUP ALERT CTA - hidden, not removed
   ----------------------------------------
   #gfi-signup-cta ships with an inline style="display:none" and is revealed by
   signup-alert.js. An !important rule outranks that inline style, so the card
   stays hidden without touching the markup or the script - the whole feature is
   still in place and re-enables by deleting this block.

   Scoped to #job-board-wrapper, and this file only loads on
   template-main-jobs.php, so the CTA still appears everywhere else it is used.
   ======================================== */

#job-board-wrapper #gfi-signup-cta,
#job-board-wrapper .gfi-signup-cta {
    display: none !important;
}

/* ========================================
   HEADER
   Spacing matched to production https://growthforimpact.co/jobs/ rather than to
   the Figma frame: Figma stacks 188px above the headline for a frame with no
   site nav, which is too much on the real page. Production's values are:
     .job-board-main-header  padding 120 20 30 20
     .discover-header h1     padding-top 50, margin 0 0 20
     .category-description   margin 10 auto 0
   The type scale and colours below stay from the Figma redesign.
   ======================================== */

#job-board-wrapper .job-board-main-header {
    background: #FFFFFF !important;
    min-height: 0 !important;
    padding: 120px 20px 30px 20px !important;
    margin: 0 !important;
}

/* ========================================
   HEADLINE
   Louize 700 63px/73px. "Sustainability" is a character-level colour override
   in Figma (#0F7A63 against #181818), reproduced with .h1-accent.
   ======================================== */

#job-board-wrapper .discover-header {
    max-width: 1250px !important;
    margin: 0 auto !important;
    text-align: center !important;
    padding: 0 !important;
}

#job-board-wrapper .discover-header h1 {
    font-family: 'Louize', serif !important;
    font-weight: 700 !important;
    font-size: clamp(34px, 4.4vw, 63px) !important;
    line-height: 1.16 !important;          /* 73 / 63 */
    letter-spacing: -0.01em !important;
    color: #181818 !important;
    /* Production: padding-top 50, margin-bottom 20 */
    margin: 0 0 20px !important;
    padding: 50px 0 0 !important;
    text-align: center !important;
    font-variant-numeric: lining-nums !important;
}

#job-board-wrapper .discover-header h1 .h1-accent {
    color: #0F7A63 !important;
}

#job-board-wrapper .discover-header .category-description {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 1.55 !important;          /* 24.8 / 16 */
    color: #555555 !important;
    max-width: 620px !important;
    margin: 10px auto 0 !important;
    padding: 0 !important;
    text-align: center !important;
}

/* ========================================
   SEARCH BAR
   Figma "Search" 700x62, fully rounded, 1px #DDDDDD, white. Two equal fields
   split by a 1px #EEEEEE rule, then a 52px circular #0F7A63 submit.
   ======================================== */

#job-board-wrapper .primary-filter-form {
    margin: 30px auto 0 !important;
    padding: 0 !important;
    max-width: 700px !important;
    width: 100% !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

#job-board-wrapper .primary-filter-inputs {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 700px !important;
    margin: 0 auto !important;
    background: #FFFFFF !important;
    border: 1px solid #DDDDDD !important;
    border-radius: 999px !important;
    padding: 5px 6px !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
}

#job-board-wrapper .primary-filter-inputs .filter-input-wrapper {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

/* 1px rule between the two fields (Figma: left border on the 2nd container) */
#job-board-wrapper .primary-filter-inputs .location-input {
    border-left: 1px solid #EEEEEE !important;
}

#job-board-wrapper .primary-filter-inputs .filter-input-wrapper input[type="text"] {
    width: 100% !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    color: #4D4D4D !important;
    height: 50px !important;
    padding: 0 15px 0 40px !important;   /* 40 leaves room for the leading icon */
    margin: 0 !important;
    border-radius: 0 !important;
}

#job-board-wrapper .primary-filter-inputs .filter-input-wrapper input::placeholder {
    color: #999999 !important;
    opacity: 1 !important;
}

/* Leading icons. Figma uses emoji here (a placeholder treatment); these are
   drawn from geometric primitives rather than invented glyphs. */
/* job-board-layout.css:272 already positions these with
   `transform: translateY(-50%)`. That rule still applies here, so centring must
   be done the same way - adding margin-top:-8px on top of it double-offsets the
   icon and lifts it 8px above the text. */
#job-board-wrapper .primary-filter-inputs .filter-input-wrapper::before {
    content: "" !important;
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-top: 0 !important;
    width: 16px !important;
    height: 16px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    pointer-events: none !important;
    opacity: 0.85 !important;
}

#job-board-wrapper .primary-filter-inputs .keyword-input::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23888888' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.8'/%3E%3Cpath d='M10.6 10.6 L14 14'/%3E%3C/svg%3E") !important;
}

#job-board-wrapper .primary-filter-inputs .location-input::before {
    left: 18px !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23C94A4A'%3E%3Cpath d='M8 1.2c-2.5 0-4.5 2-4.5 4.5 0 3.3 4.5 9.1 4.5 9.1s4.5-5.8 4.5-9.1c0-2.5-2-4.5-4.5-4.5zm0 6.3a1.8 1.8 0 1 1 0-3.6 1.8 1.8 0 0 1 0 3.6z'/%3E%3C/svg%3E") !important;
}

/* Circular submit */
#job-board-wrapper .primary-filter-inputs .primary-search-button {
    flex: 0 0 auto !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #0F7A63 !important;
    color: #FFFFFF !important;
    font-size: 0 !important;             /* hides the "Search" text label */
    line-height: 0 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='8.6' cy='8.6' r='5.6'/%3E%3Cpath d='M12.9 12.9 L17 17'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 20px 20px !important;
    transition: background-color 0.18s ease !important;
}

#job-board-wrapper .primary-filter-inputs .primary-search-button:hover {
    background-color: #0B6151 !important;
}

/* ========================================
   MOBILE
   Below 700px the pill stacks: the location field and its divider drop away,
   matching the existing mobile behaviour of this form.
   ======================================== */

@media (max-width: 782px) {
    #job-board-wrapper .job-board-main-header {
        padding: 40px 16px 24px !important;
    }

    #job-board-wrapper .primary-filter-inputs {
        padding: 4px 5px !important;
    }

    #job-board-wrapper .primary-filter-inputs .filter-input-wrapper input[type="text"] {
        height: 44px !important;
        font-size: 14px !important;
    }

    #job-board-wrapper .primary-filter-inputs .primary-search-button {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        background-size: 17px 17px !important;
    }
}

/* ============================================================================
   FILTER BAR  (Figma 522:4867 "DrbHorizontalOverflowArrows", 1250x36)
   ----------------------------------------------------------------------------
   The sidebar <aside> now sits above the listings. Its form is unchanged; this
   turns each .job-filter-widget into a pill + dropdown panel. job-filter-bar.js
   inserts the .gfi-pill buttons and .gfi-pill-panel wrappers.

   Measured: pill h35, radius 8, border #DBDADE, white, pad 0/14, gap 8, label
   12px #0D0C22. Chips: radius 8, #E0F4F0, pad 6/8/6/12, label 14px #4A4459.
   Figma sets those labels in Mona Sans / Roboto; per an earlier decision those
   are treated as Figma defaults and rendered in Inter.
   ========================================================================== */

#job-board-wrapper .job-board-sidebar--bar {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    position: static !important;
    float: none !important;
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 auto 20px !important;
    box-shadow: none !important;
}

#job-board-wrapper .job-board-sidebar--bar .sidebar-filters-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    max-width: 1250px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

#job-board-wrapper .job-board-sidebar--bar .advanced-filter-form {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
}

/* Hidden once JS has built the pills. Without JS this class never lands, so
   the fallback is the plain stacked filter form - still fully usable. */
#job-board-wrapper .job-board-sidebar--bar .gfi-pill-hidden {
    display: none !important;
}

#job-board-wrapper .job-board-sidebar--bar .gfi-pill-widget {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    width: auto !important;
    flex: 0 0 auto !important;
}

/* ---- circular "Open filter options" button (Figma 522:4868, 35x35 r17.5) ---- */
#job-board-wrapper .gfi-filter-opener {
    flex: 0 0 auto !important;
    width: 35px !important;
    height: 35px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #FFFFFF !important;
    border: 1px solid #DBDADE !important;
    border-radius: 50% !important;
    color: #3D3D4E !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, background-color 0.15s ease !important;
}

#job-board-wrapper .gfi-filter-opener:hover {
    border-color: #0F7A63 !important;
    background: #F1F8F4 !important;
}

#job-board-wrapper .gfi-filter-opener svg {
    display: block !important;
}

/* ---- the pill ---- */
#job-board-wrapper .gfi-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    height: 35px !important;
    padding: 0 14px !important;
    background: #FFFFFF !important;
    border: 1px solid #DBDADE !important;
    border-radius: 8px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    color: #0D0C22 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, background-color 0.15s ease !important;
}

#job-board-wrapper .gfi-pill:hover {
    border-color: #B9B7C0 !important;
}

#job-board-wrapper .gfi-pill-widget.is-open .gfi-pill {
    border-color: #0F7A63 !important;
    background: #F1F8F4 !important;
}

#job-board-wrapper .gfi-pill-chevron {
    flex: 0 0 auto !important;
    transition: transform 0.15s ease !important;
}

#job-board-wrapper .gfi-pill-widget.is-open .gfi-pill-chevron {
    transform: rotate(180deg) !important;
}

/* ---- the dropdown panel ---- */
#job-board-wrapper .gfi-pill-panel {
    display: none !important;
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    z-index: 60 !important;
    min-width: 260px !important;
    max-width: 340px !important;
    max-height: 340px !important;
    overflow-y: auto !important;
    background: #FFFFFF !important;
    border: 1px solid #DBDADE !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10) !important;
    padding: 12px !important;
    text-align: left !important;
}

#job-board-wrapper .gfi-pill-widget.is-open .gfi-pill-panel {
    display: block !important;
}

/* Keep the trailing pills' panels inside the viewport */
#job-board-wrapper .gfi-pill-widget:nth-last-child(-n+2) .gfi-pill-panel {
    left: auto !important;
    right: 0 !important;
}

#job-board-wrapper .gfi-pill-panel .job-filter-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#job-board-wrapper .gfi-pill-panel .job-filter-list li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

#job-board-wrapper .gfi-pill-panel .job-filter-list label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 7px 6px !important;
    border-radius: 6px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #333333 !important;
    cursor: pointer !important;
}

#job-board-wrapper .gfi-pill-panel .job-filter-list label:hover {
    background: #F5F7F6 !important;
}

#job-board-wrapper .gfi-pill-panel input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    accent-color: #0F7A63 !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
}

/* The Categories widget has its own nested dropdown; inside a panel it should
   render inline rather than as a second popover. */
#job-board-wrapper .gfi-pill-panel .category-dropdown-menu {
    display: block !important;
    position: static !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-height: none !important;
}

#job-board-wrapper .gfi-pill-panel .category-search-input,
#job-board-wrapper .gfi-pill-panel .dropdown-arrow {
    display: none !important;
}

#job-board-wrapper .gfi-pill-panel .category-filter-input {
    width: 100% !important;
    box-sizing: border-box !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    padding: 8px 10px !important;
    border: 1px solid #DBDADE !important;
    border-radius: 8px !important;
    margin: 0 0 8px !important;
    outline: none !important;
}

#job-board-wrapper .gfi-pill-panel .category-option {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 7px 6px !important;
    border-radius: 6px !important;
}

#job-board-wrapper .gfi-pill-panel .category-option:hover {
    background: #F5F7F6 !important;
}

#job-board-wrapper .gfi-pill-panel .category-option label {
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    color: #333333 !important;
    cursor: pointer !important;
    margin: 0 !important;
}

/* ---- active filter chips (Figma "Input chip", 32 tall) ---- */
#job-board-wrapper .gfi-filter-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
}

#job-board-wrapper .gfi-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 32px !important;
    padding: 6px 8px 6px 12px !important;
    background: #E0F4F0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    color: #4A4459 !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

#job-board-wrapper .gfi-chip:hover {
    background: #CDEBE4 !important;
}

#job-board-wrapper .gfi-chip-x {
    flex: 0 0 auto !important;
    opacity: 0.75 !important;
}

/* ============================================================================
   FILTER CARD  (Figma 475:3651 "Sidebar", 428x1073)
   ----------------------------------------------------------------------------
   The filter card the board's "Open filter options" button raises. Measured
   from that node: white card, radius 12, 0.8px #E0F4F0 border, 24px/50px
   padding; section headings Louize 700 22px/1.25 #181818 (Employment Type
   24px/1.3, -0.48px tracking); option labels Inter 400 16px/1.45 #666666 on a
   12px gap; text inputs 52 tall at radius 25 with a 0.8px #999999 border.

   Restyles the existing modal only - no control is added, removed or renamed,
   so every field name still reaches the same handlers.

   Two deliberate departures from the node, both because it mocks sample data
   rather than the real taxonomy: the Sustainability Sector heading is kept
   (the design drops it, but the real list runs to a dozen terms), and the
   Apply/Clear footer is kept (the node has no footer, and removing the apply
   control would break the modal).

   Still absent, as before: On-Site / Hybrid workplace options, which have no
   backend - job_listing_location has no on-site/hybrid terms - and would be
   dead controls.
   ========================================================================== */

/* job-board-modals.css pins the panel to the bottom of the screen as a sheet.
   The design is a free-floating card rounded on all four corners, so it has to
   be centred or the bottom radius and border sit off-screen. */
.filter-modal-overlay,
.sidebar-filter-modal {
    align-items: center !important;
    padding: 20px !important;
}

/* Figma: 428 wide card, radius 12, 0.8px #E0F4F0 hairline. */
.filter-modal-overlay .filter-modal {
    border-radius: 12px !important;
    width: 100% !important;
    max-width: 428px !important;
    margin: 0 auto !important;
    border: 0.8px solid #E0F4F0 !important;
    background: #FFFFFF !important;
}

/* Section order, per the design: Categories, Location, Sustainability Sector,
   Employment Type, Workplace Preference, Experience/Salary. Done with flex
   `order` so the PHP emit order - and therefore the form field order - is
   untouched. */
.filter-modal-overlay .sidebar-modal-form {
    display: flex !important;
    flex-direction: column !important;
}

.filter-modal-overlay .modal-filter-item { order: 9 !important; }
.filter-modal-overlay .mf-categories     { order: 1 !important; }
.filter-modal-overlay .mf-location       { order: 2 !important; }
.filter-modal-overlay .mf-sector         { order: 3 !important; }
.filter-modal-overlay .mf-type           { order: 4 !important; }
.filter-modal-overlay .mf-workplace      { order: 5 !important; }
.filter-modal-overlay .mf-ranges         { order: 6 !important; }

/* ---- Experience / Salary ranges (Figma 475:3713 / 475:3723) ----
   The card stacks them full width, 19px apart - not the two-column pair the
   earlier panel used. Inputs 36 tall at radius 6 with a #D1D5DB hairline;
   track 4px at radius 2, #E0E0E0 unfilled with a #4ECCA3 13px thumb.

   Figma puts the heading 1px above its input, which is a frame-rounding
   artifact rather than a spacing decision; these keep the card's own 12px
   heading gap so Experience and Salary read like every other section. */
.filter-modal-overlay .gfi-range-pair {
    display: flex !important;
    flex-direction: column !important;
    gap: 19px !important;
}

.filter-modal-overlay .gfi-range-group > .widget-title {
    margin: 0 0 12px !important;
}

.filter-modal-overlay .gfi-range-head {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 16px !important;
}

.filter-modal-overlay .gfi-range-box {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    height: 36px !important;
    padding: 0 8px !important;
    border: 1px solid #D1D5DB !important;
    border-radius: 6px !important;
    background: #FFFFFF !important;
    min-width: 0 !important;
    flex: 1 1 0 !important;
}

.filter-modal-overlay .gfi-range-num {
    width: 100% !important;
    min-width: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    color: #6B7280 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    -moz-appearance: textfield !important;
}

/* Spin buttons crowd a 36px box that already has a unit label. */
.filter-modal-overlay .gfi-range-num::-webkit-outer-spin-button,
.filter-modal-overlay .gfi-range-num::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.filter-modal-overlay .gfi-range-unit,
.filter-modal-overlay .gfi-range-prefix {
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #9CA3AF !important;
    flex: 0 0 auto !important;
}

.filter-modal-overlay .gfi-range-dash {
    color: #9CA3AF !important;
    flex: 0 0 auto !important;
}

.filter-modal-overlay .gfi-range-slider {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 100% !important;
    height: 4px !important;
    border-radius: 2px !important;
    background: #E0E0E0 !important;
    outline: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.filter-modal-overlay .gfi-range-slider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 13px !important;
    height: 13px !important;
    border-radius: 50% !important;
    background: #4ECCA3 !important;
    border: 0 !important;
    cursor: pointer !important;
}

.filter-modal-overlay .gfi-range-slider::-moz-range-thumb {
    width: 13px !important;
    height: 13px !important;
    border-radius: 50% !important;
    background: #4ECCA3 !important;
    border: 0 !important;
    cursor: pointer !important;
}

/* The card's 50px gutters are measured on a 428px frame. Below that they eat
   most of the width, so narrow phones fall back to 20px. */
@media (max-width: 460px) {
    .filter-modal-overlay .filter-modal-header {
        padding: 20px 20px 0 !important;
    }

    .filter-modal-overlay .filter-modal-content {
        padding: 20px !important;
    }
}

/* The design has no keyword field in the modal - search lives in the header
   bar. Hidden rather than removed so the input still submits its current
   value and a keyword survives an Apply. */
.filter-modal-overlay .modal-filter-item:has(> .modal-search-input) {
    display: none !important;
}

/* "Filters" heading - Figma 475:3659: Louize 700 22px/27.5 #181818, centred in
   the card. The node has no rule under it, so the theme's divider goes. The
   theme lays this header out with flex, which pins the heading left and makes
   text-align a no-op - so the display mode has to be overridden too. */
.filter-modal-overlay .filter-modal-header {
    display: block !important;
    border-bottom: 0 !important;
    padding: 24px 50px 0 !important;
    position: relative !important;
    text-align: center !important;
}

.filter-modal-overlay .filter-modal-header h3 {
    font-family: 'Louize', serif !important;
    font-weight: 700 !important;
    font-size: 22px !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    color: #181818 !important;
    margin: 0 !important;
    text-align: center !important;
}

.filter-modal-overlay .filter-modal-close {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
}

/* Figma: card padding 24/50. The header owns the 24 top, so the content column
   carries the 50px gutters and the sections space themselves. */
.filter-modal-overlay .filter-modal-content {
    padding: 24px 50px !important;
}

/* Section headings - Figma 475:3662/3671/3702/3715/3725: Louize 700 22px/27.5
   #181818. Employment Type (475:3689) is the one outlier at 24px/31.2 with
   -0.48px tracking; it is set separately below.

   Descendant, not direct-child: the Experience and Salary labels sit inside
   .gfi-range-pair > .gfi-range-group, so a `>` selector skipped them entirely
   and they fell back to the theme's default heading font. */
.filter-modal-overlay .modal-filter-item .widget-title {
    font-family: 'Louize', serif !important;
    font-weight: 700 !important;
    font-size: 22px !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    font-variant-numeric: lining-nums;
    font-feature-settings: "lnum" 1, "onum" 0;
    color: #181818 !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
}

.filter-modal-overlay .mf-type > .widget-title {
    font-size: 24px !important;
    line-height: 1.3 !important;
    letter-spacing: -0.48px !important;
}

/* Lists sit 14px below their heading (Figma "List" frames, 14px top padding);
   the two dropdowns sit 12px below theirs ("Container:margin"). */
.filter-modal-overlay .mf-sector > .widget-title,
.filter-modal-overlay .mf-type > .widget-title,
.filter-modal-overlay .mf-workplace > .widget-title {
    margin-bottom: 14px !important;
}

/* Figma stacks the sections 28px apart with no dividers. */
.filter-modal-overlay .modal-filter-item {
    padding: 0 0 28px !important;
    border-bottom: 0 !important;
    margin: 0 !important;
}

.filter-modal-overlay .modal-filter-item:last-of-type {
    padding-bottom: 0 !important;
}

/* Figma 475:3690/475:3703: one option per row, 8px apart - not the previous
   three-across grid. */
.filter-modal-overlay .modal-filter-item .job-filter-list.checkbox-style-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.filter-modal-overlay .modal-filter-item .job-filter-list li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    min-width: 0 !important;
}

/* Figma 475:3691: Label rows, 12px gap, Inter 400 16px/23.2 #666666 */
.filter-modal-overlay .modal-filter-item .job-filter-list label {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
    color: #666666 !important;
    cursor: pointer !important;
    margin: 0 !important;
}

/* Figma 475:3692: 20x20 box, radius 4, white, 1.6px #CCCCCC. accent-color is
   a no-op here because job-board-filters.css already sets appearance:none on
   these boxes, so the border and the checked fill are painted explicitly. */
.filter-modal-overlay .modal-filter-item input[type="checkbox"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    border-radius: 4px !important;
    border: 1.6px solid #CCCCCC !important;
    background-color: #FFFFFF !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 14px 14px !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    cursor: pointer !important;
    transition: border-color 0.15s ease, background-color 0.15s ease !important;
}

.filter-modal-overlay .modal-filter-item input[type="checkbox"]:checked {
    border-color: #4ECCA3 !important;
    background-color: #4ECCA3 !important;
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e") !important;
}

.filter-modal-overlay .modal-filter-item input[type="checkbox"]:focus-visible {
    outline: 2px solid #0F7A63 !important;
    outline-offset: 2px !important;
}

/* Sustainability Sector - Figma 475:3682 / 475:3685. A real 20x20 checkbox
   followed by the shared Badge component: #F1F8F4 pill at radius 16, padding
   2/10/2/8, 4px gap, 12x12 leaf in #4ECCA3, label Inter 500 14px/20 #027A48.
   Same pill as the job card's sector tag, one size up.

   The checkbox carries the state here, so unlike the previous chip grid it
   stays visible; the pill only tints to echo it. */
.filter-modal-overlay .modal-filter-item.sector-badges .job-filter-list.checkbox-style-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 11px !important;
}

.filter-modal-overlay .modal-filter-item.sector-badges label {
    align-items: center !important;
}

.filter-modal-overlay .gfi-sector-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 2px 10px 2px 8px !important;
    border-radius: 16px !important;
    background: #F1F8F4 !important;
    color: #027A48 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.43 !important;
    letter-spacing: 0 !important;
    transition: background-color 0.15s ease !important;
}

.filter-modal-overlay .gfi-sector-badge-leaf {
    color: #4ECCA3 !important;
    flex: 0 0 auto !important;
    display: block !important;
}

.filter-modal-overlay .modal-filter-item.sector-badges label:has(input:checked) .gfi-sector-badge {
    background: #E0F4F0 !important;
}

/* Footer - Apply centred as a 213x50 pill, per the design. "Clear All" is kept
   (the design omits it, but losing a reset control is a usability regression)
   and demoted to a quiet link on the left. */
.filter-modal-overlay .filter-modal-footer {
    border-top: 1px solid #EEEEEE !important;
    padding: 18px 20px !important;
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    gap: 12px !important;
}

.filter-modal-overlay .filter-modal-apply {
    grid-column: 2 !important;
    min-width: 213px !important;
    height: 50px !important;
    background: #0F7A63 !important;
    color: #FFFFFF !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    padding: 0 40px !important;
    cursor: pointer !important;
}

.filter-modal-overlay .filter-modal-apply:hover {
    background: #0B6151 !important;
}

/* job-board-modals.css:140 styles this as a full grey button - flex:1,
   padding 14/20, radius 8, weight 600, background #f0f0f0. Every one of those
   has to be undone or the pill survives underneath. Both class names are
   listed because the element carries filter-modal-clear AND sidebar-modal-clear,
   and that file is enqueued with media="print" then swapped, so it can land
   after this stylesheet in the cascade. */
.filter-modal-overlay .filter-modal-footer .filter-modal-clear,
.filter-modal-overlay .filter-modal-footer .sidebar-modal-clear {
    grid-column: 1 !important;
    justify-self: start !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-decoration: none !important;
    color: #999999 !important;
    cursor: pointer !important;
    transition: color 0.15s ease !important;
}

/* Underline only on interaction - a permanent one read as a broken control. */
.filter-modal-overlay .filter-modal-footer .filter-modal-clear:hover,
.filter-modal-overlay .filter-modal-footer .sidebar-modal-clear:hover,
.filter-modal-overlay .filter-modal-footer .filter-modal-clear:focus-visible,
.filter-modal-overlay .filter-modal-footer .sidebar-modal-clear:focus-visible {
    color: #0F7A63 !important;
    text-decoration: underline !important;
    background-color: transparent !important;
}

/* Close button: a plain round control, not the stray glyph that was rendering
   from a corrupted character in the template. */
.filter-modal-overlay .filter-modal-close {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    border: 1px solid #DBDADE !important;
    background: #FFFFFF !important;
    color: #666666 !important;
    font-size: 20px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
}

.filter-modal-overlay .filter-modal-close:hover {
    border-color: #0F7A63 !important;
    color: #0F7A63 !important;
}

/* ============================================================================
   FULL-WIDTH LISTINGS
   With the sidebar gone the grid spans the 1250px content column. Figma: grid
   1246 wide with 401px cards, so ~22px gutters.
   ========================================================================== */

/* Figma: jobs grid 1246 wide = 3 x 401 cards + 2 x 22 gutters. With 20px side
   padding the wrapper must be 1287 for the cards to land on 401 - a 1250
   wrapper yields 388.7 and silently shrinks every card. */
#job-board-wrapper .job-board-layout-container--full {
    display: block !important;
    grid-template-columns: none !important;
    max-width: 1287px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    gap: 0 !important;
}

#job-board-wrapper .job-board-layout-container--full .job-board-content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: none !important;
}

#job-board-wrapper .job-board-layout-container--full ul.job_listings {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 22px !important;
    /* See job-board-layout.css: cards hug their content rather than stretching
       to the tallest card in the row. Restated here because this rule is the
       one that wins on the full-width board. */
    align-items: start !important;
}

@media (max-width: 1100px) {
    #job-board-wrapper .job-board-layout-container--full ul.job_listings {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 700px) {
    #job-board-wrapper .job-board-layout-container--full ul.job_listings {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    #job-board-wrapper .job-board-sidebar--bar .sidebar-filters-container,
    #job-board-wrapper .job-board-layout-container--full {
        padding: 0 16px !important;
    }
}

/* Categories and Location select boxes - Figma 475:3665 / 475:3674: 52 tall,
   radius 25, 0.8px #999999 hairline, 15px gutters, value Inter 400 16px/22.4,
   placeholder #999999, caret #666666 at 13px 15px in from the right.

   No `color` is declared: the template writes #999 or #333 inline depending on
   whether anything is selected, and an !important here would freeze the
   selected state at placeholder grey. */
.filter-modal-overlay .mf-categories .category-search-input,
.filter-modal-overlay .mf-location .location-search-input {
    width: 100% !important;
    box-sizing: border-box !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 34px 0 15px !important;
    border: 0.8px solid #999999 !important;
    border-radius: 25px !important;
    background: #FFFFFF !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

.filter-modal-overlay .mf-location .location-search-input {
    padding-right: 15px !important;
    color: #333333 !important;
}

.filter-modal-overlay .mf-categories .category-search-input::placeholder,
.filter-modal-overlay .mf-location .location-search-input::placeholder {
    color: #999999 !important;
    opacity: 1 !important;
}

.filter-modal-overlay .mf-categories .category-search-input:focus,
.filter-modal-overlay .mf-location .location-search-input:focus {
    border-color: #4ECCA3 !important;
}

.filter-modal-overlay .mf-location .location-input-wrapper {
    position: relative !important;
    width: 100% !important;
}

.filter-modal-overlay .mf-categories .dropdown-arrow {
    right: 15px !important;
    font-size: 13px !important;
    color: #666666 !important;
}

/* Breadcrumb row on taxonomy archives - previously lived inside the sidebar
   column, which the pill-bar layout removes. */
#job-board-wrapper .job-board-breadcrumb-row {
    max-width: 1287px !important;
    margin: 0 auto !important;
    padding: 0 20px 12px !important;
}

#job-board-wrapper .job-board-breadcrumb-row .sidebar-breadcrumb {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    color: #666666 !important;
    text-decoration: none !important;
}

#job-board-wrapper .job-board-breadcrumb-row .sidebar-breadcrumb:hover {
    color: #0F7A63 !important;
}