:root{
  --nf-navy:#22303b;
  --nf-navy-2:#182129;
  --nf-blue:#0060c2;
  --nf-blue-dark:#004690;
  --nf-teal:#00a19a;
  --nf-bg:#ffffff;
  --nf-bg-alt:#f5f7f9;
  --nf-text:#22303b;
  --nf-text-soft:#5b6b76;
  --nf-border:#e6eaed;
  --nf-radius:14px;
}

body{
  font-family:'IRANSansWeb',Tahoma,sans-serif;
  color:var(--nf-text);
  line-height:1.8;
  font-size:16px;
}

/* المنتور به تیترها line-height:1 می‌دهد؛ موکاپ‌ها ۱.۸ بدنه را به ارث می‌برند.
   h1 در هر صفحه مقدار صریح خودش را دارد و این را بازنویسی می‌کند. */
.elementor-heading-title{line-height:1.8;}

/* موکاپ‌ها `*{margin:0}` دارند و فاصله‌ها را صریح می‌دهند؛ پاراگراف تنها نباید حاشیه اضافه بیاورد.
   چند‌پاراگرافی‌ها (محتوایی که کاربر بعداً اضافه می‌کند) دست‌نخورده می‌مانند. */
.elementor-widget-text-editor p:only-child{margin:0;}

/* رفع سرریز افقی: لینک پرش پلاگین با left:-9999px مخفی می‌شود که در RTL کل صفحه را می‌کشد */
.hfe-skip-link:not(:focus){
  left:auto !important;
  right:0;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip:rect(1px,1px,1px,1px);
  clip-path:inset(50%);
  white-space:nowrap;
}

/* ===== هدر ===== */
/* چیدمان از تنظیمات کانتینر المنتور می‌آید؛ اینجا فقط ظاهر */
#masthead{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--nf-border);
}

/* هدر عمداً عریض‌تر از بدنه صفحه است تا لوگو و دکمه مشاوره به لبه‌ها
   نزدیک‌تر بنشینند و وسط صفحه شلوغ نشود.
   نقطه شروع ۱۲۶۱px عمدی است: دقیقاً همان‌جایی که فاصله کناری قالب قبلی هم
   به ۴۰px می‌رسد، پس گذر از این نقطه پرش ندارد. پایین‌تر از آن چیدمان قبلی
   دست‌نخورده می‌ماند — وگرنه در تبلت و موبایل فاصله کناری بیشتر از قبل می‌شد. */
@media(min-width:1261px){
  #nf-header-bar > .e-con-inner{
    max-width:1480px;
    padding-inline:40px;
  }
}

/* منو دقیقاً وسط صفحه بنشیند، نه وسطِ فضای باقی‌مانده.
   با `space-between` جای منو به پهنای لوگو و دکمه وابسته بود و کمی از مرکز
   بیرون می‌افتاد. گرید سه‌ستونه `1fr auto 1fr` ستون میانی را دقیقاً روی
   مرکز قاب می‌نشاند، مستقل از اینکه دو طرف چقدر پهن باشند.
   فقط بالای بریک‌پوینت تبلت اعمال می‌شود؛ پایین‌تر منو جمع می‌شود و
   گرید سه‌ستونه معنا ندارد. */
@media(min-width:1025px){
  #nf-header-bar > .e-con-inner{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:center;
  }
  #nf-header-logo{justify-self:start;}
  #nf-nav-links{justify-self:center;}
  #nf-header-cta{justify-self:end;}
}

/* لوگو نباید در فلکس فشرده شود، وگرنه نسبت تصویر به‌هم می‌خورد */
#nf-header-logo{flex:0 0 auto;}
#nf-header-logo img{height:77px;width:auto;max-width:none;display:block;}
#nf-header-logo a{display:block;line-height:0;}

