/* ==========================================================================
   HERO AI — پل وردپرس و المنتور
   این فایل فقط تفاوت‌های مارک‌آپ وردپرس با نسخه HTML را جبران می‌کند.
   هیچ توکن جدیدی اینجا تعریف نمی‌شود؛ همه‌چیز از variables.css می‌آید.
   ========================================================================== */

/* ————————————————— پرش به محتوا ————————————————— */
.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 999;
  padding: 12px 20px;
  background: var(--surface);
  color: var(--text);
  border-radius: 0 0 var(--r-md) var(--r-md);
  box-shadow: var(--sh-md);
  font-weight: 500;
}
.skip-link:focus {
  inset-inline-start: 16px;
}

/* ————————————————— بازنشانی کانتینرهای المنتور ————————————————— */
/* المنتور کانتینر خودش را می‌سازد؛ عرض و پدینگ را با دیزاین سیستم هم‌تراز می‌کنیم. */
.elementor-section.elementor-section-boxed > .elementor-container,
.e-con > .e-con-inner {
  max-width: var(--container);
}

.elementor-widget-container > .heroai-widget {
  width: 100%;
}

/* ویجت‌های HERO AI نباید تایپوگرافی پیش‌فرض المنتور را ارث ببرند. */
.heroai-widget,
.heroai-widget * {
  font-family: 'Yekan Bakh', system-ui, sans-serif;
}

/* در ادیتور، ویجت خالی باید قابل انتخاب بماند. */
.elementor-editor-active .heroai-widget:empty::before {
  content: 'محتوایی برای نمایش انتخاب نشده است';
  display: block;
  padding: 32px;
  text-align: center;
  color: var(--text-3);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
}

/* ————————————————— مسیر راهنما ————————————————— */
.breadcrumbs {
  margin-bottom: var(--s-5);
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.breadcrumbs li + li::before {
  content: '/';
  margin-inline-end: var(--s-2);
  color: var(--text-3);
}
.breadcrumbs a {
  color: var(--text-2);
  text-decoration: none;
  transition: color var(--t-fast);
}
.breadcrumbs a:hover {
  color: var(--blue-500);
}
.breadcrumbs [aria-current='page'] {
  color: var(--text);
  font-weight: 500;
}

/* ————————————————— محتوای ویرایشگر ————————————————— */
.entry-content > * + * {
  margin-top: var(--s-4);
}
.entry-content h2 {
  margin-top: var(--s-7);
  font-size: var(--fs-xl);
}
.entry-content h3 {
  margin-top: var(--s-6);
  font-size: var(--fs-lg);
}
.entry-content p,
.entry-content li {
  line-height: 2.1;
  color: var(--text);
}
.entry-content img,
.entry-content iframe,
.entry-content video {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-md);
}
.entry-content figure {
  margin: var(--s-6) 0;
}
.entry-content figcaption {
  margin-top: var(--s-2);
  font-size: var(--fs-sm);
  color: var(--text-2);
  text-align: center;
}
.entry-content blockquote {
  margin: var(--s-6) 0;
  padding: var(--s-4) var(--s-5);
  border-inline-start: 3px solid var(--blue-500);
  background: var(--bg-sunken);
  border-radius: var(--r-md);
  color: var(--text-2);
}
.entry-content pre {
  direction: ltr;
  text-align: left;
  overflow-x: auto;
  padding: var(--s-4);
  background: var(--text);
  color: #E7E9EF;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
}
.entry-content code {
  direction: ltr;
  unicode-bidi: embed;
}
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.entry-content th,
.entry-content td {
  padding: var(--s-3);
  border: 1px solid var(--border);
  text-align: start;
}
.entry-content th {
  background: var(--bg-sunken);
  font-weight: 500;
}

/* اعداد، کد و کلید API همیشه چپ‌چین بمانند. */
.entry-content .ltr,
.entry-content pre,
.entry-content code,
.entry-content kbd {
  direction: ltr;
}

