/*=============== BLOG STYLES ===============*/
/* Based on the main site's styling */

/*=============== BLOG LAYOUT ===============*/
.blog__container {
  row-gap: 3rem;
}

/* Search section */
.blog__search-section {
  margin-top: 2rem;
  margin-bottom: 1.5rem;
  width: 100%;
}

/* Filters section */
.blog__filters-section {
  margin-bottom: 2rem;
  width: 100%;
}

/* Search styles */
.blog__search {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.blog__search-form {
  position: relative;
  width: 100%;
}

.blog__search-input {
  width: 100%;
  padding: 1rem 3rem 1rem 1.5rem;
  border: 2px solid var(--text-color-light);
  border-radius: 2rem;
  font-size: var(--normal-font-size);
  color: var(--text-color);
  background: none;
  outline: none;
  transition: border-color 0.3s;
}

.blog__search-input:focus {
  border-color: var(--first-color);
}

.blog__search-clear {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-color-light);
  font-size: 1.25rem;
  cursor: pointer;
  transition: color 0.3s, transform 0.2s;
  padding: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog__search-clear:hover {
  color: var(--first-color);
  transform: translateY(-50%) scale(1.1);
}

.blog__search-button {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-color-light);
  font-size: 1.25rem;
  cursor: pointer;
  transition: color 0.3s;
  padding: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog__search-button:hover {
  color: var(--first-color);
}

/* Filters */
.blog__filters {
  display: flex;
  justify-content: center;
  width: 100%;
}

.blog__filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.blog__filter-tag {
  display: inline-block;
  padding: 0.5rem 1rem;
  background-color: var(--body-color);
  border-radius: 2rem;
  color: var(--text-color);
  font-size: var(--small-font-size);
  transition: background 0.3s, color 0.3s;
}

.blog__filter-tag:hover {
  background-color: var(--first-color);
  color: #fff;
}

.blog__filter-tag--active {
  background-color: var(--first-color);
  color: #fff;
}

/* Tag header */
.blog__tag-header {
  margin-bottom: 0.5rem;
}

/* Post cards */
.blog__posts {
  display: grid;
  gap: 3rem;
  width: 100%;
}

.blog__post-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background-color: var(--container-color);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s, box-shadow 0.3s;
  padding: 0;
}

