/*
 * قالب عمومی پایگاه اطلاع‌رسانی امام جمعه تاکستان.
 *
 * بدون Tailwind و بدون مرحله‌ی build نوشته شده تا استقرار روی هاست
 * اشتراکی به Node و npm نیاز نداشته باشد.
 */

:root {
  --paper:      #E4EBE6;
  --surface:    #FFFFFF;
  --surface-2:  #E9EEEA;
  --ink:        #17211D;
  --ink-soft:   #4A5751;
  --ink-faint:  #78847E;
  --green:      #1D5040;
  --green-deep: #143A2E;
  --brass:      #9A7838;
  --brass-soft: #C6A76B;
  --brass-deep: #866526;
  --brass-tint: #F1E9D8;
  --rule:       #D8E0DA;
  --rule-soft:  #E6EBE7;

  /*
   * متن روی نوارهای تیره، در چهار پله. اگر این‌ها ثابت بمانند، با عوض
   * شدن تم نوار منو آبی می‌شود ولی متن لینک‌هایش سبز می‌ماند.
   */
  --on-dark:       #EAF2ED;
  --on-dark-dim:   #CFE0D7;
  --on-dark-soft:  #A9C7B9;
  --on-dark-faint: #9FBFB1;

  /* سایه‌روشن‌های کم‌رنگ: زمینه‌ی نشان‌ها، پیام موفقیت، نشانگر ماوس */
  --tint-soft: #E8F2EC;
  --tint-line: #BFD9CC;

  /* سبزِ روشن، برای ردیفِ انتخاب‌شده در ستون کناری */
  --green-tint: #D3EADD;
  --radius:     3px;
  /* گوشه‌ی کارت‌ها گردتر از بقیه‌ی سایت است. */
  --radius-card: 9px;

  /*
   * قلم متن و قلم تیتر از پنل انتخاب می‌شوند و قالب مقدارشان را داخل
   * <style> صفحه می‌گذارد. این‌ها فقط پشتیبان‌اند، برای وقتی که این فایل
   * جدا از سایت باز شود.
   */
  --font-body: "Sahel", "Vazirmatn", Tahoma, "Segoe UI", sans-serif;
  --font-display: "Amiri", "Sahel", Tahoma, serif;
}

* { box-sizing: border-box; }

/*
 * قاعده‌ی پیش‌فرض مرورگر برای [hidden] را هر display دیگری باطل می‌کند؛
 * بدون این، فیلدهای مخفی‌شده با جاوااسکریپت همچنان دیده می‌شدند.
 */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  direction: rtl;
  text-align: right;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  /* ۱.۹۵ به وبلاگ می‌آمد نه به خبرگزاری؛ ۱.۸ هنوز راحت خوانده می‌شود. */
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--green); text-decoration: none; }

/*
 * تیترها فاصله‌ی خطِ متن را نداشته باشند. line-height: 1.95 برای خواندن
 * پاراگراف خوب است ولی عنوان را اسفنجی و بی‌جان می‌کند.
 */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.45;
  letter-spacing: -.005em;
  text-wrap: balance;
}
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* ---------- سربرگ ---------- */

/* ---------- سربرگ ---------- */

.masthead-band {
  background: var(--green);
  color: var(--on-dark);
}

/*
 * سه ناحیه: تصویر، عنوان، ابزار. عنوان با flex: 1 وسط می‌ماند و دو سو
 * پایه‌ی برابر می‌گیرند، وگرنه عنوان با تغییر عرض ابزارها تکان می‌خورد.
 */
.masthead-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  /* پدینگ کناری همان ۲۰ پیکسلِ .wrap است و باید صریح تکرار شود. */
  padding: 14px 20px;
}

.masthead-side {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 1 270px;
  min-width: 0;
}

.masthead-figures { justify-content: flex-start; }
.masthead-tools { justify-content: flex-end; }

/*
 * تصویر سربرگ باید در نگاه اول خوانده شود. ۵۴ پیکسل آن‌قدر کوچک بود که
 * چهره تشخیص داده نمی‌شد؛ حالا ارتفاع نوار را خودش تعیین می‌کند.
 */
.masthead-figures img {
  height: 104px;
  width: auto;
  max-width: 215px;
  object-fit: contain;
  border-radius: 6px;
}

.brand {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
  min-width: 0;
}

.brand a { color: #FFFFFF; text-decoration: none; }

.brand-title {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.4vw, 30px);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: -.01em;
}

.brand-sub {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--on-dark-soft);
}

/* ---------- جست‌وجو و آیکون‌ها ---------- */

/*
 * جست‌وجو در نوار منو نشسته نه در نوار بالا: آنجا کنار عنوان و تصویر
 * گم می‌شد، اینجا انتهای نوار جای خالیِ ثابتی دارد و همیشه دیده می‌شود.
 */
.navbar-search {
  display: flex;
  align-items: center;
  flex: 0 1 230px;
  min-width: 0;
  margin-inline-start: auto;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .14);
  overflow: hidden;
}

.navbar-search input {
  width: 100%;
  min-width: 0;
  padding: 6px 14px;
  border: 0;
  background: transparent;
  color: #FFFFFF;
  font: inherit;
  font-size: 13px;
}

.navbar-search input::placeholder { color: var(--on-dark-faint); }
.navbar-search input:focus { outline: none; }

.navbar-search:focus-within {
  background: rgba(255, 255, 255, .16);
  border-color: var(--brass-soft);
}

.navbar-search button {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 30px;
  border: 0;
  background: transparent;
  color: var(--on-dark-dim);
  cursor: pointer;
}

.navbar-search button svg { width: 16px; height: 16px; }
.navbar-search button:hover { color: #FFFFFF; }

.masthead-icons {
  display: flex;
  align-items: center;
  gap: 6px;
}

.masthead-icons a {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: var(--on-dark-dim);
  font-size: 13px;
  overflow: hidden;
}

.masthead-icons a:hover { background: rgba(255, 255, 255, .2); color: #FFFFFF; }
.masthead-icons img { width: 20px; height: 20px; object-fit: contain; }
.masthead-icons svg { width: 16px; height: 16px; }

/* ---------- نوار منو ---------- */

.navbar {
  background: var(--green-deep);
  border-top: 1px solid rgba(255, 255, 255, .07);
}

.navbar-inner {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  min-width: 0;
}

.nav a {
  position: relative;
  padding: 11px 16px;
  font-size: 14px;
  color: var(--on-dark-dim);
  white-space: nowrap;
}

/* جداکننده‌ی مویی میان آیتم‌ها، مثل نوار منوی سایت‌های خبری */
.nav a + a::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, .14);
}

.nav a:hover { color: #FFFFFF; text-decoration: none; background: rgba(255, 255, 255, .05); }

.nav a[aria-current="page"] {
  color: #FFFFFF;
  font-weight: 600;
  box-shadow: inset 0 -3px 0 var(--brass);
}

/* ---------- منوی «بیشتر» ---------- */

/*
 * صفحه‌های ثابت از پنل ساخته می‌شوند و تعدادشان دست ما نیست؛ اگر یکی‌یکی
 * در نوار بنشینند، با ساخته شدن هر صفحه نوار دو خطی می‌شود. اینجا با
 * details زده شده نه با دکمه‌ی جاوااسکریپتی، تا بدون جاوااسکریپت هم باز
 * شود و با صفحه‌کلید هم کار کند.
 */
.nav-more { position: relative; }

.nav-more > summary {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 11px 16px;
  font-size: 14px;
  color: var(--on-dark-dim);
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}

/* مثلث پیش‌فرضِ details در دو مرورگر دو شکل دارد؛ خودمان فلش می‌گذاریم. */
.nav-more > summary::-webkit-details-marker { display: none; }
.nav-more > summary::marker { content: ""; }

.nav-more > summary svg {
  width: 10px;
  height: 7px;
  transition: transform .15s ease;
}

.nav-more[open] > summary svg { transform: rotate(180deg); }

.nav-more > summary:hover { color: #FFFFFF; background: rgba(255, 255, 255, .05); }

/* جداکننده‌ی مویی، مثل بقیه‌ی آیتم‌های نوار */
.nav a + .nav-more > summary::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, .14);
}

