/* =========================================================
   NOYS - CUSTOM OVERRIDES (نسخه ۳)
   این فایل رو کامل جایگزین assets/css/custom.css قبلی کن
   ========================================================= */

:root {
  --noys-brand-color: 255, 242, 0; /* #FFF200 - رنگ لوگو */

  /* حاشیه‌ی گرادیانتیِ «شاینی» - نسخه‌ی ظریف و استروک‌مانند
     (به‌جای پرشدنِ کامل با رنگ، فقط یک خط نازکِ نیمه‌شفاف با
     طیفِ برند: زرد -> بنفش، که خیلی آروم می‌چرخه) */
  --noys-shine-gradient: linear-gradient(
    120deg,
    rgba(255, 242, 0, 0.85) 0%,
    rgba(255, 214, 107, 0.7) 30%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(139, 108, 242, 0.7) 72%,
    rgba(61, 30, 140, 0.85) 100%
  );

  /* نسخه‌ی پررنگ‌تر و کمتر شفاف - مخصوص المنت‌های کوچیک و مستقلی
     مثل پلیر شناور، که روی زمینه‌ی سفید صفحه، نسخه‌ی نازک و
     نیمه‌شفافِ بالا عملاً دیده نمی‌شه */
  --noys-shine-gradient-bold: linear-gradient(
    120deg,
    #fff200 0%,
    #ffd66b 28%,
    #f3ecff 50%,
    #8b6cf2 74%,
    #3d1e8c 100%
  );
}

/* چرخشِ ملایمِ گرادیانت برای افکت «شاینی» - خیلی آروم و بی‌سروصدا */
@keyframes noysShineMove {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}



/* =========================================================
   کارت پست‌ها در صفحه اصلی (هم پست‌های تصویردار، هم متنی)
   هر پست یک باکس شناور جدا با سایه‌ی رنگ لوگو
   ========================================================= */

.posts-list > .post {
  background: #fff;
  border-radius: 16px;

  padding: 26px 28px;

  box-shadow: 0 1px 1px 0 rgba(var(--noys-brand-color), 0.18);

  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.posts-list > .post:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 45px -10px rgba(var(--noys-brand-color), 0.45);
}

html[data-theme="dark"] .posts-list > .post {
  background: #1c1f24;
}

@media (max-width: 768px) {
  .posts-list > .post {
    padding: 18px 18px;
    border-radius: 12px;
  }
}

/* بندانگشتی پست (post-thumbnail) */
.post-thumbnail:hover {
  box-shadow: 0 16px 30px rgba(var(--noys-brand-color), 0.35) !important;
}

/* تصویر کاور بالای صفحه‌ی هر پست */
.article-page .page-cover-image img:hover {
  box-shadow: 0 20px 45px rgba(var(--noys-brand-color), 0.35) !important;
}

/* باکس اصلی متن پست */
.article-page .wrap-content {
  box-shadow: 0 4px 30px rgba(var(--noys-brand-color), 0.15) !important;
}

/* عکس‌های داخل متن پست هنگام هاور */
.article-page .post-markdown-body img:hover {
  box-shadow: 0 18px 40px rgba(var(--noys-brand-color), 0.35) !important;
}

/* لایت‌باکس بزرگ‌نمایی عکس */
.noys-lightbox-img {
  box-shadow: 0 25px 60px rgba(var(--noys-brand-color), 0.45) !important;
}

/* =========================================================
   لوگوی بالای «ارتباط با من»
   قبلاً هیچ سایه‌ای نداشت، فقط هنگام هاور کمی بالا می‌رفت
   ========================================================= */

.contact .contact-logo img {
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(var(--noys-brand-color), 0.4) !important;
  transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease !important;
}

/* =========================================================
   NOYS - آواتار/لوگوی بالای سایدبار: سایه‌ی دائمی + شناور شدن
   ========================================================= */

.about .cover-author-image {
  box-shadow: 0 10px 26px rgba(20, 22, 30, 0.18);
  transition: box-shadow 0.3s ease, transform 0.3s ease;

  /* شناور شدن ملایم و پیوسته، حتی بدون هاور */
  animation: noysAvatarFloat 3.4s ease-in-out infinite;
}

.about .cover-author-image:hover {
  box-shadow: 0 16px 34px rgba(255, 242, 0, 0.45);
}

.about img {
  object-fit: contain !important;
}

@keyframes noysAvatarFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
  .about .cover-author-image {
    animation: none;
  }
}

