/*
==========================================================================
BLUEPRINT — SINGLE JOB PAGE
==========================================================================
*/


/*
--------------------------------------------------------------------------
PAGE WRAPPER
--------------------------------------------------------------------------
*/

.rw-single-job-wrap {
    width: 100%;
}


/*
--------------------------------------------------------------------------
SIDEBAR LAYOUT — 65/35 split
--------------------------------------------------------------------------
*/

.rw-single-layout--sidebar {
    display:   flex;
    gap:       60px;
    width:     100%;
    box-sizing: border-box;
    padding-top: 40px;
}

.rw-single-col-main {
    flex:      1 1 0;
    min-width: 0;
    max-width: var( --rw-single-main-col-width, 65% );
}

.rw-single-col-sidebar {
    flex:           0 0 var( --rw-single-sidebar-col-width, 35% );
    max-width:      var( --rw-single-sidebar-col-width, 35% );
    min-width:      0;
    align-self:     flex-start;
    container-type: inline-size;
    container-name: job-sidebar;
}

/* Sticky sidebar */
.rw-single-col-sidebar--sticky {
    position:   sticky;
    top:        var( --rw-single-sticky-top, 40px );
    align-self: flex-start;
    max-height: calc( 100vh - var( --rw-single-sticky-top, 40px ) - 20px );
    overflow-y: auto;
}


/*
--------------------------------------------------------------------------
FULL WIDTH LAYOUT
--------------------------------------------------------------------------
*/

.rw-single-layout--fullwidth {
    box-sizing: border-box;
}


/*
--------------------------------------------------------------------------
JOB CONTENT
--------------------------------------------------------------------------
*/

.rw-single-content {
    display:        flex;
    flex-direction: column;
    width:          100%;
}


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

.rw-single-title {
    order:          var( --rw-single-title-order, 5 );
    width:          100%;
    color:          var( --rw-single-title-color, inherit );
    font-size:      var( --rw-single-title-font-size, inherit );
    font-weight:    var( --rw-single-title-weight, inherit );
    text-transform: var( --rw-single-title-transform, inherit );
    letter-spacing: var( --rw-single-title-letter-spacing, normal );
    padding-top:    var( --rw-single-title-pad-top, 0px );
    padding-bottom: var( --rw-single-title-pad-bottom, 12px );
    margin:         0;
}


/*
--------------------------------------------------------------------------
META ROW — flex ordering container for title + all meta elements
--------------------------------------------------------------------------
*/

.rw-single-meta {
    display:       flex;
    flex-wrap:     wrap;
    align-items:   flex-start;
    align-content: flex-start;
    column-gap:    var( --rw-single-element-gap, 12px );
    row-gap:       0;
    width:         100%;
    order:         2;
}

/* Location */
.rw-single-loc {
    display:        inline-flex;
    align-items:    center;
    gap:            5px;
    order:          var( --rw-single-loc-order, 1 );
    width:          var( --rw-single-loc-width, 100% );
    color:          var( --rw-single-loc-color, inherit );
    font-size:      var( --rw-single-loc-font-size, inherit );
    font-weight:    var( --rw-single-loc-weight, inherit );
    text-transform: var( --rw-single-loc-transform, inherit );
    letter-spacing: var( --rw-single-loc-letter-spacing, normal );
    padding-top:    var( --rw-single-loc-pad-top, 4px );
    padding-bottom: var( --rw-single-loc-pad-bottom, 4px );
}

.rw-single-loc-icon {
    font-size: var( --rw-single-loc-icon-size, 16px );
    color:     var( --rw-single-loc-icon-color, inherit );
}

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

.rw-single-loc.rw-single-sep-hide::after {
    display: none;
}

/* Category */
.rw-single-cat {
    display:        inline-flex;
    align-items:    center;
    gap:            5px;
    order:          var( --rw-single-cat-order, 2 );
    width:          var( --rw-single-cat-width, 100% );
    color:          var( --rw-single-cat-color, inherit );
    font-size:      var( --rw-single-cat-font-size, inherit );
    font-weight:    var( --rw-single-cat-weight, inherit );
    text-transform: var( --rw-single-cat-transform, inherit );
    letter-spacing: var( --rw-single-cat-letter-spacing, normal );
    padding-top:    var( --rw-single-cat-pad-top, 4px );
    padding-bottom: var( --rw-single-cat-pad-bottom, 4px );
}

