/* Job listing grid */
.job-board-listing {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns layout */
    gap: 20px;
}

.job-item {
    position: relative; /* Ensure position for absolute button */
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
    background-color: #fff; /* Default background color */
	text-decoration:none; /*remove underline */
}

.job-item:hover {
    background-color: #50b964;
    color: #888888;
    cursor: pointer;
	text-decoration: none; /*remove underline */
}

.job-item h2 {
    font-size: 18px; /* Default font size */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	letter-spacing: normal;
    margin-bottom: 10px;
}

.job-item .job-excerpt {
    font-size: 15px; /* Adjust excerpt font size */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
    line-height: 1.5;
    margin-bottom: 15px;
}

.job-item .apply-button {
	display:none; /*hide the apply button */
    position: absolute;
    bottom: 5px;
    right: 5px;
    padding: 10px 20px;
    background-color: rgb(53, 180, 111);
    color: #fff;
    border: none;
    border-radius: 50px;
    cursor: pointer;
	font-size: 12px;
}

.job-item:hover .apply-button {
    background-color: #44444;
}

/* Customizable styles */
.job-item.customize {
    font-size: 16px; /* Custom font size */
    background-color: #f9f9f9; /* Custom background color */
}

.job-item.customize:hover {
    background-color: rgba(80,185,100,0.36); /* Custom hover background color */
    color: black;
}

/* Single Job Post styles */

/* Ensure the custom CSS file is enqueued in your theme functions.php */

.single-job-container {
    display: flex;
    max-width: 1240px;
    margin: 0 auto;
    padding-top: 110px;
	padding-bottom: 50px;
    box-sizing: border-box;
}

.job-content {
    flex: 2;
    padding-right: 20px;
	padding-top: 110px
}

.job-application-form {
    flex: 1;
    background-color: #f3f4f4;
    padding: 20px;
	margin-top: 100px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
	height: 700px;
}

.job-application-form h2 {
    margin-top: 0;
}

.job-application-form form {
    display: flex;
    flex-direction: column;
}

.job-application-form form label {
    margin-bottom: 10px;
}

.job-application-form form input,
.job-application-form form textarea {
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
	width: 100%;s
}

.job-application-form form input[type="submit"] {
    background-color: rgb(53, 180, 111);
    color: #fff;
    border: none;
	border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.job-application-form form input[type="submit"]:hover {
    background-color: #005f8d;
}

/* Responsive Job Listing */
@media screen and (max-width: 768px) {
    .job-board-listing {
        grid-template-columns: 1fr; /* Single column layout on smaller screens */
    }
}

/* Responsive Single Job Container */
@media screen and (max-width: 768px) {
    .single-job-container {
        flex-direction: column;
    }

    .job-content {
        width: 100%; /* Full width on smaller screens */
        padding-right: 0; /* No padding on right on smaller screens */
    }

    .job-application-form {
        width: 100%; /* Full width on smaller screens */
        margin-top: 20px; /* Space between content on smaller screens */
    }
}