/* ============================================================
   آوای گنج‌نامه — Design tokens (from Claude Design "Modernist" system)
   Loaded AFTER bootstrap.rtl.min.css on purpose: Bootstrap supplies the
   grid / utilities / JS components (navbar, carousel, offcanvas, nav-pills),
   this file restyles Bootstrap's base components (.btn, .card, .form-control…)
   and adds the site's own tokens so the visual identity stays identical
   to the original design.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;800&display=swap');

:root {
  --font-heading: 'Vazirmatn', system-ui, sans-serif;
  --font-body: 'Vazirmatn', system-ui, sans-serif;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;

  --color-accent: #e8770f;
  --color-accent-100: #fff3e6;
  --color-accent-200: #ffe1bf;
  --color-accent-300: #ffc98f;
  --color-accent-400: #ffa855;
  --color-accent-500: #f5871f;
  --color-accent-600: #d96f0f;
  --color-accent-700: #ad5606;
  --color-accent-800: #7a3d04;
  --color-accent-900: #4d2703;

  --color-accent-2: #0d8f54;
  --color-accent-2-100: #e6f7ee;
  --color-accent-2-200: #c2ecd8;
  --color-accent-2-300: #8ddbb7;
  --color-accent-2-400: #4dc78e;
  --color-accent-2-500: #1aab68;
  --color-accent-2-600: #0d8f54;
  --color-accent-2-700: #077242;
  --color-accent-2-800: #065630;
  --color-accent-2-900: #053b21;

  --color-bg: #ffffff;
  --color-surface: #f4f2f2;
  --color-text: #201e1d;
  --color-divider: color-mix(in srgb, #201e1d 16%, transparent);

  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);

  /* Bootstrap variable bridge, so bootstrap components inherit our palette */
  --bs-body-font-family: var(--font-body);
  --bs-body-bg: var(--color-bg);
  --bs-body-color: var(--color-text);
  --bs-link-color: var(--color-accent);
  --bs-link-hover-color: var(--color-accent-700);
  --bs-border-color: var(--color-divider);
  --bs-primary: var(--color-accent);
  --bs-primary-rgb: 232, 119, 15;
}

