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

.article-preview-content {
  background: linear-gradient(180deg, oklch(18.2% 0.01 286.2 / 0.95), oklch(14.1% 0.005 285.823 / 0.95));
  border: 1px solid oklch(37% 0.013 285.805);
  border-radius: 0.9rem;
  padding: 1.25rem;
}

.article-preview-content :where(h1, h2, h3, h4) {
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 1.2em 0 0.45em;
}

.article-preview-content :where(h1) {
  font-size: clamp(1.7rem, 3.3vw, 2.2rem);
}

.article-preview-content :where(h2) {
  font-size: clamp(1.35rem, 2.8vw, 1.8rem);
}

.article-preview-content :where(h3) {
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
}

.article-preview-content :where(p, li) {
  color: oklch(90.1% 0.006 285.885);
  line-height: 1.75;
}

.article-preview-content :where(blockquote) {
  border-inline-start: 3px solid oklch(76.9% 0.188 70.08 / 0.5);
  color: oklch(82.8% 0.013 285.938);
  margin: 1.25rem 0;
  padding-inline-start: 1rem;
}

.article-preview-content :where(a) {
  text-underline-offset: 0.2em;
  text-decoration-thickness: 0.08em;
}

.article-preview-content pre {
  background: oklch(13% 0.01 268);
  border: 1px solid oklch(41% 0.02 286);
  border-radius: 0.75rem;
  display: block;
  margin: 1.1rem 0;
  overflow-x: auto;
  padding: 2.15rem 1rem 0.95rem;
  position: relative;
}

.article-preview-content .code-language-badge {
  background: oklch(27% 0.04 270 / 0.95);
  border: 1px solid oklch(46% 0.03 276);
  border-radius: 9999px;
  color: oklch(90% 0.02 105);
  font-size: 0.66rem;
  font-weight: 700;
  inset-block-start: 0.58rem;
  inset-inline-end: 0.65rem;
  letter-spacing: 0.08em;
  line-height: 1;
  padding: 0.26rem 0.52rem;
  position: absolute;
  text-transform: uppercase;
}

.article-preview-content code:not(pre code) {
  background: oklch(24% 0.02 276);
  border-radius: 0.35rem;
  color: oklch(96.3% 0.016 70);
  font-size: 0.92em;
  padding: 0.14rem 0.4rem;
}

.article-preview-content pre code.hljs {
  background: transparent;
  color: oklch(92% 0.004 286.32);
  display: block;
  font-size: 0.88rem;
  line-height: 1.65;
  padding: 0;
}

.article-preview-content .hljs-comment,
.article-preview-content .hljs-quote { color: oklch(69% 0.03 260); }
.article-preview-content .hljs-keyword,
.article-preview-content .hljs-selector-tag,
.article-preview-content .hljs-literal { color: oklch(78% 0.16 75); }
.article-preview-content .hljs-string,
.article-preview-content .hljs-doctag { color: oklch(82% 0.13 145); }
.article-preview-content .hljs-title,
.article-preview-content .hljs-section,
.article-preview-content .hljs-function { color: oklch(78% 0.12 250); }
.article-preview-content .hljs-number,
.article-preview-content .hljs-attr,
.article-preview-content .hljs-attribute { color: oklch(80% 0.14 35); }
.article-preview-content .hljs-type,
.article-preview-content .hljs-built_in,
.article-preview-content .hljs-class { color: oklch(81% 0.09 205); }

@media (max-width: 640px) {
  .article-preview-content {
    padding: 1rem;
  }
}