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

/* See Alpine.js: https://github.com/alpinejs/alpine#x-cloak */
[x-cloak=""] {
    display: none;
}

/* Trix Editor Styles - Ensure proper display with Tailwind */
@layer components {
  trix-editor {
    @apply block w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
    min-height: 300px;
  }

  trix-toolbar {
    @apply sticky top-0 bg-white border border-gray-300 rounded-t-lg p-2 z-10;
    margin-bottom: -1px;
  }

  trix-toolbar .trix-button-group {
    @apply border-gray-300;
  }

  trix-toolbar .trix-button {
    @apply text-gray-700 hover:bg-gray-100;
  }

  trix-toolbar .trix-button.trix-active {
    @apply bg-blue-100 text-blue-700;
  }

  .trix-content {
    @apply prose prose-sm max-w-none;
  }

  .trix-content h1 {
    @apply text-2xl font-bold mt-4 mb-2;
  }

  .trix-content h2 {
    @apply text-xl font-semibold mt-3 mb-2;
  }

  .trix-content ul {
    @apply list-disc list-inside;
  }

  .trix-content ol {
    @apply list-decimal list-inside;
  }

  .trix-content a {
    @apply text-blue-600 underline hover:text-blue-800;
  }

  .trix-content blockquote {
    @apply border-l-4 border-gray-300 pl-4 italic;
  }

  .trix-content pre {
    @apply bg-gray-100 p-3 rounded overflow-x-auto;
  }

  .trix-content code {
    @apply bg-gray-100 px-1 py-0.5 rounded text-sm;
  }

  /* Custom Rich Content Styles for Job Descriptions */
  .rich-content {
    @apply text-gray-900 leading-relaxed text-sm;
  }

  .rich-content h1 {
    @apply text-2xl font-bold mt-5 mb-3 text-gray-900;
  }

  .rich-content h2 {
    @apply text-xl font-semibold mt-4 mb-3 text-gray-800;
  }

  .rich-content h3 {
    @apply text-lg font-semibold mt-4 mb-2 text-gray-800;
  }

  .rich-content h4 {
    @apply text-base font-medium mt-3 mb-2 text-gray-700;
  }

  .rich-content p {
    @apply mb-3 text-sm leading-6;
  }

  .rich-content ul {
    @apply mb-4 space-y-1.5;
    list-style-type: disc;
    list-style-position: outside;
    margin-left: 1rem;
  }

  .rich-content ol {
    @apply mb-4 space-y-1.5;
    list-style-type: decimal;
    list-style-position: outside;
    margin-left: 1rem;
  }

  .rich-content li {
    @apply text-sm leading-6;
    padding-left: 0;
  }

  .rich-content ul > li::marker {
    font-size: 1.1em;
  }

  .rich-content ul ul,
  .rich-content ol ul {
    @apply mt-1.5;
    list-style-type: circle;
    margin-left: 0.875rem;
  }

  .rich-content ul ol,
  .rich-content ol ol {
    @apply mt-1.5;
    list-style-type: lower-alpha;
    margin-left: 0.875rem;
  }

  .rich-content strong,
  .rich-content b {
    @apply font-semibold text-gray-900;
  }

  .rich-content em,
  .rich-content i {
    @apply italic;
  }

  .rich-content a {
    @apply text-blue-600 underline hover:text-blue-800 transition-colors;
  }

  .rich-content blockquote {
    @apply border-l-4 border-gray-300 pl-6 py-2 my-4 italic text-gray-700 bg-gray-50;
  }

  .rich-content pre {
    @apply bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto my-4 text-sm;
  }

  .rich-content code {
    @apply bg-gray-100 text-red-600 px-1.5 py-0.5 rounded text-sm font-mono;
  }

  .rich-content pre code {
    @apply bg-transparent text-gray-100 p-0;
  }

  .rich-content hr {
    @apply border-t border-gray-300 my-6;
  }

  .rich-content table {
    @apply w-full border-collapse my-4;
  }

  .rich-content th {
    @apply border border-gray-300 px-4 py-2 bg-gray-100 text-left font-semibold;
  }

  .rich-content td {
    @apply border border-gray-300 px-4 py-2;
  }

  .rich-content img {
    @apply max-w-full h-auto rounded-lg my-4;
  }

  /* Nested list specific styles */
  .rich-content li > ul,
  .rich-content li > ol {
    @apply mt-2 mb-0;
  }

  /* First and last element spacing adjustments */
  .rich-content > *:first-child {
    @apply mt-0;
  }

  .rich-content > *:last-child {
    @apply mb-0;
  }
}

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/