.blog,
.tmpl_type_category,
.tmpl_type_archive,
.tmpl_type_search {
	.interior {
		flex-wrap: wrap;
	}

	h2 {
		font-size: 20px;
		text-transform: uppercase;
		text-align: left;
		margin-top: 0;
		margin-bottom: 20px;

		/* Desktop Styles */
		@media (width >= 1024px) {
			font-size: 24px;
		}

		a {
			text-decoration: none;
		}
	}

	.post-snippet {
		display: grid;
		grid-template-columns: auto;
		column-gap: 30px;
		row-gap: 20px;
		padding-bottom: 100px;

		/* border-bottom: 1px solid var(--primary-color); */
		/* Tablet Styles */
		@media (width >= 768px) {
			grid-template-columns: 230px auto;
		}

		.thumb {
			width: 100%;
			position: relative;
			display: block;

			img {
				width: 100%;
				height: auto;
				position: relative;
			}
		}

		.excerpt {

			/* Tablet Styles */
			@media (width >= 768px) {
				width: 100%;
			}

			p {
				margin-top: 0;
			}
		}
	}

	.date {
		font-size: 21px;
		text-transform: uppercase;
		color: var(--primary-color);
		text-align: right;
		margin-bottom: 16px;
	}

	.meta-data {
		font-size: 13px;
		margin-bottom: 10px;
		font-style: italic;
		color: var(--tertiary-alt);

		a {
			color: var(--tertiary-alt);
		}
	}

	.more {
		position: relative;
		display: flex;
		align-items: center;
	}
}

.tmpl_type_single {
	.pagination-header {
		position: relative;

		a {
			display: flex;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);

			&[rel="next"] {
				right: 0;
			}

			&[rel="prev"] {
				left: 0;
			}

			/* svg {
				path {
					transition: fill .3s, stroke .3s;
				}
			}
			&:hover {
				svg {
					path {
						fill: var(--primary-accent);
						stroke: var(--primary-accent);
					}
				}
			} */
		}
	}

	.post-featured-image {
		img {
			width: 100%;
			height: auto;
		}
	}

	.blog-title {
		line-height: 1.2em;
		margin-top: 15px;
		margin-bottom: 15px;
		padding-left: 120px;
		padding-right: 120px;
		text-align: center;
		width: 100%;
		/*
@media (width >= 768px) {
			padding-left: 190px;
			padding-right: 190px;
		} */
	}

	.button {
		text-decoration: none;
	}

	/* .post-nav-links {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	} */
}


