/* 
 * Minimal Blog Styles
 * Only specific tweaks that aren't in main/cards/buttons css 
 */

/* Search Input Custom Style */
.input-group-text {
  background-color: #fff;
  border-right: none;
}

.input-group .form-control {
  border-left: none;
}

.input-group .form-control:focus {
  box-shadow: none;
  border-color: #dee2e6; /* Keep default border color on focus to match group */
}

.input-group:focus-within {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  border-radius: 0.375rem;
}

/* Sidebar Active State Transition */
.category-item {
  transition: all 0.2s ease-in-out;
  border-radius: 5px;
  padding: 5px 10px;
}

.category-item:hover {
  background-color: rgba(255, 255, 255, 0.05); /* Updated for dark mode/glass */
}

.category-item.active {
  background-color: rgba(0, 212, 255, 0.1);
  border: 1px solid rgba(0, 212, 255, 0.2);
}

/* Card Hover Fix/Enhancement if needed */
.blog-card-wrapper {
  transition: opacity 0.3s ease;
}

/* Mobile Sidebar Wrapper (FAQ-like horizontal scroll) */
@media (max-width: 991px) {
  .blog-sidebar-wrapper {
    overflow-x: auto;
    padding-bottom: 10px;
    margin-right: -24px; /* Negate card padding to allow flush scroll */
    margin-left: -24px;
    padding-left: 24px;
    padding-right: 24px;
    -webkit-overflow-scrolling: touch; /* Smooth scroll iOS */
  }

  .blog-sidebar-inner {
    display: flex;
    flex-direction: row;
    gap: 15px;
    white-space: nowrap;
    padding-bottom: 5px; /* Visual breathing room */
  }

  /* Make items look like pills on mobile */
  .category-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 8px 16px;
    border-radius: 50px;
  }
}