/* صفحه‌ی بازشده داخل این منوست؛ خودِ «بیشتر» هم باید نشان‌دار باشد. */
.nav-more.is-current > summary {
  color: #FFFFFF;
  font-weight: 600;
  box-shadow: inset 0 -3px 0 var(--brass);
}

/*
 * پنهان کردنِ محتوای details بسته را خودمان می‌گوییم و به مرورگر
 * نمی‌سپاریم: با position: absolute، پانل از آن قاعده‌ی پیش‌فرض بیرون
 * می‌افتد و همیشه باز می‌ماند.
 */
.nav-more:not([open]) > .nav-more-panel { display: none; }

.nav-more-panel {
  position: absolute;
  z-index: 20;
  top: 100%;
  inset-inline-start: 0;
  min-width: 190px;
  padding: 5px 0;
  background: var(--green-deep);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 8px 22px rgba(10, 20, 16, .3);
}

.nav-more-panel a {
  display: block;
  padding: 9px 16px;
  font-size: 14px;
  color: var(--on-dark-dim);
  white-space: nowrap;
}

.nav-more-panel a:hover { color: #FFFFFF; background: rgba(255, 255, 255, .07); text-decoration: none; }

.nav-more-panel a[aria-current="page"] {
  color: #FFFFFF;
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--brass);
}

/* ---------- دکمه‌ی منوی موبایل ---------- */

.nav-toggle {
  display: none;
  flex: none;
  width: 40px;
  height: 36px;
  padding: 9px 8px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: #FFFFFF;
}

.nav-toggle span + span { margin-top: 4px; }

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(10, 20, 16, .5);
}

/* ---------- سربرگ روی صفحه‌ی باریک ---------- */

@media (max-width: 860px) {
  .masthead-inner {
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 20px;
  }

  /*
   * عنوان وسط می‌ماند. پدینگِ هم‌اندازه‌ی دکمه‌ی منو در سوی مقابل،
   * جای اشغال‌شده‌ی دکمه را جبران می‌کند وگرنه عنوان کمی کج می‌نشست.
   */
  .brand {
    order: 2;
    flex: 1 1 auto;
    align-items: center;
    text-align: center;
    padding-inline-start: 40px;
  }

  /*
   * آیکون‌های شبکه‌های اجتماعی روی گوشی برداشته می‌شوند: نوار بالا جای
   * تنگی است و همان آیکون‌ها در پاورقی هم هستند.
   */
  .masthead-tools { display: none; }

  /* دکمه‌ی منو، گوشه‌ی بالا سمت چپ. */
  .nav-toggle {
    order: 3;
    display: block;
    align-self: flex-start;
  }

  /* تصویر سربرگ روی گوشی نمی‌آید؛ نوار باریک است و عنوان مهم‌تر. */
  .masthead-figures { display: none; }

  /*
   * فقط لینک‌ها به کشوی کناری می‌روند؛ خود نوار می‌ماند تا جست‌وجو روی
   * گوشی هم دیده شود. جست‌وجو مهم‌ترین چیزِ این نوار است و پنهان کردنش
   * پشت دکمه‌ی منو، همان مشکلی می‌شد که می‌خواستیم حلش کنیم.
   */
  .navbar-inner { padding: 8px 20px; }
  .navbar-search { flex: 1 1 auto; margin-inline-start: 0; }

  .nav {
    position: fixed;
    z-index: 40;
    inset-block: 0;
    inset-inline-end: 0;
    width: min(78vw, 300px);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 18px 0;
    background: var(--green-deep);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .22s ease;
  }

  html[dir="rtl"] .nav { transform: translateX(-100%); }

  .nav a {
    padding: 13px 22px;
    font-size: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
  }

  .nav a + a::before { content: none; }

  .nav a[aria-current="page"] {
    box-shadow: inset 3px 0 0 var(--brass);
    background: rgba(255, 255, 255, .05);
  }

  /*
   * روی گوشی «بیشتر» اصلا نمایش داده نمی‌شود و همه‌ی لینک‌ها زیر هم
   * می‌آیند. دلیلِ وجودش تنگیِ عرض نوار افقی است و کشوی کناری این تنگی را
   * ندارد؛ آنجا فقط یک لمسِ اضافه می‌شد برای رسیدن به لینکی که جا داشت.
   */
  .nav-more > summary { display: none; }

  /*
   * باز نگه داشتنِ پانل در کشو، برای وقتی که جاوااسکریپت نباشد.
   *
   * دو قاعده لازم است چون مرورگرها دو جور محتوای details بسته را پنهان
   * می‌کنند: قدیمی‌ها با display، تازه‌ها با content-visibility روی
   * ::details-content. با جاوااسکریپت، details اصلا باز می‌شود و هیچ‌کدام
   * از این دو لازم نمی‌آید.
   */
  .nav-more:not([open]) > .nav-more-panel { display: block; }
  .nav-more::details-content { content-visibility: visible; }

  .nav-more > .nav-more-panel {
    display: block;
    position: static;
    min-width: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .nav-more-panel a {
    padding: 13px 22px;
    font-size: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
  }

  .nav-more-panel a[aria-current="page"] { background: rgba(255, 255, 255, .05); }

  body.nav-open .nav { transform: translateX(0); }
  body.nav-open { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .nav { transition: none; }
}

/* ---------- چیدمان اصلی ---------- */

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  column-gap: 30px;
  row-gap: 16px;
  /*
   * پدینگ کناری همان ۲۰ پیکسلِ .wrap است و باید صریح تکرار شود: خاصیت
   * padding یک‌جا نوشته می‌شود، پس «۲۶ و صفر» آن را باطل می‌کرد و بدنه‌ی
   * سایت ۲۰ پیکسل با سربرگ ناهم‌تراز می‌ماند — روی گوشی هم به لبه‌ی
   * صفحه می‌چسبید.
   */
  padding: 26px 20px 54px;
  align-items: start;
}

/*
 * عنوان صفحه تمام‌عرضِ هر دو ستون است، نه داخل ستون وسط. اگر داخل ستون
 * باشد، ستون کناری از بالای عنوان شروع می‌شود و دو باکس هم‌تراز نمی‌شوند.
 */
.page-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
}

.page-head h1,
.page-head h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink);
  white-space: nowrap;
}

/*
 * خط ممتد کنار عنوان صفحه، سبز و ۲ پیکسلی — یکسان در همه‌ی صفحه‌ها.
 *
 * پیش‌تر فقط صفحه‌هایی که کلاس نوع داشتند این خط را می‌گرفتند و بقیه —
 * ارتباط با دفتر، زندگی‌نامه، جست‌وجو — یک خط خاکستریِ مویی داشتند.
 * حالا که رنگ همه‌ی بخش‌ها سبز است، پیش‌فرض همان است و --accent فقط
 * وقتی معنا دارد که روزی بخشی رنگ دیگری بگیرد.
 */
