/* Fix for text visibility */
.cert-title,
.cert-issuer,
.cert-card p,
.cert-meta-item,
.cert-highlight-number,
.cert-highlight-label,
.cert-action .btn-small {
  color: var(--text-light) !important;
}

.dark-mode .cert-title {
  color: var(--accent-color) !important;
}

.dark-mode .cert-issuer,
.dark-mode .cert-card p,
.dark-mode .cert-meta-item {
  color: var(--text-dark) !important;
}

/* Ensure cards are visible */
.cert-card {
  opacity: 1 !important;
  background: var(--card-light) !important;
}

.dark-mode .cert-card {
  background: var(--card-dark) !important;
}

/* Fix category buttons */
.cert-category-btn {
  color: var(--primary-color) !important;
}

.cert-category-btn.active, 
.cert-category-btn:hover {
  background: var(--primary-color) !important;
  color: var(--background-light) !important;
}

.dark-mode .cert-category-btn {
  color: var(--cream) !important;
}

.dark-mode .cert-category-btn.active,
.dark-mode .cert-category-btn:hover {
  background: var(--cream) !important;
  color: var(--dark-green) !important;
}

/* Ensure highlight numbers are visible */
.cert-highlight-number {
  color: var(--accent-color) !important;
  min-height: 2.5rem; /* Ensures consistent height */
  display: block; /* Prevents layout shifts */
  opacity: 1 !important; /* Makes sure numbers are visible */
}

/* Force cert intro to be visible */
.cert-intro {
  background: var(--card-light) !important;
}

.dark-mode .cert-intro {
  background: var(--card-dark) !important;
}