/* ==========================================================================
   KH Premium Academy — WordPress Content & Comments
   --------------------------------------------------------------------------
   استایل بلوک‌های ویرایشگر وردپرس (گوتنبرگ)، کلاس‌های تراز کلاسیک،
   و بخش دیدگاه‌ها.

   چرا فایل جدا؟
   این استایل‌ها فقط جایی لازم‌اند که محتوای نوشته چاپ می‌شود (مقاله،
   ویدیو، پادکست، محصول). بارگذاری‌شان در صفحه اصلی یا آرشیو، وزن
   بی‌دلیل است.

   ساختار:
     01. کلاس‌های تراز
     02. تصویر و کپشن
     03. گالری
     04. نقل‌قول
     05. لیست، جدول، جداکننده
     06. دکمه و گروه
     07. ستون‌ها و بلوک‌های چیدمانی
     08. امبد
     09. جعبه هشدار سفارشی
     10. دیدگاه‌ها
   ========================================================================== */

/* ==========================================================================
   01. کلاس‌های تراز
   ========================================================================== */

.kh-prose .alignleft {
  float: inline-start;
  margin-inline-end: var(--kh-s-6);
  margin-block: var(--kh-s-2) var(--kh-s-4);
  max-inline-size: 50%;
}
.kh-prose .alignright {
  float: inline-end;
  margin-inline-start: var(--kh-s-6);
  margin-block: var(--kh-s-2) var(--kh-s-4);
  max-inline-size: 50%;
}
.kh-prose .aligncenter {
  display: block;
  margin-inline: auto;
  text-align: center;
}

/* عرض بیشتر از ستون متن — تا لبه قاب مقاله */
.kh-prose .alignwide {
  inline-size: calc(100% + var(--kh-s-8));
  max-inline-size: none;
  margin-inline: calc(var(--kh-s-8) / -2);
}
.kh-prose .alignfull {
  inline-size: calc(100% + var(--kh-s-8) * 2);
  max-inline-size: none;
  margin-inline: calc(var(--kh-s-8) * -1);
  border-radius: 0;
}

/* در موبایل، تراز شناور خوانایی را خراب می‌کند */
@media (max-width: 600px) {
  .kh-prose .alignleft,
  .kh-prose .alignright {
    float: none;
    margin-inline: 0;
    max-inline-size: 100%;
  }
  .kh-prose .alignwide,
  .kh-prose .alignfull {
    inline-size: 100%;
    margin-inline: 0;
  }
}

/* ==========================================================================
   02. تصویر و کپشن
   ========================================================================== */

.kh-prose .wp-block-image,
.kh-prose figure.wp-caption {
  margin-block: var(--kh-s-7);
}
.kh-prose .wp-block-image img,
.kh-prose .wp-caption img {
  border-radius: var(--kh-r-card);
  display: block;
}
.kh-prose .wp-block-image.is-style-rounded img { border-radius: 50%; }

.kh-prose .wp-element-caption,
.kh-prose .wp-block-image figcaption,
.kh-prose .wp-caption-text {
  margin-block-start: var(--kh-s-3);
  font-size: var(--kh-fs-micro);
  line-height: 1.9;
  color: var(--kh-muted);
  text-align: center;
}

/* تصویر با حاشیه ظریف تا روی پس‌زمینه روشن گم نشود */
.kh-prose img { box-shadow: var(--kh-shadow-xs); }
.kh-prose .wp-block-image.is-style-plain img { box-shadow: none; }

/* --- بلوک معرفی صفحه «درباره من» --- */
/*
 * عمداً گرید است، نه float.
 *
 * نسخه اول تصویر را شناور می‌کرد و متن دورش می‌پیچید. تداخل نداشت، ولی
 * در متن فارسیِ راست‌چین لبهٔ ناهموارِ هر خط جای متفاوتی می‌افتاد و بلوک
 * به‌هم‌ریخته دیده می‌شد. دو ستون قطعی، هم خواناتر است هم قابل پیش‌بینی.
 */
.kh-prose .kh-about-intro {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--kh-s-6);
  align-items: start;
  margin-block-end: var(--kh-s-7);
}
/* اولین تیتر داخل بلوک نباید فاصله بالای اضافه بگیرد؛ باید با لبه بالای
   تصویر یکی باشد. */
