/*
Theme Name: Beaver Builder Child
Theme URI: https://www.wpbeaverbuilder.com
Description: Child theme for Beaver Builder Theme
Author: Your Name
Author URI: https://yourwebsite.com
Template: bb-theme
Version: 1.0.0
*/

/* Import parent theme styles */
@import url("../bb-theme/style.css");

/*------------------------------ Blog Archive ------------------------------*/

.post-archive-wrapper {

    h1 {
		text-align: center;
		margin: 0 auto;
		padding: 50px 10px;
    }

    .post-archive-container {
        padding: 0 20px 75px;

		.post {

			&:not(:last-child) {
				margin: 0 auto 50px;
			}

			.post-content {
				box-shadow: 0 0 10px #000;
				display: table;
				margin: 0 auto;
				max-width: 1000px;
				width: 100%;
				padding: 20px;

				&:after {
					content: '';
					clear: both;
					display: table;
				}

				h2 {
					font-size: 30px;

					a {
						color: #687169;

						&:hover {
							color: #a8ba9d;
						}
					}

				}

				.featured-image {
					float: left;
					max-width: 450px;
					display: block;
					margin: 0 20px 5px 0;
					transition: all 0.3s;

					&:hover {
						transform: scale(1.025);
						transition: all 0.3s;
					}

					&:after {
						content: '';
						clear: both;
						display: block;
						position: relative;
					}

					img {
						display: block;
						margin: 0 auto;
						padding: 0;
						max-width: 100%;
						width: 100%;
					}
				}

				.content {
				
					a {
						color: #687169;
						font-weight: 800;
						
						&:hover {
							color: #a8ba9d;
							text-decoration: underline;
							opacity: 1;
						}
					}
				}

				.date {
					color: #444;
					font-size: 17px;
					font-weight: 800;
					margin: 10px auto 0;
				}

				.category {
					color: #444;
					font-size: 17px;
					margin: 5px 0 10px;

					.category-count {
						font-weight: 800;
						padding: 0 3px 0 0;
					}
				}
			}
		}
    }

	.navigation {
	    display: flex;
	    flex-wrap: wrap;
	    justify-content: center;
	    max-width: max-content;
	    align-items: center;
	    margin: 0 auto;
	    padding: 0 0 50px;

	    a {
	        color: #a8ba9d;
	        padding: 12px 24px;
	        background: #fafafa;
	        border: 1px solid #687169;
	        margin: 0 auto;
	        display: block;
	        max-width: max-content;
	    
	        &:hover {
	            background: #687169;
	            color: #fff;
	            text-decoration: none;
	        }
	    }
	}

	.coming-soon {
		text-align: center;
	}
}

@media screen and (max-width: 850px) {

	.post-archive-wrapper {

		.post-archive-container {

			.post {

				.post-content {

					h2 {
						font-size: 28px;
						text-align: center;
					}

					.featured-image {
						float: none;
						margin: 0 auto 20px;
					}

					.date {
						text-align: center;
					}

					.category {
						text-align: center;
					}
				}
			}
		}
	}
}

/*------------------------------ Blog Posts ------------------------------*/

.single-post {

	h1 {
		border: none;
		font-size: 40px;
		margin: 20px auto;
		padding: 0 10px;
		max-width: 1200px;
		text-align: center;
	}

	.post-wrapper {
		background: #fff;
		display: grid;
		justify-content: center;

		.post-container {
			max-width: 1000px;
			margin: 0 auto;

			.post {

				.post-content {

					h2 {
						font-size: 30px;
					}

					.date {
						color: #444;
						font-size: 17px;
						font-weight: 800;
						margin: 0 auto;
						text-align: center;
					}

					.category {
						color: #444;
						font-size: 17px;
						margin: 5px auto 0;
						text-align: center;

						.category-count {
							font-weight: 800;
							padding: 0 3px 0 0;
						}
					}

					.featured-image {
						max-width: max-content;
						margin: 0 auto;
						padding: 30px 0 40px;

						img  {
							margin: 0 auto;
							max-width: max-content;
							width: 100%;
						}
					}

					.content {
						margin: 0 auto;
						padding: 0 20px;

						a {
							color: #687169;
							font-weight: 800;

							&:hover {
								color: #a8ba9d;
								text-decoration: underline;
								opacity: 1;
							}
						}
					}
				}
			}
		}

		.navigation {

			.nav-links {
			    display: grid;
			    max-width: 1200px;
			    margin: 35px auto 0;
			    justify-content: center;
			    text-align: center;
			    gap: 20px;

				a {
					color: #687169;

					&:hover {
						color: #a8ba9d;
					}
				}

				.meta-nav {
					display: flex;
					margin: 0 auto 5px;
					text-align: center;
					max-width: max-content;
					align-items: center;
					font-weight: 300;
					font-size: 17px;
				}

				.post-title {
					font-size: 20px;
					font-weight: 500;
				}
			}
		}

		.back-to-blog {
			color: #a8ba9d;
			padding: 12px 24px;
			background: #fafafa;
			border: 1px solid #687169;
			margin: 50px auto;
			display: block;
			max-width: max-content;

			&:hover {
				background: #687169;
				color: #fff;
				text-decoration: none;
			}
		}

		.coming-soon {
			text-align: center;
		}
	}
}

@media screen and (max-width: 1024px) {

	.single-post {

		h1 {
			font-size: 34px !important;
		}

		.post-wrapper {

			.post-container {

				.post {

					.post-content {

						h2 {
							font-size: 28px;
						}
					}
				}
			}
		}
	}
}

@media screen and (max-width: 767px) {

	.single-post {

		h1 {
			font-size: 34px !important;
		}

		.post-wrapper {

			.post-container {

				.post {

					.post-content {

						h2 {
							font-size: 26px;
							text-align: center;
						}
					}
				}
			}
		}
	}
}