.search-bar {
	width: 100%;
	margin-bottom: 40px;

	/* Tablet Styles */
	@media (width >= 768px) {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.blog-dropdowns {

		/* Tablet Styles */
		@media (width >= 768px) {
			display: flex;
		}
	}
}

.cat-select,
.archive-select {
	position: relative;

	/* Comment to make full width */
	.blog-dropdown-options {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 6px 30px;
		margin-bottom: 10px;

		/* Tablet Styles */
		@media (width >= 768px) {
			margin-bottom: 0;
			margin-right: 20px;
			width: 200px;
		}

		/* Desktop Styles */
		@media (width >= 1024px) {
			min-width: 230px;
		}

		&:after {
			transform: rotate(90deg);
		}

		i {
			font-size: 30px;
			line-height: 1em;
			color: var(--primary-color);
		}

		.arrow-down {
			display: flex;

			svg {
				width: 10px;
				height: auto;
				transform: rotate(90deg);
			}
		}
	}

	.cats {
		position: absolute;
		display: none;
		z-index: 100;
		background: var(--primary-color);
		margin: 0;
		list-style: none;
		padding: 20px 0;
		margin-top: -10px;
		text-align: left;
		width: 100%;

		/* Uncomment below to make full width */
		/* left: 0; 
		margin-top: 20px; */
		/* Tablet Styles */
		@media (width >= 768px) {
			margin-top: 0;
			width: 200px;
		}

		/* Desktop Styles */
		@media (width >= 1024px) {
			width: 230px;
		}

		.cats-list {
			margin: 0;
		}

		li {
			padding: 5px 20px;

			a {
				text-transform: uppercase;
				text-decoration: none;
				color: var(--light-color);
			}
		}
	}
}

.blog-search {
	border-bottom: 1px solid var(--dark-alt);
	position: relative;
	margin-bottom: 40px;

	/* Tablet Styles */
	@media (width >= 768px) {
		margin-bottom: 0;
	}

	form {
		display: flex;
		align-items: center;
		padding-bottom: 10px;

		input[type="text"] {
			font-size: 14px;
			border: none;
			background: transparent;
			/* color: rgb(255, 255, 255 / .5); */
			outline: none;
			width: 80%;

			/* Tablet Styles */
			@media (width >= 768px) {
				width: 274px;
			}

			&::placeholder {
				font-weight: var(--fw-bold);
				color: rgb(from var(--text-color) r g b / 0.3);
			}
		}

		input[type="submit"] {
			width: 23px;
			height: 23px;
			min-width: 23px;
			padding: 0;
			border: none;
			z-index: 1;
			background: transparent;
		}
	}

	.search-icon {
		svg {
			height: 23px;
			width: auto;
			line-height: 1em;
			position: absolute;
			right: 0;
			top: 0;

			path {
				fill: var(--primary-color);
			}
		}
	}
}

.pagination {
	display: flex;
	flex-direction: column;
	margin-bottom: 30px;
	position: relative;
	width: 100%;

	/* Tablet Styles */
	@media (width >= 768px) {
		flex-direction: row;
		justify-content: space-between;
		margin-bottom: 60px;
	}

	&.pagination-header {
		flex-direction: row;

		.pagination-navigation {
			justify-content: space-between;
			width: 100%;

			.button {

				/* Tablet Styles */
				@media (width >= 768px) {
					width: 100px;
				}
			}

			.prev-blog-button {
				order: 1;
			}

			.next-blog-button {
				order: 3;
			}
		}
	}

	.tmpl_type_index {

		/* Tablet Styles */
		@media (width >= 768px) {
			justify-content: flex-end;
		}
	}

	.blog-title {
		order: 2;
		text-align: center;
	}

	.main-blog-button {
		text-align: center;
		margin: 0 auto;
		order: 2;

		/* Tablet Styles */
		@media (width >= 768px) {
			order: 1;
			margin: 0;
		}

		.button {

			/* Tablet Styles */
			@media (width >= 768px) {
				min-width: 200px;
			}
		}

		/* svg {
			width: 11px;
			height: 11px;
			margin-right: 13px;
		}
		
@media (width >= 768px) {
			padding-top: 0;
		}
		&:hover, &:active, &:focus {
			svg {
				path {
					fill: var(--secondary-alt);
				}
			}
		}
		&:before {
			display: none;
		} */
	}

	.pagination-navigation {
		display: flex;
		align-items: center;
		justify-content: center;
		order: 1;
		text-align: center;

		/* Tablet Styles */
		@media (width >= 768px) {
			order: 2;
		}

		.button {
			display: flex;
			align-items: center;
			justify-content: center;
			/* line-height: 1em;
			width: fit-content; */

			span {
				display: flex;

				svg {
					width: 14px;
					height: auto;

					path {
						fill: var(--light-color);
					}
				}
			}
		}
	}

	.prev-blog-button {
		margin-right: 5px;
		margin-bottom: 10px;
		/* order: 1; */
		position: relative;

		/* Tablet Styles */
		@media (width >= 768px) {
			margin-bottom: 0;
		}

		.text-container {
			margin-left: 5px;
		}
	}

	.next-blog-button {
		margin-left: 5px;
		margin-bottom: 10px;
		/* order: 2; */
		position: relative;

		/* Tablet Styles */
		@media (width >= 768px) {
			margin-bottom: 0;
		}

		.text-container {
			margin-right: 5px;
		}
	}

	.button {
		font-size: 12px;
		width: 100px;

		/* Tablet Styles */
		@media (width >= 768px) {
			font-size: 16px;
			width: 170px;
		}
	}
}