.page-head::after {
  content: "";
  flex: 1;
  height: 2px;
  background: var(--accent, var(--green));
}

.main { min-width: 0; }

/* نخستین عنوانِ ستون، چیزی بالای سرش ندارد که از آن فاصله بگیرد. */
.main > .section-head:first-child { margin-top: 0; }

/*
 * عنوان بخش، در یک بلوک سبزِ توپر — همان زبانِ کارت‌ها.
 *
 * پیش‌تر فقط یک خط متنِ تیره روی زمینه بود و میان انبوه کارت‌ها گم
 * می‌شد. حالا خودش یک بلوک است، پس مرزِ بخش‌ها در نگاه اول دیده می‌شود.
 */
.section-head {
  display: flex;
  align-items: stretch;
  /* فاصله از بخش پیش از خود، وگرنه عنوان به باکس بالایی می‌چسبد. */
  margin: 30px 0 14px;
  background: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: 0 2px 6px rgba(10, 20, 16, .1);
}

.section-head h2 {
  margin: 0;
  padding: 9px 20px;
  background: var(--green);
  border-radius: var(--radius-card) 0 0 var(--radius-card);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.9;
  color: #FFFFFF;
  white-space: nowrap;
}

/* لینک «همه‌ی…» در سوی دیگرِ همان نوار. */
.section-head .more {
  margin-inline-start: auto;
  align-self: center;
  padding: 0 18px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--green);
  white-space: nowrap;
}

/* روی صفحه‌ی باریک، عنوان بلند نباید نوار را بشکند. */
@media (max-width: 520px) {
  .section-head h2 { padding: 8px 14px; font-size: 16px; white-space: normal; }
  .section-head .more { padding: 0 12px; font-size: 12.5px; }
}

/* ---------- خبر اول ---------- */

/*
 * خطبه‌ی هفته: تصویر یک سو، پنل سبزِ توپر سوی دیگر — همان زبانِ کارت‌ها.
 *
 * پیش‌تر کادری سفید با گوشه‌ی ۳ پیکسلی و بی‌سایه بود، یعنی تنها بلوکی که
 * از طرح قبلی جا مانده بود و به بقیه‌ی صفحه نمی‌خورد.
 */
.lead {
  grid-column: 1 / -1;
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-bottom: 8px;
  background: var(--green);
  box-shadow: 0 2px 6px rgba(10, 20, 16, .14);
}

/*
 * تصویر و متن هم‌عرض. پیش‌تر تصویر ۱.۱۵ برابر بود و ستون متن آن‌قدر تنگ
 * می‌شد که تاریخ و دکمه‌ها در یک خط جا نمی‌شدند.
 */
.lead.has-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}

.lead-media { display: block; min-width: 0; }

.lead-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
}

.lead-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  padding: 28px 30px;
  min-width: 0;
  color: #FFFFFF;
}

/* برچسب بخش در یک سو، مناسبت در سوی دیگر. */
.lead-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 14px;
  width: 100%;
}

.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--brass-soft);
  margin: 0;
}

.lead-top .tag { background: rgba(255, 255, 255, .16); color: #FFFFFF; }

/*
 * ۴۰ پیکسل در ستونی ۵۰۰ پیکسلی سه خط می‌شکست و یک گُوه‌ی بلند می‌ساخت؛
 * ۲۸ همان‌قدر تیترِ اول است ولی دو خط می‌ماند.
 */
.lead-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(21px, 2.3vw, 28px);
  font-weight: 800;
  line-height: 1.65;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.lead-title a { color: #FFFFFF; }
.lead-title a:hover { color: #FFFFFF; text-decoration: underline; }

.lead-body .meta-row { margin: 0; color: rgba(255, 255, 255, .8); }
.lead-body .tag { background: rgba(255, 255, 255, .16); color: #FFFFFF; }

/*
 * گزیده‌ی خطبه: چیزی که بلوک را از تزئین به محتوا تبدیل می‌کند. دفتر
 * این بندها را در پنل وارد می‌کند و تا امروز فقط در صفحه‌ی خود خطبه
 * دیده می‌شدند.
 */
.lead-points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lead-points li {
  position: relative;
  padding-inline-start: 18px;
  font-size: 14.5px;
  line-height: 1.95;
  color: rgba(255, 255, 255, .9);
}

.lead-points li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brass-soft);
}

.lead-excerpt {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.95;
  color: rgba(255, 255, 255, .88);
}

.lead-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* جمع‌تر از دکمه‌های معمولی، چون کنار تاریخ در یک خط می‌نشینند. */
.lead-actions .btn {
  padding: 8px 16px;
  font-size: 13.5px;
}

.lead-actions .btn { background: var(--brass); }
.lead-actions .btn:hover { background: var(--brass-deep); }

/* دکمه‌ی دوم کم‌وزن‌تر است تا «خواندن متن کامل» کار اصلی بماند. */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .38);
  color: #FFFFFF;
}

.btn-ghost:hover { background: rgba(255, 255, 255, .12); }
.btn-ghost svg { width: 13px; height: 13px; }

.lead-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 18px;
  width: 100%;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-size: 12.5px;
  color: rgba(255, 255, 255, .8);
}

.meta-row { margin: 0; }

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 13.5px;
  color: var(--ink-faint);
  margin-bottom: 14px;
  align-items: center;
}

.excerpt { margin: 0; color: var(--ink-soft); font-weight: 300; }

/* ---------- فهرست مطالب ---------- */

.post-list { display: flex; flex-direction: column; gap: 10px; }

/*
 * کارت مطلب، در دو شکل.
 *
 * خبر مربعی است: بلوک رنگی توپر، تصویر بالا، ردیف نشان و تاریخ، بعد
 * عنوان سفید. خلاصه ندارد تا جمع‌وجور بماند.
 *
 * خطبه و بیانیه و پرسش افقی‌اند: نوار عنوان رنگی، خلاصه روی زمینه‌ی
 * روشن زیرش، و تصویر در سوی دیگر کارت.
 *
 * رنگ هر دو از --accent همان بخش می‌آید.
 */
.post-card { border-radius: var(--radius-card); }

.post-thumb { display: block; overflow: hidden; }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; }

.post-card-body { min-width: 0; }

/* ---------- خبر: کارت مربعی رنگی ---------- */

.post-card.style-solid {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--accent, var(--green));
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(10, 20, 16, .14);
}

.style-solid .post-thumb img { aspect-ratio: 16 / 10; height: auto; }

.style-solid .post-card-body { padding: 8px 14px 13px; }

/*
 * نشان در یک سو، تاریخ در سوی دیگر، با خطی که آن‌ها را از عنوان جدا
 * می‌کند.
 *
 * خط سفیدِ تمام نیست: روی کارتِ کوچک، خطِ پررنگ کارت را دو تکه می‌کند و
 * خودش به چشم می‌آید. این کم‌رنگ فقط مرز را نشان می‌دهد.
 *
 * قلمِ کوچک‌ترِ ردیف هم عمدی است: پیش‌تر نشان و عنوان هر دو سفید و
 * هم‌اندازه بودند و در هم می‌رفتند.
 */
.card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
  font-size: 12px;
  color: #FFFFFF;
}

.card-meta-tag,
.card-meta-date { white-space: nowrap; }
.card-meta-tag { overflow: hidden; text-overflow: ellipsis; }