.kh-prose .kh-about-intro > div > :first-child { margin-block-start: 0; }

.kh-prose .kh-about-portrait {
  margin: 0;
  inline-size: 100%;
}
.kh-prose .kh-about-portrait img {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--kh-r-card);
  display: block;
}
.kh-prose .kh-about-portrait figcaption {
  margin-block-start: var(--kh-s-3);
  font-size: var(--kh-fs-micro);
  color: var(--kh-muted);
  text-align: center;
}
/* در موبایل دو ستون یعنی هر دو باریک و بی‌فایده — روی هم می‌چینیم */
@media (max-width: 600px) {
  .kh-prose .kh-about-intro {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--kh-s-5);
  }
  .kh-prose .kh-about-portrait {
    inline-size: 170px;
    margin-inline: auto;
  }
}

/* ==========================================================================
   03. گالری
   ========================================================================== */

.kh-prose .wp-block-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: var(--kh-s-3);
  margin-block: var(--kh-s-7);
  list-style: none;
  padding: 0;
}
.kh-prose .wp-block-gallery .wp-block-image { margin: 0; }
.kh-prose .wp-block-gallery img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  border-radius: var(--kh-r-md);
}
.kh-prose .wp-block-gallery.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kh-prose .wp-block-gallery.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 600px) {
  .kh-prose .wp-block-gallery,
  .kh-prose .wp-block-gallery.columns-2,
  .kh-prose .wp-block-gallery.columns-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   04. نقل‌قول
   ========================================================================== */

.kh-prose .wp-block-quote,
.kh-prose .wp-block-pullquote {
  margin-block: var(--kh-s-7);
  padding: var(--kh-s-6);
  border: 0;
  border-inline-start: 3px solid var(--kh-gold);
  border-radius: 18px;
  background: var(--kh-gold-soft);
  color: #4A4332;
}
.kh-prose .wp-block-quote p { color: inherit; font-size: var(--kh-fs-md); }
.kh-prose .wp-block-quote cite,
.kh-prose .wp-block-pullquote cite {
  display: block;
  margin-block-start: var(--kh-s-3);
  font-size: var(--kh-fs-micro);
  font-style: normal;
  color: #8A6421;
}
.kh-prose .wp-block-quote.is-style-large p { font-size: var(--kh-fs-lg); line-height: 1.9; }

/* ==========================================================================
   05. لیست، جدول، جداکننده
   ========================================================================== */

.kh-prose .wp-block-list { /* از قواعد ul/ol پایه ارث می‌برد */ }

.kh-prose ol {
  list-style: none;
  padding-inline-start: 0;
  counter-reset: kh-ol;
}
.kh-prose ol > li {
  position: relative;
  padding-inline-start: var(--kh-s-8);
}
.kh-prose ol > li::before {
  counter-increment: kh-ol;
  content: counter(kh-ol);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .15em;
  display: grid;
  place-items: center;
  inline-size: 24px;
  block-size: 24px;
  border-radius: 50%;
  background: var(--kh-gold-soft);
  color: #8A6421;
  font-size: var(--kh-fs-micro);
  font-weight: var(--kh-fw-bold);
}

.kh-prose .wp-block-separator,
.kh-prose hr {
  inline-size: 100%;
  max-inline-size: 120px;
  margin: var(--kh-s-8) auto;
  border: 0;
  border-block-start: 2px solid var(--kh-line);
}
.kh-prose .wp-block-separator.is-style-wide { max-inline-size: 100%; }
.kh-prose .wp-block-separator.is-style-dots {
  max-inline-size: none;
  border: 0;
  text-align: center;
  line-height: 1;
  color: var(--kh-gold);
}
.kh-prose .wp-block-separator.is-style-dots::before {
  content: "···";
  font-size: 26px;
  letter-spacing: 8px;
}

.kh-prose .wp-block-table { margin-block: var(--kh-s-7); }
.kh-prose .wp-block-table table { min-inline-size: 480px; }
.kh-prose .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: #FBFBF9; }
.kh-prose .wp-block-table figcaption {
  margin-block-start: var(--kh-s-3);
  font-size: var(--kh-fs-micro);
  color: var(--kh-muted);
  text-align: center;
}

/* ==========================================================================
   06. دکمه و گروه
   ========================================================================== */

.kh-prose .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kh-s-3);
  margin-block: var(--kh-s-6);
}
.kh-prose .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 48px;
  padding-inline: var(--kh-s-5);
  border: 1px solid transparent;
  border-radius: var(--kh-r-btn);
  background: var(--kh-navy);
  color: #fff;
  font-size: var(--kh-fs-sm);
  font-weight: var(--kh-fw-bold);
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(11, 23, 41, .14);
  transition: transform var(--kh-t-base);
}
.kh-prose .wp-block-button__link:hover { transform: translateY(-2px); color: #fff; }
.kh-prose .is-style-outline .wp-block-button__link {
  background: transparent;
  border-color: var(--kh-line);
  color: var(--kh-navy);
  box-shadow: none;
}

.kh-prose .wp-block-group.has-background {
  padding: var(--kh-s-6);
  border-radius: var(--kh-r-card);
}

/* ==========================================================================
   07. ستون‌ها و بلوک‌های چیدمانی
   ========================================================================== */

.kh-prose .wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kh-s-6);
  margin-block: var(--kh-s-7);
}
.kh-prose .wp-block-column { flex: 1 1 0%; min-inline-size: 0; }