/* =========================================================
   NOYS - آیکون‌های شبکه‌ی اجتماعی (ارتباط با من): دکمه‌ی دایره‌ای
   با سایه روی هاور
   ========================================================= */

.contact ul li a {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;

  border-radius: 50%;
  background: #fafafa;
  border: 1px solid #eee;

  color: #444;
  font-size: 15px;

  text-decoration: none;

  transition: all 0.25s ease;
}

.contact ul li a:hover,
.contact ul li a:focus,
.contact ul li a:active {
  text-decoration: none;
}

.contact ul li a:hover {
  background: #fff200;
  border-color: #fff200;
  color: #222;

  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(255, 242, 0, 0.5);
}

.contact ul li.donate a:hover {
  background: #ff5470;
  border-color: #ff5470;
  color: #fff;
  box-shadow: 0 10px 22px rgba(255, 84, 112, 0.45);
}

.donate-btn {
  display: block;
  margin: 14px auto 0;
  padding: 10px 18px;

  width: fit-content;

  border-radius: 999px;
  background: #ff5470;
  color: #fff !important;

  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  text-align: center;

  box-shadow: 0 8px 20px rgba(255, 84, 112, 0.35);
  transition: all 0.25s ease;
}

.donate-btn:hover {
  transform: translateY(-3px);
  /* ترکیبی از رنگ خودش و زرد برند، تا هم شاخص بمونه هم با بقیه هماهنگ باشه */
  box-shadow: 0 12px 28px rgba(255, 168, 61, 0.55);
}

html[data-theme="dark"] .contact ul li a {
  background: #22252b !important;
  border-color: #3a3d43 !important;
  color: #eee !important;
}

/* =========================================================
   یادداشت هشدار «آیدی اختصاصی اپیزود ثبت نشده» - هم توی صفحه‌ی
   پادکست و هم توی خودِ صفحه‌ی هر مقاله استفاده می‌شه
   ========================================================= */

.podcast-player-note {
  margin: 10px 0 0;
  padding: 8px 10px;
  background: #fff8e1;
  border: 1px solid #ffe58a;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.8;
  color: #7a5b00;
  text-align: right;
}

.podcast-player-note code {
  direction: ltr;
  display: inline-block;
  background: rgba(0, 0, 0, 0.06);
  padding: 0 4px;
  border-radius: 4px;
}

/* =========================================================
   ویجت موضوعات (طبقه‌بندی‌ها) در سایدبار
   ========================================================= */

