/**
 * MyOstad Blog — Single Post + Magazine
 * Design System: MyOstad Dark Glass · Vazirmatn · RTL · 2026
 */

/* ═══════════════════════════════════════════════════════════
   TOKENS  (bridge به --mo-* vars پلاگین — fallback مستقل)
   ═══════════════════════════════════════════════════════════ */
:root {
  --blog-bg:          var(--mo-bg-main,       #0B0F19);
  --blog-surface:     var(--mo-bg-surface,    #0E1422);
  --blog-card:        var(--mo-bg-card,       rgba(19,26,42,.65));
  --blog-border:      var(--mo-border,        rgba(255,255,255,.14));
  --blog-border-soft: var(--mo-border-subtle, rgba(255,255,255,.09));
  --blog-text:        var(--mo-text-high,     #fff);
  --blog-text-mid:    var(--mo-text-mid,      #94A3B8);
  --blog-text-low:    var(--mo-text-low,      #64748B);
  --blog-accent:      var(--mo-accent,        #2563eb);
  --blog-accent-glow: var(--mo-accent-glow,   rgba(37,99,235,.35));
  --blog-gold:        var(--mo-color-gold,    #f59e0b);
  --blog-radius:      var(--mo-radius-lg,     16px);
  --blog-radius-sm:   var(--mo-radius-sm,     8px);
  --blog-shadow:      var(--mo-shadow-md,     0 8px 32px rgba(0,0,0,.7));
  --blog-font:        var(--mo-font-main,     'Vazirmatn','Tahoma',sans-serif);
  --blog-glass-blur:  blur(var(--mo-glass-blur, 15px)) saturate(1.6);
  --blog-transition:  200ms ease;
  --blog-max-w:       820px;
  --blog-grid-cols:   repeat(auto-fill, minmax(300px, 1fr));
}

/* Light mode */
[data-theme="light"] {
  --blog-bg:          #F4F6FA;
  --blog-surface:     #fff;
  --blog-card:        rgba(255,255,255,.85);
  --blog-border:      rgba(15,32,68,.10);
  --blog-border-soft: rgba(15,32,68,.06);
  --blog-text:        rgba(10,22,50,.92);
  --blog-text-mid:    rgba(10,22,50,.62);
  --blog-text-low:    rgba(10,22,50,.40);
}

/* ── Global page body ───────────────────────────────────── */
body.single, body.blog, body.archive, body.home {
  background: var(--blog-bg);
  color: var(--blog-text);
  font-family: var(--blog-font);
  direction: rtl;
  min-height: 100dvh;
}

/* ═══════════════════════════════════════════════════════════
   READING PROGRESS BAR
   ═══════════════════════════════════════════════════════════ */
.mo-progress-bar {
  position: fixed;
  top: 0; right: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, var(--blog-gold), var(--blog-accent));
  z-index: 9999;
  transition: width 80ms linear;
  box-shadow: 0 0 8px var(--blog-accent-glow);
}

/* ═══════════════════════════════════════════════════════════
   SINGLE POST
   ═══════════════════════════════════════════════════════════ */
.mo-blog-wrap {
  width: 100%;
  min-height: 100dvh;
  padding-bottom: 80px;
}

/* ── Hero Image ─────────────────────────────────────────── */
.mo-blog-hero-wrap {
  position: relative;
  width: 100%;
  max-height: 520px;
  overflow: hidden;
}

.mo-blog-hero-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    transparent 40%,
    rgba(11,15,25,.55) 70%,
    var(--blog-bg) 100%
  );
}

.mo-blog-hero-img img,
.mo-blog-hero-wrap .wp-block-post-featured-image img {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  display: block;
}

/* ── Container ──────────────────────────────────────────── */
.mo-blog-container {
  max-width: calc(var(--blog-max-w) + 48px);
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Article Header ─────────────────────────────────────── */
.mo-blog-header {
  padding: 40px 0 32px;
  border-bottom: 1px solid var(--blog-border-soft);
  margin-bottom: 40px;
}

/* Category pills */
.mo-blog-cats .wp-block-post-terms__item,
.mo-blog-cats a {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  font-size: .75rem;
  font-weight: 600;
  border-radius: var(--mo-radius-full, 9999px);
  background: rgba(37,99,235,.15);
  color: var(--blog-accent);
  border: 1px solid rgba(37,99,235,.30);
  text-decoration: none;
  letter-spacing: .02em;
  transition: background var(--blog-transition), transform var(--blog-transition);
  margin-left: 6px;
  margin-bottom: 12px;
}
.mo-blog-cats a:hover {
  background: rgba(37,99,235,.25);
  transform: translateY(-1px);
}

/* Post title */
.mo-blog-title h1,
.mo-blog-title {
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.3;
  color: var(--blog-text);
  margin: 16px 0 20px;
  letter-spacing: -.01em;
}

/* Meta row */
.mo-blog-meta {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.mo-blog-author .wp-block-post-author__name,
.mo-blog-author .wp-block-post-author__content a {
  font-size: .85rem;
  font-weight: 600;
  color: var(--blog-text-mid);
  text-decoration: none;
}
.mo-blog-author .wp-block-post-author__avatar img {
  border-radius: 50%;
  border: 2px solid var(--blog-border);
  width: 32px !important;
  height: 32px !important;
}
.mo-blog-author.wp-block-post-author {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mo-blog-date time {
  font-size: .82rem;
  color: var(--blog-text-low);
}

/* ── Article Content ────────────────────────────────────── */
.mo-blog-content {
  font-size: 1.05rem;
  line-height: 1.88;
  color: var(--blog-text-mid);
  max-width: var(--blog-max-w);
}

.mo-blog-content h2,
.mo-blog-content h3,
.mo-blog-content h4 {
  color: var(--blog-text);
  font-weight: 700;
  margin: 2.2em 0 .8em;
  line-height: 1.35;
}
.mo-blog-content h2 { font-size: 1.45rem; }
.mo-blog-content h3 { font-size: 1.2rem;  }
.mo-blog-content h4 { font-size: 1.05rem; }

.mo-blog-content p  { margin-bottom: 1.4em; }

.mo-blog-content a {
  color: var(--blog-accent);
  text-decoration: underline;
  text-decoration-color: rgba(37,99,235,.4);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--blog-transition);
}
.mo-blog-content a:hover {
  text-decoration-color: var(--blog-accent);
}

.mo-blog-content strong, .mo-blog-content b {
  color: var(--blog-text);
  font-weight: 700;
}

.mo-blog-content ul, .mo-blog-content ol {
  padding-right: 24px;
  margin-bottom: 1.4em;
}
.mo-blog-content li { margin-bottom: .5em; }

/* Blockquote */
.mo-blog-content blockquote {
  border-right: 3px solid var(--blog-accent);
  border-left: none;
  margin: 2em 0;
  padding: 16px 20px;
  background: rgba(37,99,235,.07);
  border-radius: 0 var(--blog-radius-sm) var(--blog-radius-sm) 0;
  color: var(--blog-text);
  font-style: italic;
}

/* Code */
.mo-blog-content code {
  background: rgba(255,255,255,.07);
  border: 1px solid var(--blog-border-soft);
  border-radius: 4px;
  padding: 2px 7px;
  font-size: .88em;
  font-family: var(--mo-font-mono, monospace);
  color: var(--blog-gold);
}
.mo-blog-content pre {
  background: rgba(0,0,0,.4);
  border: 1px solid var(--blog-border);
  border-radius: var(--blog-radius-sm);
  padding: 20px;
  overflow-x: auto;
  margin: 1.6em 0;
}
.mo-blog-content pre code {
  background: none;
  border: none;
  padding: 0;
  color: #e2e8f0;
}

/* Images in content */
.mo-blog-content figure,
.mo-blog-content img {
  max-width: 100%;
  border-radius: var(--blog-radius-sm);
  height: auto;
}
.mo-blog-content figcaption {
  font-size: .8rem;
  color: var(--blog-text-low);
  text-align: center;
  margin-top: 8px;
}

/* Tables */
.mo-blog-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
  margin: 1.6em 0;
}
.mo-blog-content th, .mo-blog-content td {
  padding: 10px 14px;
  border: 1px solid var(--blog-border);
  text-align: right;
}
.mo-blog-content th {
  background: rgba(37,99,235,.12);
  font-weight: 600;
  color: var(--blog-text);
}

/* ── Post Footer ────────────────────────────────────────── */
.mo-blog-footer {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--blog-border-soft);
}

.mo-blog-tags .wp-block-post-terms__item,
.mo-blog-tags a {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  font-size: .78rem;
  border-radius: var(--mo-radius-full, 9999px);
  background: var(--blog-card);
  color: var(--blog-text-mid);
  border: 1px solid var(--blog-border);
  text-decoration: none;
  margin-left: 6px;
  margin-bottom: 8px;
  transition: border-color var(--blog-transition), color var(--blog-transition);
}
.mo-blog-tags a:hover {
  border-color: var(--blog-accent);
  color: var(--blog-accent);
}
.mo-blog-tags .wp-block-post-terms__prefix { display: none; }

/* ── Post Navigation ────────────────────────────────────── */
.mo-blog-nav {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.mo-blog-nav .wp-block-post-navigation-link a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  background: var(--blog-card);
  backdrop-filter: var(--blog-glass-blur);
  -webkit-backdrop-filter: var(--blog-glass-blur);
  border: 1px solid var(--blog-border);
  border-radius: var(--blog-radius);
  color: var(--blog-text-mid);
  text-decoration: none;
  font-size: .88rem;
  transition: border-color var(--blog-transition), color var(--blog-transition), box-shadow var(--blog-transition);
}
.mo-blog-nav .wp-block-post-navigation-link a:hover {
  border-color: var(--blog-accent);
  color: var(--blog-text);
  box-shadow: 0 0 20px var(--blog-accent-glow);
}

/* ═══════════════════════════════════════════════════════════
   MAGAZINE LIST
   ═══════════════════════════════════════════════════════════ */
.mo-magazine-wrap {
  width: 100%;
  padding-bottom: 80px;
}

/* ── Magazine Header ────────────────────────────────────── */
.mo-magazine-header {
  text-align: center;
  padding: 72px 24px 48px;
  background: radial-gradient(
    ellipse 80% 100% at 50% 0%,
    rgba(37,99,235,.14) 0%,
    transparent 70%
  );
  position: relative;
}
.mo-magazine-header::after {
  content: '';
  position: absolute;
  bottom: 0; right: 10%; left: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--blog-border), transparent);
}

.mo-magazine-title,
.mo-magazine-header h1 {
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 900;
  color: var(--blog-text);
  letter-spacing: -.02em;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #fff 30%, #60a5fa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.mo-magazine-subtitle {
  font-size: 1rem;
  color: var(--blog-text-low);
  max-width: 420px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ── Query Container ────────────────────────────────────── */
.mo-magazine-query {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 24px;
}

/* ── Article Grid ───────────────────────────────────────── */
.mo-magazine-grid.wp-block-post-template,
ul.mo-magazine-grid.wp-block-post-template {
  display: grid;
  grid-template-columns: var(--blog-grid-cols);
  gap: 28px;
  list-style: none;
  padding: 0;
  margin: 0 0 48px;
}

/* ── Article Card ───────────────────────────────────────── */
.mo-article-card.wp-block-group,
li.wp-block-post .mo-article-card {
  display: flex;
  flex-direction: column;
  background: var(--blog-card);
  backdrop-filter: var(--blog-glass-blur);
  -webkit-backdrop-filter: var(--blog-glass-blur);
  border: 1px solid var(--blog-border);
  border-radius: var(--blog-radius);
  overflow: hidden;
  transition:
    transform 250ms cubic-bezier(.34,1.30,.64,1),
    border-color 200ms ease,
    box-shadow 220ms ease;
  will-change: transform;
}
.mo-article-card:hover {
  transform: translateY(-5px);
  border-color: rgba(37,99,235,.45);
  box-shadow: 0 20px 48px rgba(0,0,0,.55),
              0 0 30px rgba(37,99,235,.12);
}

/* Card image */
.mo-article-card__img .wp-block-post-featured-image,
.mo-article-card__img figure {
  margin: 0;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  display: block;
}
.mo-article-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms ease;
}
.mo-article-card:hover .mo-article-card__img img {
  transform: scale(1.04);
}

/* Placeholder when no image */
.mo-article-card__img .wp-block-post-featured-image:empty,
.mo-article-card__img figure:empty {
  aspect-ratio: 16/9;
  background: linear-gradient(135deg,
    rgba(37,99,235,.15) 0%,
    rgba(17,24,40,.6) 100%
  );
}

/* Card body */
.mo-article-card__body.wp-block-group {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
}

/* Card category */
.mo-article-card__cat a,
.mo-article-card__cat .wp-block-post-terms__item {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--blog-accent);
  text-decoration: none;
}
.mo-article-card__cat .wp-block-post-terms__separator { display: none; }

/* Card title */
.mo-article-card__title h2,
.mo-article-card__title .wp-block-post-title {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--blog-text);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mo-article-card__title a,
.mo-article-card__title .wp-block-post-title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--blog-transition);
}
.mo-article-card:hover .mo-article-card__title a,
.mo-article-card:hover .mo-article-card__title .wp-block-post-title a {
  color: #93c5fd;
}