.style-solid h3 {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.85;
  font-weight: 700;
  /* دو خط، تا کارت‌های یک ردیف هم‌قد بمانند. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.style-solid h3 a { color: #FFFFFF; }
.style-solid h3 a:hover { color: #FFFFFF; text-decoration: underline; }

/* فقط در نتیجه‌ی جست‌وجو می‌آید؛ کارت خبر خلاصه ندارد. */
.style-solid .excerpt {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.9;
  color: rgba(255, 255, 255, .84);
}

.style-solid .excerpt mark { background: rgba(255, 255, 255, .25); color: #FFFFFF; }

/* ---------- خطبه و بیانیه: کارت افقی ---------- */

/*
 * متن در یک سو، تصویر در سوی دیگر، با فاصله میانشان. کارت خودش زمینه‌ای
 * ندارد؛ همان دو بلوک، کارت را می‌سازند.
 */
.post-card.style-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

/* تصویر سمت راست می‌نشیند: در چیدمان راست‌به‌چپ، ستون اول همان سوی راست است. */
.post-card.style-band.has-thumb { grid-template-columns: 210px minmax(0, 1fr); }

.style-band .post-card-body {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(10, 20, 16, .1);
}

.style-band h3 {
  margin: 0;
  padding: 13px 18px;
  background: var(--accent, var(--green));
  font-size: 16.5px;
  line-height: 1.8;
  font-weight: 700;
  text-align: center;
}

.style-band h3 a { color: #FFFFFF; }
.style-band h3 a:hover { color: #FFFFFF; text-decoration: underline; }

/* سفید، نه خاکستریِ روشن: با زمینه‌ی تازه‌ی صفحه هم‌رنگ می‌شد. */
.style-band .post-card-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 14px 18px;
  background: var(--surface);
}

.style-band .excerpt {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.95;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* تاریخ در یک سو، نشان‌ها در سوی دیگرِ همان خط. */
.style-band .card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
}

.card-foot-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.style-band .post-thumb {
  border-radius: var(--radius-card);
  box-shadow: 0 2px 6px rgba(10, 20, 16, .1);
}
.style-band .post-thumb img { aspect-ratio: 4 / 3; }

/*
 * روی صفحه‌ی باریک، ترتیب می‌شود: نوار عنوان، تصویر، متن.
 *
 * تصویر خواهرِ بدنه است نه فرزندش، پس با order تنها نمی‌شود میان عنوان و
 * متن بردش. بدنه با display: contents از چیدمان بیرون می‌رود و هر سه
 * هم‌رده می‌شوند؛ آن‌وقت order جایشان را تعیین می‌کند.
 *
 * با contents، گوشه و سایه‌ی بدنه هم از بین می‌رود، پس خودِ کارت آن‌ها را
 * برمی‌دارد و سه تکه بی‌فاصله داخلش می‌نشینند.
 */
@media (max-width: 640px) {
  .post-card.style-band.has-thumb {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(10, 20, 16, .1);
  }

  .style-band .post-card-body { display: contents; }

  .style-band h3 { order: 1; }
  .style-band .post-thumb { order: 2; border-radius: 0; box-shadow: none; }
  .style-band .post-card-text { order: 3; }

  .style-band .post-thumb img { aspect-ratio: 16 / 9; }
}

.tag {
  display: inline-block;
  font-size: 12px;
  padding: 2px 9px;
  border-radius: 2px;
  background: var(--surface-2);
  color: var(--ink-soft);
}

.tag.audio { background: var(--tint-soft); color: var(--green); }
.tag.video { background: var(--brass-tint); color: var(--brass); }
.tag.pinned { background: var(--green); color: #FFFFFF; }

/* ---------- فیلتر دسته‌بندی ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; }

.chip {
  font-size: 13.5px;
  padding: 5px 14px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
}

.chip:hover { border-color: var(--brass-soft); text-decoration: none; }
.chip.active { background: var(--green); border-color: var(--green); color: #FFFFFF; }

/* ---------- ویدیوی آپارات ---------- */

.video-block { margin: 24px 0; }

.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--surface-2);
  border-radius: var(--radius);
  overflow: hidden;
}

.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- فهرست فشرده در ستون کناری ---------- */

.panel-list { display: flex; flex-direction: column; }

.panel-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--rule-soft);
}

.panel-item:last-child { border-bottom: 0; }
.panel-item:hover { background: var(--tint-soft); text-decoration: none; }
.panel-item-title { font-size: 14.5px; line-height: 1.7; color: var(--ink); }
.panel-item-date { font-size: 12.5px; color: var(--ink-faint); }
.panel-head .sub a { color: var(--green); font-size: 12.5px; }

/* ---------- ستون کناری ---------- */

.sidebar { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/*
 * پانل سایدبار، هم‌شکل کارت مطلب: همان گوشه‌ی گرد، همان سایه، و سرِ
 * رنگیِ سبز — تا ستون کناری و ستون اصلی یک زبان داشته باشند.
 */
.panel {
  background: var(--surface);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(10, 20, 16, .1);
}

.panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: var(--green);
  font-size: 15px;
  font-weight: 700;
  color: #FFFFFF;
}

.panel-head .sub { font-size: 12.5px; font-weight: 400; color: var(--ink-faint); margin-top: 2px; }

.times { padding: 6px 20px 14px; }

.time-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px dashed var(--rule-soft);
  font-size: 14.5px;
}

.time-row:last-child { border-bottom: 0; }
/* برچسب با نشانه‌اش، هم‌تراز روی خط پایه. */
.time-row .label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-soft);
}

/* نشانه به رنگ سبز تم، کمی کم‌رنگ‌تر از متن ولی نه محو. */
.row-icon {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--green);
  opacity: .9;
}
.time-row .value { font-weight: 600; color: var(--green-deep); font-variant-numeric: tabular-nums; }

.panel-body { padding: 18px 20px; font-size: 14px; color: var(--ink-soft); }
.panel-body p { margin: 0 0 10px; }
.panel-body p:last-child { margin-bottom: 0; }

/* ---------- صفحه‌ی خطبه ---------- */

.article {
  background: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: 0 2px 6px rgba(10, 20, 16, .1);
  padding: 34px 38px;
}

.article h1 {
  margin: 0 0 12px;
  font-size: 30px;
  line-height: 1.55;
  color: var(--green-deep);
  text-wrap: balance;
}

.audio-block {
  margin: 24px 0;
  padding: 20px 22px;
  background: var(--surface-2);
  border-radius: var(--radius);
}

