/* Trix Editor Custom Styling */

/* Editor container */
trix-editor {
  @apply border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors;
  background: white;
  outline: none;
  min-height: 7.5rem;
}

trix-editor:empty:not(:focus)::before {
  color: #9ca3af;
}

/* Wrapper to allow focus-within behaviour */
.trix-editor-wrapper {
  position: relative;
}

/* Toolbar styling */
.trix-editor-wrapper trix-toolbar {
  @apply border border-gray-300 rounded-t-lg bg-gray-50 sticky top-16 z-10;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-0.5rem);
  transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease;
}

.trix-editor-wrapper:focus-within trix-toolbar,
.trix-editor-wrapper trix-toolbar:focus-within {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

trix-toolbar .trix-button-row {
  @apply flex flex-wrap gap-1 p-2;
}

trix-toolbar .trix-button-group {
  @apply flex items-center gap-1 border-r border-gray-300 pr-2 mr-2;
}

trix-toolbar .trix-button-group:last-child {
  @apply border-r-0;
}

trix-toolbar .trix-button {
  @apply bg-white border border-gray-300 rounded px-3 py-2 hover:bg-gray-100 transition-colors;
  font-size: 14px;
}

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

trix-toolbar .trix-button:disabled {
  @apply opacity-50 cursor-not-allowed;
}

/* Editor content styling */
.trix-content h1 {
  @apply text-3xl font-bold text-gray-900 mb-4 mt-6;
}

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

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

.trix-content p {
  @apply text-base text-gray-700 mb-4 leading-relaxed;
}

.trix-content ul,
.trix-content ol {
  @apply mb-4 pl-6 space-y-2;
}

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

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

.trix-content li {
  @apply text-gray-700 leading-relaxed;
}

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

.trix-content strong {
  @apply font-bold text-gray-900;
}

.trix-content em {
  @apply italic;
}

.trix-content blockquote {
  @apply border-l-4 border-gray-300 pl-4 py-2 my-4 text-gray-600 italic;
}

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

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

/* File attachment styling */
.trix-content .attachment {
  @apply inline-block my-2;
}

.trix-content .attachment__caption {
  @apply text-sm text-gray-600 mt-1;
}

.trix-content .attachment--preview {
  @apply max-w-full rounded-lg shadow-sm;
}

.trix-content figure {
  @apply my-4;
}

.trix-content figcaption {
  @apply text-sm text-gray-600 mt-2 text-center;
}

/* Remove margins from first/last elements */
.trix-content > *:first-child {
  @apply mt-0;
}

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