[data-bs-theme='dark'] {
  --color-bg: #181613;
  --color-surface: #242019;
  --color-text: #f4f2f0;
  --color-divider: color-mix(in srgb, #f4f2f0 22%, transparent);
  --color-neutral-900: #0a0908;
  --color-neutral-100: #242019;
  --bs-body-bg: var(--color-bg);
  --bs-body-color: var(--color-text);
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 15px;
}

/* — initial page-load fade + scroll reveal (see assets/js/site.js) — */
body { opacity: 0; }
body.is-ready { opacity: 1; transition: opacity .6s ease; }

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
.reveal.in-view { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  body, .reveal { transition: none !important; opacity: 1 !important; transform: none !important; }
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: -0.015em;
}
a { text-decoration: none; }
a:hover { color: var(--color-accent-700); }
img { max-width: 100%; }
.text-muted, .text-body-secondary { color: color-mix(in srgb, var(--color-text) 55%, transparent) !important; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* — buttons (restyle Bootstrap's .btn) — */
.btn {
  font-family: var(--font-heading);
  font-weight: 800;
  border-radius: var(--radius-md);
  --bs-btn-border-radius: var(--radius-md);
}
.btn-primary {
  --bs-btn-bg: var(--color-accent);
  --bs-btn-border-color: var(--color-accent);
  --bs-btn-hover-bg: var(--color-accent-600);
  --bs-btn-hover-border-color: var(--color-accent-600);
  --bs-btn-active-bg: var(--color-accent-700);
  --bs-btn-active-border-color: var(--color-accent-700);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
}
.btn-secondary {
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--color-divider);
  --bs-btn-color: var(--color-text);
  --bs-btn-hover-bg: color-mix(in srgb, var(--color-text) 7%, transparent);
  --bs-btn-hover-border-color: var(--color-divider);
  --bs-btn-hover-color: var(--color-text);
  --bs-btn-active-bg: color-mix(in srgb, var(--color-text) 14%, transparent);
  --bs-btn-active-color: var(--color-text);
}
.btn-light { --bs-btn-bg: #fff; --bs-btn-color: var(--color-accent-800); --bs-btn-border-color: #fff; font-weight: 800; }
.btn-ghost { color: var(--color-accent); padding-inline: 4px; background: transparent; border: none; }
.btn-ghost:hover { color: var(--color-accent-700); background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.btn-icon svg { display: block; }

/* — inputs — */
.form-control, .form-select {
  background: var(--color-surface);
  border-color: var(--color-divider);
  color: var(--color-text);
  border-radius: var(--radius-md);
}
.form-control:focus, .form-select:focus {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-accent);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-accent) 18%, transparent);
}
.form-control::placeholder { color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.newsletter-input, .newsletter-input::placeholder { color: #fff; }
.newsletter-input { background: color-mix(in srgb, #fff 15%, transparent) !important; border-color: color-mix(in srgb, #fff 35%, transparent) !important; }

/* — tags/badges — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px; font-weight: 600;
  letter-spacing: 0.02em; padding: 3px 10px; border-radius: 9px; white-space: nowrap;
  text-decoration: none;
}
a.tag { cursor: pointer; transition: opacity .2s ease; }
a.tag:hover { opacity: .8; }
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }
.tag-solid-accent2 { background: var(--color-accent-2); color: #fff; font-weight: 800; }

/* — width-to-content helper (Bootstrap has no built-in w-fit utility) —
   needed because these tags/buttons sit inside .d-flex.flex-column
   containers, whose default align-items:stretch forces them full-width */
.w-fit { width: fit-content !important; }

/* — meta row — */
.card-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: color-mix(in srgb, var(--color-text) 50%, transparent); }

/* — utility / top bar — */
.util-bar { font-size: 12px; box-shadow: var(--shadow-sm); color: color-mix(in srgb, var(--color-text) 60%, transparent); background: var(--color-bg); }

/* — breaking news ticker — */
.breaking-bar { background: var(--color-neutral-900); color: #f4f2f0; font-size: 14px; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent-2); flex: none; animation: live-pulse 1.4s ease-in-out infinite; }

.breaking-ticker { flex: 1 1 auto; min-width: 0; height: 1.7em; overflow: hidden; --ticker-count: 4; }
/* تعداد خبرهای فوری همیشه ثابت نیست (بین ۱ تا ۸، از Customizer)، پس درصد هر پرش هم باید
   پویا محاسبه بشه؛ وگرنه با تعداد کمتر/بیشتر از ۴، ترک روی جایگاه‌های اشتباه/خالی می‌پره و گیر می‌کند.
   با N آیتم واقعی + ۱ کپی از آیتم اول (برای چرخش بی‌درز) = N+1 جایگاه روی هم چیده شده؛
   steps(N) دقیقاً N توقف مساوی (هرکدام duration/N) بین ۰ تا translateY نهایی می‌سازه. */
.breaking-ticker-track {
  animation-name: breaking-ticker-scroll;
  animation-duration: calc(var(--ticker-count) * 4s);
  animation-timing-function: steps(var(--ticker-count));
  animation-iteration-count: infinite;
}
.breaking-ticker:hover .breaking-ticker-track,
.breaking-ticker:focus-within .breaking-ticker-track { animation-play-state: paused; }
.breaking-ticker-item {
  display: block; height: 1.7em; line-height: 1.7em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: inherit; text-decoration: none;
}
.breaking-ticker-item:hover, .breaking-ticker-item:focus-visible { text-decoration: underline; }
@keyframes breaking-ticker-scroll {
  from { transform: translateY(0); }
  to { transform: translateY(calc(-100% * var(--ticker-count) / (var(--ticker-count) + 1))); }
}
@media (prefers-reduced-motion: reduce) {
  .breaking-ticker-track { animation: none; }
}
@keyframes live-pulse {
  0% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent-2) 55%, transparent); }
  70% { opacity: .55; transform: scale(.85); box-shadow: 0 0 0 6px transparent; }
  100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 transparent; }
}

/* — desktop nav — */
.site-navbar { box-shadow: var(--shadow-sm); background: var(--color-bg); z-index: 1030; padding-block: 15px; padding-inline: 40px; }
.site-navbar .navbar-brand { font-family: var(--font-heading); font-weight: 800; font-size: 24px; display: flex; align-items: center; gap: 8px; color: var(--color-text); }
.site-navbar .navbar-brand .dot { width: 12px; height: 12px; background: var(--color-accent); flex: none; }
.site-navbar .navbar-brand .site-logo { height: 86px; width: auto; display: block; margin: 0; }
.site-navbar .nav-link { font-weight: 600; color: var(--color-text); display: flex; align-items: center; gap: 6px; }
.site-navbar .nav-link:hover, .site-navbar .nav-link.active { color: var(--color-accent); }

/* — زیرمنوی کشویی دسکتاپ — */
.site-navbar .nav-dropdown { position: relative; display: flex; align-items: center; }
.site-navbar .nav-caret { flex: none; transition: transform .22s ease; }
.site-navbar .nav-dropdown:hover > .nav-link,
.site-navbar .nav-dropdown:focus-within > .nav-link { color: var(--color-accent); }
.site-navbar .nav-dropdown:hover > .nav-link .nav-caret,
.site-navbar .nav-dropdown:focus-within > .nav-link .nav-caret { transform: rotate(180deg); }

.site-navbar .nav-submenu {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  min-width: 210px;
  /* پدینگ بالا پل عبور ماوس بین لینک و کشو است؛ پدینگ پایین جا برای سایه. */
  padding-block: 12px 16px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: max-height .3s cubic-bezier(.4, 0, .2, 1), opacity .2s ease;
  z-index: 1040;
}
.site-navbar .nav-dropdown:hover > .nav-submenu,
.site-navbar .nav-dropdown:focus-within > .nav-submenu {
  max-height: 70vh;
  opacity: 1;
  pointer-events: auto;
}
.site-navbar .nav-submenu-inner {
  display: flex;
  flex-direction: column;
  padding-block: 8px;
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
}
.site-navbar .nav-sublink {
  display: block;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--color-text);
  text-decoration: none;
}
.site-navbar .nav-sublink:hover,
.site-navbar .nav-sublink.active { color: var(--color-accent); background: var(--color-surface); }

