/* ============================================================
   استایلِ مادرِ صفحاتِ نوشتاری — iraqbus.ir
   ------------------------------------------------------------
   خواستهٔ مالک ۲۰۲۶-۰۸-۱۲: «همهٔ صفحاتِ نوشتاری باید یک استایلِ
   مادر داشته باشند — چه تازه، چه قدیمی. پدینگ و مارجینِ استاندارد،
   اصولِ راست‌نویسی، و جدول‌هایی که خشک نباشند.»

   اندازه‌گیریِ پیش از نوشتن: از ۱۰۰ صفحهٔ فارسی، ۲۳ تا هیچ استایلِ
   مادری نداشتند — و بدشانسی اینکه همان‌ها مهم‌ترین صفحاتِ کسب‌وکار
   بودند (قیمت اتوبوس، اتوبوس دربستی، حمل‌ونقل، ویزا، کاپوتاژ).
   جدول‌ها هم استایلِ درون‌خطیِ خشک داشتند: border-collapse بدونِ
   هیچ کادر، فاصله یا تفکیکِ سطر.

   ── سه قاعدهٔ این فایل ──
   ۱) فقط **می‌افزاید**. هیچ رنگ یا فونتی از تمِ سایت را عوض نمی‌کند؛
      از همان متغیرهای موجود استفاده می‌کند تا تغییرِ تم این‌جا هم
      اثر کند.
   ۲) ساختارِ صفحه‌ها کلاس ندارد (main > section خالی)، پس انتخابگرها
      ساختاری‌اند نه کلاسی — وگرنه صفحاتِ قدیمی جا می‌ماندند.
   ۳) هیچ‌جا عرضِ ثابتِ پیکسلی نیست؛ همه‌چیز با clamp و درصد، تا در
      هر رزولیشنی بشکند بدونِ اینکه بپاشد.
   ============================================================ */

/* ── ۱) ریتمِ عمودی و عرضِ ستونِ خوانا ───────────────────────────
   عرضِ ستون بر حسبِ نویسه بسته می‌شود نه پیکسل: چشم در هر سطر
   بیش از ~۷۵ نویسه را راحت دنبال نمی‌کند و فارسی هم فشرده‌تر است. */
/* ⚠ اصلاحِ ۲۰۲۶-۰۸-۱۲ — «انیمیشنِ صفحهٔ اصلی کوچک شد».
   نسخهٔ اولِ این قاعده به **همهٔ** فرزندانِ هر بخش عرضِ خوانا می‌داد؛
   یعنی صحنهٔ متحرکِ هدر و اسلایدر هم مثلِ یک پاراگراف جمع می‌شدند.
   حالا فقط عناصرِ **متنی** محدود می‌شوند؛ هر چیزِ دیگری (صحنه،
   اسلایدر، شبکهٔ کارت، جدول، تصویر) آزاد است. */
main > section:not(.hero):not(.page-hero):not([class*="slider"]) {
  padding-block: clamp(28px, 5vw, 56px);
  padding-inline: clamp(16px, 4vw, 28px);
}
main > section > :is(p, h1, h2, h3, h4, h5, ul, ol, dl, blockquote),
main > section > .container > :is(p, h1, h2, h3, h4, h5, ul, ol, dl, blockquote) {
  max-width: 74ch;
  margin-inline: auto;
}
/* بخش‌های تمام‌عرض هرگز محدود نمی‌شوند */
main > section.hero, main > section.page-hero,
main .hero-slides, main .kg-hero-scene, main .hero-slide {
  max-width: none !important;
}

/* ── ۲) مقیاسِ تیتر ─────────────────────────────────────────────
   نسبت‌ها ثابت‌اند تا سلسله‌مراتب در هر عرضی حفظ شود. */
