@import "tailwindcss";
@plugin "@tailwindcss/typography";

/* Search loading bar animation */
@keyframes search-bar {
  0% {
    width: 0%;
    opacity: 1;
  }
  20% {
    width: 40%;
    opacity: 1;
  }
  50% {
    width: 70%;
    opacity: 1;
  }
  80% {
    width: 90%;
    opacity: 1;
  }
  100% {
    width: 90%;
    opacity: 1;
  }
}

@keyframes search-bar-shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

.animate-search-bar {
  animation: search-bar 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  background: linear-gradient(
    90deg,
    theme(--color-emerald-400),
    theme(--color-emerald-300),
    theme(--color-emerald-400)
  );
  background-size: 200% 100%;
  animation:
    search-bar 2s cubic-bezier(0.4, 0, 0.2, 1) forwards,
    search-bar-shimmer 1.5s ease-in-out infinite;
}

.search-loading .search-input-glow {
  box-shadow: 0 0 0 2px theme(--color-emerald-400/40), 0 0 20px theme(--color-emerald-400/15);
  transition: box-shadow 0.3s ease;
}

/* ActionText trix-content styling for blog articles */
.trix-content h2 {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 700;
  margin-top: 3rem;
  margin-bottom: 1rem;
}

.trix-content h3 {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.trix-content ul {
  list-style-type: disc;
  padding-left: 1.5rem;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.trix-content ol {
  list-style-type: decimal;
  padding-left: 1.5rem;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.trix-content li {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.trix-content blockquote {
  border-left: 4px solid #cbd5e1;
  padding-left: 1rem;
  font-style: italic;
  color: #475569;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.trix-content a {
  color: #059669;
  text-decoration: none;
}

.trix-content a:hover {
  text-decoration: underline;
}

.trix-content strong {
  font-weight: 600;
  color: #0f172a;
}