/* Category cloud styling is designed to keep tags readable, wrapped, and visually interactive.
   The container uses flex wrapping so tags flow naturally on smaller widths, while each tag
   is styled as a clear, clickable pill that can animate into place. */

.tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  padding: 40px 0;
  width: 100%;
  margin: 0;
}

.custom-tag {
  /* Use a bold, rounded pill style so category tags feel like deliberate targets rather than plain text. */
  font-family: "Poppins", sans-serif !important;
  padding: 12px 25px;
  border-radius: 25px;
  color: #fff !important;
  text-decoration: none;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 20px;
  letter-spacing: 1px;

  /* Start hidden and translated so entry animation can reveal tags smoothly. */
  opacity: 0;
  transform: translateY(20px);
  transition:
    transform 0.3s ease,
    filter 0.3s ease,
    box-shadow 0.3s ease;
  cursor: pointer;
  display: inline-block;
}

.custom-tag:hover {
  /* Hover feedback makes the tags feel interactive and helps users know they are clickable. */
  transform: scale(1.1) translateY(-5px) !important;
  filter: brightness(1.2);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  color: #fff !important;
}

@media (max-width: 768px) {
  .tag-container {
    /* Reduce spacing on smaller screens so tags remain compact and avoid excessive wrapping. */
    gap: 7px;
    padding: 10px;
    padding-left: 0px;
  }
  .custom-tag {
    /* Smaller tag size improves readability and touch comfort on mobile devices. */
    font-size: 14px;
    padding: 5px 12px;
    border-radius: 25px;
  }
}