@media (max-width: 768px) {
  .kh-prose .wp-block-columns { flex-direction: column; gap: var(--kh-s-5); }
}

.kh-prose .wp-block-media-text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--kh-s-6);
  align-items: center;
  margin-block: var(--kh-s-7);
}
.kh-prose .wp-block-media-text img { border-radius: var(--kh-r-card); }

@media (max-width: 768px) {
  .kh-prose .wp-block-media-text { grid-template-columns: 1fr; }
}

.kh-prose .wp-block-cover {
  border-radius: var(--kh-r-card);
  overflow: hidden;
  margin-block: var(--kh-s-7);
}
.kh-prose .wp-block-cover .wp-block-cover__inner-container { color: #fff; }

/* ==========================================================================
   08. امبد
   ========================================================================== */

.kh-prose .wp-block-embed { margin-block: var(--kh-s-7); }
.kh-prose .wp-block-embed__wrapper { position: relative; }
.kh-prose .wp-block-embed.is-type-video .wp-block-embed__wrapper {
  aspect-ratio: 16 / 9;
  border-radius: var(--kh-r-card);
  overflow: hidden;
}
.kh-prose .wp-block-embed.is-type-video iframe {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
}
.kh-prose .wp-block-embed figcaption {
  margin-block-start: var(--kh-s-3);
  font-size: var(--kh-fs-micro);
  color: var(--kh-muted);
  text-align: center;
}

/* بلوک صوتی و ویدیوی وردپرس */
.kh-prose .wp-block-audio audio { inline-size: 100%; }
.kh-prose .wp-block-video video { inline-size: 100%; border-radius: var(--kh-r-card); }

/* ==========================================================================
   09. جعبه هشدار سفارشی
   کلاس‌هایی که می‌توانید در ویرایشگر به یک پاراگراف بدهید.
   ========================================================================== */

.kh-prose .kh-note,
.kh-prose .kh-tip,
.kh-prose .kh-warning {
  position: relative;
  margin-block: var(--kh-s-6);
  padding: var(--kh-s-5) var(--kh-s-6);
  padding-inline-start: var(--kh-s-8);
  border-radius: var(--kh-r-md);
  font-size: var(--kh-fs-sm);
}
.kh-prose .kh-note::before,
.kh-prose .kh-tip::before,
.kh-prose .kh-warning::before {
  position: absolute;
  inset-inline-start: var(--kh-s-4);
  inset-block-start: var(--kh-s-5);
  font-size: 17px;
  line-height: 1.4;
}
.kh-prose .kh-note {
  background: #EEF4FB;
  border-inline-start: 3px solid #4B7CFF;
  color: #2A4A80;
}
.kh-prose .kh-note::before { content: "ℹ"; }

.kh-prose .kh-tip {
  background: #E7F7F0;
  border-inline-start: 3px solid var(--kh-success);
  color: #17654A;
}
.kh-prose .kh-tip::before { content: "✓"; }

.kh-prose .kh-warning {
  background: #FDF3E3;
  border-inline-start: 3px solid var(--kh-gold);
  color: #8A6421;
}
.kh-prose .kh-warning::before { content: "!"; font-weight: var(--kh-fw-black); }

/* ==========================================================================
   10. دیدگاه‌ها
   ========================================================================== */

.kh-comments {
  margin-block-start: var(--kh-s-8);
  padding: var(--kh-s-8);
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-panel);
  background: var(--kh-paper);
}
.kh-comments__title {
  margin-block-end: var(--kh-s-6);
  font-size: var(--kh-fs-h3);
  color: var(--kh-navy);
}

