/*
 * custom.css
 * Loaded on every page via header.php.
 * Contains all custom component classes that Tailwind CDN cannot generate
 * from @apply (since CDN mode doesn't support @layer).
 */

/* ---------------------------------------------------------------
   BENTO CARD
   --------------------------------------------------------------- */
.bento-card {
  border-radius: 1rem;
  border: 1px solid #e5e7eb;
  background-color: #fff;
  overflow: hidden;
  transition: all 0.3s;
}
.dark .bento-card {
  border-color: #1f2937;
  background-color: #111827;
}
.bento-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.07), 0 4px 6px -2px rgba(0,0,0,0.04);
  transform: translateY(-2px);
}

/* ---------------------------------------------------------------
   TAG PILL
   --------------------------------------------------------------- */
.tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

/* ---------------------------------------------------------------
   IMPACT BADGE
   --------------------------------------------------------------- */
.impact-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
}

/* ---------------------------------------------------------------
   LIVE TICKER
   --------------------------------------------------------------- */
.ticker-track {
  display: flex;
  white-space: nowrap;
  animation: ticker 40s linear infinite;
}
.ticker-track:hover {
  animation-play-state: paused;
}
@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ---------------------------------------------------------------
   SCROLLBAR HIDE
   --------------------------------------------------------------- */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* ---------------------------------------------------------------
   FADE-IN ANIMATION
   --------------------------------------------------------------- */
.animate-fade-in {
  animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------------------------------------------------------------
   LINE CLAMP UTILITIES (fallback for older browsers)
   --------------------------------------------------------------- */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* Forceer marges voor AI-gegenereerde HTML in de artikelen */
.prose h2 {
    margin-top: 1.75em !important;
    margin-bottom: 0.75em !important;
}
.prose h3 {
    margin-top: 1.5em !important;
    margin-bottom: 0.5em !important;
}