/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

/* Main container for the job listings page */
.job_page_container {
    display: flex;
    flex-wrap: wrap;
    max-width: 1140px;
    margin: 20px auto; /* Add top and bottom margin for some spacing from the viewport */
    font-family: 'Arial', sans-serif; /* Standard font-family, adjust as needed */
    background-color: #154360; /* Assuming a white background for the entire container */
    padding: 20px; /* Add padding to ensure the content doesn't touch the edges */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Adds subtle shadow around the container */
    border-radius: 8px; /* Rounded corners for the outer container */
}

/* Container for the list of job listings */
.job_listing_container {
    flex: 1;
    margin: 20px;
    max-width: calc(70% - 40px); /* Adjust the max-width to align with the design, considering the margin */
}

/* Individual job listing card */
.job_inner_container {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Slightly more pronounced shadow for depth */
    background: #fff;
    border-radius: 8px; /* Rounded corners for the cards */
    padding: 20px;
    margin-bottom: 20px; /* Space between cards */
}

/* Container for the filters section */
.job_listing_filter {
    flex: 0 0 250px; /* Do not grow or shrink, but start at 250px width */
    padding: 20px;
    background: #e9ecef; /* Light grey background for the filter box */
    border-radius: 8px; /* Rounded corners for the filter box */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Shadow for depth */
    margin-right: 20px; /* Space between filter and job listings */
}

/* Styles for the 'Read More' button */
a.read_more {
    display: inline-block;
    background: #154360; /* Adjusted color to match the screenshot */
    padding: 10px 20px; /* Padding adjusted for a better aspect ratio */
    border-radius: 20px; /* Fully rounded edges for the button */
    font-size: 14px;
    text-decoration: none;
    color: #fff;
    text-align: center;
    transition: background-color 0.3s; /* Smooth background color transition on hover */
}

/* Container for the 'Read More' button to manage spacing */
.read_more_btn {
    margin-top: 15px;
    text-align: right; /* Aligns the button to the right */
}

/* Style for form fields in the filter */
.formfield label {
    display: block;
    cursor: pointer;
    margin-bottom: 5px; /* Space between checkboxes */
}

/* Adjustments to checkbox appearance */
.formfield input[type="checkbox"] {
    cursor: pointer;
    margin-right: 10px; /* Space between checkbox and label */
}

/* Hover effect for 'Read More' button */
a.read_more:hover {
    background: #00407a; /* A slightly darker shade on hover for better interaction */
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .job_page_container {
        flex-direction: column;
    }

    .job_listing_filter, .job_listing_container {
        width: 100%;
        max-width: 100%;
        margin: 0 0 20px 0; /* Adjust the margins for mobile view */
    }

    .job_listing_filter {
        order: -1; /* Filter goes above the listings on mobile */
    }
}

/* Additional style for filter titles */
.filter-title {
    font-weight: bold; /* Make filter titles bold */
    margin-bottom: 10px; /* Space below the filter title */
}

/* Additional styles for input fields */
.search-field {
    width: 100%; /* Full width of the container */
    padding: 8px; /* Adjust padding for aesthetics */
    border: 1px solid #ced4da; /* Light grey border for the input field */
    border-radius: 4px; /* Slightly rounded edges for the input field */
    margin-bottom: 15px; /* Space below the search field */
}