.kh-comments .comment-list,
.kh-comments ol.comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.kh-comments .comment-list .children {
  list-style: none;
  margin-block-start: var(--kh-s-5);
  padding-inline-start: var(--kh-s-7);
  border-inline-start: 2px solid var(--kh-line);
}

.kh-comments .comment-body {
  padding: var(--kh-s-5);
  margin-block-end: var(--kh-s-4);
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-card);
  background: var(--kh-field-bg);
}
/* دیدگاه نویسنده سایت متمایز شود */
.kh-comments .bypostauthor > .comment-body {
  border-color: #F0E2C6;
  background: linear-gradient(135deg, var(--kh-gold-soft), #FFF);
}

.kh-comments .comment-meta {
  display: flex;
  align-items: center;
  gap: var(--kh-s-3);
  margin-block-end: var(--kh-s-3);
}
.kh-comments .comment-author img,
.kh-comments .avatar {
  inline-size: 44px;
  block-size: 44px;
  border-radius: 50%;
  flex: none;
}
.kh-comments .comment-author .fn {
  font-size: var(--kh-fs-sm);
  font-weight: var(--kh-fw-bold);
  font-style: normal;
  color: var(--kh-navy);
}
.kh-comments .comment-author .says { display: none; }
.kh-comments .comment-metadata {
  font-size: var(--kh-fs-micro);
  color: var(--kh-muted);
}
.kh-comments .comment-metadata a { color: var(--kh-muted); }

.kh-comments .comment-content { font-size: var(--kh-fs-sm); color: var(--kh-body-text); }
.kh-comments .comment-content p + p { margin-block-start: var(--kh-s-3); }

.kh-comments .reply { margin-block-start: var(--kh-s-3); }
.kh-comments .comment-reply-link {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-pill);
  background: var(--kh-paper);
  font-size: var(--kh-fs-micro);
  font-weight: var(--kh-fw-semi);
  color: var(--kh-navy);
}
.kh-comments .comment-reply-link:hover { border-color: var(--kh-gold); color: var(--kh-gold); }

.kh-comments .comment-awaiting-moderation {
  display: inline-block;
  margin-block-start: var(--kh-s-2);
  padding: 4px 11px;
  border-radius: var(--kh-r-pill);
  background: var(--kh-gold-soft);
  font-size: var(--kh-fs-nano);
  color: #8A6421;
}

/* --- فرم دیدگاه --- */
.kh-comments .comment-respond {
  margin-block-start: var(--kh-s-7);
  padding-block-start: var(--kh-s-7);
  border-block-start: 1px solid var(--kh-line);
}
.kh-comments .comment-reply-title {
  margin-block-end: var(--kh-s-5);
  font-size: var(--kh-fs-md);
  color: var(--kh-navy);
}
.kh-comments .comment-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--kh-s-4);
}
.kh-comments .comment-form > p { margin: 0; }
.kh-comments .comment-form-comment,
.kh-comments .form-submit,
.kh-comments .comment-notes,
.kh-comments .comment-form-cookies-consent { grid-column: 1 / -1; }

.kh-comments .comment-form label {
  display: block;
  margin-block-end: 7px;
  font-size: var(--kh-fs-micro);
  font-weight: var(--kh-fw-semi);
  color: var(--kh-muted);
}
.kh-comments .comment-form input[type="text"],
.kh-comments .comment-form input[type="email"],
.kh-comments .comment-form input[type="url"],
.kh-comments .comment-form textarea {
  inline-size: 100%;
  padding: 14px var(--kh-s-4);
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-btn);
  background: var(--kh-field-bg);
  font-family: var(--kh-font);
  font-size: var(--kh-fs-sm);
  color: var(--kh-ink);
  outline: 0;
  transition: border-color var(--kh-t-fast), box-shadow var(--kh-t-fast);
}
.kh-comments .comment-form textarea { min-block-size: 140px; resize: vertical; }
.kh-comments .comment-form input:focus,
.kh-comments .comment-form textarea:focus {
  border-color: var(--kh-gold);
  background: var(--kh-paper);
  box-shadow: var(--kh-focus);
}