.audio-block .audio-title { font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.audio-block audio { width: 100%; }
.audio-block .download { font-size: 13.5px; margin-top: 10px; display: inline-block; }

.key-points {
  margin: 26px 0;
  padding: 22px 26px;
  background: var(--surface-2);
  border-right: 3px solid var(--brass);
  border-radius: var(--radius);
}

.key-points h2 { margin: 0 0 12px; font-size: 16px; font-weight: 600; }
.key-points ul { margin: 0; padding: 0; list-style: none; }

.key-points li {
  position: relative;
  padding-right: 20px;
  margin-bottom: 9px;
  color: var(--ink-soft);
  font-size: 15px;
}

.key-points li:last-child { margin-bottom: 0; }

.key-points li::before {
  content: "";
  position: absolute;
  right: 0;
  top: 14px;
  width: 7px;
  height: 1px;
  background: var(--brass-soft);
}

.prose { font-size: 16.5px; line-height: 2.1; color: var(--ink); }
.prose p { margin: 0 0 18px; }
.prose h2, .prose h3 { color: var(--green-deep); line-height: 1.6; margin: 28px 0 12px; }
.prose ul, .prose ol { padding-right: 22px; }

.prose blockquote {
  margin: 20px 0;
  padding: 4px 20px 4px 0;
  border-right: 3px solid var(--brass-soft);
  color: var(--ink-soft);
}

.gallery {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}

.gallery img { border-radius: var(--radius); }

.back-link { display: inline-block; margin-top: 26px; font-size: 14px; }

/* ---------- صفحه‌بندی ---------- */

.pagination { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 28px; }

.pagination a, .pagination span {
  padding: 7px 13px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-size: 14px;
  background: var(--surface);
}

.pagination .current { background: var(--green); color: #FFFFFF; border-color: var(--green); }
.pagination .disabled { color: var(--ink-faint); background: transparent; }

/* ---------- بارگذاری تدریجی ---------- */

/*
 * همین عنصر هم پیام را نشان می‌دهد هم دیده‌بانِ ته فهرست است، پس حتی
 * وقتی خالی است باید ارتفاع داشته باشد وگرنه هرگز به دید نمی‌آید.
 */
.lazy-status {
  min-height: 1px;
  margin-top: 22px;
  text-align: center;
  font-size: 14px;
  color: var(--ink-faint);
}

.lazy-status.is-loading, .lazy-status.is-done, .lazy-status.is-error { padding: 16px 0; }

.lazy-status.is-loading::before {
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-left: 9px;
  vertical-align: -2px;
  border: 2px solid var(--rule);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: lazy-spin 0.7s linear infinite;
}

@keyframes lazy-spin { to { transform: rotate(360deg); } }

/* چرخش تند برای کسی که حرکت اذیتش می‌کند، کند می‌شود. */
@media (prefers-reduced-motion: reduce) {
  .lazy-status.is-loading::before { animation-duration: 2.4s; }
}

.lazy-status.is-done { border-top: 1px solid var(--rule-soft); }

.lazy-status.is-error { color: var(--ink-soft); }
.lazy-status.is-error .btn { margin-right: 8px; }

/* ---------- حالت خالی ---------- */

.empty {
  background: var(--surface);
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
  padding: 44px 30px;
  text-align: center;
  color: var(--ink-faint);
}

.empty strong { display: block; color: var(--ink-soft); margin-bottom: 6px; font-weight: 600; }

/* ---------- پاورقی ---------- */

.site-footer {
  background: var(--green-deep);
  color: var(--on-dark-soft);
  font-size: 14px;
  padding: 30px 0;
}

.site-footer a { color: var(--on-dark-dim); }
/*
 * گرید به‌جای flex-wrap: با flex، ستون‌ها عرض محتوایشان را می‌گرفتند و
 * روی صفحه‌ی باریک نامرتب می‌شکستند. حالا ستون‌ها هم‌عرض‌اند و با کم شدن
 * جا، مرتب از چهار به دو و بعد یک می‌رسند.
 */
.site-footer .cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 26px 40px;
}

.site-footer .cols > div { min-width: 0; }
.site-footer h4 { margin: 0 0 8px; font-size: 14px; color: var(--on-dark); font-weight: 600; }
.site-footer p { margin: 0 0 5px; }

.site-footer .colophon {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 18px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 13px;
  color: var(--on-dark-faint);
}

.site-footer .colophon p { margin: 0; }

/* وزیرمتن گلیف اموجی ندارد؛ بدون این فهرست، قلب مربع خالی می‌شد. */
.site-footer .signature .heart {
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  font-size: 12px;
}
/* ---------- موبایل ---------- */

@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; gap: 26px; padding-top: 26px; }
  .article { padding: 24px 20px; }
  .article h1 { font-size: 24px; }
}

@media (max-width: 560px) {
  /* بندانگشتی روی موبایل کنار متن جا نمی‌شود و متن را له می‌کند */
  /* شکستنِ کارت افقی روی صفحه‌ی باریک، کنار تعریف خودش است. */
}

/* ---------- لوگوی کانال‌های پیام‌رسان در پاورقی ---------- */

.channel-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.channel-logos a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* لوگوها معمولاً برای زمینه‌ی روشن ساخته شده‌اند، پس روی پاورقی سبز
     یک تکیه‌گاه روشن می‌گیرند تا محو نشوند. */
  background: #FFFFFF;
  border-radius: 6px;
  padding: 6px 8px;
  min-width: 44px;
  min-height: 34px;
  transition: transform .15s ease;
}

.channel-logos a:hover { transform: translateY(-1px); text-decoration: none; }

.channel-logos img {
  height: 22px;
  width: auto;
  max-width: 90px;
  object-fit: contain;
}

/* اگر لوگو آپلود نشده باشد، نام کانال جایش می‌نشیند */
.channel-logos .channel-name {
  font-size: 13px;
  color: var(--green-deep);
  white-space: nowrap;
}

/* ---------- فرم‌ها ---------- */

