/*-- scss:defaults --*/

// Category styling
.listing-categories {
  .listing-category {
    margin-right: 0.5rem;
    margin-bottom: 0.25rem;
    display: inline-block;
    
    .category {
      background-color: #e3f2fd;
      color: #1976d2;
      padding: 0.25rem 0.5rem;
      border-radius: 0.25rem;
      text-decoration: none;
      font-size: 0.875rem;
      transition: all 0.2s ease;
      border: 1px solid #bbdefb;
      
      &:hover {
        background-color: #1976d2;
        color: white;
        text-decoration: none;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(25, 118, 210, 0.3);
      }
      
      &:focus {
        outline: 2px solid #1976d2;
        outline-offset: 2px;
      }
    }
  }
}

// Post metadata styling
.listing-item {
  .listing-categories {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
}

// Category filter styling
.quarto-listing-category-title {
  font-weight: 600;
  color: #1976d2;
  margin-bottom: 1rem;
}

// Hover effects for category links
a.category {
  cursor: pointer;
}

// Make sure categories in post headers are also styled
.categories {
  .badge {
    background-color: #e3f2fd !important;
    color: #1976d2 !important;
    border: 1px solid #bbdefb;
    
    &:hover {
      background-color: #1976d2 !important;
      color: white !important;
    }
  }
}