.kh-comments .comment-notes,
.kh-comments .comment-form-cookies-consent label {
  font-size: var(--kh-fs-micro);
  color: var(--kh-muted);
  font-weight: var(--kh-fw-body);
}
.kh-comments .comment-form-cookies-consent {
  display: flex;
  align-items: center;
  gap: var(--kh-s-2);
}
.kh-comments .comment-form-cookies-consent input { inline-size: 18px; block-size: 18px; accent-color: var(--kh-gold); }
.kh-comments .comment-form-cookies-consent label { margin: 0; }

.kh-comments .form-submit input[type="submit"] {
  min-block-size: 48px;
  padding-inline: var(--kh-s-6);
  border: 0;
  border-radius: var(--kh-r-btn);
  background: var(--kh-navy);
  color: #fff;
  font-family: var(--kh-font);
  font-size: var(--kh-fs-sm);
  font-weight: var(--kh-fw-bold);
  cursor: pointer;
  transition: transform var(--kh-t-base);
}
.kh-comments .form-submit input[type="submit"]:hover { transform: translateY(-2px); }

.kh-comments .comment-pagination,
.kh-comments .navigation { margin-block-start: var(--kh-s-6); }

.kh-comments .no-comments,
.kh-comments .nocomments {
  padding: var(--kh-s-6);
  border: 1px dashed var(--kh-line);
  border-radius: var(--kh-r-md);
  color: var(--kh-muted);
  text-align: center;
  font-size: var(--kh-fs-sm);
}

@media (max-width: 768px) {
  .kh-comments { padding: var(--kh-s-5); border-radius: var(--kh-r-card); }
  .kh-comments .comment-form { grid-template-columns: 1fr; }
  .kh-comments .comment-list .children {
    padding-inline-start: var(--kh-s-4);
    margin-block-start: var(--kh-s-4);
  }
  .kh-comments .comment-body { padding: var(--kh-s-4); }
  /* جلوگیری از زوم iOS */
  .kh-comments .comment-form input,
  .kh-comments .comment-form textarea { font-size: 16px; }
}

/* ==========================================================================
   لنگر تیترها
   --------------------------------------------------------------------------
   تا وقتی روی تیتر شناور نشده‌اید دیده نمی‌شود، ولی با فوکوس کیبورد
   ظاهر می‌شود — وگرنه کاربر کیبورد یک لینکِ نامرئی را تب می‌کند.
   ========================================================================== */

.kh-prose h2,
.kh-prose h3 { position: relative; }

.kh-anchor {
  margin-inline-start: var(--kh-s-2);
  font-size: .62em;
  font-weight: var(--kh-fw-body);
  color: var(--kh-gold);
  text-decoration: none;
  opacity: 0;
  transition: opacity var(--kh-t-fast);
}
.kh-prose h2:hover .kh-anchor,
.kh-prose h3:hover .kh-anchor,
.kh-anchor:focus-visible { opacity: 1; }

@media (hover: none) {
  /* روی لمسی «شناور شدن» وجود ندارد؛ یا همیشه باشد یا هرگز. */
  .kh-anchor { opacity: .45; }
}

/* ==========================================================================
   کادرهای نکته
   --------------------------------------------------------------------------
   محتوای آموزشی به سه چیز نیاز دارد که پاراگراف ساده نمی‌دهد:
   «این را یادت باشد»، «اینجا خراب می‌شود»، «یک راه سریع‌تر».

   با شورتکد استفاده می‌شوند:
     [kh_note]متن[/kh_note]  ·  [kh_warn]…[/kh_warn]  ·  [kh_tip]…[/kh_tip]

   رنگ تنها نشانه نیست — هر کدام آیکن و برچسب متنی هم دارند، چون حدود
   ۸٪ مردان درجه‌ای از نابینایی رنگ دارند و کادری که فقط با رنگ قرمز
   «هشدار» بودنش را می‌گوید، برای آن‌ها هیچ می‌گوید.
   ========================================================================== */