/* هم‌شکل بقیه‌ی باکس‌ها: بدون کادر خط‌نازک، با گوشه‌ی ۹ و سایه. */
.form-card {
  background: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: 0 2px 6px rgba(10, 20, 16, .1);
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.field label { font-size: 14px; color: var(--ink); font-weight: 500; }
.field .req { color: #A8402F; }

.field input,
.field textarea {
  font-family: inherit;
  font-size: 15px;
  line-height: 1.9;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  padding: 10px 14px;
  width: 100%;
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(29, 80, 64, .1);
}

.field textarea { resize: vertical; }

.field-hint { font-size: 12.5px; color: var(--ink-faint); }
.field-error { font-size: 12.5px; color: #A8402F; }

/* تله‌ی ربات: از دید کاربر خارج، ولی نه با display:none */
.honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

.btn {
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: #FFFFFF;
  background: var(--green);
  border: 0;
  /* همان گوشه‌ی ۹ پیکسلی باکس‌ها، تا دکمه‌ها هم‌زبانشان باشند. */
  border-radius: var(--radius-card);
  padding: 11px 26px;
  cursor: pointer;
}

.btn:hover { background: var(--green-deep); }

.btn-link { font-size: 14px; color: var(--green); }

/* ---------- پیام‌های وضعیت ---------- */

.notice {
  border-radius: var(--radius-card);
  padding: 18px 22px;
  margin-bottom: 20px;
  font-size: 14.5px;
}

.notice strong { display: block; margin-bottom: 6px; font-size: 15.5px; }
.notice p { margin: 0 0 6px; }
.notice p:last-child { margin-bottom: 0; }
.notice ul { margin: 6px 0 0; padding-right: 20px; }
.notice .hint { color: var(--ink-faint); font-size: 13.5px; }

.notice.success { background: var(--tint-soft); border: 1px solid var(--tint-line); color: var(--green-deep); }
.notice.error { background: #F6EBE9; border: 1px solid #E2C7C2; color: #7C2D1D; }

.tracking-code {
  display: inline-block;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: .08em;
  background: var(--surface);
  border: 1px dashed var(--green);
  border-radius: var(--radius);
  padding: 3px 14px;
  margin-inline-start: 6px;
}

/* ---------- نتیجه‌ی پیگیری ---------- */

.track-result {
  background: var(--surface);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  padding: 24px 26px;
  margin-top: 20px;
}

.track-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.track-date { font-size: 13px; color: var(--ink-faint); }

.status-badge {
  font-size: 12.5px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
}

.status-badge.new { background: var(--surface-2); color: var(--ink-soft); }
.status-badge.progress { background: var(--brass-tint); color: var(--brass); }
.status-badge.answered { background: var(--tint-soft); color: var(--green); }

.track-result h3 { margin: 0 0 10px; font-size: 18px; line-height: 1.6; }
.track-body { color: var(--ink-soft); white-space: pre-line; }

.track-answer {
  margin-top: 20px;
  padding: 18px 20px;
  background: var(--surface-2);
  border-right: 3px solid var(--green);
  border-radius: var(--radius);
}

.track-answer h4 { margin: 0 0 8px; font-size: 15px; }
.track-answer p { margin: 0; color: var(--ink-soft); white-space: pre-line; }

/* ---------- انتخاب نوع درخواست ---------- */

.kind-choice {
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  padding: 14px 18px 16px;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
}

.kind-choice legend {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  padding: 0 6px;
}

.kind-option {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14.5px;
  color: var(--ink-soft);
  cursor: pointer;
}

.kind-option input { accent-color: var(--green); width: 16px; height: 16px; }
.kind-option:hover span { color: var(--green); }

/* تاریخ پیشنهادی، در نتیجه‌ی پیگیری */
.track-preferred {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--ink-soft);
}

/* ---------- لینک خوراک RSS ---------- */

.feed-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* نشان کوچک RSS، بدون تصویر و بدون فونت آیکون */
.feed-link::before {
  content: "";
  width: 13px;
  height: 13px;
  flex: none;
  border-radius: 2px;
  background:
    radial-gradient(circle at 2px calc(100% - 2px), currentColor 2px, transparent 2.5px),
    radial-gradient(circle at 2px calc(100% - 2px), transparent 4px, currentColor 4.5px, currentColor 6px, transparent 6.5px),
    radial-gradient(circle at 2px calc(100% - 2px), transparent 8px, currentColor 8.5px, currentColor 10px, transparent 10.5px);
  opacity: .85;
}

.site-footer .feed-link { color: var(--on-dark-dim); }

/* ---------- جست‌وجو ---------- */

.search-form {
  display: flex;
  gap: 10px;
  margin-bottom: 22px;
}

.search-form input {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm, 4px);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

.result-count {
  margin: 0 0 14px;
  font-size: 13.5px;
  color: var(--ink-faint);
}

/* نشانه‌گذاری واژه‌ی یافته‌شده در تکه‌متن نتیجه */
.excerpt mark {
  background: var(--brass-tint);
  color: inherit;
  padding: 0 2px;
  border-radius: 2px;
}

.page-filter {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--ink-faint);
}

/*
 * ردیف انتخاب‌شده سبزِ روشن می‌گیرد، نه خاکستریِ --surface-2: آن رنگ
 * تقریبا همان زمینه‌ی صفحه بود و ردیف به‌جای «انتخاب‌شده»، «سوراخ» به
 * نظر می‌رسید. نوار سبزِ لبه هم نمی‌گذارد انتخاب با یک ردیفِ صرفا
 * روشن‌تر اشتباه شود.
 */
.panel-item.is-active {
  background: var(--green-tint);
  box-shadow: inset 3px 0 0 var(--green);
  font-weight: 600;
}

.panel-item.is-active .panel-item-title { color: var(--green-deep); }
.panel-item.is-active .panel-item-date { color: var(--green); }

/* ---------- هم‌رسانی ---------- */

.share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--rule-soft);
}

.share-label {
  font-size: 13.5px;
  color: var(--ink-faint);
  margin-left: 4px;
}

.share-btn {
  padding: 6px 14px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  font: inherit;
  font-size: 13.5px;
  line-height: 1.7;
  cursor: pointer;
}

.share-btn:hover {
  border-color: var(--green);
  color: var(--green);
  text-decoration: none;
}

.share-copy[data-copied] {
  border-color: var(--green);
  background: var(--tint-soft);
  color: var(--green-deep);
}

/* نشانی خواندنی، برای وقتی که جاوااسکریپت در دسترس نیست. */
.share-url {
  flex: 1 1 220px;
  min-width: 0;
  padding: 6px 12px;
  border: 1px solid var(--rule-soft);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-faint);
  font: inherit;
  font-size: 12.5px;
  direction: ltr;
  text-align: left;
}

/* نقشه‌ی دفتر: نسبت ثابت، تا موقع بارگذاری صفحه نپرد. */
.office-map {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
}

/* ---------- مناسبت‌ها ---------- */

.time-row .countdown {
  display: block;
  font-size: 11.5px;
  color: var(--ink-faint);
  font-weight: 400;
}

.time-row.is-holiday .label { color: var(--green-deep); }

.tag.holiday {
  background: #F6EBE9;
  color: #7C2D1D;
  border-color: #E2C7C2;
}

/* ---------- آرشیو صوتی ---------- */

.audio-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* هم‌شکل کارت خطبه: نوار عنوان سبز و بدنه روی زمینه‌ی سفید. */
.audio-item {
  background: var(--surface);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(10, 20, 16, .1);
}

.audio-item h3 {
  margin: 0;
  padding: 12px 18px;
  background: var(--green);
  font-size: 16px;
  line-height: 1.8;
  font-weight: 700;
}

.audio-item h3 a { color: #FFFFFF; }
.audio-item h3 a:hover { color: #FFFFFF; text-decoration: underline; }

.audio-item .meta-row {
  margin: 0;
  padding: 12px 18px 0;
}

.audio-item audio {
  width: calc(100% - 36px);
  margin: 12px 18px 0;
}

.audio-size {
  font-size: 12.5px;
  color: var(--ink-faint);
}

.audio-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin: 12px 18px 16px;
}

/* خبر اول روی صفحه‌ی باریک: تصویر بالا، متن پایین. */
@media (max-width: 820px) {
  .lead.has-media { grid-template-columns: 1fr; }
  .lead-media img { min-height: 200px; max-height: 260px; }
  .lead-body { padding: 24px 22px; gap: 10px; }
}

/* ---------- نوار تاریخ ---------- */

.dateline {
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}

/*
 * پدینگ کناری همان ۲۰ پیکسلِ .wrap است و باید صریح تکرار شود: خاصیت
 * padding یک‌جا نوشته می‌شود، پس «۷ و صفر» پدینگ کناریِ .wrap را باطل
 * می‌کرد و تاریخ به لبه‌ی صفحه می‌چسبید.
 */
.dateline-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 22px;
  padding: 7px 20px;
  font-size: 12.5px;
  color: var(--ink-faint);
}

/* هر تاریخ با نشانه‌اش، هم‌تراز روی یک خط. */
.dateline-inner span { display: inline-flex; align-items: center; gap: 6px; }
.dateline-inner .row-icon { width: 13px; height: 13px; }

.dateline-main { color: var(--ink-soft); font-weight: 500; }

/* جداکننده‌ی مویی، تا سه تاریخ در هم نروند */
.dateline-inner span + span {
  position: relative;
  padding-inline-start: 22px;
}

.dateline-inner span + span::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 11px;
  background: var(--rule);
}

/*
 * روی گوشی سه تاریخ در یک خط جا نمی‌شوند و کوچک‌تر کردنشان تا حدی که جا
 * شوند، خواندنشان را سخت می‌کند. پس عمدا در دو خط می‌نشینند، وسط‌چین و
 * با جداکننده‌ای که سرِ خط دوم نمی‌آید — وگرنه خط دوم آویزان به نظر
 * می‌رسید، انگار جا مانده باشد.
 */