.blog__post-card:hover {
  transform: translateY(-0.25rem);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.blog__post-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.blog__post-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.blog__post-card:hover .blog__post-image img {
  transform: scale(1.05);
}

/* Posts without images - text-only card style */
.blog__post-card--no-image {
  grid-template-columns: 1fr !important;
}

.blog__post-card--no-image .blog__post-content {
  padding: 1.5rem;
}

.blog__post-card--no-image .blog__post-title {
  font-size: var(--h2-font-size);
}

.blog__post-card--no-image .blog__post-excerpt {
  max-height: calc(1.6em * 4);
  -webkit-line-clamp: 4;
  line-clamp: 4;
}


.blog__post-content {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
}

.blog__post-meta {
  display: flex;
  align-items: center;
  color: var(--text-color-light);
  font-size: var(--small-font-size);
  margin-bottom: 0.75rem;
}

.blog__post-date {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.blog__post-date i {
  display: flex;
  align-items: center;
  font-size: 1rem;
  line-height: 1;
}

.blog__post-title {
  font-size: var(--h2-font-size);
  margin-bottom: 1rem;
  line-height: 1.3;
}

.blog__post-title a {
  color: var(--title-color);
  transition: color 0.3s;
}

.blog__post-title a:hover {
  color: var(--first-color);
}

/* Post excerpt styling - Updated to show proper formatting */
.blog__post-excerpt {
  color: var(--text-color);
  margin-bottom: 1.5rem;
  line-height: 1.6;
  max-height: calc(1.6em * 5); /* Limit to 5 lines */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  position: relative;
}

/* Ensure proper formatting for content in list view */
.blog__post-excerpt p {
  margin-bottom: 0.5rem;
}

.blog__post-excerpt strong,
.blog__post-excerpt b {
  font-weight: var(--font-bold);
}

.blog__post-excerpt code {
  font-family: monospace;
  background-color: var(--body-color);
  padding: 0.2rem 0.4rem;
  border-radius: 0.25rem;
  font-size: 0.9em;
}

.blog__post-excerpt pre {
  background-color: var(--body-color);
  padding: 1rem;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin: 0.5rem 0;
}

.blog__post-excerpt pre code {
  padding: 0;
  background: none;
}

.blog__post-excerpt blockquote,
.blog__post-excerpt .blog-quote {
  border-left: 3px solid var(--first-color);
  padding-left: 1rem;
  margin: 0.5rem 0;
  font-style: italic;
}

/* Copy button styling for code blocks and quotes */
.copy-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background-color: rgba(0, 0, 0, 0.2);
  color: rgba(255, 255, 255, 0.8);
  border: none;
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.7rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, background-color 0.2s, color 0.2s;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Reveal button on hover */
pre:hover .copy-btn,
.blog-quote:hover .copy-btn,
blockquote:hover .copy-btn {
  opacity: 1;
}

.copy-btn:hover {
  background-color: var(--first-color);
  color: #fff;
}

.copy-btn i {
  font-size: 0.8rem;  
}

/* Position container for pre and blockquote */
pre, .blog-quote, blockquote {
  position: relative;
}

/* Show success message */
.copy-btn.copied {
  background-color: #28a745;
  color: #fff;
  opacity: 1;
}

/* Dark theme adjustments */
.dark-theme .copy-btn {
  background-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.dark-theme .copy-btn:hover {
  background-color: var(--first-color);
  color: #fff;
}

/* Enhanced link styling */
.blog__post-excerpt a,
.blog__detail-content a {
  color: var(--first-color);
  text-decoration: none;
  transition: text-decoration 0.3s;
}

.blog__post-excerpt a:hover,
.blog__detail-content a:hover {
  text-decoration: underline;
}

.blog__post-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: auto;
  gap: 1rem;
}

/* Tags container takes available space, pushing Read more to right */
.blog__post-footer .blog__post-tags {
  margin-right: auto;
}

.blog__post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.blog__post-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  background-color: var(--body-color);
  border-radius: 0.5rem;
  color: var(--text-color);
  font-size: var(--smaller-font-size);
  transition: background 0.3s, color 0.3s;
}

.blog__post-tag i {
  font-size: 0.75rem;
  margin-right: 0.25rem;
}

.blog__post-tag:hover {
  background-color: var(--first-color);
  color: #fff;
}

.blog__post-more {
  display: inline-flex;
  align-items: center;
  color: var(--first-color);
  font-size: var(--small-font-size);
  font-weight: var(--font-medium);
  gap: 0.25rem;
  transition: gap 0.3s;
}

.blog__post-more:hover {
  gap: 0.5rem;
}

.blog__no-posts {
  text-align: center;
  padding: 3rem;
  color: var(--text-color-light);
}

/*=============== BLOG PAGINATION ===============*/
.blog__pagination {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 3rem;
}

.blog__pagination-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--container-color);
  color: var(--text-color);
  border-radius: 50%;
  font-size: var(--small-font-size);
  transition: background 0.3s, color 0.3s;
}

.blog__pagination-item:hover {
  background-color: var(--first-color);
  color: #fff;
}

.blog__pagination-item--active {
  background-color: var(--first-color);
  color: #fff;
  cursor: default;
}

/*=============== BLOG DETAIL ===============*/
.blog__detail {
  background-color: var(--container-color);
  border-radius: 1.5rem;
  padding: 2rem;
  transition: background 0.4s;
}

.blog__detail-header {
  margin-bottom: 2rem;
}

.blog__detail-title {
  font-size: var(--h1-font-size);
  margin-bottom: 1.5rem;
  line-height: 1.3;
}

.blog__detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  color: var(--text-color-light);
  font-size: var(--small-font-size);
  margin-bottom: 1rem;
  align-items: center;
}

.blog__detail-image {
  margin-bottom: 2rem;
  border-radius: 1rem;
  overflow: hidden;
}

.blog__detail-image img {
  max-width: 100%;      /* Responsive - won't overflow container */
  width: 700px;         /* Target size for large screens */
  height: auto;         /* Maintain aspect ratio */
  display: block;       /* Block display for proper margin control */
  margin: 0 auto;       /* Center the image */
}

.blog__detail-content {
  margin-bottom: 3rem;
  color: var(--text-color);
  line-height: 1.8;
}

/* Content formatting */
.blog__detail-content h2 {
  font-size: var(--h2-font-size);
  margin: 2rem 0 1rem;
}