@media (prefers-reduced-motion: reduce) {
  .site-navbar .nav-submenu { transition: opacity .12s ease; }
}

/* — منوی کشویی موبایل (الگوی اندروید: هر سطح یک پنل که از کنار می‌آید) — */
.mnav {
  --mnav-shift: -1; /* جهت ورود پنل؛ در RTL برعکس می‌شود */
  position: relative;
  overflow: hidden;
  transition: height .3s cubic-bezier(.4, 0, .2, 1);
}
[dir='rtl'] .mnav { --mnav-shift: 1; }

.mnav-panel { display: flex; flex-direction: column; }
.mnav-panel-root { transition: transform .3s cubic-bezier(.4, 0, .2, 1); }
.mnav.is-sub-open > .mnav-panel-root { transform: translateX(calc(var(--mnav-shift) * 100%)); }

.mnav-panel-sub {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 100%;
  width: 100%;
  background: var(--color-bg);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
  visibility: hidden;
}
.mnav-panel-sub.is-active {
  transform: translateX(calc(var(--mnav-shift) * 100%));
  visibility: visible;
}

.mnav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 11px 0;
  background: none;
  border: 0;
  text-align: start;
  font-size: 15px;
  color: var(--color-text);
  text-decoration: none;
}
.mnav-link:hover, .mnav-link:focus-visible { color: var(--color-accent); }
.mnav-chevron { flex: none; opacity: .55; }
[dir='rtl'] .mnav-chevron { transform: rotate(180deg); }

.mnav-back {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 0 12px;
  margin-block-end: 4px;
  background: none;
  border: 0;
  border-block-end: 1px solid var(--color-divider);
  text-align: start;
  font-weight: 800;
  font-family: var(--font-heading);
  color: var(--color-text);
}
[dir='rtl'] .mnav-back-icon { transform: rotate(180deg); }
.mnav-all { font-weight: 600; color: var(--color-accent); }

@media (prefers-reduced-motion: reduce) {
  .mnav, .mnav-panel-root, .mnav-panel-sub { transition: none; }
}

