/*
 * CAJ JobSearch Layout — caj-layout.css
 * Reskins WP Jobsearch job listing cards to a clean TruckersReport-style layout.
 *
 * Card structure (WP Jobsearch classic layout):
 *   li.jobsearch-column-12
 *     div.jobsearch-joblisting-classic-wrap
 *       figure                          ← company logo
 *       div.jobsearch-joblisting-text
 *         div.jobsearch-table-layer
 *           div.jobsearch-table-row
 *             div.jobsearch-table-cell  ← left: title, company, location, date, type
 *             div.jobsearch-table-cell  ← right: job-type badge + favourite
 *
 * We keep the existing HTML and re-arrange visually using flexbox overrides.
 * A "Show Details" button and optional "Quick Apply" button are injected by JS.
 */

/* ─── 1. LIST CONTAINER ──────────────────────────────────────────────────── */

/* Remove default list padding/margin from the jobs UL */
ul.jobsearch-jobs-ul,
.jobsearch-jobs-listing-wrap ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ─── 2. INDIVIDUAL CARD ─────────────────────────────────────────────────── */

li.jobsearch-column-12 {
    margin-bottom: 14px;
    padding: 0;
    list-style: none;
}

.jobsearch-joblisting-classic-wrap {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    background: #ffffff !important;
    border: 1px solid #e2e6ea !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important;
    transition: box-shadow 0.2s ease, transform 0.15s ease !important;
    padding: 0 !important;
    min-height: 110px;
}

.jobsearch-joblisting-classic-wrap:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
    transform: translateY(-1px) !important;
}

/* ─── 3. LOGO (figure) ───────────────────────────────────────────────────── */

.jobsearch-joblisting-classic-wrap > figure {
    flex: 0 0 110px !important;
    width: 110px !important;
    min-width: 110px !important;
    max-width: 110px !important;
    background: #f8f9fb !important;
    border-right: 1px solid #e2e6ea !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 14px !important;
    margin: 0 !important;
}

.jobsearch-joblisting-classic-wrap > figure a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

.jobsearch-joblisting-classic-wrap > figure img {
    width: 80px !important;
    height: 80px !important;
    object-fit: contain !important;
    border-radius: 4px !important;
    display: block !important;
}

/* ─── 4. TEXT BODY ───────────────────────────────────────────────────────── */

.jobsearch-joblisting-classic-wrap .jobsearch-joblisting-text {
    flex: 1 1 auto !important;
    padding: 14px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
}

/* Remove the table-layer / table-row / table-cell display:table behaviour */
.jobsearch-joblisting-classic-wrap .jobsearch-table-layer {
    display: block !important;
}

.jobsearch-joblisting-classic-wrap .jobsearch-table-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 12px !important;
}

/* Left cell: title + meta */
.jobsearch-joblisting-classic-wrap .jobsearch-table-cell:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: block !important;
    vertical-align: top !important;
}

/* Right cell: badge + favourite — push to the right */
.jobsearch-joblisting-classic-wrap .jobsearch-table-cell:last-child {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 8px !important;
    padding-top: 2px !important;
}

/* ─── 5. JOB TITLE ───────────────────────────────────────────────────────── */