.blog__detail-content h3 {
  font-size: var(--h3-font-size);
  margin: 1.75rem 0 0.75rem;
}

.blog__detail-content p {
  margin-bottom: 1.5rem;
}

.blog__detail-content ul, 
.blog__detail-content ol {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}

.blog__detail-content li {
  margin-bottom: 0.5rem;
  list-style: disc;
}

.blog__detail-content ol li {
  list-style: decimal;
}

.blog__detail-content a {
  color: var(--first-color);
  /* text-decoration: underline; */
}

.blog__detail-content img {
  max-width: 100%;
  border-radius: 0.5rem;
  margin: 1.5rem 0;
}

/* Code and syntax highlighting */
.blog__detail-content pre {
  background-color: var(--body-color);
  padding: 1.5rem;
  border-radius: 0.75rem;
  overflow-x: auto;
  margin: 1.5rem 0;
}

.blog__detail-content code {
  font-family: monospace;
  background-color: var(--body-color);
  padding: 0.2rem 0.4rem;
  border-radius: 0.25rem;
  font-size: 0.9em;
}

.blog__detail-content pre code {
  padding: 0;
  background: none;
}

/* Quotes */
.blog-quote,
.blog__detail-content blockquote {
  border-left: 4px solid var(--first-color);
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  background-color: var(--body-color);
  font-style: italic;
  color: var(--text-color);
  border-radius: 0 0.5rem 0.5rem 0;
}

/* Enhanced spoiler styling with particle effect - inline version */
.blog-spoiler {
  position: relative;
  display: inline; /* Keep as inline for natural text flow */
  background-color: transparent;
  color: transparent;
  border-radius: 0;
  padding: 0;
  cursor: pointer;
  user-select: none;
  transition: color 0.3s;
  overflow: visible;
  z-index: 1;
  white-space: normal; /* Allow normal word wrap */
  word-break: normal; /* Use normal word breaking rules */
  word-wrap: break-word; /* Allow long words to break */
}

/* When revealed */
.blog-spoiler.revealed {
  color: var(--text-color);
  background-color: transparent;
}

/* Individual particle styling - DARK PARTICLES FOR LIGHT THEME */
.spoiler-particle {
  position: absolute;
  width: 1.5px;
  height: 1.5px;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.2s ease-out;
  opacity: 0.8;
}

/* Dark theme adjustments - KEEP WHITE PARTICLES FOR DARK THEME */
.dark-theme .spoiler-particle {
  background-color: rgba(255, 255, 255, 0.6);
}

/* Add this new rule for particles in revealed spoilers */
.blog-spoiler.revealed .spoiler-particle {
  opacity: 0 !important;
  pointer-events: none;
}

/* Make sure spoilers are properly styled in all contexts */
.blog__detail-content .blog-spoiler,
.blog__post-excerpt .blog-spoiler {
  position: relative;
  /* display: inline; */ 
}

/* Mobile-specific adjustments */
@media screen and (max-width: 767px) {
  .blog-spoiler {
    position: relative;
    display: inline-block; /* Only use inline-block on mobile */
    vertical-align: top;
  }
  
  .spoiler-particle {
    width: 2px;
    height: 2px;
  }
  
  /* Override for detail view on mobile */
  .blog__detail-content .blog-spoiler {
    display: inline-block;
    vertical-align: top;
  }
}

/* Critical size to prevent zoom on mobile during search*/
@media screen and (max-width: 767px) {
  .blog__search-input,
  .contact__form-input,
  .blog__search-form-extended input[type="text"],
  .blog__search-form-extended select,
  .blog__search-form-extended input[type="date"] {
    font-size: 16px !important; /* Critical size to prevent zoom */
  }
}

/* Styling for search term highlighting */
.search-highlight {
  background-color: rgba(255, 230, 0, 0.3);
  padding: 0.15rem 0.1rem;
  border-radius: 0.2rem;
  box-shadow: 0 0 0 1px rgba(255, 230, 0, 0.4);
  color: inherit;
}

.dark-theme .search-highlight {
  background-color: rgba(255, 204, 0, 0.25);
  box-shadow: 0 0 0 1px rgba(255, 204, 0, 0.3);
}

/* Highlight code blocks */
.highlight {
  margin: 1.5rem 0;
  border-radius: 0.75rem;
  overflow: hidden;
}