.sidebar-topics {
  width: 100%;
  margin: 20px 0;
  padding: 22px 20px;
  box-sizing: border-box;
  border-radius: 12px;
  background: #fafafa;
  border: 1px solid #eee;

  /* سایه‌ی همیشگی روی کل باکس طبقه‌بندی + کمی زوم موقع هاور،
     دقیقاً مثل بقیه‌ی باکس‌های سایت (کارت پادکست و ...) */
  box-shadow: 0 8px 22px rgba(20, 22, 30, 0.08);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.sidebar-topics:hover {
  transform: scale(1.02);
  /* دقیقاً مثل سایه‌ی لوگو: موقع هاور به رنگ زرد برند تغییر می‌کنه */
  box-shadow: 0 16px 34px rgba(255, 242, 0, 0.45);
}

.sidebar-topics h3 {
  margin: 0 0 14px;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
}

.sidebar-topics .topics-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-topics .topics-list li a {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid #ddd;
  color: #444;
  font-size: 0.82rem;
  text-decoration: none;
  transition: all 0.2s ease;

  /* سایه‌ی هر باکس طبقه‌بندی */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.sidebar-topics .topics-list li a:hover {
  background: #fff200;
  border-color: #fff200;
  color: #222;

  box-shadow: 0 6px 16px rgba(255, 242, 0, 0.45);
}

.sidebar-topics .topics-list li a span {
  color: #999;
  font-size: 0.75rem;
  margin-right: 4px;
}

/* =========================================================
   NOYS - رفع باگ «سایدبار کوتاه شده / تا بالا نمی‌رسه»

   قبلاً sidebar-top و sidebar-bottom دو <aside> کاملاً جدا و
   مستقل با position:fixed بودن، و با یک اسکریپت جاوااسکریپت
   ارتفاعِ sidebar-top اندازه‌گیری می‌شد تا sidebar-bottom دقیقاً
   از همون‌جا شروع بشه. این روش شکننده بود: اگه فونت وب یک لحظه
   دیرتر لود می‌شد یا محتوا تغییر می‌کرد، ارتفاع اندازه‌گیری‌شده
   قدیمی می‌موند و بین دو بخش یا فاصله‌ی خالی می‌افتاد یا روی هم
   می‌رفتن (یعنی همون حسی که «تا بالا نیست» می‌داد).

   راه‌حل: هر دو بخش رو داخل یک کادر واحد (.sidebar-fixed) با
   position:fixed و height:100vh می‌ذاریم و با flexbox می‌چینیم.
   بخش بالا (بیو) اندازه‌ی طبیعی خودش رو می‌گیره، بخش پایین
   (موضوعات + تماس با ما) باقی‌مونده‌ی فضا رو پر می‌کنه و اگه
   محتواش زیاد شد، خودش داخل خودش اسکرول می‌خوره. دیگه هیچ
   جاوااسکریپتی برای این کار لازم نیست.
   ========================================================= */

.sidebar-fixed {
  position: fixed;
  top: 0;
  right: 0;
  left: auto;
  bottom: 0;

  width: 260px;
  height: 100vh;

  display: flex;
  flex-direction: column;

  background-color: #ffffff;
  border-left: 1px solid #eef2f8;

  z-index: 100;
}

.sidebar-fixed .sidebar {
  position: static !important;
  width: 100% !important;
  border-left: none !important;
}

.sidebar-fixed .sidebar-top {
  flex: 0 0 auto;
  overflow: visible;
}

.sidebar-fixed .sidebar-bottom {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
  overflow-y: auto;

  /* موضوعات بالا بمونه، ارتباط با من/شبکه‌های اجتماعی به سمت
     پایینِ ستون هدایت بشه، نه بلافاصله زیر لیست موضوعات */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media only screen and (max-width: 768px) {
  /* توی موبایل سایدبار اصلاً fixed نیست، یک ستون معمولی می‌شه */
  .sidebar-fixed {
    position: relative !important;
    height: auto !important;
    width: 100% !important;
    border-left: none !important;
  }

  .sidebar-fixed .sidebar-bottom {
    overflow-y: visible !important;
  }

  /* ترتیب نمایش: اول مطلب‌ها، بعد بیو/موضوعات/ارتباط با من.
     .wrapper پدرِ مشترکِ .sidebar-fixed و .content-box هست؛
     با flex + order جای نمایش‌شون رو (بدون تغییر ترتیب در HTML)
     عوض می‌کنیم. */
  .wrapper {
    display: flex !important;
    flex-direction: column !important;
  }

  .content-box {
    order: 1 !important;
  }

  .sidebar-fixed {
    order: 2 !important;
  }

  /* نقشه (که حالا یک بلاک مستقله، نه بخشی از content-box) باید
     زیرِ سایدبار (موضوعات + ارتباط با من) بیاد، نه بالای اون‌ها */
  .noys-world-section {
    order: 3 !important;
  }
}

/* =========================================================
   NOYS - نقشه به‌عنوان بلاک مستقل (خارج از content-box)
   قبلاً نقشه بخشی از content-box بود؛ حالا برای این‌که بشه توی
   موبایل زیرِ سایدبار قرارش داد، به یک هم‌سطحِ content-box و
   sidebar-fixed تبدیل شده. برای این‌که توی دسکتاپ دقیقاً هم‌تراز
   با مطلب‌ها بمونه (نه زیر سایدبار قایم بشه)، همون تورفتگیِ
   content-box رو به‌اش می‌دیم.
   ========================================================= */

.noys-world-section {
  width: calc(100% - 260px) !important;
  margin-right: 260px !important;
  margin-left: 0 !important;
  padding-right: 40px !important;
  padding-left: 40px !important;
  box-sizing: border-box;
}

@media only screen and (max-width: 768px) {
  .noys-world-section {
    width: 100% !important;
    margin-right: 0 !important;
    padding-right: 18px !important;
    padding-left: 18px !important;
  }
}

/* =========================================================
   NOYS - صفحه‌ی پادکست: خلوت، فقط باکس‌های اپیزود
   بیو/موضوعات/ارتباط با من این‌جا نمایش داده نمی‌شن، صفحه هم
   تمام‌عرض می‌شه (هم دسکتاپ، هم موبایل/تبلت)
   ========================================================= */

.page-podcast .sidebar-fixed {
  display: none !important;
}

.page-podcast .content-box {
  width: 100% !important;
  margin-right: 0 !important;
}


/* =========================================================
   NOYS - نوار شناور بالای صفحه (مجله / پادکست / جستجو / تم)
   بیضی‌شکل، شناور، با سایه؛ همیشه بالای صفحه و وسط‌چین می‌مونه،
   چه موقع اسکرول و چه موقع بالای صفحه (مثل channelbpodcast.com)
   ========================================================= */

body {
  /* فاصله‌ی امن بالای صفحه، تا محتوا زیر نوار شناور قایم نشه */
  padding-top: 78px;
}

.noys-floatnav {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;

  width: max-content;
  max-width: calc(100vw - 24px);
}

/* دسکتاپ: سایدبار ۲۶۰px سمت راست ثابته، پس مرکز واقعیِ محتوا
   نصفِ عرض صفحه نیست، ۱۳۰px (نصفِ عرض سایدبار) به چپ کشیده شده.
   بدون این تنظیم، نوار شناور نسبت به پست‌ها وسط‌چین به نظر نمی‌رسید. */
@media (min-width: 769px) {
  .noys-floatnav {
    left: calc(50% - 130px);
  }
}

.noys-floatnav-inner {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 10px 12px;

  background: #ffffff;
  border-radius: 999px;

  box-shadow: 0 10px 35px rgba(20, 22, 30, 0.16);
  border: 1px solid rgba(0, 0, 0, 0.04);

  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.noys-floatnav-inner:hover {
  box-shadow: 0 14px 42px rgba(20, 22, 30, 0.22);
}

.noys-nav-search-btn,
.noys-theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;
  flex-shrink: 0;

  border-radius: 50%;
  border: 1px solid #eee;
  background: #fafafa;
  cursor: pointer;

  font-size: 16px;
  color: #444;

  transition: all 0.2s ease;
}

.noys-nav-search-btn:hover,
.noys-theme-toggle:hover {
  background: #fff200;
  border-color: #fff200;
  color: #222;
  box-shadow: 0 6px 16px rgba(255, 242, 0, 0.45);
}

.noys-reader-btn {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;
  flex-shrink: 0;

  border-radius: 50%;
  border: 1px solid #eee;
  background: #fafafa;
  cursor: pointer;

  font-size: 13px;
  font-weight: 700;
  color: #444;

  transition: all 0.2s ease;
}

.noys-reader-btn:hover {
  background: #fff200;
  border-color: #fff200;
  color: #222;
  box-shadow: 0 6px 16px rgba(255, 242, 0, 0.45);
}

.noys-read-mode-btn.is-active {
  background: #fff200;
  border-color: #fff200;
  color: #222;
}

@media (max-width: 768px) {
  .noys-reader-btn {
    width: 32px;
    height: 32px;
    font-size: 11px;
  }
}

html[data-theme="dark"] .noys-reader-btn {
  background: #22252b !important;
  border-color: #3a3d43 !important;
  color: #eee !important;
}

/* =========================================================
   NOYS - اندازه فونت + حالت ریدینگ (سایت‌وایاد، هوم‌پیج + پست‌ها)
   ========================================================= */

.post-markdown-body,
.posts-list .post-content p {
  font-size: calc(16px * var(--noys-scale, 1));
}

.post-markdown-body p,
.post-markdown-body li,
.post-markdown-body blockquote {
  font-size: inherit;
}

.posts-list .post-title a {
  font-size: calc(1em * var(--noys-scale, 1));
}

body.noys-reading-mode .post-markdown-body {
  max-width: 640px;
  margin: 0 auto;
  line-height: 2;
  background: #faf6ec;
  padding: 24px;
  border-radius: 8px;
}

body.noys-reading-mode .posts-list .post-content p {
  line-height: 2;
}

html[data-theme="dark"] body.noys-reading-mode .post-markdown-body {
  background: #24211a;
}

.noys-nav-links {
  display: flex;
  gap: 6px;
}

.noys-nav-links a {
  padding: 10px 20px;
  border-radius: 999px;

  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  color: #444;
  white-space: nowrap;

  transition: all 0.2s ease;
}

.noys-nav-links a:hover {
  background: #f5f5f5;
}

.noys-nav-links a.is-active {
  background: #fff200;
  color: #222;
  box-shadow: 0 6px 16px rgba(255, 242, 0, 0.4);
}

/* پیش‌فرض (حالت روشن): فقط آیکون خورشید دیده می‌شه */
.noys-icon-dark {
  display: none;
}

/* =========================================================
   پنل جستجو: زیر همون باکس شناور باز می‌شه
   ========================================================= */

.noys-search-panel {
  margin-top: 10px;
  padding: 14px;

  background: #ffffff;
  border-radius: 22px;

  box-shadow: 0 10px 35px rgba(20, 22, 30, 0.16);
  border: 1px solid rgba(0, 0, 0, 0.04);

  width: min(420px, calc(100vw - 24px));
}

.noys-search-panel[hidden] {
  display: none;
}

.noys-search-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;

  padding: 8px 14px;

  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 999px;
}

.noys-search-input-wrap i {
  color: #999;
  font-size: 13px;
}

#noysSearchInput {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 14px;
  color: #222;
  text-align: right;
  direction: rtl;
}

.noys-search-results {
  max-height: 320px;
  overflow-y: auto;
  margin-top: 10px;
}

.noys-search-result {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 8px;
  border-radius: 12px;

  text-decoration: none;
  color: inherit;

  transition: background 0.2s ease;
}

.noys-search-result:hover {
  background: #fafafa;
}

.noys-search-result img {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.noys-search-result-text {
  overflow: hidden;
}

.noys-search-result-title {
  font-size: 13.5px;
  font-weight: 600;
  color: #222;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.noys-search-result-meta {
  font-size: 11.5px;
  color: #999;
  margin-top: 2px;
}

.noys-search-empty {
  padding: 14px 8px;
  text-align: center;
  font-size: 13px;
  color: #999;
}

@media (max-width: 768px) {
  body {
    padding-top: 70px;
  }

  .noys-floatnav-inner {
    padding: 6px 8px;
  }

  .noys-nav-links a {
    padding: 7px 12px;
    font-size: 13px;
  }

  .noys-nav-search-btn,
  .noys-theme-toggle {
    width: 32px;
    height: 32px;
  }
}


/* =========================================================
   NOYS - حالت تاریک (Dark Mode)
   با data-theme="dark" روی <html> فعال می‌شه.
   ========================================================= */

html[data-theme="dark"] body {
  background: #14161a !important;
  color: #dcdcdc !important;
}

html[data-theme="dark"] .noys-floatnav-inner,
html[data-theme="dark"] .noys-search-panel {
  background: #1c1f24 !important;
  border-color: #2a2d33 !important;
}

html[data-theme="dark"] .noys-nav-links a {
  color: #ccc !important;
}

html[data-theme="dark"] .noys-nav-links a:hover {
  background: #2a2d33 !important;
}

html[data-theme="dark"] .noys-nav-links a.is-active {
  color: #222 !important;
}

html[data-theme="dark"] .noys-nav-search-btn,
html[data-theme="dark"] .noys-theme-toggle {
  background: #22252b !important;
  border-color: #3a3d43 !important;
  color: #eee !important;
}

html[data-theme="dark"] .noys-search-input-wrap {
  background: #22252b !important;
  border-color: #3a3d43 !important;
}

html[data-theme="dark"] #noysSearchInput {
  color: #eee !important;
}

html[data-theme="dark"] .noys-search-result:hover {
  background: #22252b !important;
}

html[data-theme="dark"] .noys-search-result-title {
  color: #eee !important;
}

/* پیش‌فرض حالت روشن: خورشید دیده می‌شه، ماه مخفیه.
   توی حالت تاریک برعکس می‌شه */
html[data-theme="dark"] .noys-icon-light {
  display: none;
}

html[data-theme="dark"] .noys-icon-dark {
  display: inline-block;
}

html[data-theme="dark"] .sidebar-fixed {
  background-color: #1c1f24 !important;
  border-color: #2a2d33 !important;
}

html[data-theme="dark"] body .sidebar {
  background-color: #1c1f24 !important;
  border-color: #2a2d33 !important;
}

html[data-theme="dark"] .author-name,
html[data-theme="dark"] .sidebar-top p,
html[data-theme="dark"] .contact-title {
  color: #eee !important;
}

html[data-theme="dark"] .about p {
  background: #22252b !important;
  border-color: #33363c !important;
}

html[data-theme="dark"] .sidebar-topics,
html[data-theme="dark"] .sidebar-podcast {
  background: #22252b !important;
  border-color: #33363c !important;
}

html[data-theme="dark"] .sidebar-topics h3 {
  color: #eee !important;
}

html[data-theme="dark"] .sidebar-topics .topics-list li a {
  background: #2a2d33 !important;
  border-color: #3a3d43 !important;
  color: #ddd !important;
}

html[data-theme="dark"] .sidebar-topics .topics-list li a:hover {
  background: #fff200 !important;
  color: #222 !important;
}

html[data-theme="dark"] .content-box > .post,
html[data-theme="dark"] .article-page .wrap-content {
  background: #1c1f24 !important;
  color: #dcdcdc !important;
}

html[data-theme="dark"] .post-title a,
html[data-theme="dark"] .page-title {
  color: #f2f2f2 !important;
}

html[data-theme="dark"] .post-content p,
html[data-theme="dark"] .post-markdown-body,
html[data-theme="dark"] .post-markdown-body p,
html[data-theme="dark"] .post-markdown-body li {
  color: #cfcfcf !important;
}

html[data-theme="dark"] .post-date,
html[data-theme="dark"] .post-words,
html[data-theme="dark"] .page-date {
  color: #9a9a9a !important;
}

html[data-theme="dark"] .podcast-card {
  background: #1c1f24 !important;
  border-color: #2a2d33 !important;
  color: #ddd !important;
}

html[data-theme="dark"] .podcast-play-btn {
  background: #2a2d33 !important;
  border-color: #3a3d43 !important;
  color: #ddd !important;
}

html[data-theme="dark"] .blog-tags h1,
html[data-theme="dark"] .blog-tags h2 {
  color: #eee !important;
}

html[data-theme="dark"] .tag-list a {
  color: #dcdcdc !important;
}

html[data-theme="dark"] .noys-decor {
  color: #cfd3da !important;
}

/* =========================================================
   افکت ظاهر شدن هنگام اسکرول (Reveal on scroll)
   ========================================================= */

.noys-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.noys-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .noys-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   افکت پارالاکس ملایم روی عکس کاور پست (اسکرول‌محور)
   ========================================================= */

.page-cover-image {
  overflow: hidden;
}

[data-noys-parallax] {
  will-change: transform;
  transform: translateY(0) scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
  [data-noys-parallax] {
    transform: none !important;
  }
}

/* =========================================================
   NOYS - دکمه‌های صفحه‌بندی (صفحه قبلی/بعدی)
   قبلاً این‌ها فقط <a> خام داخل <ul><li> بودن و هیچ استایلی
   نداشتن (لینکِ آبیِ پیش‌فرض مرورگر) — این‌جا به شکل دو دکمه‌ی
   قرص‌مانند (هم‌شکل با nav-links بالای سایت) با شماره‌ی صفحه
   در وسط بازطراحی شدن.
   ========================================================= */

.noys-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  flex-wrap: wrap;
}