.site-search { width: 230px; }
.site-search .form-control { background: #fff; border-color: transparent; box-shadow: var(--shadow-sm); }
.site-search .form-control:focus { background: #fff; border-color: transparent; box-shadow: var(--shadow-sm), 0 0 0 0.2rem color-mix(in srgb, var(--color-accent) 18%, transparent); }

/* — mobile app header — */
.mobile-header { background: var(--color-bg); box-shadow: var(--shadow-sm); z-index: 1030; }
.mobile-header .site-logo { height: 46px; width: auto; display: block; margin: 0; }

/* — mobile bottom tab bar — */
.bottom-tabbar {
  position: fixed; bottom: 0; inset-inline: 0; z-index: 1040;
  background: var(--color-bg); box-shadow: var(--shadow-md);
  display: flex; justify-content: space-around; align-items: center;
  padding: 8px 8px calc(env(safe-area-inset-bottom, 0px) + 8px);
}
.bottom-tabbar .tab-item { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--color-neutral-500); font-size: 9px; }
.bottom-tabbar .tab-item.active { color: var(--color-accent); }
.mobile-content-offset { padding-bottom: 78px; }

/* — hero / gallery image treatment — */
.grayscale-hover { overflow: hidden; }
.grayscale-hover img, .grayscale-hover .ph-img { transition: filter .35s ease, transform .5s ease; }
.grayscale-hover:hover img, .grayscale-hover:hover .ph-img { filter: grayscale(1) contrast(1.08); transform: scale(1.06); }

/* — placeholder image (design used empty image-slots; we keep the same affordance) — */
.ph-img {
  width: 100%; height: 100%; min-height: 60px; display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(135deg, var(--color-neutral-200), var(--color-neutral-200) 10px, var(--color-neutral-100) 10px, var(--color-neutral-100) 20px);
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
  font-size: 11px; text-align: center; padding: 6px;
}
.ph-img.rounded-circle { border-radius: 50%; }
.cover-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* — gradient overlay used behind text on photos — */
.overlay-gradient { position: absolute; inset: 0; background: linear-gradient(0deg, var(--color-neutral-900) 55%, transparent); pointer-events: none; }
.overlay-gradient-side { position: absolute; inset: 0; background: linear-gradient(100deg, color-mix(in srgb, var(--color-accent-800) 88%, transparent) 0%, transparent 55%, color-mix(in srgb, var(--color-accent-2-800) 78%, transparent) 100%); }
.overlay-caption { position: absolute; inset-inline: 0; bottom: 0; padding: 14px 16px; background: color-mix(in srgb, var(--color-neutral-900) 42%, transparent); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); border-top: 1px solid color-mix(in srgb, #fff 15%, transparent); }
.badge-count { position: absolute; top: 10px; inset-inline-end: 10px; background: color-mix(in srgb, #000 45%, transparent); color: #fff; font-size: 10px; padding: 3px 9px; border-radius: 7px; }
.badge-ad { position: absolute; top: 12px; inset-inline-start: 12px; background: color-mix(in srgb, #000 45%, transparent); color: #fff; font-size: 10px; padding: 3px 8px; border-radius: 6px; }

/* — editor's note block — */
.editor-note { background: var(--color-accent); color: #fff; border-radius: var(--radius-lg); }

/* — کروسل «انتخاب سردبیر» داخل بلوک نارنجی — */
.epick-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-block-end: 22px;
}
.epick-head-icon { opacity: .9; }
.epick-heading {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(22px, 3.2vw, 34px);
  line-height: 1.25;
  color: #fff;
}
.epick-more { color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; opacity: .9; }
.epick-more:hover { color: #fff; opacity: 1; text-decoration: underline; }
.epick-nav { display: flex; gap: 8px; margin-inline-start: auto; }
.epick-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .12);
  color: #fff;
  transition: background .18s ease, opacity .18s ease;
}
.epick-btn:hover { background: rgba(255, 255, 255, .26); }
.epick-btn[disabled] { opacity: .35; cursor: default; }

.epick-track {
  /* تعداد کارت در هر نما — عرض کارت از روی همین حساب می‌شه، پس مستقل از عرض صفحه دقیق درمی‌آد. */
  --epick-per: 1.2;
  --epick-gap: 16px;
  display: flex;
  gap: var(--epick-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-block-end: 4px;
}
@media (min-width: 576px) { .epick-track { --epick-per: 2; } }
@media (min-width: 768px) { .epick-track { --epick-per: 3; } }
@media (min-width: 992px) { .epick-track { --epick-per: 4; } }
.epick-track::-webkit-scrollbar { display: none; }

.epick-card {
  flex: 0 0 auto;
  /* بدون min-width:0 آیتم فلکس از اندازه‌ی min-content تصویر (۴۸۰px) کوچک‌تر نمی‌شه
     و عرض تعیین‌شده نادیده گرفته می‌شه. */
  min-width: 0;
  width: calc((100% - (var(--epick-per) - 1) * var(--epick-gap)) / var(--epick-per));
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #fff;
  text-decoration: none;
}
.epick-thumb {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.epick-thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  background: rgba(255, 255, 255, .16);
}
.epick-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.epick-card:hover .epick-title { text-decoration: underline; }
.epick-date { font-size: 12px; opacity: .8; }

@media (max-width: 575.98px) {
  .epick-title { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .epick-track { scroll-behavior: auto; }
}

/* — article page (single.html) — */
.reading-progress { position: fixed; top: 0; inset-inline: 0; height: 3px; z-index: 1050; display: flex; justify-content: flex-start; pointer-events: none; }
.reading-progress-bar { height: 100%; width: 0%; background: var(--color-accent); }
/* تصویر شاخص خبر در صفحات داخلی: همیشه نسبت ۳:۲ (۶۰۰×۴۰۰) و بدون برش. اگر تصویر اصلی
   این نسبت را نداشته باشد به‌جای بریده‌شدن، با پس‌زمینهٔ روشن داخل کادر جا می‌گیرد. */
.article-hero-img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; background: var(--color-surface); }
.article-body p { font-size: 16px; line-height: 2; color: var(--color-text); }
/* بدون سایدبار، متن تمام عرض صفحه می‌شد و خط‌ها برای خواندن خیلی بلند. */
@media (min-width: 992px) { .article-body { max-width: 860px; margin-inline: auto; } }

/* — باکس نویسنده انتهای مطلب — */
.author-card {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 22px;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
}
.author-card-avatar {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-accent);
}
/* حرف اول نویسنده به‌عنوان جایگزین، اگر گراواتار لود نشد. */
.author-card-avatar::before {
  content: attr(data-initial);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 30px;
  color: #fff;
}
.author-card-avatar img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.author-card-body { min-width: 0; }
.author-card-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--color-accent);
  margin-block-end: 4px;
}
.author-card-name { font-family: var(--font-heading); font-weight: 800; font-size: 18px; margin: 0 0 6px; }
.author-card-bio { font-size: 14px; line-height: 1.85; color: var(--color-neutral-700); margin: 0; }
.author-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-block-start: 12px;
  font-size: 13px;
  color: var(--color-neutral-600);
}
.author-card-meta a { color: var(--color-accent-2); font-weight: 700; text-decoration: none; }
.author-card-meta a:hover { text-decoration: underline; }
@media (max-width: 575.98px) {
  .author-card { flex-direction: column; align-items: center; text-align: center; }
  .author-card-meta { justify-content: center; }
}

/* — سایدبار آرشیو: آخرین اخبار — */
.sidebar-latest-title {
  color: var(--color-accent);
  margin-block-end: 2px;
  padding-block-end: 10px;
  border-block-end: 1px solid var(--color-divider);
}
.sidebar-latest-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 12px;
  color: var(--color-text);
  text-decoration: none;
}
.sidebar-latest-thumb {
  width: 78px;
  height: 54px;
  flex: none;
  display: block;
  border-radius: 8px;
  object-fit: cover;
  font-size: 10px;
}
.sidebar-latest-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sidebar-latest-headline {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.7;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sidebar-latest-item:hover .sidebar-latest-headline { color: var(--color-accent); }
.sidebar-latest-date { font-size: 11.5px; color: var(--color-neutral-600); }

/* — آرشیو: باکس افقی خبر (عکس سمت شروع، متن سمت پایان) — */
.archive-item {
  display: flex;
  align-items: stretch;
  gap: 14px;
  height: 100%;
  padding: 12px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.archive-item:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
.archive-item-media { flex: 0 0 40%; max-width: 150px; }
.archive-item-thumb {
  width: 100%;
  height: 100%;
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  object-fit: cover;
  border-radius: 10px;
  font-size: 11px;
}
.archive-item-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding-block: 2px;
}
.archive-item-body .hero-kicker { margin: 0; }
.archive-item-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 15px;
  line-height: 1.65;
  margin: 0;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.archive-item:hover .archive-item-title { color: var(--color-accent); }
.archive-item-excerpt {
  font-size: 13px;
  line-height: 1.8;
  color: var(--color-neutral-700);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.archive-item-meta { font-size: 11.5px; color: var(--color-neutral-600); margin-block-start: auto; padding-block-start: 6px; }
@media (max-width: 575.98px) {
  .archive-item-media { flex-basis: 34%; }
  .archive-item-excerpt { display: none; }
}

/* — category page (category.html) — */.category-hero { background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-2) 100%); border-radius: var(--radius-lg); position: relative; overflow: hidden; }
.category-hero::after { content: ""; position: absolute; inset: 0; background-image: url('../img/news-texture.svg'); background-size: 260px 260px; opacity: .12; pointer-events: none; }

.category-pill-row { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.category-pill-row::-webkit-scrollbar { display: none; }
.category-pill {
  display: flex; align-items: center; gap: 8px; flex: none;
  padding: 10px 18px; border-radius: 999px;
  background: var(--color-surface); border: 1px solid var(--color-divider);
  color: var(--color-text); font-weight: 700; font-size: 13px; text-decoration: none;
  transition: color .2s ease, border-color .2s ease, transform .2s ease;
}
.category-pill svg { flex: none; }
.category-pill:hover { color: var(--color-accent); border-color: var(--color-accent); transform: translateY(-2px); }

.category-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; }

.category-row { text-decoration: none; color: inherit; }
.category-row h5 { transition: color .2s ease; }
.category-row:hover h5 { color: var(--color-accent); }

/* — archive page (archive.html) — */
.category-icon-badge { width: 52px; height: 52px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; }

.pagination .page-link {
  border: 1px solid var(--color-divider); color: var(--color-text); margin-inline-start: 4px;
  border-radius: var(--radius-sm) !important; min-width: 38px; text-align: center; background: var(--color-bg);
}
.pagination .page-item.active .page-link { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.pagination .page-item.disabled .page-link { color: color-mix(in srgb, var(--color-text) 35%, transparent); background: transparent; border-color: transparent; }
.pagination .page-link:hover { border-color: var(--color-accent); color: var(--color-accent); }
.pagination .page-item.active .page-link:hover { color: #fff; }

/* — newsletter band — */
.newsletter-band { background-color: var(--color-accent-2-700); background-image: url('../img/news-texture.svg'); background-size: 220px 220px; }
@media (min-width: 576px) {
  /* .flex-column بوت‌استرپ با !important ست شده، برای غلبه روش همینجا هم !important لازمه. */
  .newsletter-form { flex-direction: row !important; }
  .newsletter-form .btn { flex-shrink: 0; }
}

/* — video center (video.html) — */
.media-thumb { position: relative; }
.media-duration { position: absolute; bottom: 8px; inset-inline-start: 8px; background: var(--color-neutral-900); color: #fff; font-size: 10px; padding: 2px 7px; border-radius: 6px; }
.media-play-btn {
  position: absolute; top: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--color-neutral-900) 55%, transparent);
  transition: background .2s ease, transform .2s ease;
}
.media-thumb:hover .media-play-btn { background: var(--color-accent); transform: translate(-50%, -50%) scale(1.08); }
.media-new-badge { position: absolute; top: 8px; inset-inline-end: 8px; background: var(--color-accent); color: #fff; font-size: 9px; font-weight: 800; padding: 2px 7px; border-radius: 6px; }
.watch-progress { position: absolute; bottom: 0; inset-inline: 0; height: 3px; background: color-mix(in srgb, #fff 35%, transparent); }
.watch-progress span { display: block; height: 100%; background: var(--color-accent); }

.live-now-bar { background: linear-gradient(90deg, var(--color-neutral-900), color-mix(in srgb, var(--color-neutral-900) 80%, var(--color-accent))); border-radius: var(--radius-lg); transition: opacity .2s ease; }
.live-now-bar:hover { opacity: .92; }

.podcast-row { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; }
.podcast-row::-webkit-scrollbar { display: none; }
.podcast-card { flex: 0 0 200px; }

/* — contact page (contact.html) — */
.contact-info-card { background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); }

.social-icon-btn {
  width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--color-surface); border: 1px solid var(--color-divider); color: var(--color-text);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.social-icon-btn:hover { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }

.accordion-item { background: transparent; border: 0; border-bottom: 1px solid var(--color-divider); }
.accordion-button { background: transparent; color: var(--color-text); font-weight: 700; font-size: 14px; padding: 16px 4px; box-shadow: none !important; }
.accordion-button:not(.collapsed) { color: var(--color-accent); background: transparent; }
.accordion-body { padding: 0 4px 16px; color: color-mix(in srgb, var(--color-text) 75%, transparent); font-size: 13.5px; line-height: 1.9; }

/* — about page (about.html) — */
.timeline-item { position: relative; padding-inline-start: 26px; padding-bottom: 26px; border-inline-start: 2px solid var(--color-divider); margin-inline-start: 5px; }
.timeline-item:last-child { border-color: transparent; padding-bottom: 0; }
.timeline-dot { position: absolute; inset-inline-start: -7px; top: 2px; width: 12px; height: 12px; border-radius: 50%; border: 3px solid var(--color-bg); }

/* — 404 page (404.html) — */
.error-number {
  font-family: var(--font-heading); font-weight: 800; font-size: 110px; line-height: 1;
  color: var(--color-accent); direction: ltr;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-2) 100%);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .error-number { -webkit-background-clip: text; background-clip: text; color: transparent; }
}
@media (min-width: 768px) { .error-number { font-size: 150px; } }

/* — trending tabs (Bootstrap nav-pills restyled as a segmented control) — */
.seg-pills { border: 1px solid var(--color-divider); border-radius: var(--radius-md); overflow: hidden; display: inline-flex; align-self: flex-start; }
.seg-pills .nav-link {
  border-radius: 0; font-size: 13px; padding: 7px 12px; color: var(--color-text);
  border-inline-start: 1px solid var(--color-divider);
}
.seg-pills .nav-item:first-child .nav-link { border-inline-start: none; }
.seg-pills .nav-link.active { background: var(--color-accent); color: #fff; }

/* — footer — */
.site-footer-links a { color: var(--color-text); }
.site-footer-links a:hover { color: var(--color-accent); }
.footer-bottom { box-shadow: var(--shadow-sm); font-size: 13px; }

/* — divider — */
.hr-token { height: 2px; background: var(--color-divider); border: 0; }

/* — روتیتر (kicker): خط کوتاه، با فونت کوچیک‌تر و سبک‌تر از تیتر اصلی؛ اختیاریه، اگه
   سردبیر برای خبر ننوشته باشه اصلاً در HTML چاپ نمی‌شه (نگاه کنید به ganjnameh_the_hero_kicker). */
.hero-kicker {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--color-accent); font-weight: 600; font-size: 12px;
  letter-spacing: .01em; margin-bottom: 8px;
}
.hero-kicker::before { content: ""; width: 14px; height: 2px; background: var(--color-accent); flex: none; }

/* — bootstrap carousel tweaks: عکس بالا، کپشن (روتیتر+تیتر+متا) زیر عکس، نه روی عکس — */
.hero-carousel, .hero-carousel .carousel-inner, .hero-carousel .carousel-item { border-radius: var(--radius-lg); overflow: hidden; }
/* ستون اسلایدر توسط بوت‌استرپ هم‌قد بلندترین همسایه (مثلاً «پربازدیدترین‌ها») کشیده می‌شه؛
   این زنجیره‌ی flex باعث می‌شه خودِ اسلایدر هم تا همون ارتفاع کامل پر بشه. کپشن ارتفاع
   طبیعی خودش (بر اساس متن) رو نگه می‌داره و این عکسه که فضای اضافی رو پر می‌کنه —
   نه یک فضای خالی سفید دور متن. */
.hero-carousel { height: 100%; display: flex; flex-direction: column; background: var(--color-bg); }
.hero-carousel .carousel-inner { flex: 1; }
.hero-carousel .carousel-item { height: 100%; background: var(--color-bg); }
.hero-carousel .carousel-item.active { display: flex; flex-direction: column; }
.hero-carousel .carousel-item.active > a { display: flex; flex-direction: column; height: 100%; }
.hero-carousel .carousel-item .cover-img, .hero-carousel .carousel-item .ph-img { flex: 1 1 0; min-height: 200px; height: auto !important; }
.hero-caption-below { padding: 18px 24px; background: var(--color-bg); }
.hero-carousel .hero-caption-below { flex: none; }
.hero-caption-below .hero-title-clamp {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  color: var(--color-text);
}
/* عکس چون حالا ارتفاعش پویاست (پر کردن فضای اضافه‌ی هم‌قدسازی با همسایه‌ها)، دکمه‌ها و
   نقطه‌ها با درصد به‌جای پیکسل ثابت موقعیت می‌گیرن تا هر اندازه عکس باشه، همون‌جا بمونن. */
.hero-carousel .carousel-control-prev, .hero-carousel .carousel-control-next {
  width: 40px; height: 40px; top: 36%; bottom: auto; transform: translateY(-50%);
  background: color-mix(in srgb, var(--color-neutral-900) 55%, transparent); border-radius: 50%; opacity: 1;
}
.hero-carousel .carousel-control-prev { inset-inline-start: 14px; }
.hero-carousel .carousel-control-next { inset-inline-end: 14px; }
.hero-carousel .carousel-indicators { justify-content: flex-end; margin: 0; padding-inline-end: 16px; top: 62%; bottom: auto; }
.hero-carousel .carousel-indicators [data-bs-target] { box-sizing: border-box; width: 8px; height: 8px; margin: 0 3px; padding: 0; border: 0; border-radius: 50%; background: #fff; opacity: .6; }
.hero-carousel .carousel-indicators .active { background: var(--color-accent); opacity: 1; }

/* کارت‌های کناری اسلایدر: چون ستونشون هم مثل اسلایدر تا قد «پربازدیدترین‌ها» کشیده می‌شه،
   خودِ ۲ کارت هم به‌طور مساوی فضای اضافه رو بین‌شون تقسیم می‌کنن (نه یک فضای خالی ته ستون)،
   و داخل هر کارت هم عکس (نه کپشن) اون فضا رو پر می‌کنه. */
.hero-side-card { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; }
/* کارت‌های کنار اسلایدر: کادر تصویر تمام ارتفاع کارت را پر می‌کند؛ عکس کامل و بدون برش
   وسط می‌نشیند و فضای خالی اطرافش با نسخهٔ محو همان عکس پر می‌شود تا کارت خالی به‌نظر نرسد. */
.hero-side-media { position: relative; flex: 1 1 0; min-height: 90px; overflow: hidden; background: var(--color-surface); }
.hero-side-media-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: blur(16px) saturate(1.15); transform: scale(1.12); opacity: .9; }
.hero-side-media .cover-img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: contain; z-index: 1; }
.hero-side-card .ph-img { flex: 1 1 0; height: auto !important; min-height: 90px; }
.hero-side-card .hero-caption-below { flex: none; }

.mobile-hero-carousel .carousel-item { height: auto; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-bg); }
.mobile-hero-carousel .carousel-item .cover-img, .mobile-hero-carousel .carousel-item .ph-img { height: 300px !important; }
.mobile-hero-carousel .hero-caption-below { padding: 14px 16px 16px; }
.mobile-hero-carousel .carousel-indicators { position: static; margin: 0; padding: 10px 0; background: var(--color-bg); }
.mobile-hero-carousel .carousel-indicators [data-bs-target] { box-sizing: border-box; width: 6px; height: 6px; margin: 0 3px; padding: 0; border: 0; border-radius: 50%; background: var(--color-divider); opacity: 1; }
.mobile-hero-carousel .carousel-indicators .active { background: var(--color-accent); }