.rw-single-cat-icon {
    font-size: var( --rw-single-cat-icon-size, 16px );
    color:     var( --rw-single-cat-icon-color, inherit );
}

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

.rw-single-cat.rw-single-sep-hide::after {
    display: none;
}

/* Salary */
.rw-single-sal {
    display:        inline-flex;
    align-items:    center;
    gap:            5px;
    order:          var( --rw-single-sal-order, 3 );
    width:          var( --rw-single-sal-width, 100% );
    color:          var( --rw-single-sal-color, inherit );
    font-size:      var( --rw-single-sal-font-size, inherit );
    font-weight:    var( --rw-single-sal-weight, inherit );
    text-transform: var( --rw-single-sal-transform, inherit );
    letter-spacing: var( --rw-single-sal-letter-spacing, normal );
    padding-top:    var( --rw-single-sal-pad-top, 4px );
    padding-bottom: var( --rw-single-sal-pad-bottom, 4px );
}

.rw-single-sal-icon {
    font-size: var( --rw-single-sal-icon-size, 16px );
    color:     var( --rw-single-sal-icon-color, inherit );
}

.rw-single-sal::after {
    content:     var( --rw-single-sal-sep, "" );
    margin-left: 4px;
    opacity:     0.5;
}

.rw-single-sal.rw-single-sep-hide::after {
    display: none;
}

/* Job Type */
.rw-single-type {
    display:        inline-flex;
    align-items:    center;
    gap:            5px;
    order:          var( --rw-single-type-order, 4 );
    width:          var( --rw-single-type-width, 100% );
    color:          var( --rw-single-type-color, inherit );
    font-size:      var( --rw-single-type-font-size, inherit );
    font-weight:    var( --rw-single-type-weight, inherit );
    text-transform: var( --rw-single-type-transform, inherit );
    letter-spacing: var( --rw-single-type-letter-spacing, normal );
    padding-top:    var( --rw-single-type-pad-top, 4px );
    padding-bottom: var( --rw-single-type-pad-bottom, 4px );
}

.rw-single-type-icon {
    font-size: var( --rw-single-type-icon-size, 16px );
    color:     var( --rw-single-type-icon-color, inherit );
}

.rw-single-type::after {
    content:     var( --rw-single-type-sep, "" );
    margin-left: 4px;
    opacity:     0.5;
}

.rw-single-type.rw-single-sep-hide::after {
    display: none;
}


/*
--------------------------------------------------------------------------
JOB DESCRIPTION
--------------------------------------------------------------------------
*/

.rw-single-desc {
    order:          var( --rw-single-desc-order, 6 );
    width:          100%;
    color:          var( --rw-single-desc-color, inherit );
    font-size:      var( --rw-single-desc-font-size, inherit );
    font-weight:    var( --rw-single-desc-weight, inherit );
    text-transform: var( --rw-single-desc-transform, inherit );
    letter-spacing: var( --rw-single-desc-letter-spacing, normal );
    padding-top:    var( --rw-single-desc-pad-top, 24px );
    padding-bottom: var( --rw-single-desc-pad-bottom, 24px );
    margin-bottom:  0 !important;
}

.rw-single-desc p {
    margin-bottom: 1em;
}

.rw-single-desc ul,
.rw-single-desc ol {
    margin:  0 0 1em 1.5em;
    padding: 0;
}


/*
--------------------------------------------------------------------------
APPLY BUTTON + FORM
--------------------------------------------------------------------------
*/

.rw-single-apply-wrap {
    order:      7;
    width:      100%;
    margin-top: var( --rw-single-apply-gap, 24px );
}

.rw-single-application {
    width: 100%;
}

.rw-single-apply-toggle {
    cursor: pointer;
}

/*
 * WP Job Manager `frontend.css` styles `.application_button` with inline-block, fixed padding,
 * font-size, and margins — which fights Blueprint `.rw-btn` (paint/stroke, padding vars).
 * Scoped reset so single-job apply matches card / global buttons.
 */