/* ————————————————— نظرات ————————————————— */
.comments-area {
  margin-top: var(--s-8);
}
.comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-4);
}
.comment-list .children {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding-inline-start: var(--s-5);
  border-inline-start: 2px solid var(--border);
  display: grid;
  gap: var(--s-4);
}
.comment-body {
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
}
.comment-meta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.comment-author-name {
  font-weight: 500;
}
.comment-date {
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.comment-respond {
  margin-top: var(--s-6);
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.comment-form label {
  display: block;
  margin-bottom: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.comment-form input[type='text'],
.comment-form input[type='email'],
.comment-form input[type='url'],
.comment-form textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.comment-form input:focus,
.comment-form textarea:focus {
  outline: none;
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px rgba(61, 123, 240, .14);
}
.comment-form p {
  margin-bottom: var(--s-4);
}

/* ————————————————— صفحه‌بندی وردپرس ————————————————— */
.wp-pagination {
  display: flex;
  justify-content: center;
  gap: var(--s-2);
  margin-top: var(--s-7);
}
.wp-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-2);
  text-decoration: none;
  transition: all var(--t-fast);
}
.wp-pagination .page-numbers:hover {
  border-color: var(--blue-500);
  color: var(--blue-500);
}
.wp-pagination .page-numbers.current {
  background: var(--grad-brand);
  border-color: transparent;
  color: var(--text-invert);
}

/* ————————————————— پوسته صفحه‌های ورود و ثبت‌نام ————————————————— */
.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--s-5);
  background: var(--bg);
}

/* ————————————————— ویجت‌های کناره ————————————————— */
.widget {
  padding: var(--s-5);
}
.widget-title {
  margin-bottom: var(--s-4);
  font-size: var(--fs-md);
}
.widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-3);
}
.widget a {
  color: var(--text-2);
  text-decoration: none;
}
.widget a:hover {
  color: var(--blue-500);
}

/* ————————————————— دسترس‌پذیری ————————————————— */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ————————————————— چاپ ————————————————— */
@media print {
  .site-header,
  .site-footer,
  .panel-sidebar,
  .panel-topbar,
  .bottom-nav,
  .breadcrumbs {
    display: none !important;
  }
}

/* ==========================================================================
   محدود کردن عرض ویجت‌های HERO AI
   در نسخه HTML هر بخش داخل <section class="container"> بود. اینجا همان قاعده
   مستقیم روی خود ویجت اعمال می‌شود، نه روی تنظیمات بخش المنتور. علتش این است
   که تنظیم بخش فقط روی صفحه‌های ازپیش‌ساخته اثر دارد؛ هر بخشی که بعداً دستی
   اضافه شود دوباره لبه‌تا‌لبه می‌شد. با این قاعده، ویجت در هر صفحه‌ای و با هر
   تنظیم بخشی، عرض درست را می‌گیرد.
   ========================================================================== */

.elementor-widget[data-widget_type^='heroai_'] > .elementor-widget-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-5);
}

/* ویجت‌هایی که پس‌زمینه تمام‌عرض خودشان را دارند از این قاعده مستثنا هستند —
   کانتینر داخلی‌شان را خودشان می‌سازند.

   انتخابگر عمداً همان شکل قاعده بالاست (کلاس + ویژگی) نه فقط کلاس ویجت:
   نسخه قبل با `.elementor-widget-heroai_hero` نوشته شده بود که یک درجه
   ویژگی کمتر داشت و قاعده عمومی رویش را می‌گرفت — به همین دلیل پس‌زمینه
   هیرو از دو طرف بریده می‌شد. */
.elementor-widget[data-widget_type^='heroai_hero'] > .elementor-widget-container {
  max-width: none;
  padding-inline: 0;
}

/* ستون و بخشی که هیرو داخلش است نباید پدینگ افقی بگذارد. */
.elementor-widget[data-widget_type^='heroai_hero'] {
  padding-inline: 0;
}

/* اگر ویرایشگر عمداً بخشی را تمام‌عرض خواست، این کلاس را روی بخش بگذارد. */
.elementor-section.heroai-bleed .elementor-widget[data-widget_type^='heroai_'] > .elementor-widget-container,
.e-con.heroai-bleed .elementor-widget[data-widget_type^='heroai_'] > .elementor-widget-container {
  max-width: none;
  padding-inline: 0;
}

/* در کانتینرهای تودرتو نباید پدینگ افقی دوبار جمع شود. */
.elementor-widget[data-widget_type^='heroai_'] .container {
  padding-inline: 0;
}