main h1:not(nav *):not(header *):not(footer *):not(.kg-tb *):not(.kg-bar *) {
  font-size: clamp(25px, 4.4vw, 38px);
  line-height: 1.35;
  font-weight: 800;
  margin-block: 0 clamp(10px, 1.6vw, 16px);
  letter-spacing: 0;            /* فارسی هرگز فاصلهٔ حرفی نمی‌گیرد */
}
main h2:not(nav *):not(header *):not(footer *):not(.kg-tb *):not(.kg-bar *) {
  font-size: clamp(19px, 2.7vw, 26px);
  line-height: 1.45;
  font-weight: 800;
  margin-block: clamp(26px, 3.4vw, 40px) clamp(8px, 1.2vw, 14px);
}
main h3:not(nav *):not(header *):not(footer *):not(.kg-tb *):not(.kg-bar *) {
  font-size: clamp(16.5px, 2vw, 19px);
  line-height: 1.5;
  font-weight: 700;
  margin-block: clamp(18px, 2.4vw, 26px) 8px;
}
/* تیترِ پشتِ سرِ هم نباید فاصلهٔ دوبرابر بگیرد */
main h2 + h3, main h1 + h2 { margin-top: clamp(10px, 1.4vw, 16px); }

/* ── ۳) متنِ بدنه و قواعدِ راست‌نویسی ───────────────────────────
   • هرگز justify: در فارسی «رودخانهٔ سفید» می‌سازد و خواندن را کند
     می‌کند. text-align:start یعنی راست در فارسی و چپ در انگلیسی.
   • ارتفاعِ سطر برای فارسی باید بلندتر از لاتین باشد (کشیدگیِ حروف).
   • عدد و نشانی و تلفن با bdi/bdo جهتشان حفظ می‌شود. */
/* ⚠ سدِ چرمِ سایت (۲۰۲۶-۰۸-۱۲).
   شکایتِ مالک: «واردِ صفحهٔ ثبت‌نام اربعین می‌شوم، بالای هر منو یک
   آیکون می‌آید و زیرش لینک — کلاً دفرمه می‌شود.»
   علت ساختاری بود: در آن صفحه <header> **داخلِ <main>** قرار گرفته،
   پس قواعدِ متنیِ این فایل روی خودِ منو نشستند و <li>های ناوبری
   نقطه‌گذاریِ فهرست و پدینگ گرفتند.
   حالا هر قاعدهٔ متنی صریحاً از منو، هدر، پاورقی، نوارِ برند و نوارِ
   اقدام مستثناست — چه ساختارِ صفحه درست باشد چه نباشد. */
main p:not(nav *):not(header *):not(footer *):not(.kg-tb *):not(.kg-bar *), main li:not(nav *):not(header *):not(footer *):not(.kg-tb *):not(.kg-bar *) {
  font-size: clamp(15px, 1.15vw, 16.5px);
  line-height: 1.95;
  text-align: start;
  overflow-wrap: break-word;
}
main p:not(nav *):not(header *):not(footer *):not(.kg-tb *):not(.kg-bar *) { margin-block: 0 1em; }
main p.lead {
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.85;
  opacity: .92;
}
main :is(ul, ol):not(nav *):not(header *):not(footer *):not(.kg-tb *):not(.kg-bar *) {
  margin-block: 0 1em;
  padding-inline-start: 1.35em;
}
main li:not(nav *):not(header *):not(footer *):not(.kg-tb *):not(.kg-bar *) { margin-block: .35em; }
/* ناوبری هرگز نقطه‌گذاریِ فهرست نمی‌گیرد — حتی اگر داخلِ main باشد.
   ⚠ چرا !important: مقصرِ واقعی یک قاعدهٔ قدیمی در redesign.css است —
   «main ul:not(...):not(...)…» با چندین :not که ویژگیِ بالایی می‌سازد
   و به هر فهرستِ داخلِ main پدینگ می‌دهد. در صفحهٔ ثبت‌نامِ اربعین که
   <header> داخلِ <main> است، همان قاعده منو را جابه‌جا می‌کرد.
   این سد فقط چرمِ سایت را هدف می‌گیرد، پس هیچ محتوایی را نمی‌شکند. */
