/* =====================================================================
 * Karname Editor Content Components
 * ---------------------------------------------------------------------
 * استایل مشترک المان‌های تولید محتوا (هایلایت، دکمه، هشدار، لیست تیک‌دار)
 * این فایل هم در فرانت‌اند و هم داخل خود ویرایشگر TinyMCE لود می‌شود
 * تا نویسنده دقیقاً همان چیزی را ببیند که روی سایت منتشر می‌شود.
 *
 * پالت رنگ بر اساس tailwind.config.js قالب:
 *   primary  #00A754 | secondary #694FB4
 *   error    #CD0000 (surface #FFF4F4) | warning #FA6B00 (surface #FFF1E5)
 *   info     #006ED8 (surface #EBF9FC) | success #2EB974 (surface #EBF8F1)
 *   assistive#FFCE32
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * جدول‌های محتوا — تمام‌عرض و ریسپانسیو (اسکرول افقی روی صفحه‌های کوچک)
 * wrapper با کلاس .knm-table-scroll توسط اسکریپت قالب دور هر جدول قرار می‌گیرد.
 * ------------------------------------------------------------------- */
/* width:100% با !important تا روی عرض‌های اینلاینِ ویرایشگر (مثل 48%) غالب شود.
   table-layout:auto تا ستون‌ها به‌اندازهٔ محتوا و خوانا باشند: جدول‌های ساده کامل
   داخل صفحه جا می‌شوند و جدول‌های خیلی عریض به‌جای فشرده‌شدن، اسکرول افقی می‌خورند. */
.main-article-content table {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: auto !important;
  border-collapse: collapse;
}
/* فقط وقتی یک «کلمه» از ستون بلندتر باشد بشکند (نه شکستنِ زشتِ وسط‌کلمه) */
.main-article-content table th,
.main-article-content table td {
  overflow-wrap: break-word;
  word-break: normal;
  padding: 8px 6px;
}
@media (max-width: 480px) {
  .main-article-content table { font-size: 13px; }
  .main-article-content table th,
  .main-article-content table td { padding: 6px 5px; }
}
/* wrapper فقط به‌عنوان محافظِ نهایی؛ اگر جدولی واقعاً جا نشد به‌جای شکستنِ صفحه اسکرول می‌خورد */
.knm-table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 20px 0;
}
.knm-table-scroll > table {
  margin: 0;
}

/* ---------------------------------------------------------------------
 * 1) متن هایلایت‌شده  ——  <mark class="knm-hl knm-hl--yellow">
 * ------------------------------------------------------------------- */