.jobsearch-joblisting-classic-wrap h2.jobsearch-pst-title {
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

.jobsearch-joblisting-classic-wrap h2.jobsearch-pst-title a {
    color: #1a56db !important;
    text-decoration: none !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    display: block !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.jobsearch-joblisting-classic-wrap h2.jobsearch-pst-title a:hover {
    color: #1240a8 !important;
    text-decoration: underline !important;
}

/* ─── 6. META UL (company, location, date, type) ─────────────────────────── */

.jobsearch-joblisting-classic-wrap .jobsearch-list-option > ul,
.jobsearch-joblisting-classic-wrap .jobsearch-list-option ul {
    list-style: none !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 14px !important;
    align-items: center !important;
}

.jobsearch-joblisting-classic-wrap .jobsearch-list-option > ul li,
.jobsearch-joblisting-classic-wrap .jobsearch-list-option ul li {
    font-size: 13px !important;
    color: #555 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Company name */
.jobsearch-joblisting-classic-wrap .job-company-name a {
    color: #333 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-decoration: none !important;
}

.jobsearch-joblisting-classic-wrap .job-company-name a:hover {
    text-decoration: underline !important;
}

/* Icons in meta */
.jobsearch-joblisting-classic-wrap .jobsearch-list-option i.jobsearch-icon {
    font-size: 12px !important;
    color: #888 !important;
    flex-shrink: 0 !important;
}

/* Job type links in meta */
.jobsearch-joblisting-classic-wrap .jobsearch-list-option ul li a {
    color: #555 !important;
    text-decoration: none !important;
    font-size: 13px !important;
}

/* ─── 7. JOB TYPE BADGE (right cell) ────────────────────────────────────── */

.jobsearch-joblisting-classic-wrap .jobsearch-job-userlist {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 8px !important;
}

.jobsearch-joblisting-classic-wrap .jobsearch-option-btn {
    display: inline-block !important;
    background: #1a56db !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
}

.jobsearch-joblisting-classic-wrap .jobsearch-option-btn:hover {
    background: #1240a8 !important;
    color: #fff !important;
}

/* ─── 8. FAVOURITE BUTTON ────────────────────────────────────────────────── */

.jobsearch-joblisting-classic-wrap .like-btn {
    display: flex !important;
    align-items: center !important;
}

.jobsearch-joblisting-classic-wrap .like-btn a {
    color: #ccc !important;
    font-size: 18px !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
}

.jobsearch-joblisting-classic-wrap .like-btn a:hover,
.jobsearch-joblisting-classic-wrap .like-btn a.active {
    color: #e74c3c !important;
}

/* ─── 9. INJECTED BUTTONS (added by caj-layout.js) ──────────────────────── */

.caj-card-actions {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    margin-top: 10px !important;
    flex-wrap: wrap !important;
}

.caj-btn-details {
    display: inline-block !important;
    background: #f5a623 !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 7px 18px !important;
    border-radius: 5px !important;
    text-decoration: none !important;
    border: none !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
}

.caj-btn-details:hover {
    background: #d4891a !important;
    color: #fff !important;
    text-decoration: none !important;
}

.caj-btn-apply {
    display: inline-block !important;
    background: #1a56db !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 7px 18px !important;
    border-radius: 5px !important;
    text-decoration: none !important;
    border: none !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
}

.caj-btn-apply:hover {
    background: #1240a8 !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* ─── 10. RESPONSIVE ─────────────────────────────────────────────────────── */

@media (max-width: 600px) {
    .jobsearch-joblisting-classic-wrap {
        flex-direction: column !important;
    }

    .jobsearch-joblisting-classic-wrap > figure {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid #e2e6ea !important;
        padding: 12px !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
    }

    .jobsearch-joblisting-classic-wrap > figure img {
        width: 60px !important;
        height: 60px !important;
    }

    .jobsearch-joblisting-classic-wrap .jobsearch-table-row {
        flex-direction: column !important;
    }

    .jobsearch-joblisting-classic-wrap .jobsearch-table-cell:last-child {
        flex-direction: row !important;
        align-items: center !important;
    }

    .caj-card-actions {
        flex-direction: column !important;
    }

    .caj-btn-details,
    .caj-btn-apply {
        width: 100% !important;
        text-align: center !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* HIDE WP JOBSEARCH NATIVE LOCATION + RADIUS — replaced by CAJ sticky bar    */
/* ─────────────────────────────────────────────────────────────────────────── */

/*
 * Hide the Mapbox geocoder location field and its parent LI inside the
 * WP Jobsearch top search bar. The CAJ sticky bar (bottom of page) handles
 * all location + radius searching via the local ZIP database instead.
 */

/* Hide the entire location LI (contains Mapbox geocoder + radius tooltip) */
ul.jobsearch-jobs-topsrchul > li:has(.jobsearch_searchloc_div) {
    display: none !important;
}

/* Fallback for browsers that don't support :has() — hide by class directly */
.jobsearch_searchloc_div {
    display: none !important;
}

/* Hide the radius tooltip wherever it appears */
.careerfy-radius-tooltip {
    display: none !important;
}

/* Also hide the hidden location input to prevent WP Jobsearch from sending
   an empty location string that could confuse its internal query builder */
input[name="location"],
input[id*="lochiden_addr"] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Expand the sector/keyword field to fill the space left by the hidden location */
ul.jobsearch-jobs-topsrchul > li:has(.jobsearch-select-style) {
    flex: 1 1 auto !important;
}

/* ── Mobile: hide WP Jobsearch filter sidebar and green toggle button ────── */

/* Override WP Jobsearch's own @media (max-width:480px) that shows the green button */
@media (max-width: 480px) {
    .mobfiltrs-openrbtn-con,
    body .mobfiltrs-openrbtn-con,
    body div.mobfiltrs-openrbtn-con {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

@media (max-width: 768px) {
    /* Hide the green mobile filter toggle button at all mobile sizes */
    .mobfiltrs-openrbtn-con,
    body .mobfiltrs-openrbtn-con,
    body div.mobfiltrs-openrbtn-con,
    .open-listin-mobfiltrs,
    a.open-listin-mobfiltrs,
    body a.open-listin-mobfiltrs {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Hide the entire filter sidebar on mobile */
    .listin-filters-sidebar,
    .jobsearch-column-3.listin-filters-sidebar,
    body .listin-filters-sidebar {
        display: none !important;
    }

    /* Make the job results take full width on mobile */
    .jobsearch-column-9,
    .jobsearch-column-9.jobsearch-typo-wrap {
        width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
    }

    /* Hide the inline blue search bar in sidebar (redundant on mobile) */
    #caj-inline-search {
        display: none !important;
    }
}