.highlight pre {
  margin: 0;
  padding: 1.5rem;
  overflow-x: auto;
}

/* Blog reaction buttons */
.blog__detail-reactions {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.blog__reaction-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  color: var(--text-color-light);
  cursor: pointer;
  font-size: var(--normal-font-size);
  transition: color 0.3s;
}

.blog__reaction-btn:hover {
  color: var(--first-color);
}

.blog__reaction-active {
  color: var(--first-color);
}

.blog__reaction-count {
  font-size: var(--small-font-size);
}

.blog__reaction-dislike {
  color: var(--text-color-light);
}

/* Share button and dropdown */
.blog__share-wrapper {
  position: relative;
  display: inline-block;
}

.blog__share-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.blog__share-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  background: var(--body-color);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.5rem;
  padding: 0.5rem;
  min-width: 160px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: 100;
}

.blog__share-dropdown.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.blog__share-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.65rem 0.75rem;
  background: none;
  border: none;
  border-radius: 0.375rem;
  color: var(--text-color);
  cursor: pointer;
  font-size: var(--small-font-size);
  text-align: left;
  transition: background 0.3s, color 0.3s;
}

.blog__share-option:hover {
  background: var(--first-color-lighten);
  color: var(--first-color);
}

.blog__share-option i {
  font-size: 1.1rem;
}

/* Dark mode support */
body.dark-theme .blog__share-dropdown {
  background: var(--container-color);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Copy notification */
.blog__copy-notification {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--first-color);
  color: #fff;
  padding: 0.875rem 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-size: var(--small-font-size);
  z-index: 1000;
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
}

.blog__copy-notification.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.blog__copy-notification--error {
  background: #e74c3c;
}

/* Related posts */
.blog__related {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.blog__related-title {
  font-size: var(--h3-font-size);
  margin-bottom: 1.5rem;
}

.blog__related-posts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
}

.blog__related-item {
  background-color: var(--body-color);
  border-radius: 1rem;
  overflow: hidden;
  transition: transform 0.3s;
}

.blog__related-item:hover {
  transform: translateY(-0.25rem);
}

.blog__related-img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.blog__related-post-title {
  padding: 1rem;
  font-size: var(--normal-font-size);
  color: var(--title-color);
}

/* Pinned post styling */
.blog__section-title {
  font-size: var(--h1-font-size);
  margin-bottom: 1.5rem;
  position: relative;
}

.blog__pinned-section {
  margin-top: 1rem;
  margin-bottom: 3rem;
}

.blog__all-posts-section {
  margin-top: 1rem;
}

.blog__post-card--pinned {
  border-left: 3px solid var(--first-color);
  position: relative;
}

.blog__post-pinned-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.6rem;
  background-color: var(--first-color);
  color: #fff;
  border-radius: 1rem;
  font-size: var(--smaller-font-size);
  margin-left: 0.75rem;
}

.blog__post-pinned-badge i {
  font-size: 0.8rem;
  margin-right: 0.25rem;
}

/* Back button */
.blog__detail-nav {
  margin-bottom: 0rem;
}

.blog__detail-nav--bottom {
  margin-top: 1.5rem;
  margin-bottom: 0;
}

.blog__back-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: var(--body-color);
  border-radius: 1rem;
  color: var(--text-color);
  font-size: var(--small-font-size);
  transition: background 0.3s, color 0.3s, transform 0.2s;
  margin-bottom: 1.5rem;
  margin-top: -1.5rem;
}

.blog__back-button:hover {
  background-color: var(--first-color);
  color: #fff;
  transform: translateX(-0.25rem);
}

.blog__back-button i {
  font-size: 1.1em;
}

/* Admin options */
.blog__detail-admin {
  margin-left: auto;
  display: flex;
  gap: 1rem;
}

.blog__detail-admin-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  background-color: var(--body-color);
  border-radius: 1rem;
  color: var(--text-color);
  font-size: var(--smaller-font-size);
  transition: background 0.3s, color 0.3s;
}

.blog__detail-admin-btn:hover {
  background-color: var(--first-color);
  color: #fff;
}

/*=============== BLOG SEARCH ===============*/
.blog__search-results {
  background-color: var(--container-color);
  border-radius: 1.5rem;
  padding: 2rem;
  transition: background 0.4s;
}