/* — gallery cards — */
.gallery-card { position: relative; display: block; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }

/* — scroll snap chips row (mobile category pills / media rows) — */
.chip-row { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.chip-row::-webkit-scrollbar { display: none; }
.chip-row .tag { flex: none; padding: 6px 14px; font-size: 12px; }

@media (max-width: 767.98px) {
  h1 { font-size: 26px; }
  h2 { font-size: 22px; }
}

/* ============================================================
   افزوده‌های اختصاصی نسخه‌ی وردپرسی
   ============================================================ */

/* بلاک‌کوت داخل متن خبر (چه Gutenberg چه ادیتور کلاسیک) با همون ظاهر «سخن سردبیر» */
.article-body blockquote {
  background: var(--color-accent); color: #fff; border-radius: var(--radius-lg);
  padding: 1.5rem; margin: 1.5rem 0; font-family: var(--font-heading); font-weight: 800;
  font-size: 19px; line-height: 1.6; border: 0;
}
.article-body blockquote p:last-child { margin-bottom: 0; }
.article-body blockquote cite { display: block; font-family: var(--font-body); font-weight: 400; font-size: 13px; opacity: .85; margin-top: .5rem; }

/* تصاویر/گالری استاندارد وردپرس داخل متن */
.article-body img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.article-body .wp-caption { max-width: 100%; }
.article-body .wp-caption-text { font-size: 12px; color: color-mix(in srgb, var(--color-text) 55%, transparent); text-align: center; margin-top: .5rem; }
.article-body .alignwide, .article-body .alignfull { max-width: 100%; }
.article-body ul, .article-body ol { padding-inline-start: 1.4rem; }

/* منوی موبایل آف‌کانواس: لینک‌های ساخته‌شده با wp_nav_menu */
.offcanvas-body .nav-link { padding: 0; }

/* ============================================================
   لینک کوتاه خبر — زیر متن مقاله، بالای باکس نویسنده
   کلیک روی باکس لینک رو کپی می‌کنه و توست «لینک کپی شد» رو نشون می‌ده.
   ============================================================ */
.shortlink-box {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-block-start: 20px;
  padding: 14px 16px;
  text-align: start;
  font-family: var(--font-body);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.shortlink-box:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-sm);
}
.shortlink-box:active { transform: translateY(1px); }

