/*
Theme Name: Alfinach Child
Template: Divi
Version: 1.0
*/

@import url("../Divi/style.css");

// =======================
// BLOG HEADER
// =======================

.blog-header {
	background-color: #f8f9fa;

	h1 {
		font-size: 2.5rem;
		font-weight: bold;
	}

	p {
		font-size: 1.25rem;
		color: #6c757d;
	}
}

// =======================
// BLOG ENTRIES
// =======================

.blog-entries {
	.card {
		border: none;
		transition: transform 0.2s;

		&:hover {
			transform: translateY(-5px);
		}

		.card-title {
			font-size: 1.25rem;
			margin-bottom: 0.75rem;
		}

		.card-text {
			font-size: 1rem;
			color: #6c757d;
		}

		.card-footer {
			background-color: transparent;
			border-top: none;
			font-size: 0.875rem;
		}
	}
}

// =======================
// BLOG FILTERS
// =======================

.blog-filters {
	.btn {
		border-radius: 8px !important;
		font-size: 0.9rem;
		font-weight: 300;
		color: #000;
		border: 1px solid #eeeeee;
		background-color: #fff;
		transition: all 0.2s ease-in-out;
		box-shadow: none;

		&.active,
		&:hover {
			background-color: #c5001a;
			color: #fff;
			border-color: #c5001a;
		}
	}

	.search-form {
		input {
			font-size: 0.9rem;
			width: 250px;
			margin-left: auto;
			margin-right: auto;
			text-align: center;
			padding: 1rem !important;
			border-radius: 8px !important;
		}
	}
}

// =======================
// PAGINATION
// =======================

.custom-pagination-inline {
	ul {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		padding-left: 0;
		list-style: none;
		margin-top: 2rem;
		margin-bottom: 0;

		li {
			display: inline;

			a,
			span {
				font-size: 1rem;
				font-weight: 400;
				color: #333;
				text-decoration: none;

				&:hover {
					color: #c5001a;
				}
			}

			.current {
				font-weight: bold;
				color: #c5001a;
			}
		}

		img {
			vertical-align: middle;
		}
	}

	.rotate-left {
		transform: rotate(180deg);
	}
}

// =======================
// SINGLE POST PAGE
// =======================

.single-post-page {
	.breadcrumb-custom {
		font-size: 0.9rem;
		margin-bottom: 1.5rem;
		color: #333;

		a {
			text-decoration: none;
			color: #333;
			transition: color 0.2s;

			&:hover {
				color: #a00016;
			}
		}

		span {
			margin: 0 5px;
			color: #999;
		}

		.current {
			font-weight: 500;
			color: #555;
		}
	}

	.post-hero {
		position: relative;
		background-color: #f9f9f9;

		.post-featured-image {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-size: cover;
			background-position: center;
			opacity: 0.3;
			z-index: -1;
		}

		.post-title {
			font-size: 2.5rem;
			font-weight: 300;
			font-family: "Space Grotesk", sans-serif;
			color: #333;
			text-align: left;
		}

		.post-meta {
			font-size: 1rem;
			margin-top: 0.5rem;
			font-weight: 400;
		}
	}

	.post-content {
		font-size: 1.1rem;
		line-height: 1.6;

		p {
			margin-bottom: 1.5rem;
		}

		a {
			color: #c5001a !important;
		}
	}

	.social-icons {
		a {
			color: #c5001a;
			text-decoration: none;
			margin-right: 10px;
			margin-left: 15px;

			img,
			svg {
				height: 30px;
				width: 30px;
			}
		}
	}

	.post-categories {
		margin-bottom: 1rem;
	}

	.post-category-link {
		display: inline-block;
		padding: 0.6rem;
		margin-right: 15px;
		border-radius: 8px !important;
		font-size: 0.9rem;
		font-weight: 300;
		color: #000;
		border: 1px solid #c5001a;
		background-color: transparent;
		text-decoration: none;
		transition: all 0.2s ease-in-out;

		&:hover {
			background-color: #c5001a;
			color: #fff;
		}
	}

	.related-posts {
		.card {
			border: none;
			min-height: 470px;
			transition: transform 0.2s;

			&:hover {
				transform: translateY(-5px);
			}

			.card-title {
				font-size: 1.2rem;
				font-weight: bold;
			}

			.card-text {
				font-size: 0.95rem;
				color: #6c757d;
			}
		}

		.card-img-fixed {
			height: 200px;
			object-fit: cover;
			width: 100%;
			display: block;
		}

		.btn {
			position: absolute;
			bottom: 0;
		}
	}
}

// =======================
// POST NAVIGATION
// =======================

.post-navigation {
	.fixed-meta {
		min-height: 150px;
		position: relative;

		h5 {
			margin-bottom: 2.5rem;
			font-size: 1.2rem;
			font-weight: 600;
			color: #000;
		}

		.post-meta {
			position: absolute;
			bottom: 2.5rem;
			left: 0;
			right: 0;
			font-size: 1rem;
			color: #c5001a;
			font-weight: 500;
		}

		.text-muted {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			color: #666;
			font-size: 0.875rem;
			text-transform: uppercase;
		}

		&.text-end {
			.post-meta,
			.text-muted {
				left: auto;
				right: 0;
				text-align: right;
			}
		}
	}
}

// =======================
// ROTATE LEFT (FLECHA)
// =======================

.rotate-left {
	transform: rotate(180deg);
}

// =======================
// BORDER NAVIGATION
// =======================

.border-navigation {
	border-top: 1px solid #eee;
}

// =======================
// RESPONSIVE ADJUSTMENTS
// =======================

@media (max-width: 768px) {
	.post-navigation .row {
		flex-direction: column;
		align-items: stretch;
	}

	.post-navigation .col-md-4,
	.post-navigation .col-md-4.offset-md-1 {
		max-width: 100%;
		flex: 0 0 100%;
		margin-bottom: 2rem;
		text-align: left;
	}

	.post-navigation .d-flex {
		flex-direction: row !important;
		align-items: center !important;
		gap: 0.5rem;
	}
	.post-navigation .rotate-left {
		transform: rotate(180deg);
	  }

	.post-navigation .fixed-meta {
		min-height: auto !important;
		text-align: center !important;
		margin-bottom: 2rem;
	}

	.post-navigation .fixed-meta {
		min-height: auto;

		.post-meta,
		.text-muted {
			position: static;
			bottom: auto;
			left: auto;
			right: auto;
			text-align: center;
			margin-top: 0.5rem;
		}

		&.text-end {
			.post-meta,
			.text-muted {
				text-align: center;
			}
		}
	}
}