main :is(header, nav, footer) :is(ul, ol) {
  list-style: none !important;
  padding-inline-start: 0 !important;
  padding-inline-end: 0 !important;
  margin: 0 !important;
}
main :is(header, nav, footer) li {
  list-style: none !important;
  margin: 0 !important;
  padding-inline-start: 0 !important;
}
main li > b:first-child { margin-inline-end: .25em; }
main strong, main b { font-weight: 700; }

/* عدد و لاتینِ داخلِ متنِ فارسی نباید جهت را بشکند */
main :is(bdi, code, .num, [data-rt], [data-zp], [data-dep]) {
  unicode-bidi: isolate;
}

/* ── ۴) جدولِ مدرن ─────────────────────────────────────────────
   استایلِ درون‌خطیِ صفحه‌ها فقط width/border-collapse/margin/font-size
   را می‌گیرد؛ بقیه آزاد است. پس این‌جا با ظرافت کامل می‌کنیم بدونِ
   جنگِ !important. */
main table {
  border-collapse: separate !important;
  border-spacing: 0;
  width: 100%;
  font-size: clamp(13.5px, 1.05vw, 15px);
  line-height: 1.7;
  border: 1px solid var(--line, #e3ddcd);
  border-radius: 14px;
  overflow: hidden;                    /* تا گوشه‌ها واقعاً گرد شوند */
  background: var(--white, #fff);
  box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 8px 24px -18px rgba(0,0,0,.25);
}
main table :is(th, td) {
  padding: 11px 14px;
  text-align: start;
  vertical-align: middle;
  border-block-start: 1px solid var(--line, #e3ddcd);
}
/* ردیفِ اول کادرِ بالا نمی‌خواهد — کادرِ خودِ جدول کافی است */
main table tr:first-child :is(th, td) { border-block-start: 0; }
main table th {
  /* ⚠ رنگ صریح، نه ارثی (۲۰۲۶-۰۸-۱۲): اندازه‌گیری با مرورگر نشان داد
     سرستون «سفید روی روشن» بود — نسبتِ خوانایی ۱٫۱ در برابرِ حدِ ۴٫۵.
     رنگش را از یک قاعدهٔ قدیمیِ هدرِ تیره به ارث می‌برد. */
  background: var(--paper-2, #f7f4ec) !important;
  color: var(--ink, #16211c) !important;
  font-weight: 800;
  white-space: nowrap;
  position: sticky; top: 0; z-index: 1;   /* در جدولِ بلند سرستون می‌مانَد */
}
/* سلولِ داده هم رنگش صریح باشد تا هیچ قاعدهٔ تیره‌ای رویش ننشیند */
main table td { color: var(--ink, #16211c); }
/* راه‌راهِ ملایم — خواندنِ سطر را آسان می‌کند بدونِ شلوغی */
main table tr:nth-child(even) td { background: color-mix(in srgb, var(--paper-2, #f7f4ec) 45%, transparent); }
main table tr:hover td { background: color-mix(in srgb, var(--gold, #c9a227) 7%, transparent); }
/* ⚠ هم‌ترازیِ ستون‌ها (اصلاحِ ۲۰۲۶-۰۸-۱۲).
   شکایتِ مالک: «در جدول‌ها تایتل سمت راست است و اعداد در مرکز — قیمت‌ها
   و تایتل زیرِ هم نیستند.» درست بود و ایرادش مالِ همین فایل بود: من
   دادهٔ ستون‌ها را وسط‌چین کردم ولی سرستون‌ها راست‌چین ماندند، پس هیچ
   ستونی زیرِ سرستونش ننشست. حالا **سرستون و دادهٔ همان ستون یک تراز
   دارند**: ستونِ اول (عنوانِ سطر، متنِ بلند) راست، بقیه وسط. */
main table td:first-child { font-weight: 600; text-align: start; }
main table th:first-child { text-align: start !important; }
main table :is(th, td):not(:first-child) { text-align: center !important; }

/* ظرفِ اسکرول: در موبایل جدول نباید صفحه را پهن کند */
main div[style*="overflow-x"], main .kg-tblwrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-block: clamp(12px, 2vw, 20px);
  border-radius: 14px;
}
/* اشارهٔ دیداری که جدول قابلِ کشیدن است */
@media (max-width: 640px) {
  main div[style*="overflow-x"]::after, main .kg-tblwrap::after {
    content: "◂ برای دیدنِ ستون‌های بیشتر بکشید";
    display: block; padding: 6px 12px 2px;
    font-size: 11.5px; color: var(--muted, #6b7873);
  }
}

/* ── ۵) عناصرِ دیگرِ متن ────────────────────────────────────── */
main blockquote {
  margin: clamp(16px, 2.2vw, 24px) 0;
  padding: 14px 18px;
  border-inline-start: 3px solid var(--gold, #c9a227);
  background: var(--paper-2, #f7f4ec);
  border-radius: 0 12px 12px 0;
}
main hr {
  border: 0; height: 1px; margin-block: clamp(24px, 3vw, 36px);
  background: linear-gradient(90deg, transparent, var(--line, #e3ddcd), transparent);
}
main a:not([class]) {
  color: var(--g-800, #8a6d16);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
main a:not([class]):hover { text-decoration-thickness: 2px; }
main img { max-width: 100%; height: auto; border-radius: 12px; }

/* ── ۶) هدرِ واکنش‌گرا در هر رزولیشن ────────────────────────────
   خواستهٔ مالک: «هدر باید با هر رزولیشنی واکنش‌گرا باشد.»
   اندازه‌گیریِ قبلی نشان داد ردیفِ نوارِ برند در ۱۱۸۰ پیکسل دقیقاً
   پر می‌شد — یعنی صفر لقی — و هر تغییرِ کوچکی می‌شکاندش. این پله‌ها
   به‌جای شکستن، مرتب جمع می‌کنند. */
@media (max-width: 1180px) {
  header nav > ul { gap: 2px; }
  header nav > ul > li > a { padding-inline: 9px; font-size: 13.5px; }
}
@media (max-width: 1024px) {
  header nav > ul > li > a { padding-inline: 7px; font-size: 13px; }
}
/* زیرمنو هرگز نباید از لبهٔ صفحه بیرون بزند */
main, body { overflow-x: clip; }
header .submenu {
  max-width: min(92vw, 320px);
  max-height: min(70vh, 480px);
  overflow-y: auto;
}

/* ── ۷) چاپ — صفحهٔ قیمت زیاد چاپ می‌شود ─────────────────────── */
@media print {
  header, footer, .kg-tb, .kg-cta-box, .kg-related { display: none !important; }
  main > section { padding-block: 10px; }
  main table { box-shadow: none; }
  main a:not([class])::after { content: " (" attr(href) ")"; font-size: 11px; }
}

/* ── ۸) کادرِ «ثبت‌نام اربعین هنوز باز نشده» ─────────────────────
   خواستهٔ مالک: محتوا بماند، اقدام بسته شود — با حفظِ سئو و گرفتنِ
   سرنخِ فروش. طراحی عمداً آرام است: خبر می‌دهد، داد نمی‌زند. */
.kg-arb {
  margin: clamp(18px, 3vw, 30px) auto;
  padding: clamp(18px, 3vw, 26px);
  max-width: 74ch;
  border: 1px solid color-mix(in srgb, var(--gold, #c9a227) 40%, var(--line, #e3ddcd));
  border-radius: 16px;
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--gold, #c9a227) 7%, var(--white, #fff)),
              var(--white, #fff));
}
.kg-arb-t { font-size: clamp(17px, 2.2vw, 21px); font-weight: 800; margin: 0 0 8px; }
.kg-arb-n { margin: 0 0 10px; line-height: 1.9; }
.kg-arb-when { margin: 0 0 12px; font-size: 14px; color: var(--muted, #6b7873); }
.kg-arb-f { display: flex; flex-wrap: wrap; gap: 8px; }
.kg-arb-f input {
  flex: 1 1 180px; min-width: 0; padding: 11px 13px;
  border: 1px solid var(--line, #e3ddcd); border-radius: 11px;
  font: inherit; font-size: 15px; background: var(--white, #fff);
}
.kg-arb-f input:focus { outline: 2px solid var(--gold, #c9a227); outline-offset: 1px; }
.kg-arb-f button {
  flex: 0 0 auto; padding: 11px 22px; border: 0; border-radius: 11px;
  background: var(--gold, #c9a227); color: #1b1508;
  font: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
}
.kg-arb-f button:disabled { opacity: .6; cursor: default; }
.kg-arb-msg:empty { display: none; }
.kg-arb-msg { margin: 10px 0 0; font-size: 14px; font-weight: 600; }
.kg-arb-ch {
  display: inline-block; margin-top: 10px; font-size: 14px;
  color: var(--g-800, #8a6d16); text-decoration: underline; text-underline-offset: 3px;
}
@media (max-width: 520px) { .kg-arb-f button { flex: 1 1 100%; } }

/* ── ۹) ارتفاعِ صحنهٔ صفحهٔ اصلی ─────────────────────────────────
   شکایتِ مالک ۲۰۲۶-۰۸-۱۲: «کاربر به مطالب دسترسی ندارد و فقط دارد
   انیمیشن می‌بیند.» اندازه‌گیری تأییدش کرد: در لپ‌تاپِ ۷۶۸ پیکسلی،
   نوارِ برند + هدر + صحنه با هم ~۷۴٪ از صفحهٔ اول را می‌گرفتند، پس
   اولین جملهٔ محتوا زیرِ خطِ دید می‌ماند.
   ارتفاع بر حسبِ **ارتفاعِ خودِ نمایشگر** بسته می‌شود نه عددِ ثابت،
   تا در هر صفحه‌ای نسبتِ درست بماند و همیشه جای محتوا باز شود. */
/* ⚠ ویژگیِ بالا لازم است: قاعده‌های موجود روی «.hero» با همان وزن
   می‌نشستند و ارتفاع عوض نمی‌شد. با «section.hero.has-scene» وزن بالا
   می‌رود و این یکی برنده می‌شود. */
/* ⚠ اصلاحِ ۲۰۲۶-۰۸-۱۲ب (شکایتِ مالک: «اتوبوس و جمعیت دیده نمی‌شوند،
   فقط پرچم»). ارتفاع فقط به vh بسته بود، ولی خودِ صحنه با **عرضِ**
   صفحه بزرگ می‌شود (svg با slice تا پوششِ کامل کِش می‌آید). پس هرچه
   نمایشگر عریض‌تر، تصویر بزرگ‌تر و نوار همان‌قدر کوتاه — و پایینِ
   تصویر، یعنی همان‌جا که اتوبوس و آدم‌ها هستند، بیرون می‌افتاد.
   اندازه‌گیری: در ۱۳۶۶ نخل‌ها تا ۴۶۹ می‌آمدند و نوار هم ۴۶۹ تمام
   می‌شد (لبِ‌مرز)؛ در ۱۹۲۰ نخل‌ها تا ۵۳۷ و در ۲۵۶۰ تا ۶۱۳ — یعنی
   کاملاً زیرِ نوار. حالا ارتفاع با عرض هم‌مقیاس می‌شود (۲۵vw) و
   سقفِ ۴۰vh نمی‌گذارد روی نمایشگرِ کوتاه دوباره جای محتوا را بگیرد. */
section.hero, section.hero.has-scene, .hero.has-scene {
  aspect-ratio: auto !important;
  height: clamp(240px, min(25vw, 40vh), 560px) !important;
  min-height: 0 !important;
  max-height: none !important;
  padding-block: 0 !important;
}
@media (max-width: 640px) {
  section.hero, section.hero.has-scene, .hero.has-scene {
    height: clamp(180px, 30vh, 250px) !important;
  }
}
/* عنوانِ روی صحنه با ارتفاعِ کمتر هم باید جا شود */
.hero .hero-caption, .hero-inner { padding-block: clamp(8px, 1.6vh, 18px); }