/* Card excerpt */
.mo-article-card__excerpt .wp-block-post-excerpt__excerpt,
.mo-article-card__excerpt p {
  font-size: .85rem;
  line-height: 1.65;
  color: var(--blog-text-low);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mo-article-card__excerpt .wp-block-post-excerpt__more-link { display: none; }

/* Card footer */
.mo-article-card__footer.wp-block-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--blog-border-soft);
  gap: 8px;
}
.mo-article-card__date time,
.mo-article-card__author {
  font-size: .78rem;
  color: var(--blog-text-low);
}

/* ── Empty state ────────────────────────────────────────── */
.mo-magazine-empty {
  text-align: center;
  padding: 80px 24px;
  color: var(--blog-text-low);
  font-size: 1rem;
}

/* ── Pagination ─────────────────────────────────────────── */
.mo-pagination.wp-block-query-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 16px;
}

.mo-pagination .wp-block-query-pagination-previous,
.mo-pagination .wp-block-query-pagination-next,
.mo-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border-radius: var(--blog-radius-sm);
  background: var(--blog-card);
  border: 1px solid var(--blog-border);
  color: var(--blog-text-mid);
  text-decoration: none;
  font-size: .88rem;
  transition: border-color var(--blog-transition), color var(--blog-transition), background var(--blog-transition);
}
.mo-pagination .wp-block-query-pagination-previous:hover,
.mo-pagination .wp-block-query-pagination-next:hover,
.mo-pagination .page-numbers:hover {
  border-color: var(--blog-accent);
  color: var(--blog-text);
  background: rgba(37,99,235,.10);
}
.mo-pagination .page-numbers.current {
  background: var(--blog-accent);
  border-color: var(--blog-accent);
  color: #fff;
  box-shadow: 0 0 16px var(--blog-accent-glow);
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .mo-blog-container { padding: 0 16px; }
  .mo-blog-header    { padding: 28px 0 24px; }
  .mo-blog-nav       { grid-template-columns: 1fr; }
  .mo-magazine-query { padding: 32px 16px; }
  --blog-grid-cols: 1fr;
  .mo-magazine-grid.wp-block-post-template,
  ul.mo-magazine-grid.wp-block-post-template { grid-template-columns: 1fr; }
  .mo-magazine-header { padding: 48px 16px 36px; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .mo-magazine-grid.wp-block-post-template,
  ul.mo-magazine-grid.wp-block-post-template {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ═══════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  .mo-article-card {
    animation: mo-card-in 420ms cubic-bezier(.34,1.2,.64,1) both;
  }
  .mo-magazine-grid .wp-block-post:nth-child(1) .mo-article-card { animation-delay:  40ms; }
  .mo-magazine-grid .wp-block-post:nth-child(2) .mo-article-card { animation-delay:  90ms; }
  .mo-magazine-grid .wp-block-post:nth-child(3) .mo-article-card { animation-delay: 140ms; }
  .mo-magazine-grid .wp-block-post:nth-child(4) .mo-article-card { animation-delay: 190ms; }
  .mo-magazine-grid .wp-block-post:nth-child(5) .mo-article-card { animation-delay: 240ms; }
  .mo-magazine-grid .wp-block-post:nth-child(6) .mo-article-card { animation-delay: 290ms; }

  @keyframes mo-card-in {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0);    }
  }
}