.blog__search-title {
  font-size: var(--h1-font-size);
  margin-bottom: 1.5rem;
}

.blog__search-form-extended {
  display: grid;
  gap: 0rem;
  margin-bottom: 2rem;
  background-color: transparent;
}

/* Top row with query and tag */
.blog__search-form-row:first-child {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: flex-end;
}

/* Date inputs row */
.blog__search-form-row:nth-child(2) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
}

/* Button container */
.blog__search-button-container {
  display: flex;
  justify-content: flex-end; /* Changed to right-align */
  margin-top: 1.5rem;
}

/* Form labels - fix overlap with borders */
.blog__search-label {
  display: inline-block;
  margin-bottom: 0.5rem;
  color: var(--text-color-light);
  font-size: var(--small-font-size);
  font-weight: var(--font-medium);
  background-color: var(--container-color); /* Match container background */
  padding: 0 0.5rem;
  position: relative;
  z-index: 1;
  left: 1rem;
}

/* Form inputs container */
.blog__search-form-row .contact__form-div {
  position: relative;
  width: 100%;
}

/* Consistent height and padding for all form fields */
.blog__search-form-extended input[type="text"],
.blog__search-form-extended select,
.blog__search-form-extended input[type="date"] {
  width: 100%;
  padding: 1rem 1.5rem 1.2rem 1.5rem; /* Extra padding at bottom */
  border: 2px solid var(--text-color-light);
  border-radius: 2rem;
  font-size: var(--normal-font-size);
  color: var(--text-color);
  background: none;
  outline: none;
  height: 3.8rem; /* Increased height for all fields */
}

/* Double arrow pagination items for first/last page */
.blog__pagination-item--first,
.blog__pagination-item--last {
  font-size: var(--small-font-size);
  /* Keep other properties from blog__pagination-item */
}

/* Adjust the spacing between arrows */
.blog__pagination-item--first i,
.blog__pagination-item--last i {
  font-size: 1.1em;
}

/* Only show the additional navigation on larger screens */
@media screen and (max-width: 480px) {
  .blog__pagination-item--first,
  .blog__pagination-item--last {
    display: none;
  }
}

/* Special styling for select dropdown arrow */
.blog__search-form-extended select {
  padding-right: 3rem; /* Make room for the arrow, match date field */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23858585' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.2rem center; /* Same distance as calendar */
  background-size: 1.25em;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Date input special styling for calendar icon */
.blog__search-form-extended input[type="date"]::-webkit-calendar-picker-indicator {
  margin-right: -0.3rem; /* Match the dropdown positioning */
  opacity: 0.5; /* Make it match dropdown icon opacity */
}

/* For Firefox which has different behavior */
.blog__search-form-extended select::-ms-expand {
  display: none;
}

/* Make sure background color is consistent with your theme */
.blog__search-form-extended select option {
  background-color: var(--container-color);
  color: var(--text-color);
  padding: 0.75rem;
}

/* Search button - for form only */
.blog__search-form-extended .blog__search-button {
  position: relative;
  right: auto;
  top: auto;
  transform: none;
  background-color: var(--first-color);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 2rem;
  font-size: var(--normal-font-size);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: auto;
  min-width: 120px;
  height: 3.8rem; /* Match the input fields */
  transition: background-color 0.3s;
  border: none;
  cursor: pointer;
  margin: 0; /* Removed auto margin */
}

.blog__search-form-extended .blog__search-button:hover {
  filter: brightness(0.85);
}

/* Search count indicator */
.blog__search-count {
  margin-bottom: 2rem;
  color: var(--text-color-light);
  font-size: var(--small-font-size);
}

/* No results message */
.blog__no-results {
  text-align: center;
  padding: 3rem;
  color: var(--text-color-light);
}

/* FIX: Search results post styling for blog__post-card class */
.blog__search-results .blog__post-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background-color: var(--container-color);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s, box-shadow 0.3s;
  padding: 0;
  margin-bottom: 2rem;
}

