/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Quill editor styles */
#quill-editor {
  overflow: hidden;
  border-color: var(--color-gray-600);
}

.ql-container.ql-snow {
  min-height: 300px;
  font-size: 1.125rem;
  /* Increase font size (18px) */
  line-height: 1.6;
}

.ql-editor {
  font-family: system-ui, -apple-system, sans-serif;
  padding: 1rem;
  /* Add more padding around content */
}

.ql-editor p {
  margin-bottom: 1rem;
  /* Add spacing between paragraphs */
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .ql-toolbar.ql-snow {
    background-color: #1f2937;
    border-color: var(--color-gray-600);
  }

  .ql-toolbar.ql-snow .ql-picker,
  .ql-toolbar.ql-snow .ql-stroke {
    color: #d1d5db;
    stroke: #d1d5db;
  }

  .ql-toolbar.ql-snow .ql-fill {
    fill: #d1d5db;
  }

  .ql-toolbar.ql-snow .ql-picker-options {
    background-color: #374151;
  }

  .ql-toolbar.ql-snow .ql-picker-label {
    color: #d1d5db;
  }

  .ql-toolbar.ql-snow button:hover,
  .ql-toolbar.ql-snow .ql-picker-label:hover {
    color: #f3f4f6;
  }

  .ql-toolbar.ql-snow button:hover .ql-stroke,
  .ql-toolbar.ql-snow .ql-picker-label:hover .ql-stroke {
    stroke: #f3f4f6;
  }

  .ql-toolbar.ql-snow button:hover .ql-fill,
  .ql-toolbar.ql-snow .ql-picker-label:hover .ql-fill {
    fill: #f3f4f6;
  }

  .ql-editor.ql-blank::before {
    color: #9ca3af;
  }

  .ql-container.ql-snow {
    background-color: #1f2937;
    color: #f3f4f6;
  }

  .ql-editor h1,
  .ql-editor h2,
  .ql-editor h3 {
    color: #f3f4f6;
  }

  .ql-editor a {
    color: #93c5fd;
  }

  .ql-editor blockquote {
    color: #d1d5db;
  }
}

/* Reading experience enhancements */
.prose {
  font-size: 1.25rem;
  line-height: 1.8;
  letter-spacing: 0.01em;
}

.prose p {
  margin-bottom: 1.5em;
}

/* Enable smooth scrolling for a better reading experience */
html {
  scroll-behavior: smooth;
}

/* Reading mode specific styles */
.bg-stone-50 {
  background-color: #fafaf9;
}

@media (prefers-color-scheme: dark) {
  .dark\:bg-gray-900 {
    background-color: #111827;
  }
}