/**
 * WPJobBoard Frontend CSS Overrides
 * Arsboni Child Theme
 *
 * This file restores legacy customizations that were overwritten by plugin updates.
 * The base styles are loaded from the plugin, and these overrides restore previous behavior.
 *
 * Last updated: 2025-11-17
 */

/* ============================================================================
   Logo Image Sizing - Responsive Layout (Legacy Custom)
   ========================================================================== */

.wpjb .wpjb-img-50 {
    max-width: 100%;
    display: flex;
    justify-content: center;
    /* Force larger image size to prevent pixelation */
    width: 150px !important;
    height: 150px !important;
}

.wpjb .wpjb-img-50 img {
    max-width: 150px; /* Resize the logo for mobile */
    max-height: 150px;
    width: 150px !important; /* Force rendering at full size to prevent pixelation */
    height: auto !important; /* Maintain aspect ratio */
    object-fit: contain; /* Ensure image fits properly without distortion */
}

/* For larger screens: Logo stays beside the job listing */
.wpjb .wpjb-grid-row {
    display: flex; /* Makes the row flexbox to align logo and content side by side */
    flex-direction: row; /* Default row layout */
}

.wpjb .wpjb-img-50 {
    order: 0; /* Default order for the logo */
    margin-right: 15px; /* Adds spacing between the logo and the content */
}

/* For smaller screens: Logo moves above the job listing */
@media only screen and (max-width: 768px) {
    .wpjb .wpjb-grid-row {
        flex-direction: column; /* Stacks elements vertically */
    }

    .wpjb .wpjb-img-50 {
        order: -1; /* Moves the logo to the top */
        margin-right: 0; /* Resets right margin */
        margin-bottom: 10px; /* Adds spacing below the logo */
        display: flex;
        justify-content: center; /* Ensures the logo remains centered on smaller screens */
    }
}

/* ============================================================================
   Search Form - Multiselect Options (Override display: block)
   ========================================================================== */

/* Override the plugin's display: block to allow inline-flow layout */
#wpjb-top-search .daq-multiselect-options ul li {
    display: inline-block !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

#wpjb-top-search .daq-multiselect-options ul li input[type=checkbox] {
    display: inline-block !important;
}