.blog__search-results .blog__post-card:hover {
  transform: translateY(-0.25rem);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.blog__search-results .blog__post-image {
  width: 100%;
  height: 200px;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.blog__search-results .blog__post-content {
  padding: 1.5rem;
}

/* Legacy .blog__post styling (keeping for backward compatibility) */
.blog__search-results .blog__post {
  background-color: var(--container-color);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s, box-shadow 0.3s;
  padding: 1.5rem;
  margin-bottom: 2rem;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.blog__search-results .blog__post:hover {
  transform: translateY(-0.25rem);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.blog__search-results .blog__post .blog__post-image {
  margin: 1rem 0;
}

.blog__search-results .blog__post .blog__post-image img {
  max-width: 100%;
  border-radius: 0.5rem;
}

/* Live search results - RESTORED */
.blog__live-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 300px;
  overflow-y: auto;
  background-color: var(--container-color);
  border-radius: 1rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  z-index: 100;
  margin-top: 0.5rem;
  padding: 0.5rem;
  display: none;
}

.blog__live-search-results.show {
  display: block;
}

.blog__live-search-item {
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  transition: background 0.3s;
}

.blog__live-search-item:hover {
  background-color: var(--body-color);
}

.blog__live-search-item a {
  display: block;
  color: var(--title-color);
}

.blog__live-search-item h4 {
  font-size: var(--normal-font-size);
  margin-bottom: 0.25rem;
}

.blog__live-search-item p {
  font-size: var(--small-font-size);
  color: var(--text-color-light);
}

.blog__live-search-empty {
  padding: 1rem;
  text-align: center;
  color: var(--text-color-light);
}

/* Status banner and badges that might appear in public views too */
.blog__status-banner {
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    border-radius: 0.5rem;
    font-size: var(--small-font-size);
    font-weight: var(--font-medium);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.blog__status-banner--draft {
    background-color: rgba(255, 193, 7, 0.2);
    color: hsl(45, 100%, 40%);
    border: 1px solid hsl(45, 100%, 80%);
}

.blog__status-banner--archived {
    background-color: rgba(108, 117, 125, 0.2);
    color: hsl(208, 7%, 35%);
    border: 1px solid hsl(208, 7%, 80%);
}

.blog__post-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    border-radius: 1rem;
    font-size: var(--smaller-font-size);
    margin-left: 0.75rem;
}

.blog__post-badge--draft {
    background-color: hsl(45, 100%, 50%);
    color: hsl(45, 100%, 25%);
}

.blog__post-badge--archived {
    background-color: hsl(208, 7%, 60%);
    color: white;
}

/* Dark theme adjustments */
.dark-theme .blog__post-card,
.dark-theme .blog__live-search-results,
.dark-theme .blog__post,
.dark-theme .blog__detail,
.dark-theme .blog__search-results {
  box-shadow: 0 8px 20px hsla(207, 24%, 8%, 0.4);
}

.dark-theme .blog__post-card:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.dark-theme .blog-quote,
.dark-theme .blog__detail-content blockquote {
  background-color: var(--body-color);
}

.dark-theme .highlight {
  background-color: var(--container-color) !important;
}

.dark-theme .blog__search-results {
  box-shadow: 0 8px 20px hsla(207, 24%, 8%, 0.4);
}

.dark-theme .blog__search-results .blog__post,
.dark-theme .blog__search-results .blog__post-card {
  border-color: rgba(255, 255, 255, 0.05);
}

.dark-theme .blog__search-label {
  background-color: var(--container-color); /* Match dark theme container background */
}

/* Dark theme icon color fixes */
.dark-theme .blog__search-form-extended select {
  /* White dropdown arrow for dark theme */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* Calendar icon color for dark theme */
.dark-theme .blog__search-form-extended input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1); /* Make calendar icon white */
  opacity: 0.7; /* Slightly higher opacity for visibility */
}

/* Dark theme option dropdown */
.dark-theme .blog__search-form-extended select option {
  background-color: var(--body-color);
}

/* Fix for pinned post border color in dark theme */
.dark-theme .blog__post-card--pinned,
.dark-theme .blog__search-results .blog__post-card--pinned {
  border-left-color: var(--first-color) !important;
}

/* Dark theme adjustments for status banners */
.dark-theme .blog__status-banner--draft {
    background-color: rgba(255, 193, 7, 0.15);
    color: hsl(45, 100%, 70%);
    border-color: hsl(45, 100%, 30%);
}

.dark-theme .blog__status-banner--archived {
    background-color: rgba(108, 117, 125, 0.15);
    color: hsl(208, 7%, 75%);
    border-color: hsl(208, 7%, 40%);
}

/* Responsive adjustments */
@media screen and (min-width: 576px) {
  .blog__search-form-row:first-child {
    grid-template-columns: 1fr 1fr;
  }
  
  .blog__tag-title {
    font-size: var(--h2-font-size);
  }
}

@media screen and (min-width: 767px) {
  .blog__post-card,
  .blog__search-results .blog__post-card {
    grid-template-columns: 300px 1fr;
  }
  
  .blog__post-image,
  .blog__search-results .blog__post-image {
    height: 100%;
  }
  
  .blog__post-content {
    padding: 1.5rem;
  }

  /* Back button */
  .blog__detail-nav {
    margin-bottom: 1.5rem;
  }

  .blog__detail-nav--bottom {
    margin-top: 1.3rem;
    margin-bottom: 0;
  }

  .blog__back-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: var(--body-color);
    border-radius: 1rem;
    color: var(--text-color);
    font-size: var(--small-font-size);
    transition: background 0.3s, color 0.3s, transform 0.2s;
    margin-bottom: 0.5rem;
    margin-top: 0.7rem;
  }
}

@media screen and (max-width: 575px) {
  .blog__search-form-row:nth-child(2) {
    grid-template-columns: 1fr;
  }
  
  .blog__search-button-container {
    justify-content: center; /* Center on mobile */
  }
  
  .blog__search-form-extended .blog__search-button {
    width: 100%; /* Full width on mobile */
  }
}

@media screen and (min-width: 768px) {
  .blog__search-results {
    padding: 2.5rem;
  }

  .blog__search-results .blog__post {
    padding: 2rem;
  }
}

/*=============== AJAX FILTERING STYLES ===============*/
/* Loading overlay */
.blog__loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--body-color);
  opacity: 0.98;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  animation: fadeIn 0.2s ease-in;
  backdrop-filter: blur(2px);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.blog__loading-spinner {
  text-align: center;
  color: var(--text-color);
}

