/*!
Theme Name: Yoakum EDC
Author: Eisenberg Inc.
Version: 1.0.0
*/
 

/*--------------------------------------------------------------
# Blog List
--------------------------------------------------------------*/


.blog-posts-container {
    margin: 0 auto;
}

.post-row {
    display: flex;
    align-items: stretch; /* Makes columns equal height */
    padding: 3% 0;
}


.post-row.image-left {
	background-color: #EAF2FA;
}

.post-image {
    flex: 0 0 50%; /* Ensures the image takes up 50% */
    background-size: cover;
    background-position: center;
}

.post-content-wrapper {
    flex: 0 0 50%; /* Takes up 50% of the row width */
    display: flex;
    align-items: center; /* Centers the .post-content vertically */
}

.image-left .post-content-wrapper {
    justify-content: flex-start; /* Aligns content to the left for odd posts */
   
}

.image-right .post-content-wrapper {
    justify-content: flex-end; /* Aligns content to the right for even posts */
}

.post-content {
    max-width: 647px;
    padding: 20px;
}


.image-left .post-content-wrapper .post-content {
	 padding-left: 7.5%;
}


.image-right .post-content-wrapper .post-content {
	 padding-right: 7.5%;
}



.image-left .post-content-wrapper {
    order: 2;
    text-align: left;
}

.image-left .post-image {
    order: 1;
}

.image-right .post-content-wrapper {
    order: 1;
    text-align: left;
}

.image-right .post-image {
    order: 2;
}

.blog-posts-container .post-category {
    display: block;
    font-size: 0.8em;
    color: #4BB8FB;
    margin-bottom: 0;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 2px;
}

.blog-posts-container .post-title {
    font-size: 1.5em;
    line-height: 1.2;
    color: #0273E3;
    margin: 10px 0;
}

.blog-posts-container .post-date {
    font-size: 0.8em;
    color: #04052B;
    margin-bottom: 10px;
}

.blog-posts-container .post-excerpt {
    font-size: 1em;
    color: #04052B;
    margin-bottom: 50px;
}

.blog-posts-container .read-more {
	font-size: 0.9em;
    color: #fff;
    text-decoration: none;
    padding: 12.5px 35.5px;
    background-color: #0273E3;
}


.blog-posts-container .read-more:hover {
	background-color: var(--orange);
}

.pagination {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.pagination a, .pagination span {
    margin: 0 5px;
    padding: 8px 12px;
    color: #333;
    text-decoration: none;
    border: 1px solid #ddd;
}

.pagination .current {
    background-color: #0066cc;
    color: #fff;
    border: 1px solid #0066cc;
}

/* Responsive adjustments */

@media (max-width: 992px) {
    .post-row {
        flex-direction: column;
        padding: 0 0 3%;
    }

    .post-row.image-right {
    	flex-direction: column-reverse; 
    }

    .post-image, .post-content-wrapper {
        flex: 0 0 100%;
    }

    .post-image {
        min-height: 350px;
    }

    .post-content-wrapper {
        justify-content: center; /* Centers content for single-column layout */
        text-align: center; /* Centers text for smaller screens */
    }

    .post-content {
        max-width: 100%;
        padding: 20px;
    }

    .image-left .post-content-wrapper .post-content {
		 padding-left: 20px;
	}


	.image-right .post-content-wrapper .post-content {
		 padding-right: 20px;
	}

}


/*--------------------------------------------------------------
# Single Blog
--------------------------------------------------------------*/


.post-header {
    position: relative;
    background-size: cover;
    background-position: center;
    text-align: center;
    color: #ffffff;
    width: 100%;
    height: 0;
    padding-top: 49.17%; /* 944px / 1920px * 100 = 49.17% */
}

.post-header .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(4, 5, 43, 0.6); /* Blue overlay */
    z-index: 1;
}

.post-header .header-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center horizontally and vertically */
    z-index: 2; /* Ensures text is above the overlay */
    max-width: var(--max-content-width); /* Keeps text from touching edges on smaller screens */
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
}

