/* =========================================================
   BLCC – Credential tags (blue bubble style)
   Used by [counselor_credentials] shortcode.
   ========================================================= */

:root {
  --blcc-credential-bg: #dbeafe;
  --blcc-credential-bg-hover: #bfdbfe;
  --blcc-credential-border: #93c5fd;
  --blcc-credential-text: #1e40af;
  --blcc-credential-radius: 6px;
  --blcc-credential-gap: 8px;
  --blcc-credential-transition: background-color 0.2s ease;
}

.taxonomy-credentials-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--blcc-credential-gap) !important;
  margin: 10px 0 !important;
}

.taxonomy-credentials-tags .credential-tag {
  display: inline-block !important;
  background-color: var(--blcc-credential-bg) !important;
  padding: 6px 12px !important;
  border-radius: var(--blcc-credential-radius) !important;
  text-decoration: none !important;
  font-size: 14px !important;
  color: var(--blcc-credential-text) !important;
  font-weight: 600 !important;
  transition: var(--blcc-credential-transition) !important;
  border: 1px solid var(--blcc-credential-border) !important;
}

.taxonomy-credentials-tags .credential-tag:hover {
  background-color: var(--blcc-credential-bg-hover) !important;
}

.taxonomy-credentials-tags .credential-tag:focus-visible {
  outline: 2px solid var(--blcc-credential-text);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .taxonomy-credentials-tags {
    justify-content: flex-start !important;
  }

  .taxonomy-credentials-tags .credential-tag {
    font-size: 12px !important;
    padding: 4px 10px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .taxonomy-credentials-tags .credential-tag {
    transition: none !important;
  }
}