/* منوی وردپرس از طریق ویجت Navigation Menu (رایگان، از UAE Lite) */
#nf-nav-links{flex:0 1 auto;}
#nf-nav-links .hfe-nav-menu__layout-horizontal .menu-item a.hfe-menu-item{
  color:var(--nf-text-soft);
  font-size:15px;
  font-weight:500;
  line-height:1.8;
  padding:0;
  transition:color .2s;
  white-space:nowrap;
}
#nf-nav-links .hfe-nav-menu__layout-horizontal .menu-item a.hfe-menu-item:hover,
#nf-nav-links .hfe-nav-menu__layout-horizontal .menu-item.current-menu-item a.hfe-menu-item{
  color:var(--nf-blue);
}
/* فاصله ۳۲px بین آیتم‌ها مطابق موکاپ */
#nf-nav-links .hfe-nav-menu__layout-horizontal .menu-item{margin-inline-start:32px;}
#nf-nav-links .hfe-nav-menu__layout-horizontal .menu-item:first-child{margin-inline-start:0;}

/* ==========================================================================
   منوی موبایل و تبلت (زیر ۱۰۲۴px)

   ⚠ اینجا قبلاً `#nf-nav-links{display:none}` بود. چون دکمه همبرگری هم داخل
   همین کانتینر است، در تبلت و موبایل **هیچ منویی** نمی‌ماند و تنها راه
   رسیدن به صفحات، لینک‌های فوتر بود. حالا خود ویجت UAE (با کلاس
   `hfe-nav-menu__breakpoint-tablet`) فهرست را جمع و همبرگری را نمایش
   می‌دهد؛ اینجا فقط ظاهرِ کشوی بازشونده تنظیم می‌شود.
   ========================================================================== */

@media(max-width:1024px){
  /* کانتینر المنتور پیش‌فرض `width:100%` می‌گیرد؛ در این حالت فقط دکمه
     همبرگری داخلش است ولی همان ۱۰۰٪ را اشغال می‌کند و دکمه مشاوره را از
     صفحه بیرون می‌راند. باید صریح `auto` شود. */
  #nf-nav-links{flex:0 0 auto;width:auto;}

  /* کانتینر و ویجت باید static باشند وگرنه کشوی `position:absolute` نسبت به
     نزدیک‌ترین والدِ positioned (که پهنای دکمه همبرگری را دارد) جا می‌گیرد،
     نه نسبت به نوار هدر. المنتور روی کانتینر `position:relative` می‌گذارد. */
  #nf-nav-links,
  #nf-nav-menu,
  #nf-nav-menu .hfe-nav-menu{position:static;}

  /* دکمه همبرگری */
  #nf-nav-menu .hfe-nav-menu__toggle{
    width:42px;height:42px;border-radius:10px;
    border:1px solid var(--nf-border);background:#fff;
    display:flex;align-items:center;justify-content:center;
    color:var(--nf-navy);
  }
  #nf-nav-menu .hfe-nav-menu-icon svg{width:18px;height:18px;fill:currentColor;}

  /* کشوی بازشونده: تمام‌عرض، زیر هدر.
     `overflow:hidden` لازم است چون در حالت بسته ارتفاع صفر می‌شود ولی
     آیتم‌ها همچنان جعبه دارند و از لبه صفحه بیرون می‌زنند (سرریز افقی).

     ⚠ `!important` اینجا لازم است، نه از سر تنبلی: جاوااسکریپت خود UAE
     موقع باز شدن، `width` و `left` را به‌صورت inline روی همین عنصر
     می‌نویسد (بر اساس پهنای دکمه همبرگری) و بدون این، کشو به عرض دکمه
     می‌ماند. تنها راه غلبه بر استایل inline همین است. */
  #nf-nav-menu .hfe-nav-menu__layout-horizontal{
    position:absolute !important;
    top:100% !important;
    right:0 !important;
    left:0 !important;
    width:auto !important;
    background:#fff;border-top:1px solid var(--nf-border);
    box-shadow:0 18px 34px rgba(34,48,59,.10);
    z-index:60;overflow:hidden;
  }
  #nf-nav-menu .hfe-active-menu + .hfe-nav-menu__layout-horizontal{padding:8px 0;}
  #nf-nav-menu .hfe-nav-menu{flex-direction:column;}

  /* آیتم‌ها تمام‌عرض و با فاصله لمسی مناسب — فاصله ۳۲px افقی اینجا معنا ندارد */
  #nf-nav-links .hfe-nav-menu__layout-horizontal .menu-item,
  #nf-nav-links .hfe-nav-menu__layout-horizontal .menu-item:first-child{
    margin-inline-start:0;width:100%;
  }
  #nf-nav-links .hfe-nav-menu__layout-horizontal .menu-item a.hfe-menu-item{
    display:block;padding:14px 24px;font-size:16px;
    border-bottom:1px solid var(--nf-bg-alt);white-space:normal;
  }
  #nf-nav-links .hfe-nav-menu__layout-horizontal .menu-item:last-child a.hfe-menu-item{border-bottom:none;}
}

