/*
 * 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.
 */

/* Material Design styles are loaded separately via stylesheet_link_tag in layout */

/* Markdown prose styles - scoped to .prose class */
.prose {
  color: rgb(55 65 81); /* gray-700 */
  max-width: 65ch;
}

.prose-sm {
  font-size: 0.875rem;
  line-height: 1.7142857;
}

/* Paragraphs - normal text size, not headings */
.prose-sm p {
  margin-top: 1.1428571em;
  margin-bottom: 1.1428571em;
  color: rgb(55 65 81); /* gray-700 */
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.7142857;
  display: block;
}

.prose-sm p:first-child {
  margin-top: 0;
}

.prose-sm p:last-child {
  margin-bottom: 0;
}

/* Ensure paragraphs are separated with clear line breaks */
.prose-sm p + p {
  margin-top: 1.1428571em;
}

/* Ensure paragraphs after headings have proper spacing */
.prose-sm h1 + p,
.prose-sm h2 + p,
.prose-sm h3 + p,
.prose-sm h4 + p {
  margin-top: 0.8em;
}

/* Headings - only actual headings get heading styles */
.prose-sm h1 {
  font-size: 1.7142857em;
  margin-top: 1.6em;
  margin-bottom: 0.8em;
  line-height: 1.3;
  font-weight: 700;
  color: rgb(17 24 39); /* gray-900 */
}

.prose-sm h1:first-child {
  margin-top: 0;
}

.prose-sm h2 {
  font-size: 1.4285714em;
  margin-top: 1.6em;
  margin-bottom: 0.8em;
  line-height: 1.4;
  font-weight: 600;
  color: rgb(17 24 39); /* gray-900 */
}

.prose-sm h3 {
  font-size: 1.1428571em;
  margin-top: 1.5em;
  margin-bottom: 0.6em;
  line-height: 1.5;
  font-weight: 600;
  color: rgb(17 24 39); /* gray-900 */
}

.prose-sm h4 {
  font-size: 1em;
  margin-top: 1.4em;
  margin-bottom: 0.5em;
  line-height: 1.6;
  font-weight: 600;
  color: rgb(17 24 39); /* gray-900 */
}

/* Ensure paragraphs don't inherit heading styles - override any inheritance */
.prose-sm p {
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  line-height: 1.7142857 !important;
  color: rgb(55 65 81) !important; /* gray-700 */
}

/* Lists */
.prose-sm ul,
.prose-sm ol {
  margin-top: 1.1428571em;
  margin-bottom: 1.1428571em;
  padding-left: 1.5714286em;
  color: rgb(55 65 81); /* gray-700 */
  font-size: 0.875rem;
  list-style-position: outside;
  display: block;
}

.prose-sm ul {
  list-style-type: disc;
  list-style-position: outside;
}

.prose-sm ol {
  list-style-type: decimal;
  list-style-position: outside;
}

.prose-sm li {
  margin-top: 0.2857143em;
  margin-bottom: 0.2857143em;
  font-size: 0.875rem;
  display: list-item;
  list-style-position: outside;
  padding-left: 0.5em;
}

.prose-sm li > p {
  margin-top: 0.5714286em;
  margin-bottom: 0.5714286em;
}

.prose-sm li > :first-child {
  margin-top: 0;
}

.prose-sm li > :last-child {
  margin-bottom: 0;
}

/* Ensure list items have visible bullets */
.prose-sm ul li::marker {
  color: rgb(55 65 81); /* gray-700 */
  font-weight: normal;
}

.prose-sm ol li::marker {
  color: rgb(55 65 81); /* gray-700 */
  font-weight: normal;
}

/* Links */
.prose-sm a {
  color: rgb(37 99 235); /* blue-600 */
  text-decoration: underline;
  font-weight: 500;
  font-size: 0.875rem;
}

.prose-sm a:hover {
  color: rgb(29 78 216); /* blue-700 */
}

/* Strong and emphasis */
.prose-sm strong {
  font-weight: 600;
  color: rgb(17 24 39); /* gray-900 */
}

.prose-sm em {
  font-style: italic;
}

/* Code */
.prose-sm code {
  font-size: 0.8571429em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  background-color: rgb(243 244 246); /* gray-100 */
  padding: 0.1428571em 0.2857143em;
  border-radius: 0.25rem;
  color: rgb(17 24 39); /* gray-900 */
}

.prose-sm pre {
  font-size: 0.8571429em;
  line-height: 1.6666667;
  margin-top: 1.6666667em;
  margin-bottom: 1.6666667em;
  border-radius: 0.375rem;
  padding: 0.6666667em 1em;
  background-color: rgb(243 244 246); /* gray-100 */
  overflow-x: auto;
  color: rgb(17 24 39); /* gray-900 */
}

.prose-sm pre code {
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
}

/* Blockquotes */
.prose-sm blockquote {
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  padding-left: 1em;
  border-left: 0.25em solid rgb(229 231 235); /* gray-200 */
  font-style: italic;
  color: rgb(107 114 128); /* gray-500 */
  font-size: 0.875rem;
}

/* Horizontal rules */
.prose-sm hr {
  margin-top: 2.8571429em;
  margin-bottom: 2.8571429em;
  border-top: 1px solid rgb(229 231 235); /* gray-200 */
  border-bottom: none;
  border-left: none;
  border-right: none;
}

/* Tables */
.prose-sm table {
  width: 100%;
  margin-top: 1.1428571em;
  margin-bottom: 1.1428571em;
  border-collapse: collapse;
  font-size: 0.8571429em;
}

.prose-sm th,
.prose-sm td {
  padding: 0.5714286em;
  border: 1px solid rgb(229 231 235); /* gray-200 */
}

.prose-sm th {
  font-weight: 600;
  background-color: rgb(249 250 251); /* gray-50 */
  color: rgb(17 24 39); /* gray-900 */
}

.prose-sm td {
  color: rgb(55 65 81); /* gray-700 */
}

/* Images */
.prose-sm img {
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
  max-width: 100%;
  height: auto;
}

/* Remove max-width constraint when max-w-none is applied */
.prose.max-w-none {
  max-width: none;
}