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

@layer base {
  html {
    scroll-behavior: smooth;
  }

  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

@layer components {
  /* Container consistency */
  .container-custom {
    @apply max-w-6xl mx-auto px-6 lg:px-8;
  }

  /* Rich text content styling */
  .prose {
    @apply text-stone-700 leading-relaxed;
  }

  .prose h1 {
    @apply text-3xl font-bold mb-6 mt-8 text-stone-900 first:mt-0;
  }

  .prose h2 {
    @apply text-2xl font-semibold mb-4 mt-8 text-stone-900;
  }

  .prose h3 {
    @apply text-xl font-semibold mb-3 mt-6 text-stone-900;
  }

  .prose h4 {
    @apply text-lg font-semibold mb-2 mt-4 text-stone-900;
  }

  .prose p {
    @apply mb-4 leading-relaxed;
  }

  .prose ul, .prose ol {
    @apply mb-4 pl-6;
  }

  .prose ul {
    @apply list-disc;
  }

  .prose ol {
    @apply list-decimal;
  }

  .prose li {
    @apply mb-2;
  }

  .prose blockquote {
    @apply border-l-4 border-stone-300 pl-6 italic text-stone-600 my-6;
  }

  .prose pre {
    @apply bg-stone-900 text-stone-100 p-4 rounded-xl overflow-x-auto my-6 text-sm;
  }

  .prose code {
    @apply bg-stone-100 text-stone-800 px-1.5 py-0.5 rounded text-sm font-mono;
  }

  .prose pre code {
    @apply bg-transparent text-stone-100 p-0;
  }

  .prose a {
    @apply text-stone-900 underline underline-offset-2 hover:text-stone-600 transition-colors;
  }

  .prose img {
    @apply rounded-xl shadow-md my-6;
  }

  .prose hr {
    @apply border-stone-200 my-8;
  }

  .prose table {
    @apply w-full my-6 border-collapse;
  }

  .prose th {
    @apply border-b-2 border-stone-200 px-4 py-2 text-left font-semibold text-stone-900;
  }

  .prose td {
    @apply border-b border-stone-100 px-4 py-2;
  }

  /* Mobile-specific adjustments for article content */
  @media (max-width: 768px) {
    .prose {
      @apply text-base leading-relaxed;
    }

    .prose h1 {
      @apply text-2xl font-bold mb-4;
    }

    .prose h2 {
      @apply text-xl font-semibold mb-3;
    }

    .prose h3 {
      @apply text-lg font-semibold mb-2;
    }

    .prose p {
      @apply text-base mb-3;
    }

    .prose li {
      @apply text-base;
    }

    .prose blockquote {
      @apply text-base pl-4;
    }

    .prose pre {
      @apply text-xs p-3;
    }
  }

  /* Scrollbar hide utility */
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  /* Line clamp utilities */
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Animation utilities */
  @keyframes fade-in {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in {
    animation: fade-in 0.3s ease-out;
  }

  /* Disable Tailwind styles inside the Lexxy editor */
  lexxy-editor a {
    text-decoration: revert !important;
    color: revert !important;
  }
}