/* Blog Page Specific Styles */

/* Active category highlight */
.category-list a.active-category {
  background-color: #f0f8ff;
  border-left: 3px solid var(--theme-color, #0066cc);
  font-weight: 600;
}

/* Blog excerpt styling */
.blog-excerpt {
  background-color: #f9f9f9;
  padding: 15px;
  border-left: 4px solid var(--theme-color, #0066cc);
  font-size: 16px;
  line-height: 1.6;
}

/* Blog content formatting */
.blog-content {
  font-size: 16px;
  line-height: 1.8;
  color: #333;
}

.blog-content p {
  margin-bottom: 15px;
}

/* Related posts section */
.related-posts-area {
  border-top: 1px solid #e0e0e0;
  padding-top: 40px;
}

.related-posts-area h3 {
  font-size: 24px;
  font-weight: 700;
  color: #333;
  margin-bottom: 30px;
}

/* Loading state */
.blog-item.loading {
  opacity: 0.5;
  pointer-events: none;
}

/* Sidebar widget spacing */
.sidebar .widget {
  margin-bottom: 30px;
}

/* Search form enhancement */
.blog-search-form {
  position: relative;
}

.blog-search-form .form-control:focus {
  border-color: var(--theme-color, #0066cc);
  box-shadow: 0 0 0 0.2rem rgba(0, 102, 204, 0.25);
}

/* Category list hover effect */
.category-list a {
  transition: all 0.3s ease;
}

.category-list a:hover {
  background-color: #f5f5f5;
  padding-left: 15px;
}

/* Blog meta responsive */
@media (max-width: 768px) {
  .blog-meta {
    flex-direction: column;
  }

  .blog-meta-left,
  .blog-meta-right {
    width: 100%;
    margin-bottom: 10px;
  }

  .blog-meta ul {
    flex-wrap: wrap;
  }
}

/* Pagination active state */
.pagination .page-item.active .page-link {
  background-color: var(--theme-color, #0066cc);
  border-color: var(--theme-color, #0066cc);
}

/* Share button enhancement */
.share-link {
  cursor: pointer;
  transition: all 0.3s ease;
}

.share-link:hover {
  color: var(--theme-color, #0066cc);
}

/* Recent post widget enhancement */
.recent-post-single {
  transition: transform 0.3s ease;
}

.recent-post-single:hover {
  transform: translateX(5px);
}

/* Blog single content max-width for readability */
.blog-single-content {
  max-width: 100%;
}

.blog-details {
  max-width: 100%;
}

/* Smooth transitions */
#blogPostsContainer,
#paginationContainer {
  transition: opacity 0.3s ease;
}