.kh-callout {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--kh-s-3);
  margin-block: var(--kh-s-6);
  padding: var(--kh-s-5);
  border-radius: var(--kh-r-md);
  border: 1px solid var(--kh-line);
  border-inline-start: 3px solid var(--kh-muted);
  background: var(--kh-bg-soft);
  font-size: var(--kh-fs-sm);
  line-height: var(--kh-lh-body);
}
.kh-callout__icon { color: var(--kh-muted); padding-block-start: 3px; }
.kh-callout__icon svg { inline-size: 20px; block-size: 20px; }
.kh-callout__label {
  display: block;
  margin-block-end: 4px;
  font-weight: var(--kh-fw-bold);
  color: var(--kh-navy);
}
.kh-callout p:last-child { margin-block-end: 0; }

.kh-callout--note {
  border-inline-start-color: #3B82F6;
  background: rgba(59, 130, 246, .06);
}
.kh-callout--note .kh-callout__icon { color: #3B82F6; }

.kh-callout--warn {
  border-inline-start-color: #DC6803;
  background: rgba(220, 104, 3, .06);
}
.kh-callout--warn .kh-callout__icon { color: #DC6803; }

.kh-callout--tip {
  border-inline-start-color: var(--kh-success);
  background: rgba(47, 181, 126, .07);
}
.kh-callout--tip .kh-callout__icon { color: var(--kh-success); }

@media (max-width: 600px) {
  .kh-callout { padding: var(--kh-s-4); gap: var(--kh-s-2); }
}
/* ==========================================================================
   بازخورد مفید بودن
   ========================================================================== */

.kh-helpful {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--kh-s-4);
  margin-block: var(--kh-s-9) var(--kh-s-7);
  padding: var(--kh-s-6);
  border-radius: var(--kh-r-panel);
  border: 1px solid var(--kh-line);
  background: var(--kh-bg-soft);
}
.kh-helpful__ask { display: grid; gap: 3px; min-inline-size: 0; }
.kh-helpful__ask b { font-size: var(--kh-fs-base); color: var(--kh-navy); }
.kh-helpful__ask span { font-size: var(--kh-fs-micro); color: var(--kh-muted); }
.kh-helpful__actions { display: flex; gap: var(--kh-s-3); flex: none; }
.kh-helpful__actions svg { inline-size: 15px; block-size: 15px; }

.kh-helpful__why { inline-size: 100%; display: grid; gap: var(--kh-s-3); }
.kh-helpful__why label { font-size: var(--kh-fs-sm); font-weight: var(--kh-fw-bold); color: var(--kh-navy); }
.kh-helpful__why textarea {
  inline-size: 100%;
  padding: var(--kh-s-3) var(--kh-s-4);
  border-radius: var(--kh-r-md);
  border: 1px solid var(--kh-line);
  background: var(--kh-paper);
  color: var(--kh-ink);
  font: inherit;
  /* زیر ۱۶ پیکسل، سافاری iOS هنگام تپ کل صفحه را زوم می‌کند */
  font-size: 16px;
  resize: vertical;
}
.kh-helpful__why .kh-btn { justify-self: start; }
.kh-helpful__thanks {
  margin: 0;
  font-size: var(--kh-fs-sm);
  font-weight: var(--kh-fw-bold);
  color: var(--kh-success);
}

@media (max-width: 600px) {
  .kh-helpful { padding: var(--kh-s-5); }
  .kh-helpful__actions { inline-size: 100%; }
  .kh-helpful__actions .kh-btn { flex: 1; justify-content: center; }
}

/* ==========================================================================
   پیمایش قبلی / بعدی
   ========================================================================== */

.kh-post-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--kh-s-4);
  margin-block: var(--kh-s-7);
}
.kh-post-nav__gap { display: block; }

.kh-post-nav__link {
  display: grid;
  gap: var(--kh-s-2);
  padding: var(--kh-s-5);
  border-radius: var(--kh-r-md);
  border: 1px solid var(--kh-line);
  background: var(--kh-paper);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--kh-t-fast), transform var(--kh-t-fast);
}
.kh-post-nav__link:hover { border-color: var(--kh-gold); transform: translateY(-2px); }
/* «بعدی» به انتهای خط چسبیده و متنش هم آنجا تراز می‌شود */
.kh-post-nav__link--next { text-align: end; }
.kh-post-nav__link--next .kh-post-nav__dir { justify-content: flex-end; }