@media (max-width: 560px) {
  .dateline-inner {
    justify-content: center;
    gap: 2px 14px;
    font-size: 12px;
    text-align: center;
  }

  .dateline-inner span + span { padding-inline-start: 14px; }

  /* خط دومی که تنهاست، جداکننده‌ی معلق لازم ندارد. */
  .dateline-inner span:last-child:not(:only-child)::before { content: none; }
  .dateline-inner span:last-child:not(:only-child) { padding-inline-start: 0; }
}

/* ---------- تفکیک بخش‌ها ---------- */

/*
 * هر بخش رنگ خودش را دارد، ولی رنگ فقط روی نشانه‌های کوچک می‌نشیند نه
 * روی کل کارت: تفکیک باید در نگاه دوم دیده شود، نه اینکه صفحه را رنگی کند.
 */
.type-sermon { --accent: var(--green); }
/* همان سبز نوار بالای سایت، تا کارت‌ها با تم یکی باشند. */
.type-news { --accent: var(--green); }
/* بیانیه و پرسش هم همان سبز تم را می‌گیرند، مثل خطبه و خبر. */
.type-statement { --accent: var(--green); }
.type-question { --accent: var(--green); }
.type-page { --accent: var(--ink-soft); }

/*
 * نوار رنگیِ کنارِ کارت برداشته شد: حالا خودِ کارت یا نوار عنوانش رنگ
 * بخش را دارد و آن خط، تکرارِ بی‌جا بود.
 */

/* فوتر روی صفحه‌ی باریک: دو ستون، و زیر آن یک ستون. */
@media (max-width: 700px) {
  .site-footer .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; }
  .site-footer { padding: 26px 0; }
}

@media (max-width: 420px) {
  .site-footer .cols { grid-template-columns: 1fr; }
}

/* ---------- شبکه‌ی اخبار ---------- */

.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 12px;
}

/* شکل کارت خبر بالاتر تعریف شده؛ شبکه فقط چیدمانشان است. */

/* ---------- ویدیو ---------- */

.video-block {
  background: var(--surface);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 26px;
}

.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink);
}

.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-body { padding: 16px 20px; }
.video-body h3 { margin: 0 0 8px; font-size: 17px; line-height: 1.65; }
.video-body h3 a { color: var(--ink); }
.video-body .meta-row { margin: 0; }

/* ---------- پربازدیدترین ---------- */

.panel-item.ranked {
  flex-direction: row;
  align-items: baseline;
  gap: 10px;
}

.rank {
  flex: none;
  width: 20px;
  font-size: 15px;
  font-weight: 700;
  color: var(--brass);
  font-variant-numeric: tabular-nums;
}

/* ---------- گزارش تصویری ---------- */

.photo-strip {
  grid-column: 1 / -1;
  margin-top: 8px;
}

/* شش ستون، تا دوازده عکس دقیقا دو ردیف منظم بشوند. */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

/* هم‌شکل بقیه‌ی باکس‌ها: گوشه‌ی ۹ و سایه، به‌جای گوشه‌ی ۳ و بی‌سایه. */
.photo-grid a {
  position: relative;
  display: block;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: 0 2px 6px rgba(10, 20, 16, .1);
}

.photo-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .25s ease;
}

.photo-grid a:hover img { transform: scale(1.04); }

/*
 * پرده‌ی سبز روی نشانگر ماوس. کاشی‌ها کوچک‌اند و جا برای نوشتن عنوان
 * ندارند، ولی باید معلوم باشد که کلیک‌شدنی‌اند.
 */
.photo-grid a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--green);
  opacity: 0;
  transition: opacity .25s ease;
}

.photo-grid a:hover::after { opacity: .28; }

@media (prefers-reduced-motion: reduce) {
  .photo-grid img,
  .photo-grid a::after { transition: none; }
}

@media (max-width: 1000px) {
  .photo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .post-grid { grid-template-columns: 1fr; }
  .photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.card-foot {
  font-size: 12.5px;
  color: var(--ink-faint);
}

/* ---------- ردیف ویدیو ---------- */

/*
 * همه‌ی ویدیوها هم‌اندازه و کنار هم. پیش‌تر یکی بزرگ بالا بود و بقیه
 * کوچک زیرش؛ آن بزرگه بیشترین جای صفحه را می‌گرفت.
 */
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.video-mini {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--surface);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(10, 20, 16, .1);
}

.video-mini:hover { text-decoration: none; }

.video-mini-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--ink);
}

.video-mini-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* نشان پخش، تا تصویر با یک عکس معمولی اشتباه گرفته نشود. */
.video-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #FFFFFF;
}

.video-play svg {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(12, 21, 18, .6);
  padding: 7px;
}

.video-mini:hover .video-play svg { background: var(--green); }

.video-mini-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 11px 14px;
}

.video-mini-title {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink);
}

.video-mini-date {
  font-size: 12px;
  color: var(--ink-faint);
}

@media (max-width: 700px) {
  .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
  .video-grid { grid-template-columns: 1fr; }
}

/* ---------- ستون کناری ---------- */

/* روی سرِ سبز پانل می‌نشیند، پس رنگش را از خودِ سر می‌گیرد. */
.panel-icon {
  width: 15px;
  height: 15px;
  flex: none;
  opacity: .85;
}

/* ---------- اوقات شرعی ---------- */

.prayer-panel { overflow: hidden; }

.prayer-next {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 18px 20px 16px;
  background: var(--green-deep);
  color: var(--on-dark);
}

.prayer-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--brass-soft);
}

.prayer-name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
}

.prayer-time {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.2;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

.prayer-countdown {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--on-dark-soft);
}

.prayer-rest { padding-bottom: 4px; }

.prayer-date {
  padding: 10px 20px 6px;
  font-size: 12.5px;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--rule-soft);
}

.prayer-panel .time-row .value { font-variant-numeric: tabular-nums; }

/* وقت بعدی در فهرست هم نشان‌دار می‌شود، تا چشم پیدایش کند. */
/*
 * وقتِ بعدی تمام‌عرضِ پانل رنگی می‌شود، نه فقط تا لبه‌ی متن.
 *
 * .times پدینگ کناری دارد، پس بدون حاشیه‌ی منفی، رنگ وسطِ سطر می‌ماند و
 * شبیه یک لکه می‌شود نه یک سطرِ انتخاب‌شده. پدینگ همان اندازه برمی‌گردد
 * تا متن سر جایش بماند.
 *
 * همان سبزِ روشنِ ردیف انتخاب‌شده‌ی ستون کناری، با نوار سبز در لبه.
 */
.time-row.is-next {
  margin: 0 -20px;
  padding: 8px 20px;
  background: var(--green-tint);
  box-shadow: inset 3px 0 0 var(--green);
  border-bottom-color: transparent;
  font-weight: 600;
}

.time-row.is-next .label { color: var(--green-deep); }
.time-row.is-next .value { color: var(--green-deep); }
.time-row.is-next .row-icon { opacity: 1; }

/* ---------- فراخوان ثبت درخواست ---------- */

/*
 * فراخوان، بلوک سبز توپر: پیش‌تر کادر کرم بود و تنها چیزِ بی‌ربط به تم
 * سایت در ستون کناری. حالا هم‌زبان بقیه است و باز هم به چشم می‌آید،
 * چون تنها بلوکِ یکسره‌رنگِ ستون است.
 */
.call-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 20px;
  background: var(--green);
  color: #FFFFFF;
}