.noys-pagination-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 12px 22px;
  border-radius: 999px;

  background: #fff;
  border: 1px solid #eee;
  box-shadow: 0 6px 16px rgba(20, 22, 30, 0.06);

  font-size: 14.5px;
  font-weight: 600;
  color: #333;
  text-decoration: none;

  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.noys-pagination-btn i {
  font-size: 13px;
  color: #999;
  transition: color 0.2s ease, transform 0.2s ease;
}

.noys-pagination-btn:hover {
  background: #fff200;
  border-color: #fff200;
  color: #222;

  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(255, 242, 0, 0.4);
}

.noys-pagination-btn:hover i {
  color: #222;
}

.noys-pagination-prev:hover i {
  transform: translateX(3px);
}

.noys-pagination-next:hover i {
  transform: translateX(-3px);
}

/* اگه فقط یکی از دو دکمه وجود داشته باشه (اول یا آخر صفحه‌بندی)،
   بقیه‌ی فضا رو با margin-inline-start/end خودکار جبران می‌کنیم
   تا شماره‌ی صفحه همیشه واقعاً وسط بمونه */
.noys-pagination-prev:only-child {
  margin-inline-end: auto;
}

.noys-pagination-next:only-child {
  margin-inline-start: auto;
}

.noys-pagination-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 10px 18px;
  border-radius: 999px;

  background: #fafafa;
  border: 1px dashed #ddd;

  font-size: 13px;
  color: #888;
  white-space: nowrap;
}