/* کشو باید نسبت به نوار هدر جای بگیرد */
#nf-header-bar{position:relative;}

#nf-header-cta{flex:0 0 auto;}
#nf-header-cta .elementor-button{
  background:var(--nf-blue);
  color:#fff;
  padding:12px 26px;
  border-radius:10px;
  font-weight:600;
  font-size:15px;
  line-height:1.8;
  border:1px solid transparent;
  transition:background .2s;
  white-space:nowrap;
}
#nf-header-cta .elementor-button:hover{background:var(--nf-blue-dark);}

/* ===== فوتر ===== */
#colophon{
  background:var(--nf-navy-2);
  color:rgba(255,255,255,0.6);
  padding:64px 0 28px;
}

/* ستون برند دو برابر بقیه، مطابق گرید موکاپ (2fr 1fr 1fr 1fr) */
#nf-footer-col-brand{flex:2 1 0;}
#nf-footer-col-services,
#nf-footer-col-company,
#nf-footer-col-contact{flex:1 1 0;}

#nf-footer-grid{margin-bottom:48px;}

/* موکاپ روی همین تصویر style="height:44px" داشت که بر CSS پایه (۳۴px) اولویت دارد */
#nf-footer-logo img{height:44px;width:auto;max-width:none;}
#nf-footer-logo{margin-bottom:18px;}

#nf-footer-desc{font-size:14px;max-width:320px;color:rgba(255,255,255,0.6);}

/* ویجت‌های المنتور رنگ Global Text (سرمه‌ای) را می‌گیرند و ارث‌بری از فوتر تیره را می‌شکنند */
#colophon .elementor-widget-text-editor,
#colophon .elementor-widget-text-editor p,
#colophon .elementor-widget-text-editor span{
  color:rgba(255,255,255,0.6);
}

#colophon .elementor-heading-title{
  color:#fff;
  font-size:14.5px;
  font-weight:700;
  line-height:1.8;
  margin-bottom:18px;
}

#colophon a{
  display:block;
  font-size:14px;
  margin-bottom:12px;
  color:rgba(255,255,255,0.6);
  text-decoration:none;
  transition:color .2s;
}
#colophon a:hover{color:#fff;}

#nf-footer-bottom{
  border-top:1px solid rgba(255,255,255,0.1);
  padding-top:24px;
  font-size:13px;
}
#nf-footer-bottom p{margin:0;}