.knm-hl {
  padding: 0.05em 0.35em;
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  font-weight: 700;
  background-color: #fff3b0;
  color: #202021;
}
.knm-hl--yellow { background-color: #fff3b0; color: #6b5900; }
.knm-hl--pink   { background-color: #ffe0e0; color: #9b1c1c; }
.knm-hl--green  { background-color: #d9f5e6; color: #05663a; }
.knm-hl--blue   { background-color: #def0fb; color: #0b4a86; }
.knm-hl--orange { background-color: #ffe8d4; color: #9a4a00; }
.knm-hl--purple { background-color: #ebe6f7; color: #4a3690; }

/* ---------------------------------------------------------------------
 * 2) دکمه (CTA لینک‌دار)  ——  <a class="knm-btn knm-btn--primary knm-btn--md">
 * ------------------------------------------------------------------- */
.knm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  font-weight: 700;
  line-height: 1.4;
  border-radius: 10px;
  text-decoration: none !important;
  border: 2px solid transparent;
  transition: filter .2s ease, background-color .2s ease, color .2s ease;
  cursor: pointer;
}
.knm-btn:hover { filter: brightness(0.94); }

/* رنگ‌ها — حالت پُر */
.knm-btn--primary   { background-color: #00A754; color: #fff !important; border-color: #00A754; }
.knm-btn--secondary { background-color: #694FB4; color: #fff !important; border-color: #694FB4; }
.knm-btn--danger    { background-color: #CD0000; color: #fff !important; border-color: #CD0000; }
.knm-btn--info      { background-color: #006ED8; color: #fff !important; border-color: #006ED8; }
.knm-btn--dark      { background-color: #212121; color: #fff !important; border-color: #212121; }

/* حالت خط‌دار (outline) */
.knm-btn--outline.knm-btn--primary   { background:transparent; color:#00A754 !important; border-color:#00A754; }
.knm-btn--outline.knm-btn--secondary { background:transparent; color:#694FB4 !important; border-color:#694FB4; }
.knm-btn--outline.knm-btn--danger    { background:transparent; color:#CD0000 !important; border-color:#CD0000; }
.knm-btn--outline.knm-btn--info      { background:transparent; color:#006ED8 !important; border-color:#006ED8; }
.knm-btn--outline.knm-btn--dark      { background:transparent; color:#212121 !important; border-color:#212121; }
.knm-btn--outline:hover { color:#fff !important; }
.knm-btn--outline.knm-btn--primary:hover   { background:#00A754; }
.knm-btn--outline.knm-btn--secondary:hover { background:#694FB4; }
.knm-btn--outline.knm-btn--danger:hover    { background:#CD0000; }
.knm-btn--outline.knm-btn--info:hover      { background:#006ED8; }
.knm-btn--outline.knm-btn--dark:hover      { background:#212121; }

/* سایزها */
.knm-btn--sm { font-size: 13px; padding: 7px 16px; border-radius: 8px; }
.knm-btn--md { font-size: 15px; padding: 11px 24px; }
.knm-btn--lg { font-size: 17px; padding: 15px 32px; border-radius: 12px; }

/* تمام‌عرض */
.knm-btn--block { display: flex; width: 100%; }

/* بلوک دربرگیرنده‌ی دکمه (برای وسط‌چین کردن) */
.knm-btn-wrap { margin: 24px 0; text-align: center; }

/* ---------------------------------------------------------------------
 * 3) باکس هشدار (Alert / Note)  ——  <div class="knm-alert knm-alert--note">
 * ------------------------------------------------------------------- */
.knm-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 24px 0;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: 14px;
  line-height: 2;
  font-weight: 500;
}
/* آیکون از طریق CSS رندر می‌شود (نه HTML) تا ویرایشگر حذفش نکند */
.knm-alert::before {
  content: '';
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 4px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.knm-alert--no-icon::before { display: none; }
.knm-alert__body { flex: 1; min-width: 0; }
.knm-alert__body > *:first-child { margin-top: 0; }
.knm-alert__body > *:last-child  { margin-bottom: 0; }
.knm-alert__title { font-weight: 700; display: block; margin-bottom: 4px; }

/* نوع‌ها بر اساس رنگ‌های قالب (رنگ آیکون داخل خود SVG بیک شده) */
.knm-alert--note    { background:#fbf4dd; border-color:#f0e2b4; color:#8a6d2f; }
.knm-alert--note::before    { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a227' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3C/svg%3E"); }
.knm-alert--info    { background:#EBF9FC; border-color:#6BC2ED; color:#0b4a86; }
.knm-alert--info::before    { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230078FB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E"); }
.knm-alert--success { background:#EBF8F1; border-color:#B8EFD4; color:#0a6b41; }
.knm-alert--success::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232EB974' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E"); }
.knm-alert--warning { background:#FFF1E5; border-color:#FEA764; color:#9a4a00; }
.knm-alert--warning::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF7700' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }
.knm-alert--danger  { background:#FFF4F4; border-color:#FD5749; color:#a11414; }
.knm-alert--danger::before  { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DF1D17' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E"); }

/* ---------------------------------------------------------------------
 * ویدئوی ریسپانسیو (آپارات و هر iframe داخل .karname-video)
 * ------------------------------------------------------------------- */
.karname-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 24px 0;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
}
.karname-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* پشتیبان برای مرورگرهای قدیمی بدون aspect-ratio */
@supports not (aspect-ratio: 16 / 9) {
  .karname-video { height: 0; padding-bottom: 56.25%; }
}

/* ---------------------------------------------------------------------
 * 4) لیست تیک‌دار سفارشی  ——  <ul class="knm-list knm-list--check">
 * ------------------------------------------------------------------- */
.knm-list {
  list-style: none !important;
  margin: 20px 0;
  padding: 0 !important;
}
.knm-list li {
  position: relative;
  padding-right: 30px;
  margin-bottom: 12px;
  line-height: 2;
  list-style: none !important;
}
.knm-list li::before {
  position: absolute;
  right: 0;
  top: 0.55em;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  font-size: 12px;
  font-weight: 900;
  border-radius: 50%;
  content: "\2714"; /* ✔ */
}
/* تیک سبز (پیش‌فرض) */
.knm-list--check li::before  { color:#fff; background:#2EB974; }
/* تیک آبی */
.knm-list--info li::before   { color:#fff; background:#006ED8; }
/* ضربدر قرمز */
.knm-list--cross li::before  { content:"\2716"; color:#fff; background:#CD0000; }
/* فلش/نقطه‌ی طلایی */
.knm-list--dot li::before    { content:"\2605"; color:#fff; background:#FFCE32; }

/* حالت بدون پس‌زمینه‌ی دایره (فقط علامت رنگی) */
.knm-list--plain li::before  { background:transparent !important; color:#00A754; font-size:15px; top:0.4em; }