.noys-pagination-count-num {
  font-weight: 700;
  color: #444;
}

.noys-pagination-count-sep {
  color: #bbb;
}

html[data-theme="dark"] .noys-pagination-btn {
  background: #1c1f24;
  border-color: #2a2d33;
  color: #ddd;
}

html[data-theme="dark"] .noys-pagination-count {
  background: #1c1f24;
  border-color: #3a3d43;
  color: #999;
}

html[data-theme="dark"] .noys-pagination-count-num {
  color: #eee;
}

@media (max-width: 480px) {
  .noys-pagination {
    justify-content: center;
  }

  .noys-pagination-btn {
    flex: 1 1 auto;
    justify-content: center;
    padding: 12px 14px;
  }

  .noys-pagination-count {
    order: 3;
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* =========================================================
   NOYS - جلوگیری از اسکرول افقی ناخواسته (مخصوصاً صفحه اصلی)
   بعضی بلاک‌های تزئینی (نقشه‌ی جهان، تولتیپ‌های شناور، پخش‌کننده‌ی
   شناور پادکست) با position:absolute/fixed کار می‌کنن؛ اگه به هر
   دلیلی (مثلاً هاور نزدیک لبه، یا صفحه‌ی خیلی باریک) حتی چند
   پیکسل از عرض واقعی صفحه بیرون بزنن، کل صفحه یک اسکرول‌بار
   افقی اضافه می‌گیره که نه لازمه و نه قشنگه. این‌جا صراحتاً
   قفلش می‌کنیم؛ چیزی از نظر عملکردی از دست نمی‌ره چون هیچ‌کدوم
   از این بلاک‌ها نیازی به اسکرول افقی ندارن.
   ========================================================= */

html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

.noys-world-map-wrap {
  overflow: hidden;
}

/* =========================================================
   NOYS - حاشیه‌ی گرادیانتیِ استروک‌مانند (نسخه‌ی درست‌شده)
   نسخه‌ی قبلی از ::before با z-index منفی استفاده می‌کرد که یه
   باگ داشت: توی چیدمانِ این تم، پس‌زمینه‌ی گرادیانتی به‌جای اینکه
   *پشتِ* پس‌زمینه‌ی خودِ باکس بشینه، *روش* می‌نشست و کل باکس رو
   با رنگ پر می‌کرد (و برای عکس‌های بدون محتوای دیگه مثل کاور
   مجله، کلاً جلوی عکس رو می‌گرفت).

   روش درست: یک border واقعی و شفاف روی خودِ باکس + دو لایه
   پس‌زمینه (یکی رنگِ اصلیِ باکس، یکی گرادیانت) که با background-clip
   جدا می‌شن؛ رنگِ اصلی فقط داخلِ باکس (padding-box) دیده می‌شه و
   گرادیانت فقط توی نوارِ باریکِ خودِ border (border-box). این‌جوری
   محتوای داخلِ باکس (عکس، متن) همیشه دست‌نخورده می‌مونه و فقط یک
   خط نازکِ گرادیانتی دورش اضافه می‌شه.
   ========================================================= */

/* ---- کارت پست‌ها در صفحه‌ی اصلی (مجله) ---- */

.posts-list > .post {
  border: 1.5px solid transparent;
  background-image: linear-gradient(#fff, #fff), var(--noys-shine-gradient);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-size: auto, 250% 250%;
  animation: noysShineMove 12s ease infinite;
}

html[data-theme="dark"] .posts-list > .post {
  background-image: linear-gradient(#1c1f24, #1c1f24), var(--noys-shine-gradient);
}

/* ---- باکس‌های اپیزود پادکست (صفحه‌ی /podcast/) ---- */

.podcast-card {
  border: 1.5px solid transparent !important;
  background-image: linear-gradient(#fafafa, #fafafa), var(--noys-shine-gradient) !important;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-size: auto, 250% 250% !important;
  animation: noysShineMove 12s ease infinite;
}

html[data-theme="dark"] .podcast-card {
  background-image: linear-gradient(#1c1f24, #1c1f24), var(--noys-shine-gradient) !important;
}

/* کاورِ گرد داخل هر باکسِ اپیزود - چون برای بزرگ‌نمایی موقع هاور
   نیاز به overflow:visible داره، این‌جا به‌جای border از یک
   "قابِ" نازک (padding + پس‌زمینه‌ی گرادیانتی) دورِ خودِ عکس
   استفاده می‌کنیم؛ خودِ عکس real کامل content-flow هست پس همیشه
   بالای این قاب دیده می‌شه. */

.podcast-cover-wrap {
  padding: 3px;
  border-radius: 12px;
  background: var(--noys-shine-gradient);
  background-size: 250% 250%;
  animation: noysShineMove 12s ease infinite;
}

.podcast-cover {
  border-radius: 9px !important;
}

/* کاورِ صفحه‌ی اختصاصیِ هر اپیزود (وقتی پست جداگانه داره) */

.podcast-episode-cover-wrap {
  padding: 3px;
  border-radius: 14px;
  background: var(--noys-shine-gradient);
  background-size: 250% 250%;
  animation: noysShineMove 12s ease infinite;
}

.podcast-episode-cover {
  border-radius: 11px !important;
}

/* =========================================================
   NOYS - تصویر کاورِ هر مطلبِ مجله (بندانگشتیِ صفحه‌ی اصلی)
   این‌جا خودِ .post-thumbnail یک <a> خالیه که فقط background-image
   (عکسِ کاور) داره و هیچ محتوای دیگه‌ای توش نیست؛ به همین دلیل
   هر پس‌زمینه‌ای که مستقیم روی خودش بذاریم، جلوی عکس رو می‌گیره.
   راه‌حل: یک قابِ نازک (span) دورش که توی index.html اضافه شده،
   خودِ عکس داخلش، دست‌نخورده، کامل دیده می‌شه.
   ========================================================= */

.post-thumbnail-frame {
  display: block;
  flex: 0 0 300px;
  width: 300px;
  aspect-ratio: 16 / 9;
  height: auto;

  padding: 3px;
  border-radius: 10px;
  box-sizing: border-box;

  background: var(--noys-shine-gradient);
  background-size: 250% 250%;
  animation: noysShineMove 12s ease infinite;
}

.post-thumbnail {
  width: 100% !important;
  height: 100% !important;
  flex: initial !important;
  aspect-ratio: auto !important;
  margin-bottom: 0 !important;
  border-radius: 7px !important;
}

@media (max-width: 768px) {
  .post-thumbnail-frame {
    width: 100%;
    flex-basis: auto;
    aspect-ratio: 16 / 9;
    height: auto;
    margin-bottom: 0;
  }
}

@media (max-width: 480px) {
  .post-thumbnail-frame {
    border-radius: 9px;
  }

  .post-thumbnail {
    border-radius: 6px !important;
  }
}

/* =========================================================
   NOYS - عکسِ بالای صفحه‌ی هر پست: گوشه‌های گردتر + قابِ گرادیانتی
   overflow:hidden لازمه (برای افکتِ پارالاکسِ عکس)، پس فریم
   (figure) با پدینگ + پس‌زمینه‌ی گرادیانتی یک "قاب" می‌سازه و
   خودِ عکس (که یک محتوای واقعیه، نه پس‌زمینه) همیشه روش دیده می‌شه.
   ========================================================= */

.article-page .page-cover-image figure {
  padding: 4px;
  border-radius: 22px;
  overflow: hidden;

  background: var(--noys-shine-gradient);
  background-size: 250% 250%;
  animation: noysShineMove 12s ease infinite;
}

.article-page .page-cover-image img {
  border-radius: 18px;
}

@media (max-width: 768px) {
  .article-page .page-cover-image figure {
    padding: 3px;
    border-radius: 18px;
  }

  .article-page .page-cover-image img {
    border-radius: 14px;
  }
}

/* =========================================================
   NOYS - حاشیه‌ی گرادیانتی دورِ پخش‌کننده‌های پادکست
   ========================================================= */

.podcast-container {
  border: 1.5px solid transparent;
  background-image: linear-gradient(#fdfdfd, #fdfdfd), var(--noys-shine-gradient);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-size: auto, 250% 250%;
  animation: noysShineMove 12s ease infinite;
}

.noys-floating-player {
  border: 2.5px solid transparent !important;
  background-image: linear-gradient(#fff, #fff), var(--noys-shine-gradient-bold) !important;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-size: auto, 250% 250% !important;
  animation: noysShineMove 12s ease infinite;
}

/* ---- احترام به تنظیمِ کاهشِ انیمیشن در سیستم‌عامل کاربر ---- */

@media (prefers-reduced-motion: reduce) {
  .posts-list > .post,
  .podcast-card,
  .podcast-cover-wrap,
  .podcast-episode-cover-wrap,
  .post-thumbnail-frame,
  .article-page .page-cover-image figure,
  .podcast-container,
  .noys-floating-player {
    animation: none !important;
  }
}