/* =========================================================
   صفحه‌ی یک مقاله (با blog.css: نوار عنوان، چیدمان، سایدبار)
   ========================================================= */

.blog-head--post .blog-head__title{ max-width:900px; font-size:30px; line-height:1.6; }
.sp-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 26px; margin-top:20px; font-size:13px; color:#b9bec3; }
.sp-meta span a,.sp-meta span, .sp-meta > a{ display:flex; align-items:center; gap:7px; color:#b9bec3!important; }
.sp-meta svg{ color:var(--c-secondary); }
.sp-meta a:hover{ color:#fff; }

.sp-cover{ margin:0 0 34px; overflow:hidden; background:#eef0f2; }
.sp-cover img{ display:block; width:100%; height:auto; max-height:none; aspect-ratio:1.9/1; object-fit:cover; }

/* --- متن مقاله --- */
.sp-content{ font-size:16px; line-height:2.2; color:#33383d; overflow-wrap:break-word; }
.sp-content > *:first-child{ margin-top:0; }
.sp-content p{ margin:0 0 24px; }
.sp-content h2, .sp-content h3, .sp-content h4{ margin:42px 0 18px; font-weight:700; line-height:1.7; color:var(--c-text); }
.sp-content h2{ font-size:26px; }
.sp-content h3{ font-size:21px; }
.sp-content h4{ font-size:18px; }
.sp-content a{ color:var(--c-secondary); border-bottom:1px solid currentColor; }
.sp-content a:hover{ color:var(--c-primary); }
.sp-content img{ max-width:100%; height:auto; }
.sp-content figure{ margin:30px 0; }
.sp-content figcaption{ margin-top:10px; font-size:13px; text-align:center; color:#8a8f94; }
.sp-content ul, .sp-content ol{ margin:0 0 26px; padding-right:26px; }
.sp-content li{ margin-bottom:8px; }
.sp-content blockquote{
  margin:32px 0; padding:22px 28px; background:#f5f6f8; border-right:4px solid var(--c-primary);
  font-size:17px; color:#4a4f54;
}
.sp-content blockquote p:last-child{ margin-bottom:0; }
.sp-content table{ width:100%; margin:0 0 28px; border-collapse:collapse; font-size:14px; }
.sp-content th, .sp-content td{ padding:12px 14px; border:1px solid #dfe3e7; text-align:right; }
.sp-content th{ background:#f5f6f8; }
.sp-content iframe, .sp-content video{ max-width:100%; }
.sp-pages{ margin-top:24px; font-size:14px; }

/* --- برچسب‌ها --- */
.sp-tags{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:40px; font-size:13px; color:#8a8f94; }
.sp-tags a{ padding:6px 16px; border:1px solid #dfe3e7; color:#6b7075; transition:border-color .2s, color .2s; }
.sp-tags a:hover{ border-color:var(--c-secondary); color:var(--c-secondary); }

/* --- اشتراک‌گذاری --- */
.sp-share{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px; margin-top:34px; padding:22px 26px; background:#f5f6f8; }
.sp-share__label{ font-size:14px; font-weight:700; }
.sp-share__list{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.sp-share__list a, .sp-share__list button{
  display:flex; align-items:center; justify-content:center; width:42px; height:42px; padding:0;
  border:1px solid #dfe3e7; background:#fff; color:var(--c-text); transition:background .2s, color .2s, border-color .2s;
}
.sp-share__list a:hover, .sp-share__list button:hover{ background:var(--c-secondary); border-color:var(--c-secondary); color:#fff; }
.sp-share__msg{ font-size:12.5px; color:var(--c-primary); }

/* --- مقاله قبل و بعد --- */
.sp-nav{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:34px; }
.sp-nav__item a{
  display:block; height:100%; padding:22px 26px; border:1px solid #e3e6e8; color:var(--c-text);
  transition:border-color .2s, box-shadow .2s;
}
.sp-nav__item a:hover{ border-color:var(--c-secondary); box-shadow:0 4px 18px rgba(0,0,0,.07); }
.sp-nav__item small{ display:flex; align-items:center; gap:6px; margin-bottom:10px; font-size:12px; color:var(--c-secondary); }
.sp-nav__item--next small{ justify-content:flex-end; }
.sp-nav__item--next{ text-align:left; }
.sp-nav__item span{ display:block; font-size:14.5px; line-height:1.9; }

/* --- دیدگاه‌ها --- */
.sp-comments{ margin-top:64px; padding-top:44px; border-top:1px solid #e3e6e8; }
.sp-comments__title{ margin:0 0 28px; font-size:var(--fs-h2); font-weight:700; }
.sp-comments__title span{ color:var(--c-primary); }
.sp-comments__list, .sp-comments__list ol{ margin:0; padding:0; list-style:none; }
.sp-comments__list ol{ margin-top:24px; padding-right:40px; }
.sp-comment{ margin-bottom:26px; padding-bottom:26px; border-bottom:1px solid #eceef0; }
.sp-comment__head{ display:flex; align-items:center; gap:16px; margin-bottom:12px; }
.sp-comment__avatar img{ display:block; width:56px; height:56px; border-radius:50%; object-fit:cover; max-height:none; }
.sp-comment__author{ display:block; font-size:15px; font-weight:700; }
.sp-comment__date{ display:block; font-size:12px; color:#8a8f94; }
.sp-comment__text{ font-size:14.5px; line-height:2; color:#3d4247; }
.sp-comment__text p{ margin:0 0 10px; }
.sp-comment__wait{ padding:8px 14px; background:#fff6e5; font-size:13px; color:#8a6a1f; }
.sp-comment__reply a{ display:inline-block; margin-top:6px; font-size:13px; color:var(--c-secondary); }
.sp-comments__pages{ margin:20px 0 40px; }
.sp-comments__closed{ color:#8a8f94; }

.comment-respond{ margin-top:44px; }
.sp-form__note{ margin:0 0 22px; font-size:13px; color:#8a8f94; }
.comment-form{ display:grid; grid-template-columns:1fr 1fr; gap:0 26px; }
.sp-form__field{ margin:0 0 22px; }
.sp-form__field--wide, .sp-form__note, .sp-form__cookies, .comment-form .form-submit{ grid-column:1 / -1; }
.sp-form__field label{ display:block; margin-bottom:8px; font-size:13px; color:#6b7075; }
.sp-form__field input, .sp-form__field textarea{
  width:100%; padding:0 18px; border:0; background:#eef0f3; font-size:14px; color:var(--c-text); font-family:inherit;
}
.sp-form__field input{ height:54px; }
.sp-form__field textarea{ padding:16px 18px; min-height:170px; resize:vertical; }
.sp-form__field input:focus, .sp-form__field textarea:focus{ outline:2px solid var(--c-secondary); }
.sp-form__cookies{ margin:0 0 22px; font-size:13px; color:#6b7075; }
.comment-form .form-submit{ margin:0; }
.comment-reply-title small a{ margin-inline-start:12px; font-size:13px; color:var(--c-primary); }

@media (max-width:991px){
  .blog-head--post .blog-head__title{ font-size:20px; }
  .sp-content{ font-size:15px; }
}
@media (max-width:575px){
  .sp-nav{ grid-template-columns:1fr; }
  .comment-form{ grid-template-columns:1fr; }
  .sp-comments__list ol{ padding-right:16px; }
}