/* ————————————————— استثنای هیرو —————————————————
   هیرو تنها ویجتی است که ظرف بیرونی‌اش عمداً بی‌پدینگ است (بالاتر)، چون
   پس‌زمینه‌اش باید تمام‌عرض باشد و گودی را خودش با .container داخلی می‌سازد.
   ولی قاعده‌ی بالا همان .container داخلی را هم صفر می‌کرد، پس هیرو در عمل از
   هیچ طرف گودی نداشت و متنش به لبه‌ی صفحه می‌چسبید — روی موبایل کاملاً پیدا،
   و در واقع روی هر عرض کمتر از ۱۲۸۰ پیکسل.

   max-width هم اینجا دوباره اعلام می‌شود چون افزونه‌ی hero-ai یک .container
   عمومی از خودش دارد (assets/css/style.css) که روی همین عنصر می‌نشیند و عرض
   را ۶۴۰ یا ۱۲۸۰ می‌کند؛ نتیجه‌اش هیرویی بود که با بقیه‌ی بخش‌های صفحه تراز
   نمی‌شد. ریشه‌ی آن برخورد در خود افزونه است و کار همین‌جا نیست، ولی قالب
   نباید تراز خودش را به آن بسپارد. */
.elementor-widget[data-widget_type^='heroai_hero'] .container {
  max-width: var(--container);
  padding-inline: var(--s-5);
}

/* ==========================================================================
   مستندات — جلوگیری از سرریز بلوک کد
   یک آیتم گرید به‌صورت پیش‌فرض min-width: auto دارد، یعنی از عرض محتوایش
   کوچک‌تر نمی‌شود. یک خط کد بلند داخل <pre> ستون را از عرض شبکه بیرون
   می‌اندازد و کل صفحه به هم می‌ریزد. min-width: 0 این رفتار را برمی‌گرداند.
   ========================================================================== */

.docs-layout {
  min-width: 0;
}
.docs-layout > .docs-content,
.docs-layout > .docs-nav {
  min-width: 0;
}

.docs-content .code-block {
  max-width: 100%;
  overflow-x: auto;
}
.docs-content .code-block pre {
  direction: ltr;
  text-align: left;
  white-space: pre;
  overflow-x: auto;
  tab-size: 2;
}

/* جدول‌های مستندات هم نباید ستون را پهن کنند. */
.docs-content .table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

/* بلوک کد داخل هر ویجت HERO AI، نه فقط مستندات. */
.heroai-widget .code-block {
  max-width: 100%;
  overflow-x: auto;
}
.heroai-widget .code-block pre {
  direction: ltr;
  text-align: left;
  white-space: pre;
}

/* کنسول هیرو و کنسول کد هم همین‌طور. */
.heroai-widget .console-body {
  direction: ltr;
  text-align: left;
  overflow-x: auto;
}

/* ————————————————— بخش‌های چندستونه HERO AI —————————————————
   ویجت‌ها به‌صورت پیش‌فرض عرض کانتینر می‌گیرند. وقتی دو ویجت در دو ستون
   کنار هم قرار می‌گیرند، این محدودیت باید برداشته شود وگرنه هر ستون
   ۱۲۰۰ پیکسل عرض می‌خواهد و کنار هم جا نمی‌شوند. ————————————————— */

.elementor-section:has(> .elementor-container > .elementor-column + .elementor-column)
  .elementor-widget[data-widget_type^='heroai_'] > .elementor-widget-container {
  max-width: none;
  padding-inline: 0;
}

/* عرض کانتینر روی خود بخش چندستونه اعمال می‌شود، نه روی هر ویجت. */
.elementor-section:has(> .elementor-container > .elementor-column + .elementor-column)
  > .elementor-container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-5);
}

/* پشتیبان برای مرورگرهایی که :has ندارند. */
.heroai-cols > .elementor-container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-5);
}
.heroai-cols .elementor-widget[data-widget_type^='heroai_'] > .elementor-widget-container {
  max-width: none;
  padding-inline: 0;
}

/* ستون کناری تماس: کارت‌ها زیر هم با فاصله یکسان. */
.heroai-contact-grid.is-start {
  gap: var(--s-4);
}

/* نوار وضعیت در حالت هشدار. */
.status-banner.is-warn {
  background: rgba(224, 138, 23, .1);
  border-color: rgba(224, 138, 23, .35);
  color: var(--warning);
}

/* ستون‌های بخش چندستونه از بالا هم‌تراز شوند، نه کشیده تا ته ستون بلندتر. */
.heroai-cols > .elementor-container {
  align-items: flex-start;
}