.blog__loading-spinner p {
  margin-top: 1rem;
  font-size: var(--normal-font-size);
  color: var(--text-color-light);
}

/* Spinner animation */
.blog__spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--text-color-light);
  border-top-color: var(--first-color);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Content loading state */
.blog__content {
  position: relative;
  transition: opacity 0.3s ease;
}

.blog__content--loading {
  min-height: 400px;
  pointer-events: none;
}

/* Error message */
.blog__error-message {
  background: linear-gradient(135deg, rgba(255, 59, 59, 0.1) 0%, rgba(255, 59, 59, 0.05) 100%);
  border: 2px solid rgba(255, 59, 59, 0.3);
  border-radius: 1rem;
  padding: 2rem;
  margin-bottom: 2rem;
  animation: slideDown 0.3s ease-out;
  transition: opacity 0.3s ease;
}

@keyframes slideDown {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.blog__error-content {
  text-align: center;
}

.blog__error-content i {
  font-size: 3rem;
  color: #ff3b3b;
  margin-bottom: 1rem;
}

.blog__error-content h3 {
  font-size: var(--h3-font-size);
  color: var(--title-color);
  margin-bottom: 0.5rem;
}

.blog__error-content p {
  color: var(--text-color-light);
  margin-bottom: 1.5rem;
}

.blog__error-retry {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background-color: var(--first-color);
  color: #fff;
  border: none;
  border-radius: 2rem;
  font-size: var(--normal-font-size);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.blog__error-retry:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.blog__error-retry i {
  font-size: 1.2rem;
}

/* Smooth transitions for content updates */
.blog__content > * {
  animation: fadeInUp 0.4s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Enhanced filter tag transitions */
.blog__filter-tag {
  position: relative;
  overflow: hidden;
}

.blog__filter-tag::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transform: translate(-50%, -50%);
  transition: width 0.4s, height 0.4s;
}

.blog__filter-tag:active::before {
  width: 200px;
  height: 200px;
}

/* Pagination smooth transitions */
.blog__pagination-item {
  transition: all 0.2s ease;
}

.blog__pagination-item:active {
  transform: scale(0.95);
}

/* Accessibility: Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .blog__content,
  .blog__loading-overlay,
  .blog__error-message,
  .blog__filter-tag,
  .blog__pagination-item,
  .blog__spinner {
    animation: none !important;
    transition: none !important;
  }

  .blog__content {
    opacity: 1 !important;
  }
}