/*
==========================================================================
BLUEPRINT — JOBS
==========================================================================
*/

/*
--------------------------------------------------------------------------
SEARCH BAR
--------------------------------------------------------------------------
*/

.rw-job-search-bar {
    display:       var( --rw-job-search-display, block );
    background:    var( --rw-job-search-bg, transparent ) !important;
    border-radius: var( --rw-job-search-radius, 8px ) !important;
    padding:       var( --rw-job-search-padding, 25px ) !important;
    max-width:     var( --rw-job-search-max-width, 100% );
    width:         100%;
    margin:        0 auto;
    box-sizing:    border-box;
}



/* Reset theme styles on job_filters form — our wrapper handles the visuals */
.job_filters {
    background:    transparent !important;
    border-radius: 0 !important;
    padding:       0 !important;
    margin:        0 !important;
    max-width:     none !important;
    box-shadow:    none !important;
}

/* Reset WP Job Manager float grid — use our own flex */
.job_filters .search_jobs {
    display:   flex !important;
    flex-wrap: wrap !important;
    gap:       10px;
    padding:   0;
}

.job_filters .search_jobs::before,
.job_filters .search_jobs::after {
    display: none !important;
}

/* Reset WP Job Manager float widths */
.job_filters .search_jobs div.search_keywords,
.job_filters .search_jobs div.search_location,
.job_filters .search_jobs div.search_categories,
.job_filters .search_jobs div.filter_first,
.job_filters .search_jobs div.filter_last,
.job_filters .search_jobs div.filter_wide {
    float:   none !important;
    padding: 0 !important;
    width:   100% !important;
}

/* Filter wrap — order and width controlled by CSS vars */
.rw-filter-wrap--keywords {
    order:     var( --rw-job-filter-kw-order, 1 );
    width:     var( --rw-job-filter-kw-width, calc(33.333% - 7px) ) !important;
    flex:      0 0 var( --rw-job-filter-kw-width, calc(33.333% - 7px) ) !important;
    min-width: 0;
}

.rw-filter-wrap--categories {
    order:     var( --rw-job-filter-cat-order, 2 );
    width:     var( --rw-job-filter-cat-width, calc(33.333% - 7px) ) !important;
    flex:      0 0 var( --rw-job-filter-cat-width, calc(33.333% - 7px) ) !important;
    min-width: 0;
}

.rw-filter-wrap--location {
    order:     var( --rw-job-filter-loc-order, 3 );
    width:     var( --rw-job-filter-loc-width, calc(33.333% - 7px) ) !important;
    flex:      0 0 var( --rw-job-filter-loc-width, calc(33.333% - 7px) ) !important;
    min-width: 0;
}

.rw-filter-wrap--salary {
    order:     var( --rw-job-filter-salary-order, 4 );
    width:     var( --rw-job-filter-salary-width, calc(33.333% - 7px) ) !important;
    flex:      0 0 var( --rw-job-filter-salary-width, calc(33.333% - 7px) ) !important;
    min-width: 0;
    display:   flex;
    flex-wrap: wrap;
    gap:       10px;
}

/* Range input — min and max sit side by side within the salary wrap */
.rw-filter-wrap--salary .search_salary {
    flex:      1 1 calc(50% - 5px);
    min-width: 0;
}

/* Preset — full width select */
.rw-filter-wrap--salary .search_salary--preset {
    flex: 0 0 100%;
}

/* Label for max input when range mode is active */
.rw-filter-wrap--salary .rw-job-search-label--max {
    flex: 0 0 100%;
}