.job_application.application.rw-single-application .application_button.rw-btn,
.rw-single-application .application_button.rw-btn {
    display:         inline-flex !important;
    align-items:     center;
    justify-content: center;
    box-sizing:      border-box;
    margin:          0 !important;
    padding:         var(--rw-btn-pad-t) var(--rw-btn-pad-r) var(--rw-btn-pad-b) var(--rw-btn-pad-l) !important;
    font-size:       var(--rw-btn-font-size, 16px) !important;
    font-weight:     var(--rw-btn-font-weight, 500) !important;
    line-height:     normal !important;
    text-transform:  var(--rw-btn-case, inherit);
    text-align:      center;
    text-decoration: none;
    border-width:    var(--rw-btn-border-w) !important;
    border-style:    solid !important;
    border-color:    transparent !important;
    border-radius:   var(--rw-btn-radius);
    min-width:       var(--rw-btn-min-w);
    white-space:     nowrap;
}

.job_application.application.rw-single-application .application_button.rw-btn.rw-btn--icon-before,
.job_application.application.rw-single-application .application_button.rw-btn.rw-btn--icon-after,
.rw-single-application .application_button.rw-btn.rw-btn--icon-before,
.rw-single-application .application_button.rw-btn.rw-btn--icon-after {
    gap: var(--rw-btn-icon-gap, 8px);
}

.job_application.application.rw-single-application .application_button.rw-btn-text,
.rw-single-application .application_button.rw-btn-text {
    display:         inline-flex !important;
    align-items:     center;
    justify-content: center;
    box-sizing:      border-box;
    margin:          0 !important;
    padding:         0 !important;
    border:          none !important;
    background:      none !important;
    font-size:       var(--rw-btn-font-size, 16px) !important;
    font-weight:     var(--rw-btn-font-weight, 500) !important;
    line-height:     normal !important;
    text-transform:  var(--rw-btn-case, inherit);
    text-align:      center;
    text-decoration: none;
    min-height:      auto;
    white-space:     nowrap;
}

.job_application.application.rw-single-application .application_button.rw-btn-text.rw-btn--icon-before,
.job_application.application.rw-single-application .application_button.rw-btn-text.rw-btn--icon-after,
.rw-single-application .application_button.rw-btn-text.rw-btn--icon-before,
.rw-single-application .application_button.rw-btn-text.rw-btn--icon-after {
    gap: var(--rw-btn-icon-gap, 8px);
}

/* Custom apply button style */
.rw-single-apply-btn-custom {
    display:          inline-flex;
    align-items:      center;
    gap:              6px;
    padding:          var( --rw-single-apply-padding, 12px 24px );
    border-radius:    var( --rw-single-apply-radius, 0px );
    background:       var( --rw-single-apply-bg, transparent );
    color:            var( --rw-single-apply-text, inherit ) !important;
    border:           var( --rw-single-apply-border-width, 0px ) solid var( --rw-single-apply-border, transparent );
    font-weight:      500;
    text-decoration:  none;
    cursor:           pointer;
    transition:       background 0.3s, color 0.3s, border-color 0.3s;
}

.rw-single-apply-btn-custom:hover {
    background:   var( --rw-single-apply-bg-hover, transparent );
    color:        var( --rw-single-apply-text-hover, inherit ) !important;
    border-color: var( --rw-single-apply-border-hover, transparent );
}

.rw-single-application-form {
    margin-top: 20px;
}

.job_application.application.rw-single-application {
    margin-bottom: 0;
}


/*
--------------------------------------------------------------------------
RELATED JOBS SECTION
--------------------------------------------------------------------------
*/

.rw-single-related-section {
    width:          100%;
    padding-top:    40px;
    padding-bottom: 40px;
}

.rw-single-related {
    width: 100%;
}

/* Section header — alignment variants */
.rw-single-related-header {
    display:   flex;
    flex-wrap: wrap;
    gap:       16px;
    width:     100%;
    margin-bottom: 32px;
}

/* Left — stack everything */
.rw-single-related-header--left {
    flex-direction: column;
    align-items:    flex-start;
}

.rw-single-related-header--left .rw-single-related-btns {
    margin-top: 4px;
}