.post-header .post-category, 
.post-header .post-title, 
.post-header .post-date {
    margin: 10px 0;
}


.post-header .post-category {
    text-transform: uppercase;
    color: #4BB8FB;
    font-weight: 600;
    letter-spacing: 2px;
}

.post-header .post-title {
    font-size: clamp(2.5rem, 1.1796rem + 4.2254vw, 6.25rem);
    line-height: 1.1;
    color: #fff;
}

.post-header .post-date {
    font-size: 1em;
    color #fff;
}


/* Post Copy */


.single-post .single_post_wrapper {
    background-color: #fff;
    position:relative;
    z-index: 5;
    margin-top: -8%;
    border-radius: 10px;
    padding-bottom: var(--standard-padding);
}


.single-post .single_post_content {
    max-width: 1188px;
    margin: 0 auto;
    padding-top: 50px;
    padding-left: 20px;
    padding-right: 20px;
}


.single-post h3 {
    color: #0273E3;
}


.single-post figure {
    margin-bottom: 50px;
    max-width: 100% !important;
}


.wp-caption {
    position: relative;
    display: inline-block;
    width: 100%; /* Ensure it respects image width */
    margin: 0; /* Adjust margin as needed */
}

.wp-caption img {
    display: block;
    width: 100%; /* Makes the image responsive */
    height: auto;
}

.wp-caption .wp-caption-text {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px; /* Adds padding for visual spacing */
    background-color: rgba(4, 5, 43, 0.7); /* Semi-opaque blue background */
    color: #ffffff; /* White text for contrast */
    text-align: right; /* Centers the text */
    font-size: 0.9rem; /* Adjust as needed */
}


/* Related Post */

.related-posts {
    background-color: #EAF2FA;
    text-align: center;
    padding-top: var(--standard-padding);
    padding-bottom: var(--standard-padding);
}

.related-post-wrapper {
    max-width: var(--max-content-width);
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

.related-post-wrapper h2 {
    margin-bottom: 50px;
}

.related-posts-grid {
    display: flex;
    gap: 50px;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 100%; /* Ensure it uses full width of the container */
}

.related-post-item {
    width: calc(50% - 25px); /* Take up 50% of the width, adjusted for gap */
    box-sizing: border-box;
}

.related-post-image {
    width: 100%;
    height: 246px; /* Fixed height for the image */
    background-size: cover;
    background-position: center;
    border-radius: 8px 8px 0 0; /* Rounded corners for the top */
}

.related-post-content {
    padding: 15px;
    text-align: left;
    border-radius: 0 0 8px 8px; /* Rounded corners for the bottom */
}

.related-post-content .post-category {
    font-size: 0.85em;
    font-weight: 600;
    color: #4BB8FB;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.related-post-content h3 {
    font-size: 1.25rem;
    margin: 5px 0;
    line-height: 1.4;
    color: #0273E3;
}

.related-post-content h3 a {
    color: #0273E3;
    text-decoration: none;
}

.related-post-content h3 a:hover {
    text-decoration: underline;
    color: var(--orange);
}

.related-post-content .post-date {
    font-size: 0.85em;
    color: #666;
    margin-top: 5px;
}




.single-post-social {
    width: 100%;
    padding-top: var(--standard-padding);
    padding-bottom: var(--standard-padding);
    background-color: #fff;
    text-align: center;
}




/* Responsive adjustment for smaller screens */
@media (max-width: 992px) {
    .post-header {
        height: auto; /* Adjust height to content */
        padding-top: 0; /* Remove padding-top */
    }

    .post-header .header-content {
        position: relative;
        top: 0;
        left: 0;
        transform: none; /* Remove centering transform */
        padding: 40px 20px; /* Add padding for spacing */
    }

    .single-post .single_post_wrapper {;
        margin-top: 0;
        border-radius: 10px;
    }


    .single-post .single_post_content {
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

}

@media (max-width: 768px) {

    .related-posts-grid {
        gap: 0;
    }

    .related-post-item {
        width: 100%; /* Take up 50% of the width, adjusted for gap */
        box-sizing: border-box;
    }

}