/* Salary number inputs — mirror shared input styles */
.rw-filter-wrap--salary .search_salary input[type="number"],
.rw-filter-wrap--salary .search_salary select {
    width:          100%;
    height:         var( --rw-job-search-input-height, 50px );
    border-radius:  var( --rw-job-search-input-radius, 6px );
    border-width:   var( --rw-job-search-input-border-width, 0px );
    border-style:   solid;
    border-color:   var( --rw-job-input-border, transparent );
    background:     var( --rw-job-input-bg, #ffffff );
    color:          var( --rw-job-input-text, inherit );
    font-size:      var( --rw-job-input-font-size, inherit );
    font-weight:    var( --rw-job-input-weight, 400 );
    text-transform: var( --rw-job-input-transform, none );
    box-sizing:     border-box;
    padding:        0 12px;
    appearance:     none;
    -webkit-appearance: none;
}

.rw-filter-wrap--salary .search_salary input[type="number"]::placeholder {
    color: var( --rw-job-input-placeholder, inherit );
}

.rw-filter-wrap--salary .search_salary input[type="number"]:focus,
.rw-filter-wrap--salary .search_salary select:focus {
    background:   var( --rw-job-input-focus-bg, #ffffff );
    border-color: var( --rw-job-input-focus-border, transparent );
    outline:      none;
}

/* Hide number input spinners */
.rw-filter-wrap--salary input[type="number"]::-webkit-inner-spin-button,
.rw-filter-wrap--salary input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.rw-filter-wrap--salary input[type="number"] {
    -moz-appearance: textfield;
}

/* Hide WP Job Manager built-in labels — we use our own */
.job_filters .search_jobs div label {
    display: none;
}

/* Master label styles — applies to all filter labels */
.job_filters .rw-job-search-label {
    display:        block;
    margin-bottom:  6px;
    color:          var( --rw-job-label-color, inherit );
    font-weight:    var( --rw-job-label-weight, 400 );
    font-size:      var( --rw-job-label-font-size, inherit );
    text-transform: var( --rw-job-label-transform, none );
}

/* Shared input height + radius + border */
.job_filters .search_keywords input,
.job_filters .search_location input {
    width:         100%;
    height:        var( --rw-job-search-input-height, 50px );
    border-radius: var( --rw-job-search-input-radius, 6px );
    border-width:  var( --rw-job-search-input-border-width, 0px );
    border-style:  solid;
    box-sizing:    border-box;
}

/* Keywords input colors */
.job_filters .search_keywords input {
    background:  var( --rw-job-input-bg, #ffffff );
    color:       var( --rw-job-input-text, inherit );
    border-color: var( --rw-job-input-border, transparent );
    font-size:   var( --rw-job-input-font-size, inherit );
    font-weight: var( --rw-job-input-weight, 400 );
    text-transform: var( --rw-job-input-transform, none );
    letter-spacing: var( --rw-job-kw-letter-spacing, normal );
}

.job_filters .search_keywords input::placeholder {
    color: var( --rw-job-input-placeholder, inherit );
}

.job_filters .search_keywords input:focus {
    background:   var( --rw-job-input-focus-bg, #ffffff );
    border-color: var( --rw-job-input-focus-border, transparent );
    outline: none;
}

/* Location input colors */
.job_filters .search_location input {
    background:  var( --rw-job-input-bg, #ffffff );
    color:       var( --rw-job-input-text, inherit );
    border-color: var( --rw-job-input-border, transparent );
    font-size:   var( --rw-job-input-font-size, inherit );
    font-weight: var( --rw-job-input-weight, 400 );
    text-transform: var( --rw-job-input-transform, none );
    letter-spacing: var( --rw-job-loc-filter-letter-spacing, normal );
}

.job_filters .search_location input::placeholder {
    color: var( --rw-job-input-placeholder, inherit );
}

.job_filters .search_location input:focus {
    background:   var( --rw-job-input-focus-bg, #ffffff );
    border-color: var( --rw-job-input-focus-border, transparent );
    outline: none;
}

/* Select2 — Categories dropdown */
.job_filters .search_categories .select2-container,
.job_filters .search_categories span.select2 {
    width: 100% !important;
    height: var( --rw-job-search-input-height, 50px );
}

.job_filters .search_categories .select2-selection--single {
    height:        var( --rw-job-search-input-height, 50px );
    border-radius: var( --rw-job-search-input-radius, 6px ) !important;
    border-width:  var( --rw-job-search-input-border-width, 0px );
    border-style:  solid;
    border-color:  var( --rw-job-input-border, transparent );
    background:    var( --rw-job-input-bg, #ffffff );
}

.job_filters .search_categories .select2-selection--single .select2-selection__rendered {
    line-height:    var( --rw-job-search-input-height, 50px );
    color:          var( --rw-job-input-text, inherit );
    font-size:      var( --rw-job-input-font-size, inherit );
    font-weight:    var( --rw-job-input-weight, 400 );
    text-transform: var( --rw-job-input-transform, none );
}

.job_filters .search_categories .select2-selection--single .select2-selection__placeholder {
    color: var( --rw-job-input-placeholder, inherit );
}

.job_filters .search_categories .select2-selection--single .select2-selection__arrow {
    height: var( --rw-job-search-input-height, 50px );
}

/* Job Types — flush below search bar, matching width */
/* Job Types wrap — empty div, just for structure */
.rw-job-types-wrap {
    display: none;
}

/* ul.job_types — WP Job Manager outputs this directly in the form */
ul.job_types {
    display:    var( --rw-job-types-display, none );
    list-style: none;
    padding:    8px 0 0 0;
    margin:     0 auto 0 auto !important;
    max-width:  var( --rw-job-search-max-width, 100% );
    width:      100%;
    box-sizing: border-box;
    flex-wrap:  wrap;
    gap:        8px 16px;
}

ul.job_types li {
    display:     inline-flex;
    align-items: center;
    gap:         6px;
}

/* Search spacer — always present, controls gap below search area to cards */
.rw-job-search-spacer {
    margin-bottom: var( --rw-job-search-margin-bottom, 20px );
}

/* Hide WP Job Manager "showing X jobs" count */
.job_filters .showing_jobs {
    display: none !important;
}


/*
--------------------------------------------------------------------------
JOB LISTINGS — LIST WRAPPER
--------------------------------------------------------------------------
*/

ul.job_listings {
    display: grid;
    grid-template-columns: var( --rw-job-grid-template, 1fr );
    gap: var( --rw-job-card-gap, 20px );
    border-top: none;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Reset WP Job Manager li styles */
ul.job_listings li {
    padding: 0;
    margin: 0;
    border: none;
}


/*
==========================================================================
JOB CARD — SHARED BASE
Applies to both stack and grid
==========================================================================
*/

ul.job_listings .rw-job-card {
    display:         block;
    position:        relative;
    z-index:         0;
    overflow:        hidden;
    text-decoration: none;
    background:      var( --rw-job-card-bg, transparent );
    border-radius:   var( --rw-job-card-radius, 12px );
    padding:         var( --rw-job-card-padding, 40px 30px );
    border:          var( --rw-job-card-border, none );
    transition:      border-color 0.3s;
    color:           inherit;
}

ul.job_listings .rw-job-card,
ul.job_listings .rw-job-card:hover,
ul.job_listings .rw-job-card:focus,
ul.job_listings .rw-job-card:visited {
    color:           inherit;
    text-decoration: none;
}

/* Hover background — opacity transition handles both solid and gradient smoothly */
ul.job_listings .rw-job-card::after {
    content:        '';
    position:       absolute;
    inset:          0;
    border-radius:  inherit;
    background:     var( --rw-job-card-hover-bg, transparent );
    opacity:        0;
    transition:     opacity 0.3s ease;
    z-index:        2;
    pointer-events: none;
}

ul.job_listings .rw-job-card:hover::after {
    opacity: 1;
}

ul.job_listings .rw-job-card:hover {
    border-color: var( --rw-job-card-hover-border-color, transparent );
}


/*
--------------------------------------------------------------------------
GRADIENT BORDER — pseudo-element technique
--------------------------------------------------------------------------
*/

ul.job_listings .rw-job-card.rw-job-border-gradient {
    border: var( --rw-job-card-border-width, 2px ) solid transparent;
    background-clip: padding-box;
}

ul.job_listings .rw-job-card.rw-job-border-gradient::before {
    content:       '';
    position:      absolute;
    inset:         0;
    border-radius: inherit;
    padding:       var( --rw-job-card-border-width, 2px );
    background:    var( --rw-job-card-border-grad, none );
    -webkit-mask:
            linear-gradient( #fff 0 0 ) content-box,
            linear-gradient( #fff 0 0 );
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    transition: background 0.3s;
    z-index: 1;
}

ul.job_listings .rw-job-card.rw-job-border-gradient:hover::before {
    background: var( --rw-job-card-hover-border-grad, none );
    z-index:    3;
}


/*
--------------------------------------------------------------------------
HAZE — overlay layer between card background and content
--------------------------------------------------------------------------
*/

ul.job_listings .rw-job-card-haze {
    display:          var( --rw-job-card-haze-display, none );
    position:         absolute;
    inset:            0;
    background-color: var( --rw-job-card-haze-color, transparent );
    background-image: var( --rw-job-card-haze-bg, none );
    background-size:  var( --rw-job-card-haze-bg-size, 20px 20px );
    z-index:          1;
    pointer-events:   none;
}

/* Image haze — opacity applied to the whole element, not rgba */
ul.job_listings .rw-job-card-haze--image {
    background-color:    transparent;
    background-image:    var( --rw-job-card-haze-bg, none );
    background-size:     cover;
    background-position: center;
    background-repeat:   no-repeat;
    opacity:             var( --rw-job-card-haze-img-opacity, 0.2 );
}


/*
==========================================================================
JOB CARD — STACK LAYOUT
==========================================================================
*/

ul.job_listings .rw-job-card--stack .rw-job-box {
    display:     flex;
    align-items: center;
    gap:         20px;
    flex-wrap:   nowrap;
}

ul.job_listings .rw-job-card--stack .rw-job-content-left {
    flex:      1 1 0;
    min-width: 0;
    max-width: 70%;
    position:  relative;
    z-index:   4;
}

ul.job_listings .rw-job-card--stack .rw-job-btn-wrap {
    flex:        0 0 auto;
    min-width:   160px;
    margin-left: auto;
    align-self:  center;
    text-align:  right;
    padding-left: var( --rw-job-btn-gap, 16px );
    position:    relative;
    z-index:     4;
}


/*
==========================================================================
JOB CARD — GRID LAYOUT
==========================================================================
*/

ul.job_listings .rw-job-card--grid .rw-job-box {
    display:        flex;
    flex-direction: column;
    height:         100%;
}

ul.job_listings .rw-job-card--grid .rw-job-content-left {
    flex:     1;
    position: relative;
    z-index:  4;
}

ul.job_listings .rw-job-card--grid .rw-job-btn-wrap {
    margin-top:  var( --rw-job-btn-gap, 16px );
    margin-left: 0;
    position:    relative;
    z-index:     4;
}


/*
==========================================================================
JOB CARD — CONTENT LEFT
Shared flex container for all content elements
==========================================================================
*/

ul.job_listings .rw-job-content-left {
    display:       flex;
    flex-wrap:     wrap;
    align-items:   flex-start;
    align-content: flex-start;
    column-gap:    12px;
    row-gap:       0;
}

/* Grid — title and excerpt always full width, loc/cat/salary follow their CSS vars */
ul.job_listings .rw-job-card--grid .rw-job-title,
ul.job_listings .rw-job-card--grid .rw-job-excerpt {
    width: 100%;
}


/*
==========================================================================
JOB CARD — CONTENT ELEMENTS
Spacing via margin-bottom — consistent regardless of order
==========================================================================
*/

/* Per-element padding — controls spacing above and below each card element */
ul.job_listings .rw-job-loc {
    padding-top:    var( --rw-job-loc-pad-top, 8px );
    padding-bottom: var( --rw-job-loc-pad-bottom, 8px );
}

ul.job_listings .rw-job-cat {
    padding-top:    var( --rw-job-cat-pad-top, 8px );
    padding-bottom: var( --rw-job-cat-pad-bottom, 8px );
}

ul.job_listings .rw-job-salary {
    padding-top:    var( --rw-job-salary-pad-top, 8px );
    padding-bottom: var( --rw-job-salary-pad-bottom, 8px );
}

ul.job_listings .rw-job-title {
    padding-top:    var( --rw-job-title-pad-top, 8px );
    padding-bottom: var( --rw-job-title-pad-bottom, 8px );
}

ul.job_listings .rw-job-excerpt {
    padding-top:    var( --rw-job-excerpt-pad-top, 8px );
    padding-bottom: var( --rw-job-excerpt-pad-bottom, 8px );
}


/*
--------------------------------------------------------------------------
CATEGORY
--------------------------------------------------------------------------
*/

ul.job_listings .rw-job-cat {
    display:        inline-flex;
    align-items:    center;
    gap:            5px;
    order:          var( --rw-job-cat-order, 2 );
    width:          var( --rw-job-cat-width, 100% );
    color:          var( --rw-job-cat-color, inherit );
    font-size:      var( --rw-job-cat-font-size, inherit );
    font-weight:    var( --rw-job-cat-weight, 400 );
    text-transform: var( --rw-job-cat-transform, none );
    letter-spacing: var( --rw-job-cat-letter-spacing, normal );
    transition:     color 0.3s;
}

ul.job_listings .rw-job-cat-icon {
    font-size: var( --rw-job-cat-icon-size, 14px );
    color:     var( --rw-job-cat-icon-color, inherit );
}

ul.job_listings .rw-job-cat::after {
    content:     var( --rw-job-cat-sep, "" );
    margin-left: 4px;
    opacity:     0.5;
}

ul.job_listings .rw-job-cat.rw-job-sep-hide::after {
    display: none;
}

ul.job_listings .rw-job-card:hover .rw-job-cat {
    color: var( --rw-job-cat-color-hover, inherit );
}

ul.job_listings .rw-job-card:hover .rw-job-cat-icon {
    color: var( --rw-job-title-color-hover, inherit );
}


/*
--------------------------------------------------------------------------
SALARY
--------------------------------------------------------------------------
*/

ul.job_listings .rw-job-salary {
    display:        inline-flex;
    align-items:    center;
    gap:            5px;
    order:          var( --rw-job-salary-order, 3 );
    width:          var( --rw-job-salary-width, 100% );
    color:          var( --rw-job-salary-color, inherit );
    font-size:      var( --rw-job-salary-font-size, inherit );
    font-weight:    var( --rw-job-salary-weight, 400 );
    text-transform: var( --rw-job-salary-transform, none );
    letter-spacing: var( --rw-job-salary-letter-spacing, normal );
    transition:     color 0.3s;
}

ul.job_listings .rw-job-salary-icon {
    font-size: var( --rw-job-salary-icon-size, 14px );
    color:     var( --rw-job-salary-icon-color, inherit );
}

ul.job_listings .rw-job-salary::after {
    content:     var( --rw-job-salary-sep, "" );
    margin-left: 4px;
    opacity:     0.5;
}

ul.job_listings .rw-job-salary.rw-job-sep-hide::after {
    display: none;
}

ul.job_listings .rw-job-salary::before {
    display: none !important;
    content: none !important;
}

ul.job_listings .rw-job-card:hover .rw-job-salary {
    color: var( --rw-job-salary-color-hover, inherit );
}

ul.job_listings .rw-job-card:hover .rw-job-salary-icon {
    color: var( --rw-job-salary-color-hover, inherit );
}


/*
--------------------------------------------------------------------------
LOCATION
--------------------------------------------------------------------------
*/

ul.job_listings .rw-job-loc {
    display:        inline-flex;
    align-items:    center;
    gap:            5px;
    order:          var( --rw-job-loc-order, 1 );
    width:          var( --rw-job-loc-width, 100% );
    color:          var( --rw-job-loc-color, inherit );
    font-size:      var( --rw-job-loc-font-size, inherit );
    font-weight:    var( --rw-job-loc-weight, 400 );
    text-transform: var( --rw-job-loc-transform, none );
    letter-spacing: var( --rw-job-loc-letter-spacing, normal );
    transition:     color 0.3s;
}

ul.job_listings .rw-job-loc-icon {
    font-size: var( --rw-job-loc-icon-size, 14px );
    color:     var( --rw-job-loc-icon-color, inherit );
}

ul.job_listings .rw-job-loc::after {
    content:     var( --rw-job-loc-sep, "" );
    margin-left: 4px;
    opacity:     0.5;
}

ul.job_listings .rw-job-loc.rw-job-sep-hide::after {
    display: none;
}

/* Kill any WP Job Manager separator */
ul.job_listings .rw-job-loc::before,
ul.job_listings .rw-job-cat::before {
    display: none !important;
    content: none !important;
}

ul.job_listings .rw-job-card:hover .rw-job-loc {
    color: var( --rw-job-loc-color-hover, inherit );
}

ul.job_listings .rw-job-card:hover .rw-job-loc-icon {
    color: var( --rw-job-title-color-hover, inherit );
}


/*
--------------------------------------------------------------------------
DIVIDERS — top and bottom on loc, cat, salary — grid only
--------------------------------------------------------------------------
*/

ul.job_listings .rw-job-loc,
ul.job_listings .rw-job-cat,
ul.job_listings .rw-job-salary {
    border-top-style:    var( --rw-job-divider-display, none );
    border-top-width:    var( --rw-job-divider-width, 1px );
    border-top-color:    var( --rw-job-divider-color, transparent );
    border-bottom-style: var( --rw-job-divider-display, none );
    border-bottom-width: var( --rw-job-divider-width, 1px );
    border-bottom-color: var( --rw-job-divider-color, transparent );
}

/* Adjacent elements — remove duplicate border between them */
ul.job_listings .rw-job-loc + .rw-job-cat,
ul.job_listings .rw-job-loc + .rw-job-salary,
ul.job_listings .rw-job-cat + .rw-job-loc,
ul.job_listings .rw-job-cat + .rw-job-salary,
ul.job_listings .rw-job-salary + .rw-job-loc,
ul.job_listings .rw-job-salary + .rw-job-cat {
    border-top-style: none;
}


/*
--------------------------------------------------------------------------
TITLE
--------------------------------------------------------------------------
*/

ul.job_listings .rw-job-title {
    order:          var( --rw-job-title-order, 4 );
    width:          100%;
    color:          var( --rw-job-title-color, inherit );
    font-size:      var( --rw-job-title-font-size, inherit );
    font-weight:    var( --rw-job-title-weight, 700 );
    text-transform: var( --rw-job-title-transform, none );
    letter-spacing: var( --rw-job-title-letter-spacing, normal );
    transition:     color 0.3s;
}

ul.job_listings .rw-job-card:hover .rw-job-title {
    color: var( --rw-job-title-color-hover, inherit );
}


/*
--------------------------------------------------------------------------
EXCERPT
--------------------------------------------------------------------------
*/

ul.job_listings .rw-job-excerpt {
    order:          var( --rw-job-excerpt-order, 5 );
    width:          100%;
    color:          var( --rw-job-excerpt-color, inherit );
    font-size:      var( --rw-job-excerpt-font-size, inherit );
    font-weight:    var( --rw-job-excerpt-weight, 400 );
    text-transform: var( --rw-job-excerpt-transform, none );
    letter-spacing: var( --rw-job-excerpt-letter-spacing, normal );
    transition:     color 0.3s;
}

ul.job_listings .rw-job-card:hover .rw-job-excerpt {
    color: var( --rw-job-excerpt-color-hover, inherit );
}


/*
--------------------------------------------------------------------------
BUTTON
--------------------------------------------------------------------------
*/

ul.job_listings .rw-job-btn-wrap {
    display:     flex;
    align-items: center;
}

ul.job_listings .rw-job-btn-text {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    font-weight:     500;
    text-decoration: none;
    color:           var( --rw-job-btn-text-color, inherit );
    transition:      color 0.3s;
}

ul.job_listings .rw-job-card:hover .rw-job-btn-text {
    color: var( --rw-job-title-color-hover, inherit );
}

ul.job_listings .rw-job-btn-custom {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    padding:         var( --rw-job-btn-padding, 0 );
    border-radius:   var( --rw-job-btn-radius, 0px );
    background:      var( --rw-job-btn-bg, transparent );
    color:           var( --rw-job-btn-text, inherit ) !important;
    border:          var( --rw-job-btn-border-width, 0px ) solid var( --rw-job-btn-border, transparent );
    font-weight:     500;
    text-decoration: none;
    transition:      background 0.3s, color 0.3s, border-color 0.3s;
}

ul.job_listings .rw-job-card:hover .rw-job-btn-custom {
    background:   var( --rw-job-btn-bg-hover, transparent );
    color:        var( --rw-job-btn-text-hover, inherit ) !important;
    border-color: var( --rw-job-btn-border-hover, transparent );
}

/* ── Preset rw-btn variants: fire hover state when the full card is hovered ── */

ul.job_listings .rw-job-card:hover .rw-btn--primary {
    background:
        var(--rw-btn-primary-paint-h, var(--rw-btn-primary-paint)) padding-box,
        var(--rw-btn-primary-stroke-h, var(--rw-btn-primary-stroke)) border-box;
    color:           var(--rw-btn-primary-text-hover, var(--rw-btn-primary-text));
    text-decoration: none;
}
ul.job_listings .rw-job-card:hover .rw-btn--primary .rw-btn__icon      { color: var(--rw-btn-primary-icon-color-h); }
ul.job_listings .rw-job-card:hover .rw-btn--primary .rw-btn__icon-wrap  { color: var(--rw-btn-primary-icon-color-h); background-color: var(--rw-btn-primary-icon-shape-bg-h); border-color: var(--rw-btn-primary-icon-shape-bd-h); }

ul.job_listings .rw-job-card:hover .rw-btn--secondary {
    background:
        var(--rw-btn-secondary-paint-h, var(--rw-btn-secondary-paint)) padding-box,
        var(--rw-btn-secondary-stroke-h, var(--rw-btn-secondary-stroke)) border-box;
    color:           var(--rw-btn-secondary-text-hover, var(--rw-btn-secondary-text));
    text-decoration: none;
}
ul.job_listings .rw-job-card:hover .rw-btn--secondary .rw-btn__icon      { color: var(--rw-btn-secondary-icon-color-h); }
ul.job_listings .rw-job-card:hover .rw-btn--secondary .rw-btn__icon-wrap  { color: var(--rw-btn-secondary-icon-color-h); background-color: var(--rw-btn-secondary-icon-shape-bg-h); border-color: var(--rw-btn-secondary-icon-shape-bd-h); }

ul.job_listings .rw-job-card:hover .rw-btn--primary-dark {
    background:
        var(--rw-btn-primary-dark-paint-h, var(--rw-btn-primary-dark-paint)) padding-box,
        var(--rw-btn-primary-dark-stroke-h, var(--rw-btn-primary-dark-stroke)) border-box;
    color:           var(--rw-btn-primary-dark-text-hover, var(--rw-btn-primary-dark-text));
    text-decoration: none;
}
ul.job_listings .rw-job-card:hover .rw-btn--primary-dark .rw-btn__icon      { color: var(--rw-btn-primary-dark-icon-color-h); }
ul.job_listings .rw-job-card:hover .rw-btn--primary-dark .rw-btn__icon-wrap  { color: var(--rw-btn-primary-dark-icon-color-h); background-color: var(--rw-btn-primary-dark-icon-shape-bg-h); border-color: var(--rw-btn-primary-dark-icon-shape-bd-h); }

ul.job_listings .rw-job-card:hover .rw-btn--secondary-dark {
    background:
        var(--rw-btn-secondary-dark-paint-h, var(--rw-btn-secondary-dark-paint)) padding-box,
        var(--rw-btn-secondary-dark-stroke-h, var(--rw-btn-secondary-dark-stroke)) border-box;
    color:           var(--rw-btn-secondary-dark-text-hover, var(--rw-btn-secondary-dark-text));
    text-decoration: none;
}
ul.job_listings .rw-job-card:hover .rw-btn--secondary-dark .rw-btn__icon      { color: var(--rw-btn-secondary-dark-icon-color-h); }
ul.job_listings .rw-job-card:hover .rw-btn--secondary-dark .rw-btn__icon-wrap  { color: var(--rw-btn-secondary-dark-icon-color-h); background-color: var(--rw-btn-secondary-dark-icon-shape-bg-h); border-color: var(--rw-btn-secondary-dark-icon-shape-bd-h); }

ul.job_listings .rw-job-card:hover .rw-btn--footer {
    background:
        var(--rw-btn-footer-paint-h, var(--rw-btn-footer-paint)) padding-box,
        var(--rw-btn-footer-stroke-h, var(--rw-btn-footer-stroke)) border-box;
    color:           var(--rw-btn-footer-text-hover, var(--rw-btn-footer-text));
    text-decoration: none;
}
ul.job_listings .rw-job-card:hover .rw-btn--footer .rw-btn__icon      { color: var(--rw-btn-footer-icon-color-h); }
ul.job_listings .rw-job-card:hover .rw-btn--footer .rw-btn__icon-wrap  { color: var(--rw-btn-footer-icon-color-h); background-color: var(--rw-btn-footer-icon-shape-bg-h); border-color: var(--rw-btn-footer-icon-shape-bd-h); }

ul.job_listings .rw-job-card:hover .rw-btn--cta {
    background:
        var(--rw-btn-cta-paint-h, var(--rw-btn-cta-paint)) padding-box,
        var(--rw-btn-cta-stroke-h, var(--rw-btn-cta-stroke)) border-box;
    color:           var(--rw-btn-cta-text-hover, var(--rw-btn-cta-text));
    text-decoration: none;
}
ul.job_listings .rw-job-card:hover .rw-btn--cta .rw-btn__icon      { color: var(--rw-btn-cta-icon-color-h); }
ul.job_listings .rw-job-card:hover .rw-btn--cta .rw-btn__icon-wrap  { color: var(--rw-btn-cta-icon-color-h); background-color: var(--rw-btn-cta-icon-shape-bg-h); border-color: var(--rw-btn-cta-icon-shape-bd-h); }

ul.job_listings .rw-job-card:hover .rw-btn--search-jobs {
    background:
        var(--rw-btn-search-jobs-paint-h, var(--rw-btn-search-jobs-paint)) padding-box,
        var(--rw-btn-search-jobs-stroke-h, var(--rw-btn-search-jobs-stroke)) border-box;
    color:           var(--rw-btn-search-jobs-text-hover, var(--rw-btn-search-jobs-text));
    text-decoration: none;
}
ul.job_listings .rw-job-card:hover .rw-btn--search-jobs .rw-btn__icon      { color: var(--rw-btn-search-jobs-icon-color-h); }
ul.job_listings .rw-job-card:hover .rw-btn--search-jobs .rw-btn__icon-wrap  { color: var(--rw-btn-search-jobs-icon-color-h); background-color: var(--rw-btn-search-jobs-icon-shape-bg-h); border-color: var(--rw-btn-search-jobs-icon-shape-bd-h); }

ul.job_listings .rw-job-card:hover .rw-btn--custom-a {
    background:
        var(--rw-btn-custom-a-paint-h, var(--rw-btn-custom-a-paint)) padding-box,
        var(--rw-btn-custom-a-stroke-h, var(--rw-btn-custom-a-stroke)) border-box;
    color:           var(--rw-btn-custom-a-text-hover, var(--rw-btn-custom-a-text));
    text-decoration: none;
}
ul.job_listings .rw-job-card:hover .rw-btn--custom-a .rw-btn__icon      { color: var(--rw-btn-custom-a-icon-color-h); }
ul.job_listings .rw-job-card:hover .rw-btn--custom-a .rw-btn__icon-wrap  { color: var(--rw-btn-custom-a-icon-color-h); background-color: var(--rw-btn-custom-a-icon-shape-bg-h); border-color: var(--rw-btn-custom-a-icon-shape-bd-h); }

ul.job_listings .rw-job-card:hover .rw-btn--custom-b {
    background:
        var(--rw-btn-custom-b-paint-h, var(--rw-btn-custom-b-paint)) padding-box,
        var(--rw-btn-custom-b-stroke-h, var(--rw-btn-custom-b-stroke)) border-box;
    color:           var(--rw-btn-custom-b-text-hover, var(--rw-btn-custom-b-text));
    text-decoration: none;
}
ul.job_listings .rw-job-card:hover .rw-btn--custom-b .rw-btn__icon      { color: var(--rw-btn-custom-b-icon-color-h); }
ul.job_listings .rw-job-card:hover .rw-btn--custom-b .rw-btn__icon-wrap  { color: var(--rw-btn-custom-b-icon-color-h); background-color: var(--rw-btn-custom-b-icon-shape-bg-h); border-color: var(--rw-btn-custom-b-icon-shape-bd-h); }

ul.job_listings .rw-job-card:hover .rw-btn--link,
ul.job_listings .rw-job-card:hover .rw-btn-text {
    color:           var(--rw-btn-txt-color-hover);
    text-decoration: var(--rw-btn-txt-deco-hover, underline);
}
ul.job_listings .rw-job-card:hover .rw-btn--link .rw-btn__icon,
ul.job_listings .rw-job-card:hover .rw-btn-text .rw-btn__icon      { color: var(--rw-btn-txt-icon-color-h); }
ul.job_listings .rw-job-card:hover .rw-btn--link .rw-btn__icon-wrap,
ul.job_listings .rw-job-card:hover .rw-btn-text .rw-btn__icon-wrap  { color: var(--rw-btn-txt-icon-color-h); background-color: var(--rw-btn-txt-icon-shape-bg-h); border-color: var(--rw-btn-txt-icon-shape-bd-h); }

ul.job_listings .rw-job-btn-wrap .rw-btn,
ul.job_listings .rw-job-btn-wrap .rw-btn-text {
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
    pointer-events: none;
}


/*
==========================================================================
CONTAINER QUERY — stack card when in narrow container (e.g. sidebar)
==========================================================================
*/

@container job-sidebar ( max-width: 500px ) {

    ul.job_listings .rw-job-card--stack .rw-job-box {
        flex-wrap: wrap;
    }

    ul.job_listings .rw-job-card--stack .rw-job-content-left {
        flex:      0 0 100%;
        max-width: 100%;
    }

    ul.job_listings .rw-job-card--stack .rw-job-btn-wrap {
        flex:         0 0 100%;
        margin-left:  0;
        padding-left: 0;
        text-align:   left;
        margin-top:   var( --rw-job-btn-gap, 16px );
    }

}


/*
==========================================================================
RESPONSIVE
==========================================================================
*/

@media screen and ( max-width: 992px ) {
    ul.job_listings.rw-job-layout--grid {
        grid-template-columns: repeat( 2, 1fr );
    }

    .job_filters .search_jobs {
        gap: 8px;
    }
}

@media screen and ( max-width: 768px ) {

    ul.job_listings {
        grid-template-columns: 1fr;
    }

    .job_filters .search_jobs {
        flex-direction: column;
    }

    .rw-filter-wrap--keywords,
    .rw-filter-wrap--categories,
    .rw-filter-wrap--location,
    .rw-filter-wrap--salary {
        width: 100% !important;
    }

    /* Stack — collapse to full width column on mobile */
    ul.job_listings .rw-job-card--stack .rw-job-box {
        flex-wrap: wrap;
    }

    ul.job_listings .rw-job-card--stack .rw-job-content-left {
        flex:      0 0 100%;
        max-width: 100%;
    }

    ul.job_listings .rw-job-card--stack .rw-job-btn-wrap {
        flex:         0 0 100%;
        margin-left:  0;
        padding-left: 0;
        text-align:   left;
        margin-top:   var( --rw-job-btn-gap, 16px );
    }

    /* Grid — single column on mobile */
    ul.job_listings.rw-job-layout--grid {
        grid-template-columns: 1fr;
    }

}