@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .rv-circle { @apply inline-flex items-center justify-center rounded-full bg-gradient-to-br from-teal-500 to-cyan-500 text-white ring-4 ring-teal-50 shrink-0 aspect-square; }
  .rv-circle--sm { width: 2rem; height: 2rem; font-size: 0.875rem; font-weight: 600; }
  .rv-circle--md { width: 2.5rem; height: 2.5rem; }
  .rv-circle--lg { width: 3rem; height: 3rem; }

  /* Blog content styling (markdown) */
  .blog-content {
    @apply text-gray-600 leading-relaxed;
  }
  .blog-content h2 {
    @apply text-xl sm:text-2xl font-bold text-gray-900 mt-10 mb-4 pb-2 border-b border-gray-100 tracking-tight;
  }
  .blog-content h3 {
    @apply text-lg sm:text-xl font-bold text-gray-900 mt-8 mb-3 tracking-tight;
  }
  .blog-content p {
    @apply my-4 leading-relaxed;
  }
  .blog-content a {
    @apply text-cyan-600 font-medium hover:text-cyan-700 hover:underline;
  }
  .blog-content strong {
    @apply text-gray-900 font-semibold;
  }
  .blog-content ul {
    @apply my-6 pl-6 space-y-2;
  }
  .blog-content ol {
    @apply my-6 pl-6 space-y-2 list-decimal;
  }
  .blog-content li {
    @apply leading-relaxed;
  }
  .blog-content ul li {
    @apply relative;
  }
  .blog-content ul li::before {
    content: "•";
    @apply absolute -left-4 text-cyan-500 font-bold;
  }
  .blog-content blockquote {
    @apply border-l-4 border-cyan-500 bg-cyan-50/50 py-2 px-4 my-6 text-gray-700;
  }
  .blog-content code {
    @apply text-cyan-700 bg-cyan-50 px-1.5 py-0.5 rounded text-sm font-medium;
  }
  .blog-content img {
    @apply rounded-xl shadow-lg my-6;
  }
  .blog-content hr {
    @apply my-8 border-gray-200;
  }

  /* FAQ content styling (markdown) */
  .faq-content {
    @apply text-gray-600 leading-relaxed;
  }
  .faq-content h2 {
    @apply text-lg sm:text-xl font-semibold text-cyan-700 mt-8 mb-3 first:mt-0;
  }
  .faq-content h3 {
    @apply text-base sm:text-lg font-semibold text-cyan-700 mt-6 mb-2;
  }
  .faq-content p {
    @apply my-3 leading-relaxed text-gray-700;
  }
  .faq-content a {
    @apply text-teal-600 font-medium hover:text-teal-700 hover:underline;
  }
  .faq-content strong {
    @apply text-gray-900 font-semibold;
  }
  .faq-content ul {
    @apply my-4 pl-6 space-y-2;
  }
  .faq-content ol {
    @apply my-4 pl-6 space-y-2 list-decimal;
  }
  .faq-content li {
    @apply leading-relaxed;
  }
  .faq-content ul li {
    @apply relative;
  }
  .faq-content ul li::before {
    content: "•";
    @apply absolute -left-4 text-cyan-500 font-bold;
  }
}