.call-panel h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  color: #FFFFFF;
}

.call-panel p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.85;
  color: rgba(255, 255, 255, .86);
}

.call-panel .btn { margin-top: 2px; }

.call-secondary {
  font-size: 13px;
  color: rgba(255, 255, 255, .86);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

.call-secondary:hover { color: #FFFFFF; text-decoration: none; }

/* دکمه روی زمینه‌ی سبز، برنجی می‌شود تا دیده شود. */
.call-panel .btn { background: var(--brass); }
.call-panel .btn:hover { background: var(--brass-deep); }


/* ---------- مناسبت‌ها ---------- */

.occasion-list {
  display: flex;
  flex-direction: column;
}

.occasion {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 20px;
  border-bottom: 1px solid var(--rule-soft);
}

.occasion:last-child { border-bottom: 0; }

/* برگ تقویم: روز درشت، ماه زیرش. */
.occasion-date {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 42px;
  padding: 5px 0 4px;
  border: 1px solid var(--rule);
  border-radius: 7px;
  background: var(--surface-2);
  line-height: 1.25;
}

.occasion-day {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.occasion-month {
  font-size: 10.5px;
  color: var(--ink-faint);
}

.occasion-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.occasion-title {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink);
}

.occasion-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--ink-faint);
}

.occasion-badge {
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.7;
}

.occasion-badge.today { background: var(--green); color: #FFFFFF; }
.occasion-badge.holiday { background: #F6EBE9; color: #7C2D1D; }

/* تعطیل و امروز، برگ تقویمشان هم رنگ می‌گیرد. */
.occasion.is-holiday .occasion-date {
  border-color: #E2C7C2;
  background: #F9F1F0;
}

.occasion.is-holiday .occasion-day { color: #7C2D1D; }

.occasion.is-today .occasion-date {
  border-color: var(--green);
  background: var(--green);
}

.occasion.is-today .occasion-day,
.occasion.is-today .occasion-month { color: #FFFFFF; }

/* ---------- ردیف‌های لینک در ستون کناری ---------- */

.link-rows { display: flex; flex-direction: column; }

.link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 20px;
  font-size: 14px;
  color: var(--ink);
  border-bottom: 1px solid var(--rule-soft);
}

.link-row:last-child { border-bottom: 0; }
.link-row:hover { background: var(--surface-2); color: var(--green); text-decoration: none; }
.link-row span { color: var(--ink-faint); font-size: 16px; line-height: 1; }

/* ---------- کانال‌ها در ستون کناری ---------- */

.channel-rows { display: flex; flex-direction: column; }

.channel-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink);
  font-size: 14px;
}

.channel-row:last-child { border-bottom: 0; }
.channel-row:hover { background: var(--surface-2); text-decoration: none; }

.channel-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--green);
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
}

.channel-mark img { width: 20px; height: 20px; object-fit: contain; }
.channel-row .channel-name { flex: 1; min-width: 0; }
.channel-go { color: var(--ink-faint); font-size: 16px; line-height: 1; }

/* ---------- ردیف‌های تماس ---------- */

.contact-rows { display: flex; flex-direction: column; }

.contact-row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--rule-soft);
}

.contact-row:last-child { border-bottom: 0; }

.contact-row svg {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 3px;
  color: var(--green);
  opacity: .75;
}

.contact-row > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.contact-label {
  font-size: 11.5px;
  color: var(--ink-faint);
}

.contact-value {
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink);
}

a.contact-value { direction: ltr; text-align: right; }
a.contact-value:hover { color: var(--green); }

/* ---------- یادداشت کناری ---------- */

/* نکته است نه بخش، پس کادر کامل نمی‌گیرد. */
/*
 * یادداشت کناری، حالا باکس است نه متنِ شناور با یک خط بالای سرش.
 *
 * از پانل‌ها سبک‌تر می‌ماند — سرِ سبزِ تمام‌عرض ندارد — چون متن کمکی است
 * نه بخشی از محتوا؛ ولی مثل بقیه گوشه و سایه دارد تا از زمینه جدا شود.
 */
.side-note {
  padding: 16px 18px;
  background: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: 0 2px 6px rgba(10, 20, 16, .1);
  font-size: 13px;
  line-height: 1.9;
  color: var(--ink-faint);
}

.side-note strong {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 14px;
  font-weight: 700;
  color: var(--green-deep);
}

.side-note p { margin: 0; }

/* نشانه‌ی عنوانِ یادداشت، هم‌رنگ خودِ عنوان. */
.side-note .row-icon { width: 14px; height: 14px; color: var(--green); }
.side-note p + p { margin-top: 10px; }

/* ---------- ردیف‌های مشخصات ---------- */

/* برچسب و مقدار، به‌جای پاراگراف‌های «تاریخ: ...» که خوانده نمی‌شدند. */
.fact-rows { display: flex; flex-direction: column; }

.fact-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--rule-soft);
}

.fact-row:last-child { border-bottom: 0; }

.fact-label {
  flex: none;
  font-size: 12.5px;
  color: var(--ink-faint);
}

.fact-value {
  min-width: 0;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--ink);
  text-align: left;
}

.fact-tags { display: flex; flex-wrap: wrap; gap: 5px; }

/* یادداشت کناری وقتی تنها فرزند نیست، از بخش بالای خود فاصله می‌گیرد. */
.sidebar .side-note { margin-top: 2px; }

/* ---------- پرسش و پاسخ شرعی ---------- */

.qa-list { display: flex; flex-direction: column; gap: 10px; }

/* نوار عنوان سبز و متن روی زمینه‌ی سفید — همان شکل کارت خطبه. */
.qa-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(10, 20, 16, .1);
}

.qa-card h3 {
  margin: 0;
  padding: 12px 18px;
  background: var(--green);
  font-size: 16px;
  line-height: 1.8;
  font-weight: 700;
}

.qa-card h3 a { color: #FFFFFF; }
.qa-card h3 a:hover { color: #FFFFFF; text-decoration: underline; }

.qa-excerpt {
  margin: 0;
  padding: 14px 18px 0;
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--ink-soft);
}

/* تاریخ و موضوع پای کارت، مثل بقیه‌ی فهرست‌های سایت. */
.qa-card .card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 18px 14px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
}

.qa-card .card-foot .tag { font-size: 11.5px; }

/* ---------- صفحه‌ی یک پرسش ---------- */

.qa-single {
  padding: 24px 26px;
  background: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: 0 2px 6px rgba(10, 20, 16, .1);
}

.qa-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  font-size: 13px;
  color: var(--ink-faint);
}

/*
 * پرسش و پاسخ باید در یک نگاه از هم جدا شوند، وگرنه خواننده نمی‌فهمد
 * کجا حرف مردم تمام می‌شود و حرف دفتر شروع.
 */
.qa-block { margin-bottom: 24px; }

.qa-block h2 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--green);
}

.qa-question {
  padding: 16px 18px;
  background: var(--surface-2);
  border-radius: var(--radius-card);
}

.qa-question .qa-text {
  font-size: 16px;
  line-height: 2;
  color: var(--ink);
}

.qa-answer { padding-inline-start: 14px; border-inline-start: 3px solid var(--green); }

.qa-answer h2 { color: var(--green-deep); }

.qa-related { margin-top: 34px; }

.qa-related h2 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 18px;
}

@media (max-width: 640px) {
  .qa-single { padding: 18px 16px; }
  .qa-card { padding: 14px 15px; }
}