/**
 * Readable styles for the server-rendered HTML snapshot (no-JS and crawlers).
 */

.zaji-xt-seo-snapshot {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
  font-family: system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  line-height: 1.7;
  color: #111;
  background: #fff;
}

.zaji-xt-seo-header {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e5e7eb;
}

.zaji-xt-seo-brand {
  margin: 0 0 0.75rem;
  font-size: 1.125rem;
  font-weight: 700;
}

.zaji-xt-seo-brand a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.zaji-xt-seo-logo {
  display: block;
  height: 2rem;
  width: auto;
  max-width: 9.5rem;
  object-fit: contain;
}

.zaji-xt-seo-img,
.zaji-xt-seo-hero-img,
.zaji-xt-seo-featured-img,
.zaji-xt-seo-product-img,
.zaji-xt-seo-download-img {
  display: block;
  max-width: 100%;
  height: auto;
}

.zaji-xt-seo-hero-media,
.zaji-xt-seo-featured,
.zaji-xt-seo-product-media,
.zaji-xt-seo-download-media {
  margin: 1.25rem 0;
}

.zaji-xt-seo-hero-img {
  width: min(100%, 24rem);
  margin-inline: auto;
}

.zaji-xt-seo-post-list {
  display: grid;
  gap: 1.25rem;
  margin: 1rem 0;
  padding: 0;
  list-style: none;
}

.zaji-xt-seo-post-item article {
  display: grid;
  gap: 0.75rem;
}

.zaji-xt-seo-post-title {
  margin: 0;
  font-size: 1.125rem;
}

.zaji-xt-seo-post-title a {
  color: inherit;
  text-decoration: none;
}

.zaji-xt-seo-post-title a:hover,
.zaji-xt-seo-post-thumb-link:hover {
  text-decoration: underline;
}

.zaji-xt-seo-post-excerpt {
  margin: 0;
  color: #4b5563;
}

.zaji-xt-seo-post-thumb-link {
  display: block;
  width: fit-content;
  text-decoration: none;
}

.zaji-xt-seo-post-thumb {
  width: min(100%, 18rem);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0.5rem;
}

.zaji-xt-seo-product {
  margin: 1.5rem 0;
}

.zaji-xt-seo-product-img {
  width: min(100%, 20rem);
}

.zaji-xt-seo-download-img {
  width: min(100%, 16rem);
}

.zaji-xt-seo-nav ul,
.zaji-xt-seo-footer ul,
.zaji-xt-seo-section ul,
.zaji-xt-seo-stats {
  margin: 0.75rem 0;
  padding: 0;
  list-style: none;
}

.zaji-xt-seo-nav li,
.zaji-xt-seo-footer li,
.zaji-xt-seo-section li {
  display: inline-block;
  margin: 0 0 0.5rem 1rem;
}

.zaji-xt-seo-nav a,
.zaji-xt-seo-footer a,
.zaji-xt-seo-section a {
  color: #0f766e;
  text-decoration: underline;
}

.zaji-xt-seo-main h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.2;
  margin: 0 0 1rem;
}

.zaji-xt-seo-main h2 {
  font-size: 1.375rem;
  margin: 2rem 0 0.75rem;
}

.zaji-xt-seo-main h3 {
  font-size: 1.125rem;
  margin: 1rem 0 0.5rem;
}

.zaji-xt-seo-section {
  margin-bottom: 2rem;
}

.zaji-xt-seo-meta,
.zaji-xt-seo-lead {
  color: #4b5563;
}

.zaji-xt-seo-content img {
  max-width: 100%;
  height: auto;
}

.zaji-xt-seo-content table {
  width: 100%;
  border-collapse: collapse;
}

.zaji-xt-seo-content th,
.zaji-xt-seo-content td {
  border: 1px solid #e5e7eb;
  padding: 0.5rem;
}

.zaji-xt-seo-footer {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid #e5e7eb;
  color: #6b7280;
  font-size: 0.875rem;
}

.zaji-xt-seo-card {
  margin: 1.5rem 0;
  padding: 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
}

details {
  margin: 0.75rem 0;
  padding: 0.75rem 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
}

summary {
  cursor: pointer;
  font-weight: 600;
}

@media (prefers-color-scheme: dark) {
  .zaji-xt-seo-snapshot {
    color: #f3f4f6;
    background: #0b0f14;
  }

  .zaji-xt-seo-header,
  .zaji-xt-seo-footer,
  .zaji-xt-seo-card,
  details {
    border-color: rgb(255 255 255 / 0.12);
  }

  .zaji-xt-seo-meta,
  .zaji-xt-seo-lead,
  .zaji-xt-seo-footer,
  .zaji-xt-seo-post-excerpt {
    color: #9ca3af;
  }

  /*
   * رنگ لینک باید در حالت تیره هم عوض شود.
   *
   * ‎#0f766e‎ برای پس‌زمینهٔ سفید انتخاب شده و آنجا ۵٫۴۷ به یک است — درست.
   * ولی بلوک تیره فقط پس‌زمینه و متن اصلی را برمی‌گرداند و لینک را دست‌نخورده
   * می‌گذارد؛ روی ‎#0b0f14‎ همان سبزآبی ۳٫۵۱ به یک می‌شود و از حد AA پایین‌تر
   * می‌افتد.
   *
   * اندازه‌گیری‌شده روی مسیر شکستِ React (باندل ۴۰۴): از ۱۴۰ عنصر متنی
   * snapshot، ۵۶ تا زیر ۴٫۵ بودند و همه‌شان لینک. این همان چیزی است که کاربر
   * بی‌جاوااسکریپت و خزنده می‌بینند، پس جای چشم‌پوشی نیست.
   *
   * ‎#e9b95c‎ همان طلایی برند است و روی این پس‌زمینه ۹٫۸ به یک می‌دهد.
   */
  .zaji-xt-seo-nav a,
  .zaji-xt-seo-footer a,
  .zaji-xt-seo-section a {
    color: #e9b95c;
  }
}

/*
 * دکمه‌های مبدل المنتور، در مسیرِ بی‌جاوااسکریپت.
 *
 * ‎.kx-btn‎ در kcex-article.css استایل می‌گیرد، ولی آن فایل چانکی است که همراه
 * کامپوننت مقاله بار می‌شود — و در این مسیر هیچ کامپوننتی mount نمی‌شود. پس
 * دکمه‌ها به رنگِ لینکِ عمومی می‌افتند: روی پس‌زمینهٔ تیره ۴٫۱۳ به یک، زیر حد AA.
 *
 * اینجا فقط یک ظاهر پایه لازم است — نه تکرار طرح اصلی — تا هم خوانده شود و هم
 * معلوم باشد دکمه است نه لینک متنی.
 */
.zaji-xt-seo-snapshot .kx-btn {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
}

@media (prefers-color-scheme: dark) {
  .zaji-xt-seo-snapshot .kx-btn {
    color: #e9b95c;
  }
}