/* MyOstad Blog v2 — appended */

/* ═══════════════════════════════════════════════════════════
   META BADGES  (reading time + shamsi date)
   ═══════════════════════════════════════════════════════════ */
.mo-meta-shamsi,
.mo-meta-reading-time {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .8rem;
  color: var(--blog-text-low);
  padding: 3px 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--blog-border-soft);
  border-radius: var(--mo-radius-full, 9999px);
  white-space: nowrap;
}
.mo-meta-shamsi svg,
.mo-meta-reading-time svg { flex-shrink: 0; opacity: .75; }

[data-theme="light"] .mo-meta-shamsi,
[data-theme="light"] .mo-meta-reading-time {
  background: rgba(15,32,68,.05);
}

/* ═══════════════════════════════════════════════════════════
   TABLE OF CONTENTS
   ═══════════════════════════════════════════════════════════ */
.mo-toc {
  --toc-w: 240px;
  position: sticky;
  top: 90px;
  float: left;
  width: var(--toc-w);
  margin-left: calc(-1 * (var(--toc-w) + 32px));
  margin-bottom: 32px;
  background: var(--blog-card);
  backdrop-filter: var(--blog-glass-blur);
  -webkit-backdrop-filter: var(--blog-glass-blur);
  border: 1px solid var(--blog-border);
  border-radius: var(--blog-radius);
  padding: 16px;
  font-size: .82rem;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--blog-border) transparent;
  z-index: 10;
}