.kh-post-nav__dir {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--kh-fs-micro);
  font-weight: var(--kh-fw-bold);
  color: var(--kh-muted);
}
.kh-post-nav__dir svg { inline-size: 14px; block-size: 14px; }
.kh-post-nav__link b {
  font-size: var(--kh-fs-sm);
  line-height: var(--kh-lh-snug);
  color: var(--kh-navy);
  /* عنوان بلند کارت را از قرینه‌اش بلندتر نکند */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 600px) {
  .kh-post-nav { grid-template-columns: minmax(0, 1fr); }
  .kh-post-nav__gap { display: none; }
  .kh-post-nav__link--next { text-align: start; }
  .kh-post-nav__link--next .kh-post-nav__dir { justify-content: flex-start; }
}

/* ==========================================================================
   جعبه سری
   ========================================================================== */

.kh-series {
  margin-block: var(--kh-s-7);
  border-radius: var(--kh-r-panel);
  border: 1px solid var(--kh-line);
  background: var(--kh-bg-soft);
  overflow: hidden;
}
.kh-series summary {
  display: flex;
  align-items: center;
  gap: var(--kh-s-4);
  padding: var(--kh-s-5);
  cursor: pointer;
  list-style: none;
}
.kh-series summary::-webkit-details-marker { display: none; }

.kh-series__icon {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  flex: none;
  border-radius: var(--kh-r-md);
  background: var(--kh-gold-soft);
  color: var(--kh-gold);
}
.kh-series__icon svg { inline-size: 21px; block-size: 21px; }

.kh-series__head { display: grid; gap: 2px; min-inline-size: 0; flex: 1; }
.kh-series__label { font-size: var(--kh-fs-nano); color: var(--kh-muted); }
.kh-series__head b { font-size: var(--kh-fs-base); color: var(--kh-navy); }
.kh-series__count { font-size: var(--kh-fs-micro); color: var(--kh-gold); font-weight: var(--kh-fw-bold); }

/* پیکان باز/بسته — با CSS خالص از حالت details خوانده می‌شود */
.kh-series__toggle {
  inline-size: 10px;
  block-size: 10px;
  flex: none;
  border-inline-end: 2px solid var(--kh-muted);
  border-block-end: 2px solid var(--kh-muted);
  transform: rotate(45deg);
  transition: transform var(--kh-t-fast);
}
.kh-series details[open] .kh-series__toggle { transform: rotate(-135deg); }

.kh-series__desc {
  margin: 0;
  padding: 0 var(--kh-s-5) var(--kh-s-4);
  font-size: var(--kh-fs-sm);
  color: var(--kh-body-text);
}

.kh-series__list {
  margin: 0;
  padding: 0 var(--kh-s-5) var(--kh-s-5);
  list-style: none;
  display: grid;
  gap: 2px;
}
.kh-series__list li {
  display: flex;
  align-items: center;
  gap: var(--kh-s-3);
  padding: var(--kh-s-3);
  border-radius: var(--kh-r-sm);
  font-size: var(--kh-fs-sm);
}
.kh-series__list li:hover { background: var(--kh-paper); }
.kh-series__list a { color: var(--kh-body-text); text-decoration: none; }
.kh-series__list a:hover { color: var(--kh-gold); }

.kh-series__num {
  display: grid;
  place-items: center;
  inline-size: 24px;
  block-size: 24px;
  flex: none;
  border-radius: 50%;
  background: var(--kh-tag-bg);
  color: var(--kh-tag-text);
  font-size: var(--kh-fs-nano);
  font-weight: var(--kh-fw-bold);
}
.kh-series__list .is-current { background: var(--kh-paper); font-weight: var(--kh-fw-bold); }
.kh-series__list .is-current span:not(.kh-series__num) { color: var(--kh-navy); }
.kh-series__list .is-current .kh-series__num { background: var(--kh-gold); color: #fff; }

@media (max-width: 600px) {
  .kh-series summary { padding: var(--kh-s-4); gap: var(--kh-s-3); }
  .kh-series__list { padding-inline: var(--kh-s-4); }
}