/* ==========================================================================
   حاشیه افقی محتوا — قاعده واحد سراسری

   ⚠ ریشه مشکل (نه سرریز افقی):
   کانتینرهای المنتور boxed هستند و عرضشان `min(100%, N)` است. روی دسکتاپ
   N از عرض پنجره کمتر است و خودبه‌خود حاشیه می‌سازد، ولی زیر ۱۱۸۰ پیکسل
   کانتینر دقیقاً به عرض پنجره می‌رسد — و چون `--padding-inline-*` روی صفر
   تنظیم شده (خروجی standardize-section-spacing.php که فقط padding عمودی
   می‌گذارد)، متن از هر دو طرف به لبه می‌چسبد. در RTL اولین چیزی که به چشم
   می‌آید چسبیدن به لبه راست است.

   `scrollWidth === clientWidth` بود؛ یعنی هیچ سرریزی در کار نبود و
   `overflow-x:hidden` روی body نه لازم است نه درست — فقط مشکل را پنهان
   می‌کرد بدون اینکه حاشیه‌ای اضافه شود.

   انتخاب `> .e-con-inner`: پدینگ فقط روی کانتینرهای **سطح اول سند صفحه**
   می‌نشیند. کلاس `.e-parent` به‌درد نمی‌خورد چون المنتور آن را روی
   کانتینرهای تودرتو هم می‌گذارد و پدینگ دو و سه برابر می‌شد.
   ========================================================================== */
@media(max-width:1180px){
  #nf-header-bar,
  #nf-footer-inner,
  [data-elementor-type="wp-page"] > .e-con-boxed > .e-con-inner,
  [data-elementor-type="wp-page"] > .e-con-full{padding-inline:24px;}
}

@media(max-width:1000px){
  /* موکاپ در این بریک‌پوینت فوتر را دو ستونه می‌کند */
  #nf-footer-grid{flex-wrap:wrap;}
  #nf-footer-col-brand{flex:1 1 100%;}
  #nf-footer-col-services,
  #nf-footer-col-company,
  #nf-footer-col-contact{flex:1 1 40%;}
}

/* موبایل: لوگو و دکمه در عرض کم جا نمی‌شوند و باعث سرریز افقی می‌شوند */
@media(max-width:600px){
  #nf-header-bar{--gap:12px;--column-gap:12px;--row-gap:12px;}
  #nf-header-bar,
  #nf-footer-inner,
  [data-elementor-type="wp-page"] > .e-con-boxed > .e-con-inner,
  [data-elementor-type="wp-page"] > .e-con-full{padding-inline:16px;}
  #nf-header-logo img{height:40px;}
  #nf-header-cta .elementor-button{padding:8px 14px;font-size:12.5px;}
  #nf-footer-bottom{flex-wrap:wrap;gap:8px;}
}

/* هدر فشرده.
   ⚠ این بریک‌پوینت قبلاً ۴۰۰px بود و باند ۴۰۱ تا ۴۳۰ بی‌پوشش می‌ماند:
   لوگوی ۴۰px + همبرگری + دکمه کامل با هم جا نمی‌شدند و هدر سرریز می‌کرد.
   ۴۱۴ و ۴۳۰ عرض آیفون‌های Pro Max اند، یعنی روی گوشی‌های پرکاربرد دیده
   می‌شد. با ۴۸۰ کل باند پوشش داده می‌شود. */
@media(max-width:480px){
  #nf-header-bar{--gap:8px;--column-gap:8px;--row-gap:8px;}
  #nf-header-logo img{height:30px;}
  #nf-header-cta{min-width:0;}
  #nf-header-cta .elementor-button{padding:7px 10px;font-size:11px;}
  #nf-nav-menu .hfe-nav-menu__toggle{width:38px;height:38px;}
}

/* گوشی‌های خیلی باریک: حاشیه کمی جمع‌تر تا متن فضای بیشتری بگیرد */
@media(max-width:340px){
  #nf-header-bar,
  #nf-footer-inner,
  [data-elementor-type="wp-page"] > .e-con-boxed > .e-con-inner,
  [data-elementor-type="wp-page"] > .e-con-full{padding-inline:12px;}
}

/* ۳۶۰px و باریک‌تر: لوگو + همبرگری + دکمه با هم جا نمی‌شوند */
@media(max-width:365px){
  #nf-header-logo img{height:26px;}
  #nf-header-cta .elementor-button{padding:6px 9px;font-size:10.5px;}
  #nf-nav-menu .hfe-nav-menu__toggle{width:34px;height:34px;}
}