.mo-toc__toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  background: none;
  border: none;
  color: var(--blog-text);
  font-size: .82rem;
  font-weight: 700;
  font-family: var(--blog-font);
  cursor: pointer;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--blog-border-soft);
  margin-bottom: 12px;
  direction: rtl;
  text-align: right;
}
.mo-toc__toggle svg { opacity: .75; }

.mo-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mo-toc__item { direction: rtl; }
.mo-toc__item--sub .mo-toc__link { padding-right: 18px; font-size: .78rem; opacity: .8; }

.mo-toc__link {
  display: block;
  padding: 5px 8px;
  color: var(--blog-text-low);
  text-decoration: none;
  border-radius: 6px;
  line-height: 1.45;
  transition: color 150ms ease, background 150ms ease, padding-right 150ms ease;
}
.mo-toc__link:hover {
  color: var(--blog-text);
  background: rgba(255,255,255,.06);
}
.mo-toc__link--active {
  color: var(--blog-accent) !important;
  background: rgba(37,99,235,.12) !important;
  padding-right: 14px;
  font-weight: 600;
  border-right: 2px solid var(--blog-accent);
}

/* ── TOC on small screens: block above content ──────────── */
@media (max-width: 1280px) {
  .mo-toc {
    float: none;
    position: static;
    width: 100%;
    margin-left: 0;
    margin-bottom: 32px;
    max-height: none;
  }
  .mo-toc__list { display: none; }           /* collapsed by default */
  .mo-toc__toggle[aria-expanded="true"] + .mo-toc__list { display: flex; }
}

[data-theme="light"] .mo-toc {
  background: rgba(255,255,255,.92);
}
[data-theme="light"] .mo-toc__link:hover {
  background: rgba(15,32,68,.05);
}