/* Center — center everything */
.rw-single-related-header--center {
    flex-direction: column;
    align-items:    center;
    text-align:     center;
}

.rw-single-related-header--center .rw-single-related-header-text {
    text-align: center;
}

.rw-single-related-header--center .rw-btns {
    justify-content: center;
}

/* Space Between — text left, buttons right */
.rw-single-related-header--space-between {
    flex-direction:  row;
    align-items:     center;
    justify-content: space-between;
}

.rw-single-related-header--space-between .rw-single-related-header-text {
    flex: 1 1 0;
}

.rw-single-related-header--space-between .rw-single-related-btns {
    flex: 0 0 auto;
}

.rw-single-related-title {
    margin: 4px 0 0 0;
}

.rw-single-related-content {
    margin-top: 8px;
}

.rw-single-related-content p:last-child {
    margin-bottom: 0;
}

/* Related jobs list — inherits card styles from job-styles.css */
.rw-single-related-jobs {
    list-style: none;
    padding:    0;
    margin:     0;
}

/* Sidebar context — stack always, no grid */
.rw-single-related--sidebar .rw-single-related-jobs {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   var( --rw-job-card-gap, 20px );
}

/* Below context — inherits the main grid/stack setting */
.rw-single-related--below .rw-single-related-jobs {
    display:               grid;
    grid-template-columns: var( --rw-job-grid-template, 1fr );
    gap:                   var( --rw-job-card-gap, 20px );
}


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

@media screen and ( max-width: 992px ) {
    .rw-single-layout--sidebar {
        gap: 24px;
    }

    .rw-single-col-sidebar {
        flex:      0 0 38%;
        max-width: 38%;
    }

    /* Disable sticky on tablet */
    .rw-single-col-sidebar--sticky {
        position:   static;
        max-height: none;
        overflow-y: visible;
    }
}

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

    /* Stack sidebar layout to single column */
    .rw-single-layout--sidebar {
        flex-direction: column;
        gap:            40px;
    }

    .rw-single-col-main,
    .rw-single-col-sidebar {
        flex:      0 0 100%;
        max-width: 100%;
        width:     100%;
    }

    /* Related jobs always single column on mobile */
    .rw-single-related--below .rw-single-related-jobs {
        grid-template-columns: 1fr;
    }

    /* Space between header collapses to left on mobile */
    .rw-single-related-header--space-between {
        flex-direction: column;
        align-items:    flex-start;
    }

    /* Related section reduced padding on mobile */
    .rw-single-related-section {
        padding-top:    20px;
        padding-bottom: 20px;
    }
}

/*
--------------------------------------------------------------------------
APPLY BUTTON — override WP Job Manager application button styles
Targets each button variant class explicitly so WPJM can't win
--------------------------------------------------------------------------
*/

/* Shared reset — all apply button variants */
.rw-single-apply-toggle.rw-btn,
.rw-single-apply-toggle.rw-btn-text,
.rw-single-apply-toggle.rw-single-apply-btn-custom,
.rw-single-application .application_button.rw-btn,
.rw-single-application .application_button.rw-btn-text,
.rw-single-application .application_button.rw-single-apply-btn-custom {
    display:       inline-flex;
    font-size:     var( --rw-btn-font-size, inherit );
    line-height:   1.5;
    margin:        0;
    padding:       var( --rw-btn-pad-t, 12px ) var( --rw-btn-pad-r, 24px ) var( --rw-btn-pad-b, 12px ) var( --rw-btn-pad-l, 24px );
    text-align:    left;
    border:        none;
    border-radius: var( --rw-btn-radius, 0px );
    transition:    background 0.2s, color 0.2s;
}

/* Primary — fill only; border ring comes from .rw-btn::after mask in buttons.css */
.rw-single-apply-toggle.rw-btn.rw-btn--primary,
.rw-single-application .application_button.rw-btn.rw-btn--primary {
    background: var( --rw-btn-primary-paint );
    color:      var( --rw-btn-primary-text ) !important;
}

.rw-single-apply-toggle.rw-btn.rw-btn--primary:hover,
.rw-single-application .application_button.rw-btn.rw-btn--primary:hover {
    background: var( --rw-btn-primary-paint-h, var( --rw-btn-primary-paint ) );
    color:      var( --rw-btn-primary-text-hover ) !important;
}

