/* Base styling for the richtext-editor component */
.richtext-editor {
  font-family: Arial, sans-serif;
}

/* Heading styles */
.richtext-editor h1 {
  font-size: 2rem; /* Tailwind's text-2xl */
  font-weight: bold; /* Tailwind's font-bold */
  line-height: 1.2; /* Set line-height for better readability */
  margin-bottom: 1rem; /* Space after heading */
}

.richtext-editor h2 {
  font-size: 1.5rem; /* Tailwind's text-xl */
  font-weight: 600; /* Tailwind's font-semibold */
  line-height: 1.25;
  margin-bottom: 0.75rem;
}

.richtext-editor h3 {
  font-size: 1.25rem; /* Tailwind's text-lg */
  font-weight: 500; /* Tailwind's font-medium */
  line-height: 1.3;
  margin-bottom: 0.75rem;
}

.richtext-editor h4,
.richtext-editor h5,
.richtext-editor h6 {
  font-size: 1rem; /* Tailwind's text-base */
  font-weight: 500; /* Tailwind's font-medium */
  line-height: 1.35;
  margin-bottom: 0.5rem;
}

/* Text formatting */
.richtext-editor strong {
  font-weight: bold;
}

.richtext-editor em {
  font-style: italic;
}

.richtext-editor u {
  text-decoration: underline;
}

/* Blockquote */
.richtext-editor blockquote {
  border-left: 4px solid #d1d5db; /* Tailwind's border-gray-300 */
  padding-left: 1rem;
  font-style: italic;
  color: #4b5563; /* Tailwind's text-gray-600 */
  margin-bottom: 1.5rem; /* Space below blockquote */
}

/* Lists */
.richtext-editor ul {
  list-style-type: disc;
  padding-left: 1.25rem; /* Tailwind's list-inside */
  margin-bottom: 1rem; /* Space after the list */
}

.richtext-editor ol {
  list-style-type: decimal;
  padding-left: 1.25rem;
  margin-bottom: 1rem;
}

.richtext-editor li {
  margin-bottom: 0.5rem; /* Tailwind's mb-2 */
}

/* Paragraph styling */
.richtext-editor p {
  margin-bottom: 1.25rem; /* Tailwind's mb-5, space after paragraphs */
  line-height: 1.6; /* Improved readability with line-height */
}

/* Code block styling */
.richtext-editor pre {
  background-color: #f3f4f6; /* Tailwind's bg-gray-100 */
  padding: 1rem;
  border-radius: 0.375rem; /* Tailwind's rounded-md */
  font-family: monospace;
  font-size: 0.875rem; /* Tailwind's text-sm */
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

.richtext-editor code {
  background-color: #f3f4f6; /* Tailwind's bg-gray-100 */
  padding: 0.25rem;
  border-radius: 0.375rem; /* Tailwind's rounded */
  font-family: monospace;
  font-size: 0.875rem; /* Tailwind's text-sm */
  line-height: 1.5;
}

/* Links */
.richtext-editor a {
  color: #3b82f6; /* Tailwind's text-blue-500 */
  text-decoration: underline;
}

/* Images */
.richtext-editor img {
  max-width: 100%;
  border-radius: 0.5rem; /* Tailwind's rounded-lg */
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/* Horizontal rule */
.richtext-editor hr {
  border-top: 1px solid #e5e7eb; /* Tailwind's border-gray-200 */
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/* Toolbar styling */
.richtext-editor .toolbar {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.richtext-editor .toolbar button {
  color: #6b7280; /* Tailwind's text-gray-600 */
  border: none;
  background: none;
  cursor: pointer;
  margin-right: 0.5rem;
}

.richtext-editor .toolbar button:hover {
  color: #111827; /* Tailwind's text-gray-900 */
}

.richtext-editor .toolbar button.active {
  color: #3b82f6; /* Tailwind's text-blue-500 */
}

.richtext-editor .toolbar .separator {
  border-left: 1px solid #d1d5db; /* Tailwind's border-gray-300 */
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  height: 1.5rem;
}

/* Responsive styling */
@media (max-width: 768px) {
  .richtext-editor {
    padding: 0.75rem; /* Adjust padding on smaller screens */
  }

  .richtext-editor h1 {
    font-size: 1.5rem; /* Reduce heading size */
  }

  .richtext-editor h2 {
    font-size: 1.25rem;
  }

  .richtext-editor h3 {
    font-size: 1.125rem;
  }

  .richtext-editor p,
  .richtext-editor li {
    font-size: 0.875rem; /* Reduce text size */
  }

  .richtext-editor pre,
  .richtext-editor code {
    font-size: 0.75rem;
  }
}