.shortlink-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  color: var(--color-accent);
}

.shortlink-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.shortlink-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--color-accent);
}
/* لینک لاتینه؛ با direction:ltr درست نمایش داده می‌شه و راست‌چینِ ظاهری می‌مونه. */
.shortlink-url {
  display: block;
  max-width: 100%;
  direction: ltr;
  text-align: right;
  unicode-bidi: isolate;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--color-neutral-600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shortlink-action {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--color-divider);
  background: var(--color-bg);
  color: var(--color-neutral-600);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.shortlink-box:hover .shortlink-action {
  color: var(--color-accent);
  border-color: color-mix(in srgb, var(--color-accent) 45%, transparent);
}

.shortlink-ico-check { display: none; }
.shortlink-box.is-copied { border-color: var(--color-accent-2); }
.shortlink-box.is-copied .shortlink-ico-copy { display: none; }
.shortlink-box.is-copied .shortlink-ico-check { display: block; color: var(--color-accent-2); }
.shortlink-box.is-copied .shortlink-action {
  color: var(--color-accent-2);
  border-color: color-mix(in srgb, var(--color-accent-2) 50%, transparent);
}

@media (max-width: 575.98px) {
  .shortlink-box { gap: 11px; padding: 12px 13px; }
  .shortlink-icon { width: 38px; height: 38px; }
  .shortlink-action { width: 34px; height: 34px; }
  .shortlink-url { font-size: 12px; }
}

/* توست «لینک کپی شد» — ثابت پایین صفحه، در هر دو تم روشن/تیره خوانا می‌مونه. */
.shortlink-toast {
  position: fixed;
  inset-inline: 0;
  bottom: 24px;
  width: max-content;
  max-width: calc(100% - 32px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--color-text);
  color: var(--color-bg);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 14px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
  z-index: 1080;
  transition: opacity .25s ease, transform .25s ease;
}
.shortlink-toast.is-visible { opacity: 1; transform: translateY(0); }
.shortlink-toast svg { flex-shrink: 0; color: var(--color-accent-300); }
.shortlink-toast.is-error { background: #c0392b; color: #fff; }
.shortlink-toast.is-error svg { color: #fff; }