/* Secondary */
.rw-single-apply-toggle.rw-btn.rw-btn--secondary,
.rw-single-application .application_button.rw-btn.rw-btn--secondary {
    background: var( --rw-btn-secondary-paint );
    color:      var( --rw-btn-secondary-text ) !important;
}

.rw-single-apply-toggle.rw-btn.rw-btn--secondary:hover,
.rw-single-application .application_button.rw-btn.rw-btn--secondary:hover {
    background: var( --rw-btn-secondary-paint-h, var( --rw-btn-secondary-paint ) );
    color:      var( --rw-btn-secondary-text-hover ) !important;
}

/* Text / Link */
.rw-single-apply-toggle.rw-btn-text,
.rw-single-application .application_button.rw-btn-text {
    background:   transparent;
    color:        var( --rw-btn-text-color, inherit ) !important;
    padding:      0;
    border-width: 0;
}

.rw-single-apply-toggle.rw-btn-text:hover,
.rw-single-application .application_button.rw-btn-text:hover {
    color: var( --rw-btn-text-color-hover, inherit ) !important;
}

/* Custom */
.rw-single-apply-toggle.rw-single-apply-btn-custom,
.rw-single-application .application_button.rw-single-apply-btn-custom {
    background:   var( --rw-single-apply-bg, transparent );
    color:        var( --rw-single-apply-text, inherit ) !important;
    border:       var( --rw-single-apply-border-width, 0px ) solid var( --rw-single-apply-border, transparent );
}

.rw-single-apply-toggle.rw-single-apply-btn-custom:hover,
.rw-single-application .application_button.rw-single-apply-btn-custom:hover {
    background:   var( --rw-single-apply-bg-hover, transparent );
    color:        var( --rw-single-apply-text-hover, inherit ) !important;
    border-color: var( --rw-single-apply-border-hover, transparent );
}

/*
--------------------------------------------------------------------------
STACKED SIDEBAR (modules) + NEWSLETTER CARD
Variables from acf-job-newsletter.php (--bj-nl-*)
--------------------------------------------------------------------------
*/

.rw-single-job-sidebar {
    display:        flex;
    flex-direction: column;
    gap:            var( --rw-single-sidebar-blocks-gap, 30px );
}

.rw-single-job-sidebar-block--related .rw-single-related {
    width: 100%;
}

.rw-bj-nl-card {
    position:      relative;
    border-radius: var( --bj-nl-card-radius, 12px );
    padding:       var( --bj-nl-card-pad-t, 24px ) var( --bj-nl-card-pad-r, 24px ) var( --bj-nl-card-pad-b, 24px ) var( --bj-nl-card-pad-l, 24px );
    background:    var( --bj-nl-card-bg, #ffffff );
    box-shadow:      var( --bj-nl-card-shadow, none );
}

.rw-bj-nl-inner {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    position:       relative;
    z-index:        2;
}

.rw-bj-nl-haze {
    position: absolute;
    inset:    0;
    z-index:  1;
    pointer-events: none;
    opacity:  var( --bj-nl-haze-opacity, 0.2 );
    mix-blend-mode: var( --bj-nl-haze-blend, normal );
    background: var( --bj-nl-haze-bg, transparent );
    background-repeat: var( --bj-nl-haze-repeat, repeat );
    background-size: var( --bj-nl-haze-size, auto );
}

.rw-single-job-sidebar-newsletter__title {
    margin: 0 0 8px;
}

.rw-single-job-sidebar-newsletter__intro {
    margin: 0 0 12px;
    color:  var( --bj-nl-content-color, inherit );
}

.rw-bj-archive-newsletter__content > *:first-child {
    margin-top: 0;
}

.rw-bj-archive-newsletter__content > *:last-child {
    margin-bottom: 0;
}

.rw-bj-nl-border-gradient::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: var( --bj-nl-border-width, 1px );
    background: var( --bj-nl-border-gradient, 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;
    z-index: 1;
}

.rw-bj-nl-empty {
    margin: 0;
    font-size: 0.9rem;
}