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

/* Rendered Markdown from project descriptions and release notes. Tailwind's
   preflight strips list and heading styling, so give it back here. */
.prose-project :where(p, ul, ol) {
  margin: 0;
}

.prose-project :where(ul, ol) {
  padding-left: 1.25em;
  display: flex;
  flex-direction: column;
  gap: 0.35em;
}

.prose-project :where(ul) { list-style: disc; }
.prose-project :where(ol) { list-style: decimal; }

.prose-project :where(h1, h2, h3, h4) {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--color-ink);
}

.prose-project :where(h2) { font-size: 1.375rem; }
.prose-project :where(h3) { font-size: 1.125rem; }

.prose-project :where(a) {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prose-project :where(code) {
  font-family: var(--font-mono);
  font-size: 0.9375em;
  padding: 0.125em 0.4em;
  border-radius: 5px;
  background: var(--color-inset);
  border: 1px solid var(--color-line-bright);
}

.prose-project :where(pre) {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  overflow-x: auto;
  padding: 1rem 1.125rem;
  border-radius: 12px;
  background: var(--color-inset);
  border: 1px solid var(--color-line-bright);
}

.prose-project :where(pre code) {
  padding: 0;
  border: 0;
  background: none;
}

.prose-project :where(strong) { font-weight: 600; color: var(--color-ink); }