/* =========================================================================
   brand.css — پالت رنگ و ظاهر اختصاصی «گروه بازرگانی امیر فضلی»
   بعد از sepehr.css و sepehr-pages.css لود می شود و فقط رنگ ها و چند
   جزئیات بصری را بازنویسی می کند. برای تغییر رنگ کل سایت، فقط مقادیر
   داخل :root را عوض کنید.
   ========================================================================= */

:root{
  /* --- رنگ اصلی: سرمه ای عمیق (اعتماد، شرکتی) --- */
  --navy:#0A2540;
  --navy-2:#0F3055;
  --navy-3:#164070;

  /* --- رنگ مکمل: آبی متمایل به فولادی (لینک ها و متن های تاکیدی) --- */
  --blue:#15558F;
  --blue-2:#1C6FB8;
  --blue-light:#8FC0EA;

  /* --- رنگ تاکید: طلایی (لوکس، بازرگانی) --- */
  --gold:#C8A24B;
  --gold-2:#E0C079;
  --gold-dark:#8F6E28;
  --gold-soft:rgba(200,162,75,.14);

  /* --- خنثی ها --- */
  --white:#FFFFFF;
  --off:#F6F8FB;
  --off-2:#E8EDF4;
  --ink:#12203A;
  --ink-soft:#54627B;
  --line:rgba(10,37,64,.12);

  --shadow:0 16px 40px -16px rgba(10,37,64,.28);
  --shadow-sm:0 6px 18px -8px rgba(10,37,64,.22);
  --radius:14px;

  /* alias های داخلی قالب */
  --color-text:var(--ink);
  --color-text-muted:var(--ink-soft);
  --color-text-faint:var(--ink-soft);
  --color-border-strong:var(--line);
  --color-accent:var(--blue);
  --color-accent-soft:rgba(21,85,143,.12);

  /* --- بافت پس زمینه: به جای الگوی نوار نقاله، شبکه ظریف شرکتی --- */
  --chevron:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48'><path d='M0 48 L48 0 M-12 12 L12 -12 M36 60 L60 36' fill='none' stroke='white' stroke-width='1.5' opacity='0.13'/></svg>");
  --chevron-navy:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48'><path d='M0 48 L48 0 M-12 12 L12 -12 M36 60 L60 36' fill='none' stroke='%230A2540' stroke-width='1.5' opacity='0.08'/></svg>");
}

/* ---------------------------------------------------------------- عناصر پایه */
.eyebrow{color:var(--gold-dark);}
.eyebrow::before{background:var(--gold);}

.btn-primary{
  background:linear-gradient(135deg,var(--gold-2),var(--gold));
  color:#0A2540;
  box-shadow:0 8px 20px -10px rgba(165,128,48,.7);
}
.btn-primary:hover{
  background:linear-gradient(135deg,var(--gold),#B08D33);
  color:#0A2540;
  box-shadow:0 16px 28px -12px rgba(165,128,48,.75);
}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-dark);}
.btn-light{border-color:rgba(224,192,121,.55);}
.btn-light:hover{background:rgba(224,192,121,.22);}

/* نوار جداکننده — به جای نوار نقاله متحرک، یک نوار باریک سرمه ای/طلایی */
.belt-divider{
  height:6px;
  background:linear-gradient(90deg,var(--navy) 0%,var(--gold) 50%,var(--navy) 100%);
  background-image:none;
  animation:none;
}

/* لوگوی متنی (فقط وقتی تصویر لوگو آپلود نشده) */
.logo-mark:not(.logo-mark--img){background:linear-gradient(135deg,var(--navy),var(--navy-3));}
.logo-mark:not(.logo-mark--img)::after{opacity:.45;}
.logo-mark span{color:var(--gold-2);}

/* لوگوی تصویری — هیچ پس زمینه ای نباید داشته باشد (لوگوی PNG شفاف) */
.logo-mark--img,
.footer-col .logo-mark--img{background:none;background-image:none;box-shadow:none;padding:0;border-radius:0;overflow:visible;}
.logo-mark--img::after{display:none;content:none;}
.logo-mark--img img{background:none;mix-blend-mode:normal;}

/* ---------------------------------------------------------------- هدر و تاپ بار */
.topbar{background:var(--navy);}
.topbar-contacts a:hover{color:var(--gold-2);}
header.site{border-bottom:2px solid rgba(200,162,75,.35);}
.main-nav a:hover{color:var(--blue);}
.lang-switch a.active{background:var(--gold);color:#0A2540;border-color:var(--gold);}

/* ---------------------------------------------------------------- هیرو */
.hero-slide:nth-child(1) .base{background:radial-gradient(circle at 78% 22%,var(--navy-3),var(--navy) 62%);}
.hero-slide:nth-child(2) .base{background:radial-gradient(circle at 18% 76%,#1a4a7d,var(--navy) 66%);}
.hero-slide:nth-child(3) .base{background:radial-gradient(circle at 74% 78%,#123A63,var(--navy) 60%);}
.hero-slide-content h2{color:#fff;}
.hero-slide-content h2::after{
  content:'';display:block;width:64px;height:3px;border-radius:3px;
  background:var(--gold);margin-top:14px;
}
.hero-dots button.active{background:var(--gold);}
.hero-arrow:hover{background:rgba(200,162,75,.28);border-color:rgba(200,162,75,.6);}

/* ---------------------------------------------------------------- بخش های محتوایی */
.sp-intro{border-bottom:1px solid var(--line);}
.sp-intro-title{position:relative;padding-bottom:16px;}
.sp-intro-title::after{
  content:'';position:absolute;bottom:0;inset-inline-start:50%;transform:translateX(50%);
  width:70px;height:3px;border-radius:3px;background:var(--gold);
}
html[dir="ltr"] .sp-intro-title::after{transform:translateX(-50%);}

.feature-list .tick{background:var(--gold-soft);color:var(--gold-dark);}
.sp-adv-tick{background:var(--gold);color:#0A2540;}
.sp-brand-chip{border-color:rgba(200,162,75,.45);background:#fff;}
.sp-brand-chip:hover{border-color:var(--gold);background:var(--gold-soft);}

.sp-partner{background:linear-gradient(130deg,var(--navy) 0%,var(--navy-2) 55%,var(--navy-3) 130%);}
.sp-partner-badge{border-color:rgba(224,192,121,.5);}
.sp-partner-badge-inner strong{color:var(--gold-2);}
.sp-eyebrow-light{color:var(--gold-2);}
.sp-eyebrow-light::before{background:var(--gold-2);}

.sp-cta-band{background:linear-gradient(120deg,var(--navy) 0%,var(--navy-2) 55%,var(--navy-3) 130%);}
.sp-cta-pill{border-color:rgba(224,192,121,.4);}
.sp-cta-btn{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#0A2540;border:none;}
.sp-cta-btn:hover{background:linear-gradient(135deg,var(--gold),#B08D33);color:#0A2540;}

.catalog-band{background:var(--navy-2);}
.catalog-text .ic{background:var(--gold-soft);color:var(--gold-2);}

.sp-client-card:hover{border-color:var(--gold);}
.sp-offer-card:hover{border-color:var(--gold);}
.sp-offering-tile{border-inline-start:3px solid var(--gold);}
.sp-offering-icon{color:var(--gold-dark);}

.product-card:hover{border-color:var(--gold);}
.product-thumb .ref{background:var(--navy);color:var(--gold-2);}

.sp-faq-q[aria-expanded="true"]{color:var(--blue);}
.sp-faq-item:hover{border-color:rgba(200,162,75,.5);}

/* ---------------------------------------------------------------- فوتر */
footer.site{background:var(--navy);color:#cfdcec;}
footer.site .belt-top{
  height:4px;background-image:none;opacity:1;
  background:linear-gradient(90deg,var(--gold) 0%,rgba(200,162,75,.15) 60%,var(--gold) 100%);
}
footer.site h4{color:var(--gold-2);}
footer.site a:hover{color:var(--gold-2);}
.footer-socials a:hover{background:var(--gold);color:#0A2540;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);}

/* ---------------------------------------------------------------- دکمه های شناور */
.floating-contact .fc-call{background:var(--navy);}
.floating-contact a{box-shadow:0 10px 24px -10px rgba(10,37,64,.55);}

/* ---------------------------------------------------------------- نسخه انگلیسی (LTR) */
html[dir="ltr"] .mono{direction:ltr;}
html[dir="ltr"] body{letter-spacing:0;}

/* =========================================================================
   بخش دوم — رفع کمبود استایل صفحات داخلی
   قالب page_types/{service,product,article,news,landing} برخلاف قالب page
   بدون .page-shell و .container رندر می شوند و در نتیجه بدون استایل
   دیده می شدند. قواعد زیر هر دو حالت را پوشش می دهد.
   ========================================================================= */

/* --- ۱. عرض و حاشیه صفحات داخلی ---
   فقط قالب هایی که خودشان .container ندارند (service/product/article/news/landing).
   قالب page دست نخورده می ماند چون خودش container دارد. */
main#main > .breadcrumb,
.page-article.page-type-service,
.page-article.page-type-product,
.page-article.page-type-article,
.page-article.page-type-news,
.page-article.page-type-landing{
  max-width:1240px;
  margin-inline:auto;
  padding-inline:24px;
}

.breadcrumb{padding-block:18px 0;font-size:14px;color:var(--ink-soft);}
.breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;list-style:none;margin:0;padding:0;}
.breadcrumb li{display:flex;align-items:center;gap:8px;}
.breadcrumb a{color:var(--blue);font-weight:600;}
.breadcrumb a:hover{color:var(--gold-dark);}
.breadcrumb span[aria-hidden]{opacity:.45;}
.breadcrumb span[aria-current]{color:var(--ink-soft);}

.page-article{padding-block:22px 40px;}
.page-article .page-h1{margin-bottom:14px;}

/* متن اصلی صفحه — لیست ها و جدول ها هم استایل بگیرند */
.page-content ul,
.page-content ol,
.section-content ul,
.section-content ol{padding-inline-start:22px;margin-bottom:1.2em;line-height:2;}
.page-content li,
.section-content li{margin-bottom:.35em;}
.page-content ul{list-style:disc;}
.page-content ol{list-style:decimal;}
.page-content a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:3px;}
.page-content a:hover{color:var(--gold-dark);}
.page-content blockquote{
  margin:1.5em 0;padding:16px 20px;background:var(--off);
  border-inline-start:4px solid var(--gold);border-radius:var(--radius);color:var(--ink-soft);
}
.page-content table{width:100%;border-collapse:collapse;margin:1.5em 0;font-size:15px;}
.page-content th,
.page-content td{border:1px solid var(--line);padding:10px 12px;text-align:start;}
.page-content th{background:var(--off-2);color:var(--navy);font-weight:700;}

/* --- ۲. بخش زیرصفحات (کارت ها) --- */
.children-section{margin:34px 0;}
.children-section > .section-title{margin-bottom:18px;}
.child-card{display:flex;flex-direction:column;overflow:hidden;}
.child-card-body{padding:16px 18px;display:flex;flex-direction:column;gap:8px;flex:1;}
.child-card-title{font-size:16px;font-weight:700;color:var(--navy);line-height:1.5;}
.child-card:hover .child-card-title{color:var(--blue);}
.child-card-excerpt{font-size:14px;color:var(--ink-soft);line-height:1.8;}
.child-card-img{margin-bottom:0;}

/* --- ۳. بخش های صفحه (page_sections) --- */
.page-section,
.section{margin:34px 0;}
.section-gallery,
.section-download,
.section-children,
.section-video,
.section-table,
.section-audio{margin:34px 0;}
.section-video .video-wrapper{border-radius:var(--radius);overflow:hidden;}
.section-children > .section-title,
.section-gallery > .section-title,
.section-download > .section-title{margin-bottom:18px;}
.section-text .section-content{line-height:2;}
.section-form .front-form{max-width:620px;}
.section-form{margin-top:28px;}
.captcha2{max-width:380px;}

/* بنر */
.section-banner{margin:30px 0;}
.section-banner .banner-link{text-decoration:none;}
.banner-default .banner-link{
  display:flex;align-items:center;gap:16px;padding:20px 24px;
  background:var(--off);border:1px solid var(--line);border-radius:var(--radius);
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.banner-default .banner-link:hover{border-color:var(--gold);background:var(--gold-soft);box-shadow:var(--shadow-sm);}

/* CTA داخل صفحه */
.section-cta{
  text-align:center;padding:40px 24px;margin:34px 0;
  background:linear-gradient(130deg,var(--navy),var(--navy-3));
  border-radius:var(--radius);color:#fff;
}
.section-cta .section-title{color:#fff;}
.section-cta .section-title::before{background:var(--gold);}
.cta-text{font-size:18px;font-weight:700;margin-bottom:20px;color:#fff;}
.section-cta .btn{margin-inline:6px;}

/* --- ۴. تب ها --- */
.section-tabs{margin:34px 0;}
.tabs2{margin-top:8px;}

/* --- ۵. سوالات متداول (بخش صفحه) ---
   استایل اصلی این بخش داخل sections/faq.php است و با پالت سایت هماهنگ شده؛
   اینجا فقط فاصله بیرونی و رنگ متغیرهای پیش فرض تنظیم می شود. */
.section-faq2{margin:34px 0;}

/* --- ۶. فهرست مطالب مقاله --- */
.toc-level-2{padding-inline-start:0;}
.toc-level-2 > a{font-weight:700;}

/* --- ۷. لوگوی متنی منوی موبایل --- */
.logo-text{font-size:17px;font-weight:800;line-height:1.6;white-space:normal;}

/* --- ۸. موبایل --- */
@media (max-width:860px){
  main#main > .breadcrumb,
  .page-article.page-type-service,
  .page-article.page-type-product,
  .page-article.page-type-article,
  .page-article.page-type-news,
  .page-article.page-type-landing{padding-inline:16px;}
  .section-cta{padding:30px 18px;}
}

/* =========================================================================
   بخش سوم — اسلایدشو بدون کراپ
   تصویر اسلاید با عرض ۱۰۰٪ و ارتفاع خودکار نمایش داده می شود؛
   ارتفاع خود اسلایدشو از تصویر فعال گرفته می شود (هیچ بخشی بریده نمی شود).
   ========================================================================= */
.hero-slides{height:auto;min-height:0;}
.hero-slide{position:absolute;inset:0;}
.hero-slide.active{position:relative;inset:auto;}

/* تصویر: تمام عرض، ارتفاع طبیعی */
.hero-slide.has-image .pattern-bg{position:relative;inset:auto;}
.hero-slide-bg{
  position:relative;inset:auto;
  width:100%;height:auto;
  object-fit:contain;display:block;
}
/* روی تصویر، الگوی پس زمینه لازم نیست */
.hero-slide.has-image .chevrons{display:none;}

/* اسلایدهای بدون تصویر (گرادیان) ارتفاع ثابت می گیرند */
.hero-slide:not(.has-image) .pattern-bg{
  position:relative;height:min(460px,62vh);min-height:300px;
}
.hero-slide:not(.has-image) .pattern-bg .base,
.hero-slide:not(.has-image) .pattern-bg .chevrons{position:absolute;inset:0;}

/* متن روی تصویر — با سایه ملایم تا همیشه خوانا باشد */
.hero-slide.has-image .hero-slide-content{
  background:linear-gradient(to top,rgba(10,37,64,.78) 0%,rgba(10,37,64,.35) 45%,rgba(10,37,64,0) 80%);
  justify-content:flex-end;padding-bottom:64px;
}
.hero-slide-content h2{text-shadow:0 2px 12px rgba(0,0,0,.35);}
.hero-slide-content p{text-shadow:0 1px 8px rgba(0,0,0,.35);}

/* دکمه های کنترل روی تصویرهای روشن هم دیده شوند */
.hero-controls{bottom:16px;}
.hero-arrow{background:rgba(10,37,64,.45);border-color:rgba(255,255,255,.45);}
.hero-dots button{background:rgba(255,255,255,.55);box-shadow:0 1px 4px rgba(0,0,0,.35);}

@media (max-width:860px){
  .hero-slide.has-image .hero-slide-content{padding-bottom:52px;}
}

/* =========================================================================
   بخش چهارم — اصلاحات دور سوم
   ========================================================================= */

/* --- ۱. تصویر بخش «شبکه شرکای تجاری» کاملا گرد شود --- */
.sp-partner-badge{padding:0;overflow:hidden;}
.sp-partner-logo{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  border-radius:50%;display:block;
}

/* --- ۲. «گروه های کالایی» به صورت اسلایدر --- */
.sp-offerings-grid.carousel-track{
  display:flex;grid-template-columns:none;
  gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:6px;scrollbar-width:none;
}
.sp-offerings-grid.carousel-track::-webkit-scrollbar{display:none;}
.sp-offerings-grid.carousel-track .sp-offering-tile{
  scroll-snap-align:start;flex:0 0 232px;min-height:120px;justify-content:center;
}
.sp-offerings-products.carousel-track{
  display:flex;grid-template-columns:none;
  gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:6px;scrollbar-width:none;
}
.sp-offerings-products.carousel-track::-webkit-scrollbar{display:none;}
.sp-offerings-products.carousel-track .sp-offer-card{scroll-snap-align:start;flex:0 0 290px;}

/* --- ۳. «برخی از مشتریان ما» به صورت اسلایدر --- */
.sp-clients-grid.carousel-track{
  display:flex;grid-template-columns:none;
  gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:6px;margin-bottom:22px;scrollbar-width:none;
}
.sp-clients-grid.carousel-track::-webkit-scrollbar{display:none;}
.sp-clients-grid.carousel-track .sp-client-card{scroll-snap-align:start;flex:0 0 190px;}

/* دکمه های اسلایدر روی بخش های روشن */
.sp-offerings .carousel-nav button,
.sp-clients .carousel-nav button{background:#fff;}

@media (max-width:600px){
  .sp-offerings-grid.carousel-track .sp-offering-tile{flex:0 0 200px;}
  .sp-clients-grid.carousel-track .sp-client-card{flex:0 0 160px;}
  .sp-offerings-products.carousel-track .sp-offer-card{flex:0 0 250px;}
}

/* --- ۴. دکمه تماس مستقیم در نوار CTA --- */
.sp-cta-btn{display:inline-flex;align-items:center;gap:8px;}

/* =========================================================================
   بخش پنجم — منوی موبایل
   ========================================================================= */
.mobile-overlay{background:linear-gradient(180deg,var(--navy) 0%,#081E36 100%);}
.mobile-overlay-top{
  padding-block:14px;
  border-bottom:1px solid rgba(255,255,255,.1);
  gap:12px;
}
.mobile-logo{display:flex;align-items:center;min-width:0;}
.mobile-logo img{height:44px;width:auto;max-width:170px;object-fit:contain;display:block;}
.mobile-logo-text{
  font-size:16px;font-weight:800;color:#fff;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.mobile-overlay-top .close-m{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);}
.mobile-overlay-top .close-m:hover{background:var(--gold);color:#0A2540;border-color:var(--gold);}

.mobile-nav{padding-block:10px;gap:0;}
.mobile-nav .m-link{
  display:flex;align-items:center;gap:10px;
  padding:14px 2px;font-size:16.5px;font-weight:700;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:color .15s,padding .15s;
}
.mobile-nav .m-link::before{
  content:'';flex-shrink:0;width:6px;height:6px;border-radius:50%;
  background:var(--gold);opacity:0;transition:opacity .15s;
}
.mobile-nav .m-link.is-current{color:var(--gold-2);}
.mobile-nav .m-link.is-current::before{opacity:1;}
/* زیرمنوها — کوچک تر و تورفته با خط راهنما */
.mobile-nav .m-depth-1,
.mobile-nav .m-depth-2{
  font-size:15px;font-weight:600;color:rgba(255,255,255,.72);
  padding-inline-start:18px;padding-block:11px;
  border-inline-start:2px solid rgba(255,255,255,.14);
  margin-inline-start:6px;
}
.mobile-nav .m-depth-2{padding-inline-start:32px;}
.mobile-nav .m-depth-1::before,
.mobile-nav .m-depth-2::before{display:none;}
.mobile-nav .m-depth-1.is-current,
.mobile-nav .m-depth-2.is-current{
  color:var(--gold-2);border-inline-start-color:var(--gold);
}

/* دکمه تماس در پایین منو */
.mobile-call-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 18px;border-radius:12px;
  background:linear-gradient(135deg,var(--gold-2),var(--gold));
  color:#0A2540;font-weight:800;font-size:16px;
  box-shadow:0 10px 24px -12px rgba(200,162,75,.8);
}
.mobile-call-btn .icon{width:19px;height:19px;}
.mobile-extra{gap:14px;padding-block:16px;}
.mobile-extra .lang-switch a{padding:6px 14px;font-weight:700;}