/* ===== فونت اصلی برند: مُدام (Modam) — self-hosted =====
   فونت رسمی مجموعه، از fontiran.com. از ۱۴۰۴/۰۶/۰۳ فونت پایه‌ی کل سایت است و
   جای Vazirmatn (بدنه) و Cormorant Garamond (تیترها) را گرفت.

   ⚠️ فایل `fontiran.css` که همراه بسته‌ی فونت می‌آید عمداً استفاده *نشد*: آن فایل
   یک قالب عمومی است و به هشت وزن ExtraLight/Light/Regular/Medium/Semibold/Bold/
   ExtraBold/Black اشاره می‌کند، در حالی که بسته‌ی تحویلی فقط چهار وزن واقعی دارد
   (Light, Regular, Bold, Black) به‌علاوه‌ی چهار نسخه‌ی Condensed همان‌ها. یعنی
   نیمی از src های آن فایل ۴۰۴ می‌دادند و Condensed ها اصلاً تعریف نشده بودند.
   تعریف‌های زیر دقیقاً با فایل‌های موجود در assets/fonts/modam/ منطبق‌اند.

   نگاشت وزن‌ها: Light→300، Regular→400، Bold→700، Black→900.
   وزن‌های ۵۰۰ و ۶۰۰ که در استایل‌های سایت به کار رفته‌اند فایل اختصاصی ندارند و
   مرورگر خودش از نزدیک‌ترین وزن موجود (۴۰۰ یا ۷۰۰) سنتز می‌کند.

   نسخه‌ی Condensed خانواده‌ی جداگانه‌ای است ('ModamWeb Condensed') تا با
   font-weight معمولی قاطی نشود؛ فعلاً در سایت استفاده نمی‌شود ولی در دسترس است. */

@font-face {
	font-family: 'ModamWeb';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('../../fonts/modam/ModamWeb-Light.woff2') format('woff2'),
	     url('../../fonts/modam/ModamWeb-Light.woff') format('woff');
}
@font-face {
	font-family: 'ModamWeb';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../../fonts/modam/ModamWeb-Regular.woff2') format('woff2'),
	     url('../../fonts/modam/ModamWeb-Regular.woff') format('woff');
}
@font-face {
	font-family: 'ModamWeb';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../../fonts/modam/ModamWeb-Bold.woff2') format('woff2'),
	     url('../../fonts/modam/ModamWeb-Bold.woff') format('woff');
}
@font-face {
	font-family: 'ModamWeb';
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url('../../fonts/modam/ModamWeb-Black.woff2') format('woff2'),
	     url('../../fonts/modam/ModamWeb-Black.woff') format('woff');
}

@font-face {
	font-family: 'ModamWeb Condensed';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('../../fonts/modam/ModamWeb-LightCondensed.woff2') format('woff2'),
	     url('../../fonts/modam/ModamWeb-LightCondensed.woff') format('woff');
}
@font-face {
	font-family: 'ModamWeb Condensed';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../../fonts/modam/ModamWeb-RegularCondensed.woff2') format('woff2'),
	     url('../../fonts/modam/ModamWeb-RegularCondensed.woff') format('woff');
}
@font-face {
	font-family: 'ModamWeb Condensed';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../../fonts/modam/ModamWeb-BoldCondensed.woff2') format('woff2'),
	     url('../../fonts/modam/ModamWeb-BoldCondensed.woff') format('woff');
}
@font-face {
	font-family: 'ModamWeb Condensed';
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url('../../fonts/modam/ModamWeb-BlackCondensed.woff2') format('woff2'),
	     url('../../fonts/modam/ModamWeb-BlackCondensed.woff') format('woff');
}

/* ===== فونت‌های قبلی — فقط به‌عنوان fallback =====
   Vazirmatn و Cormorant Garamond حذف نشدند تا اگر مدام برای نویسه‌ای گلیف نداشته
   باشد (یا لود نشود) متن به یک فونت سالم برگردد، نه به فونت پیش‌فرض سیستم. */

@font-face {
	font-family: 'Vazirmatn';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../../fonts/vazir_400_arabic.woff2') format('woff2');
	unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC, U+200C-200E;
}
@font-face {
	font-family: 'Vazirmatn';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../../fonts/vazir_400_latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+2000-206F, U+20AC;
}
@font-face {
	font-family: 'Vazirmatn';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../../fonts/vazir_500_arabic.woff2') format('woff2');
	unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC, U+200C-200E;
}
@font-face {
	font-family: 'Vazirmatn';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../../fonts/vazir_500_latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+2000-206F, U+20AC;
}
@font-face {
	font-family: 'Vazirmatn';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../../fonts/vazir_600_arabic.woff2') format('woff2');
	unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC, U+200C-200E;
}
@font-face {
	font-family: 'Vazirmatn';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../../fonts/vazir_600_latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+2000-206F, U+20AC;
}
@font-face {
	font-family: 'Vazirmatn';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../../fonts/vazir_700_arabic.woff2') format('woff2');
	unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC, U+200C-200E;
}
@font-face {
	font-family: 'Vazirmatn';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../../fonts/vazir_700_latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+2000-206F, U+20AC;
}

@font-face {
	font-family: 'Cormorant Garamond';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../../fonts/corm_400_n_latin.woff2') format('woff2');
}
@font-face {
	font-family: 'Cormorant Garamond';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../../fonts/corm_500_n_latin.woff2') format('woff2');
}
@font-face {
	font-family: 'Cormorant Garamond';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../../fonts/corm_600_n_latin.woff2') format('woff2');
}
@font-face {
	font-family: 'Cormorant Garamond';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../../fonts/corm_700_n_latin.woff2') format('woff2');
}
@font-face {
	font-family: 'Cormorant Garamond';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('../../fonts/corm_400_i_latin.woff2') format('woff2');
}
html {
	direction: rtl;
	/* شبکه‌ی ایمنی اسکرول افقی: چند المان تزئینی/مخفی (نوار لوگوهای متحرک و
	   مگاپنل‌های بسته‌ی منو که با visibility:hidden مخفی‌اند ولی همچنان در
	   layout جا می‌گیرند) از لبه‌ی صفحه بیرون می‌زدند و در عرض‌های کوچک‌تر یک
	   اسکرول‌بار افقی می‌ساختند. عمداً `clip` است نه `hidden`: مقدار hidden
	   المان ریشه را به یک scroll container تبدیل می‌کند و هدر position:sticky
	   را از کار می‌اندازد، ولی clip فقط برش می‌زند و چسبندگی هدر دست‌نخورده
	   می‌ماند. این فقط شبکه‌ی ایمنی است — سرریزهای واقعی جداگانه اصلاح شده‌اند. */
	overflow-x: clip;
	/* بزرگ‌تر کردن یکدست همه‌ی فونت‌های سایت — چون همه‌جای سایت (CSS و بلوک‌های محتوا) فونت‌ها
	   با واحد rem تعریف شده‌اند، تغییر فونت ریشه به‌صورت خودکار همه را متناسب بزرگ‌تر می‌کند. */
	font-size: 108%;
	/* خاکستری برند (#8A8F98) روی سفید/زمینه‌ی روشن در سایزهای کوچیک زیر آستانه‌ی کنتراست
	   WCAG AA (۴.۵:۱) می‌افته؛ این متغیر یک نسخه‌ی تیره‌تر و هم‌خانواده مخصوص متن است که
	   فقط در جاهایی که خاکستری روی زمینه‌ی روشن برای متن استفاده می‌شه جایگزینش می‌کنیم. */
	--sama-gray-text: #5f636b;
}

html[lang|="en"] {
	direction: ltr;
}

body {
	font-feature-settings: "ss01";
	text-rendering: optimizeLegibility;
}

::-moz-selection {
	background-color: var(--wp--preset--color--accent-beige);
	color: var(--wp--preset--color--primary-navy);
}

::selection {
	background-color: var(--wp--preset--color--accent-beige);
	color: var(--wp--preset--color--primary-navy);
}

a {
	transition: color 0.15s ease-in-out;
}

/* انتهای خطوط پاراگراف‌های محتوای واقعی صفحات (متنی که از پیشخوان وردپرس نوشته می‌شود،
   داخل .entry-content — یعنی بلوک هسته‌ای wp:post-content) در یک راستا/مرتب باشد.
   عمداً scope به .entry-content است، نه یک قانون سراسری روی همه‌ی <p>: خیلی از متن‌های
   کوتاه UI (مثل ردیف meta بخش «درباره موسسه» در صفحه اصلی، توضیح کوتاه کاشی‌های بنتو،
   متن فوتر) به‌جای text-align مستقیم روی خودشان، وسط‌چین/راست‌چین‌بودن را از والدشان
   ارث می‌برند؛ یک قانون سراسری روی p این ارث‌بری را override می‌کرد و چیدمانشان را
   به‌هم می‌ریخت (باگ واقعی که در تست قبلی رخ داد و اینجا اصلاح شد). */
.entry-content p {
	text-align: justify;
}

/* 🐛 یک ارجاع/منبع داخل مقاله می‌تواند یک URL بلندِ درصد-کدشده باشد (مثل لینک‌های
   فارسیِ percent-encoded که ۱۵۰+ کاراکتر پشت‌سرهم و بدون فاصله‌اند). مرورگر چنین
   رشته‌ای را یک «کلمه»ی تفکیک‌ناپذیر می‌بیند و آن را نمی‌شکند، پس پاراگراف تا هر
   عرضی که لازم باشد کش می‌آید — روی موبایل نتیجه‌اش این بود که صفحه‌ی تک مقاله
   ~۲۱۰۰ پیکسل عرض می‌گرفت و کاربر اول یک صفحه‌ی سفید می‌دید و باید افقی اسکرول
   می‌کرد تا به متن برسد. (`overflow-x: clip` روی html فقط اسکرول‌بار را پنهان
   می‌کند، خودِ سرریز سر جایش می‌ماند.)
   `anywhere` عمداً به‌جای `break-word` انتخاب شده: هر دو کلمه‌ی بلند را می‌شکنند،
   ولی فقط `anywhere` عرض min-content المان را هم کم می‌کند — یعنی داخل والدهای
   grid/flex هم جلوی کش‌آمدن را می‌گیرد، که دقیقاً همان چیزی است که اینجا لازم بود.
   دامنه‌اش عمداً محدود به محتوای نوشته‌شده در پیشخوان است تا متن‌های UI قالب که
   دستی تنظیم شده‌اند دست‌نخورده بمانند. */
.entry-content {
	overflow-wrap: anywhere;
}

/* لینک‌های بلند در همه‌ی سایت (نه فقط محتوای مقاله) — شبکه‌ی ایمنی */
a {
	overflow-wrap: break-word;
}

img {
	height: auto;
	max-width: 100%;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* 🐛 نسخه‌ی قبلی این لینک را با `inset-inline-start: -9999px` مخفی می‌کرد.
   روی یک سایت RTL این ویژگی به `right` نگاشت می‌شود، یعنی المان ۹۹۹۹ پیکسل به
   *راست* پرت می‌شد — و برخلاف سرریز به چپ، سرریز به راست واقعاً عرض قابل‌اسکرول
   سند را زیاد می‌کند. نتیجه: کل سایت (همه‌ی صفحات، چون این لینک در هدر است) روی
   موبایل افقی اسکرول می‌خورد. اینجا از تکنیک استاندارد clip استفاده می‌شود که
   جهت‌مستقل است و هیچ فضایی اشغال نمی‌کند. */
.skip-link {
	position: absolute;
	inset-inline-start: 0.5rem;
	top: 0;
	z-index: 999999;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	background: var(--wp--preset--color--primary-navy);
	color: var(--wp--preset--color--white);
	padding: 0.75rem 1.25rem;
}

.skip-link:focus {
	width: auto;
	height: auto;
	overflow: visible;
	clip: auto;
	clip-path: none;
	top: 0.5rem;
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--secondary-blue);
	outline-offset: 2px;
}

/* وردپرس به‌صورت خودکار بین بلاک‌های سطح‌بالای صفحه یک فاصله‌ی عمودی (blockGap) اضافه می‌کند؛
   چون هر سکشن صفحه اصلی سما پدینگ داخلی خودش رو داره، این فاصله‌ی اضافه فقط باعث یک نوار سفید
   بین سکشن‌های رنگی می‌شد — این‌جا خنثی می‌شود تا سکشن‌ها مستقیماً به هم بچسبند. */
.wp-site-blocks > * {
	margin-block-start: 0;
}
/* ============ Site header — نسخه ناوی غوطه‌ور (گزینه ۳ تایید‌شده) ============ */
/* هدر به‌عنوان یک واحد به بالای صفحه می‌چسبد (نه فقط یکی از دو نوار داخلش).
   نکته‌ی مهم: sticky باید روی خودِ wrapper اتوماتیک وردپرس (header.wp-block-template-part) باشه، نه .sama-site-header —
   چون آن wrapper دقیقاً به بلندای محتوای داخلش (همین هدر) است؛ اگر sticky را مستقیم روی .sama-site-header بگذاریم،
   "containing block"ـش همان wrapper کوتاه می‌شود و به محض عبور اسکرول از ارتفاع خود هدر، چسبندگی از بین می‌رود.
   با گذاشتن sticky روی wrapper (که فرزند مستقیم بدنه‌ی بلند صفحه است) این مشکل حل می‌شود. */
header.wp-block-template-part:has(.sama-site-header) {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* نوار کاربردی بالای هدر (تلفن/ایمیل) به درخواست کارفرما در ۱۴۰۴/۰۶/۰۳ حذف شد.
   اطلاعات تماس همچنان در فوتر و صفحه‌ی /contact/ موجود است. */

/* نوار شیشه‌ای منو — زیر نوار کاربردیِ ثابت، با اسکرول به پایین پنهان و با اسکرول به بالا (هرجای صفحه) فوری ظاهر می‌شود.
   شیشه‌ای بودنش یعنی محتوای پشتش موقع اسکرول واقعاً دیده/تار می‌شود؛ برای همین هدر والد پس‌زمینه‌ی خودش را ندارد. */
.sama-header-navbar {
	position: relative;
	z-index: 5;
	background-color: rgba(15, 42, 61, 0.55);
	backdrop-filter: blur(16px) saturate(160%);
	-webkit-backdrop-filter: blur(16px) saturate(160%);
	border-bottom: 1px solid rgba(215, 201, 183, 0.18);
	transition: transform 0.35s ease;
}

.sama-header-navbar.is-hidden {
	transform: translateY(-110%);
}

.sama-header-inner {
	max-width: 1200px;
	margin-inline: auto;
	padding: 14px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.sama-brand-nav {
	display: flex;
	align-items: center;
}

/* لوگوی اصلی موسسه (نه لوگوی زیرمجموعه‌ی دفتر حقوقی) در هدر همه‌ی صفحات نمایش داده می‌شود.
   فایل لوگو مشکی روی زمینه‌ی شفافه، برای دیده‌شدن روی نوار سرمه‌ای/شیشه‌ای هدر باید سفید شود. */
/* نشان هندسی مجموعه (لوگوی دوم) — برخلاف وردمارک افقی قبلی تقریباً مربع است،
   پس در همان ارتفاع خیلی ریز دیده می‌شد و کمی بلندتر تنظیم شده. */
.sama-logo img {
	height: 54px;
	width: auto;
	display: block;
	filter: brightness(0) invert(1);
	margin-inline-end: 34px;
}

@media (max-width: 1024px) {
	.sama-logo img {
		height: 44px;
	}
}

/* سوییچ زبان — فعلاً فقط ظاهری (placeholder)، تا فعال‌سازی Polylang در نقشه راه */
.sama-lang-switch {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--wp--preset--font-family--heading);
	direction: ltr;
	flex-shrink: 0;
}

.sama-lang-switch button {
	background: none;
	border: none;
	cursor: pointer;
	font: inherit;
	font-size: 0.82rem;
	letter-spacing: 0.05em;
	color: rgba(255, 255, 255, 0.5);
	padding: 4px 2px;
}

.sama-lang-switch button:hover {
	color: rgba(255, 255, 255, 0.8);
}

.sama-lang-switch button.is-active {
	color: var(--wp--preset--color--accent-beige);
	font-weight: 600;
}

.sama-lang-switch button.is-disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.sama-lang-switch button.is-disabled:hover {
	color: inherit;
}

.sama-lang-switch-sep {
	color: rgba(255, 255, 255, 0.25);
	font-size: 0.8rem;
}

/* ============ Nav list (desktop) ============ */
.sama-mega-nav {
	display: flex;
}

.sama-nav-list {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 0;
}

.sama-nav-list > li {
	position: relative;
}

.sama-nav-item-row {
	display: flex;
	align-items: center;
}

.sama-nav-list > li > a,
.sama-nav-item-row > a {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	color: rgba(255, 255, 255, 0.86);
	font-weight: 500;
	text-decoration: none;
	font-size: 0.92rem;
	white-space: nowrap;
	transition: color 0.2s ease, letter-spacing 0.2s ease;
}

/* موقعیت/انیمیشن آندرلاین در _motion.css تعریف شده — اینجا فقط رنگ حالت هاور تنظیم می‌شود */
.sama-nav-list > li:hover > a,
.sama-nav-item-row:hover > a,
.has-mega.is-open > .sama-nav-item-row > a {
	color: var(--wp--preset--color--white);
	letter-spacing: 0.02em;
}

.sama-nav-contact {
	background-color: var(--wp--preset--color--accent-beige);
	color: var(--wp--preset--color--primary-navy) !important;
	font-weight: 600;
	border-radius: 2px;
}

.sama-nav-contact::after {
	display: none;
}

.sama-nav-contact:hover {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary-navy) !important;
}

.sama-submenu-toggle {
	display: none;
}

/* ============ Mega panel ============ */
.sama-mega-panel {
	position: absolute;
	inset-inline-start: 0;
	top: 100%;
	min-width: 560px;
	background-color: var(--wp--preset--color--primary-navy);
	box-shadow: 0 24px 44px rgba(0, 0, 0, 0.4);
	border-top: 2px solid var(--wp--preset--color--accent-beige);
	padding: 22px 28px;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 0;
	z-index: 20;
	overflow: hidden;
}

/* بافت هندسی نشان سما، تکرارشونده و کم‌رنگ — پشت ستون‌های مگاپنل، به‌جای سرمه‌ای خالی */
.sama-mega-panel::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	-webkit-mask-image: url("../../images/emblem-sama.png"), url("../../images/emblem-sama.png");
	mask-image: url("../../images/emblem-sama.png"), url("../../images/emblem-sama.png");
	-webkit-mask-repeat: repeat, repeat;
	mask-repeat: repeat, repeat;
	-webkit-mask-size: 44px 44px, 44px 44px;
	mask-size: 44px 44px, 44px 44px;
	-webkit-mask-position: 0 0, 22px 22px;
	mask-position: 0 0, 22px 22px;
	background-color: var(--wp--preset--color--accent-beige);
	opacity: 0.07;
}

.sama-mega-panel > .sama-mega-col {
	position: relative;
	z-index: 1;
	padding-inline-end: 30px;
	margin-inline-end: 30px;
	border-inline-end: 1px solid rgba(255, 255, 255, 0.12);
}

.sama-mega-panel > .sama-mega-col:last-child {
	border-inline-end: none;
	padding-inline-end: 0;
	margin-inline-end: 0;
}

/* ===== جلوگیری از بیرون‌زدن مگاپنل از لبه‌ی صفحه =====
   مگاپنل به آیتم منوی خودش لنگر می‌اندازد (inset-inline-start: 0 نسبت به <li>) و
   دست‌کم ۵۶۰px پهناست؛ برای آیتم‌های انتهای منو، این یعنی پنل از لبه‌ی چپ صفحه
   بیرون می‌زند — هم بخشی از پنل باز دیده نمی‌شد، هم پنل‌های بسته اسکرول افقی
   می‌ساختند. در عرض‌های زیر ۱۴۰۰px لنگر از خودِ آیتم به نوار منو منتقل می‌شود
   (عرض نوار منو همیشه از پهنای پنل بیشتر است، پس هیچ‌وقت بیرون نمی‌زند).
   بالای ۱۴۰۰px همه‌چیز جا می‌شود و چیدمان اصلی «پنل زیر آیتم» دست‌نخورده می‌ماند. */
@media (min-width: 1025px) and (max-width: 1400px) {
	.sama-nav-list {
		position: relative;
	}

	.sama-nav-list > li.has-mega {
		position: static;
	}

	.sama-mega-panel {
		inset-inline-start: 0;
		max-width: 100%;
	}
}

/* ===== ستون لوگوی بخش در انتهای مگاپنل =====
   چون سایت RTL است، آخرین ستون در سمت چپ پنل رندر می‌شود — همان جایی که
   کارفرما خواست. عرضش ثابت است تا ستون‌های محتوایی را جمع نکند. */
/* پنل گرید است (نه فلکس): ستون لهجه‌ی لوگو عرض ثابت می‌گیرد تا ستون‌های
   محتوایی را جمع نکند؛ بقیه‌ی ستون‌ها مثل قبل با auto-fit تقسیم می‌شوند. */
.sama-mega-panel:has(> .sama-mega-col--logo) {
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) 172px;
}

.sama-mega-panel:has(> .sama-mega-col--logo-lg) {
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) 210px;
}

.sama-mega-col--logo {
	/* به آخرین ستون گرید پین می‌شود. بدون این، auto-fit در پنل‌های تک‌ستونه یک
	   تراک اضافه می‌سازد و لوگو در ستون میانی می‌افتد و یک فاصله‌ی خالی
	   سمت چپش باقی می‌ماند. */
	grid-column: -2 / -1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding-inline-start: 26px;
	border-inline-start: 1px solid rgba(255, 255, 255, 0.12);
}

/* پنل دفتر حقوقی: کارت ویژه حذف شد، پس ستون لوگو جای بیشتری دارد.
   ⚠️ قالب box-sizing سراسری border-box ندارد؛ بدون خط زیر، پدینگ ۲۶px به عرض
   اضافه می‌شد و ستون از تراک ۲۱۰px گرید بیرون می‌زد. */
.sama-mega-col--logo {
	box-sizing: border-box;
}

/* ⚠️ عمداً دوکلاسه: قانون عمومی `.sama-mega-col--logo img` پایین‌تر در همین
   فایل تعریف شده و با specificity برابر، بر نسخه‌ی بزرگ غلبه می‌کرد. */
.sama-mega-col--logo.sama-mega-col--logo-lg img {
	max-height: 128px;
}

.sama-mega-col--logo .sama-mega-col-more {
	margin: 0;
	text-align: center;
}

/* لوگوهای مجموعه برای زمینه‌ی روشن طراحی شده‌اند و روی پنل سرمه‌ای تقریباً
   نامرئی می‌شوند؛ همان تکنیک سفیدسازیِ لوگوی هدر اینجا هم استفاده می‌شود.
   اگر روزی نسخه‌ی روشن/وارونه‌ی رسمی لوگوها برسد، این فیلتر باید حذف شود. */
.sama-mega-col--logo img {
	max-width: 100%;
	max-height: 92px;
	width: auto;
	height: auto;
	-o-object-fit: contain;
	   object-fit: contain;
	filter: brightness(0) invert(1);
	opacity: 0.92;
}

.sama-mega-col h3 {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.74rem;
	font-weight: 600;
	color: var(--wp--preset--color--accent-beige);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0 0 12px;
}

.sama-mega-col a {
	display: block;
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
	padding: 6px 0;
	font-size: 0.9rem;
	border-bottom: none;
}

.sama-mega-col a:hover {
	color: var(--wp--preset--color--white);
}

.sama-mega-col a span {
	display: block;
	font-size: 0.78rem;
	color: rgba(255, 255, 255, 0.5);
	margin-top: 2px;
}

.sama-mega-col p {
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.82rem;
	line-height: 1.7;
	margin: 0 0 12px;
}

/* GRC/ADR به‌عنوان زیرآیتم «قراردادها» — بدون خط/تورفتگی، دقیقاً هم‌سبک بقیه‌ی آیتم‌های ستون */
.sama-mega-subitems {
	display: contents;
}

.sama-mega-col-more {
	margin-top: 6px;
	padding-top: 10px !important;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	color: var(--wp--preset--color--accent-beige) !important;
	font-size: 0.82rem !important;
}

.sama-mega-col--feature {
	background-color: rgba(215, 201, 183, 0.1);
	border: 1px solid rgba(215, 201, 183, 0.25);
	padding: 16px;
	border-radius: 4px;
	width: 190px;
	flex-shrink: 0;
	position: relative;
	overflow: hidden;
}

.sama-mega-col--feature-watermark {
	position: absolute;
	width: 200px;
	height: 200px;
	left: -50px;
	bottom: -46px;
	z-index: 0;
	pointer-events: none;
	-webkit-mask-image: url("../../images/emblem-sama.png");
	mask-image: url("../../images/emblem-sama.png");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	background-color: var(--wp--preset--color--accent-beige);
	opacity: 0.18;
}

.sama-mega-col--feature h3,
.sama-mega-col--feature p,
.sama-mega-col--feature a {
	position: relative;
	z-index: 1;
}

.sama-mega-col--feature p {
	color: rgba(255, 255, 255, 0.65);
	font-size: 0.85rem;
	line-height: 1.7;
	margin: 0 0 12px;
}

.sama-mega-cta {
	color: var(--wp--preset--color--accent-beige) !important;
	font-weight: 600;
	border-bottom: none !important;
}

/* ============ Mobile toggle ============ */
/* ⚠️ دو میله‌ی بالا/پایین آیکون absolute هستند و به ارتفاع دکمه اضافه نمی‌شوند،
   پس باکس واقعی دکمه فقط ۱۹px ارتفاع داشت — خیلی کوچک‌تر از حداقل ۴۴px لمسی.
   ابعاد صریح + مرکز‌چینی فلکس این را درست می‌کند. */
.sama-nav-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	width: 46px;
	height: 46px;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.sama-nav-toggle-bar,
.sama-nav-toggle-bar::before,
.sama-nav-toggle-bar::after {
	display: block;
	width: 24px;
	height: 3px;
	border-radius: 1px;
	background-color: var(--wp--preset--color--accent-beige);
	position: relative;
	transition: transform 0.15s ease-in-out;
}

.sama-nav-toggle-bar::before {
	content: "";
	position: absolute;
	top: -7px;
}

.sama-nav-toggle-bar::after {
	content: "";
	position: absolute;
	top: 7px;
}

/* ============ Mobile layout ============ */
/* ⚠️ آستانه عمداً ۱۰۲۴px است نه ۹۰۰px: منوی افقی فارسی با ۷ آیتم به‌علاوه‌ی نشان و
   سوییچ زبان حدود ۹۸۰px عرض لازم دارد. با آستانه‌ی ۹۰۰px، در بازه‌ی ۹۰۱ تا ۹۸۰ پیکسل
   هدر جا نمی‌شد و سوییچ زبان از لبه‌ی صفحه بیرون می‌زد و اسکرول افقی می‌ساخت. */
@media (max-width: 1024px) {
	.sama-brand-nav {
		flex: 1;
		justify-content: space-between;
	}

	.sama-logo img {
		margin-inline-end: 0;
	}

	.sama-nav-toggle {
		display: flex;
	}

	/* containing block عمداً خودِ .sama-mega-nav (که عرضش فقط به‌اندازه‌ی دکمه‌ی همبرگره) نیست؛
	   .sama-header-navbar (تمام‌عرض، position:relative) این نقش رو می‌گیره تا پنل کشویی موبایل
	   واقعاً تمام‌عرض صفحه بشه، نه یک نوار باریک چسبیده به دکمه. */
	.sama-nav-list {
		display: none;
		flex-direction: column;
		align-items: stretch;
		position: absolute;
		top: 100%;
		inset-inline: 0;
		max-height: calc(100vh - 100%);
		overflow-y: auto;
		background-color: var(--wp--preset--color--primary-navy);
		box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35);
		padding: 10px 20px 20px;
	}

	.sama-nav-list.is-open {
		display: flex;
	}

	.sama-nav-list > li {
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	}

	.sama-nav-item-row {
		justify-content: space-between;
	}

	/* هدف لمسی راحت: هر آیتم منو حداقل ۴۸px ارتفاع مفید */
	.sama-nav-list > li > a,
	.sama-nav-item-row > a {
		flex: 1;
		display: flex;
		align-items: center;
		min-height: 48px;
		font-size: 1.02rem;
	}

	.sama-submenu-toggle {
		display: inline-flex;
		width: 48px;
		height: 48px;
		border: none;
		background: transparent;
		position: relative;
		flex-shrink: 0;
	}

	/* لینک‌های داخل زیرمنوی بازشده هم باید به‌راحتی قابل لمس باشند */
	.sama-mega-col a {
		min-height: 44px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.sama-submenu-toggle::before {
		content: "";
		position: absolute;
		inset: 0;
		margin: auto;
		width: 8px;
		height: 8px;
		border-inline-end: 2px solid var(--wp--preset--color--accent-beige);
		border-bottom: 2px solid var(--wp--preset--color--accent-beige);
		transform: rotate(45deg);
	}

	.has-mega.is-open .sama-submenu-toggle::before {
		transform: rotate(225deg);
	}

	.sama-mega-panel {
		position: static;
		box-shadow: none;
		border-top: none;
		grid-template-columns: 1fr;
		padding: 4px 0 12px 16px;
		min-width: 0;
	}

	/* ⚠️ قانون‌های `:has(> .sama-mega-col--logo)` بالاتر در همین فایل specificity
	   دوکلاسه دارند و مدیا-کوئری به specificity چیزی اضافه نمی‌کند؛ بدون این
	   بازنویسی، پنل روی موبایل هم چندستونه می‌ماند. */
	.sama-mega-panel:has(> .sama-mega-col--logo),
	.sama-mega-panel:has(> .sama-mega-col--logo-lg) {
		grid-template-columns: 1fr;
	}

	/* خودِ لوگو تزئینی است و در آکاردئون موبایل فقط فضای عمودی می‌گیرد،
	   ولی ستونش حذف نمی‌شود چون لینک «مشاهده کامل دفتر حقوقی» داخلش است. */
	.sama-mega-col--logo {
		align-items: stretch;
		border-inline-start: none;
		padding-inline-start: 0;
		min-width: 0;
	}

	.sama-mega-col--logo img {
		display: none;
	}

	.sama-mega-panel > .sama-mega-col {
		border-inline-end: none;
		padding-inline-end: 0;
		margin-inline-end: 0;
	}

	.sama-lang-switch {
		display: none;
	}
}

/* ============ Site footer ============ */
.sama-site-footer {
	position: relative;
	overflow: hidden;
	background-color: var(--wp--preset--color--primary-navy);
	color: var(--wp--preset--color--white);
	padding: 56px 20px 24px;
}

/* بافت هندسی نشان سما، هم‌سبک با نوار بالای هدر و مگامنو (کوچیک و پلکانی، نه گرید یک‌دست) */
.sama-site-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	-webkit-mask-image: url("../../images/emblem-sama.png"), url("../../images/emblem-sama.png");
	mask-image: url("../../images/emblem-sama.png"), url("../../images/emblem-sama.png");
	-webkit-mask-repeat: repeat, repeat;
	mask-repeat: repeat, repeat;
	-webkit-mask-size: 44px 44px, 44px 44px;
	mask-size: 44px 44px, 44px 44px;
	-webkit-mask-position: 0 0, 22px 22px;
	mask-position: 0 0, 22px 22px;
	background-color: var(--wp--preset--color--accent-beige);
	opacity: 0.06;
}

.sama-footer-inner {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin-inline: auto;
}

.sama-footer-columns {
	display: grid;
	grid-template-columns: 1.2fr repeat(3, 1fr);
	gap: 32px;
}

.sama-footer-col--brand .sama-footer-brand {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.3rem;
	color: var(--wp--preset--color--white);
	margin: 0 0 8px;
}

.sama-footer-col--brand .sama-footer-tagline {
	font-size: 0.85rem;
	color: var(--wp--preset--color--accent-beige);
	margin: 0;
}

.sama-footer-col h3 {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--wp--preset--color--accent-beige);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin: 0 0 14px;
}

.sama-footer-col a {
	display: block;
	color: #cfd8dd;
	text-decoration: none;
	font-size: 0.9rem;
	padding: 5px 0;
}

.sama-footer-col a:hover {
	color: var(--wp--preset--color--accent-beige);
}

/* GRC/ADR به‌عنوان زیرآیتم «قراردادها» در فوتر — بدون خط/تورفتگی، دقیقاً هم‌سبک بقیه‌ی لینک‌های ستون */
.sama-footer-subitems {
	display: contents;
}

.sama-footer-bottom {
	margin-top: 44px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
}

.sama-footer-bottom p {
	margin: 0;
	font-size: 0.82rem;
	color: var(--wp--preset--color--accent-beige);
}

/* ===== ردیف شبکه‌های اجتماعی (فوتر، درباره ما، تماس با ما) ===== */
.sama-social {
	display: flex;
	align-items: center;
	gap: 10px;
}

.sama-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid rgba(215, 201, 183, 0.35);
	color: var(--wp--preset--color--accent-beige);
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.sama-social-link:hover,
.sama-social-link:focus-visible {
	background-color: rgba(215, 201, 183, 0.14);
	border-color: var(--wp--preset--color--accent-beige);
	transform: translateY(-2px);
}

.sama-social-icon {
	width: 19px;
	height: 19px;
}

/* لوگوی بله ترنسپرنت و رنگ‌ثابت است، پس از currentColor پیروی نمی‌کند */
.sama-social-icon--bale {
	width: 21px;
	height: 21px;
	-o-object-fit: contain;
	   object-fit: contain;
}

/* ردیف ساده‌ی شبکه‌های اجتماعی زیر نقشه‌ی صفحه‌ی تماس — عمداً کارت/موزاییک جدا
   نیست (خواسته‌ی صریح کارفرما)، فقط یک خط برچسب + آیکون‌ها. */
.sama-contact-social-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 22px;
}

.sama-contact-social-label {
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--accent-beige);
	opacity: 0.85;
}

/* بلوک مستقل «ما را دنبال کنید» در انتهای صفحه‌ی درباره ما */
.sama-social-block {
	margin-top: 40px;
	padding-top: 26px;
	border-top: 1px solid rgba(15, 42, 61, 0.12);
}

.sama-social-block-label {
	margin: 0 0 14px;
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	color: var(--sama-gray-text);
}

/* روی زمینه‌ی روشن (صفحه‌ی درباره ما) رنگ‌ها باید سرمه‌ای شوند */
.sama-social--on-light .sama-social-link {
	color: var(--wp--preset--color--primary-navy);
	border-color: rgba(15, 42, 61, 0.28);
}

.sama-social--on-light .sama-social-link:hover,
.sama-social--on-light .sama-social-link:focus-visible {
	background-color: rgba(15, 42, 61, 0.08);
	border-color: var(--wp--preset--color--primary-navy);
}

@media (max-width: 720px) {
	.sama-footer-columns {
		grid-template-columns: 1fr 1fr;
	}
}

/* ============ سکشن CTA «تماس با ما» — همون بافت نشان سما، این‌بار سرمه‌ای روی زمینه‌ی بژ ============ */
.sama-contact-cta {
	position: relative;
	overflow: hidden;
}

.sama-contact-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	-webkit-mask-image: url("../../images/emblem-sama.png"), url("../../images/emblem-sama.png");
	mask-image: url("../../images/emblem-sama.png"), url("../../images/emblem-sama.png");
	-webkit-mask-repeat: repeat, repeat;
	mask-repeat: repeat, repeat;
	-webkit-mask-size: 44px 44px, 44px 44px;
	mask-size: 44px 44px, 44px 44px;
	-webkit-mask-position: 0 0, 22px 22px;
	mask-position: 0 0, 22px 22px;
	background-color: var(--wp--preset--color--primary-navy);
	opacity: 0.06;
}

.sama-contact-cta > * {
	position: relative;
	z-index: 1;
}
.sama-card {
	background-color: var(--wp--preset--color--light-background);
	border-radius: 6px;
	padding: var(--wp--preset--spacing--40);
	height: 100%;
}

.sama-card h3,
.sama-card h4 {
	margin-top: 0;
	color: var(--wp--preset--color--primary-navy);
}

.sama-card a {
	text-decoration: none;
	color: inherit;
}

.sama-card--dark {
	background-color: rgba(255, 255, 255, 0.07);
}

.sama-card--dark h3,
.sama-card--dark h4 {
	color: var(--wp--preset--color--white);
}

.sama-card--beige {
	background-color: #EFE7DB;
	padding: var(--wp--preset--spacing--30);
	text-align: center;
}

.sama-pillar {
	text-align: center;
	padding: 24px 18px;
}

.sama-pillar-icon img {
	margin: 0 auto 12px;
	filter: brightness(0) invert(1);
}

.sama-stat .sama-stat-number {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 600;
	color: var(--wp--preset--color--accent-beige);
	display: block;
	line-height: 1.2;
}

.sama-stat .sama-stat-label {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--white);
	opacity: 0.85;
}

.sama-emblem-watermark {
	opacity: 0.07;
	position: absolute;
	inset-inline-end: -40px;
	top: -40px;
	width: 320px;
	max-width: 40vw;
	pointer-events: none;
	z-index: 1;
}

.sama-hero {
	position: relative;
	overflow: hidden;
}

.sama-page-hero {
	min-height: 180px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-top: -110px !important;
	padding-top: 158px !important;
}

.sama-hero-pattern-b {
	position: absolute;
	inset: 0;
	margin: 0;
	pointer-events: none;
	z-index: 0;
}

.sama-hero-pattern-b img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
	display: block;
}

.sama-hero > *:not(.sama-emblem-watermark):not(.sama-hero-pattern-b):not(.sama-hero-emblem-texture) {
	position: relative;
	z-index: 2;
}
.sama-hero-photo {
	position: relative;
	margin-top: -110px !important;
}

.sama-hero-photo .wp-block-cover__image-background {
	-o-object-fit: cover;
	   object-fit: cover;
	-o-object-position: center 38%;
	   object-position: center 38%;
}

.sama-hero-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15, 42, 61, 0.25) 0%, rgba(15, 42, 61, 0.55) 60%, rgba(15, 42, 61, 0.88) 100%);
	pointer-events: none;
	z-index: 1;
}

.sama-hero-photo .wp-block-cover__inner-container {
	position: relative;
	z-index: 2 !important;
}

/* بافت هندسی نشان سما روی کادر سرمه‌ای بالای صفحات داخلی — جایگزین banner-pattern.svg قبلی، هم‌سبک با بقیه‌ی بافت‌های سایت */
.sama-hero-emblem-texture {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	-webkit-mask-image: url("../../images/emblem-sama.png"), url("../../images/emblem-sama.png");
	mask-image: url("../../images/emblem-sama.png"), url("../../images/emblem-sama.png");
	-webkit-mask-repeat: repeat, repeat;
	mask-repeat: repeat, repeat;
	-webkit-mask-size: 40px 40px, 40px 40px;
	mask-size: 40px 40px, 40px 40px;
	-webkit-mask-position: 0 0, 20px 20px;
	mask-position: 0 0, 20px 20px;
	background-color: var(--wp--preset--color--accent-beige);
	opacity: 0.08;
}

/* ===== لوگو + شعار + دکمه در هیروی صفحه اصلی ===== */
.sama-hero-brand {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px;
}

.sama-hero-brand-logo {
	height: 128px;
	width: auto;
	filter: brightness(0) invert(1);
	opacity: 0.95;
	margin-bottom: 30px;
}

/* لوگوی وردمارک کامل (نام لاتین+فارسی) جزئیات ریزتری دارد؛ بزرگ‌تر گذاشته شده تا روی عکس خوانا بماند،
   و چون تنها المان متنی هیروست (بدون شعار جدا)، فاصله‌ی زیرش هم بیشتر از حالت لوگوی نشان تنها است. */
.sama-hero-brand-logo--wordmark {
	height: 220px;
	margin-bottom: 38px;
}

/* شعار مجموعه، پایین لوگوی هیرو — جایگزین دکمه‌ی «درباره ما»ی قبلی.
   قبلاً این شعار در یک نوار سفید مستقل زیر نوار خبری بود؛ به داخل هیرو
   منتقل شد تا هیرو یک پیام واحد داشته باشد و نوار سفید خالی بماند. */
.sama-hero-slogan {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 2rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--accent-beige);
	text-align: center;
	text-shadow: 0 2px 18px rgba(15, 42, 61, 0.55);
}

/* ===== overlapping news bar (Baker McKenzie style floating strip) ===== */
.sama-news-bar-wrap {
	/* مقدار بیرون‌زدگی نوار خبری روی عکس هیرو. به‌صورت متغیر تعریف شده چون دو جا
	   لازم است — هم margin منفی که نوار را بالا می‌کشد، هم offsetِ پس‌زمینه —
	   و اگر این دو از هم جدا بیفتند، پترن روی هیرو را می‌پوشاند. */
	--sama-news-overlap: 84px;

	position: relative;
	z-index: 3;
	margin-top: calc(-1 * var(--sama-news-overlap));
	margin-bottom: 0;

	/* ⚠️ فضای پایین عمداً کم است: قبلاً شعار «ما از شما حمایت می‌کنیم» در یک
	   نوار سفید مستقل زیر همین بخش می‌نشست. شعار به هیرو منتقل شد، پس این
	   ناحیه خالی ماند — کوتاه شد و به‌جای سفید، پترنِ طوسیِ نشان سما گرفت. */
	padding-bottom: 26px;
}

/* پس‌زمینه‌ی این ناحیه: ::before زمینه‌ی روشن، ::after پترنِ طوسیِ نشان سما رویش.
   ⚠️ دو نکته‌ی مهم:
   ۱) عمداً pseudo-element اند نه <div> واقعی: یک بار به‌صورت <div> نوشته شد و
      وردپرس کلاس‌های layout گروه (is-layout-constrained و wp-container-core-…)
      را به‌جای خود <section> روی آن اولین تگِ داخلی نشاند — سقف عرض ۱۲۰۰px از
      بین رفت و نوار خبری تمام‌عرض شد.
   ۲) از `top: var(--sama-news-overlap)` شروع می‌شوند، نه از `inset: 0`. چون
      سکشن با margin منفی روی هیرو بالا کشیده شده، پس‌زمینه‌ی چسبیده به بالای آن
      دقیقاً همان تکه از عکس هیرو را می‌پوشاند که نوار خبری قرار است رویش سوار
      شود — و اثر «سوار شدن روی هیرو» کاملاً از بین می‌رفت. */
.sama-news-bar-wrap::before,
.sama-news-bar-wrap::after {
	content: "";
	position: absolute;
	top: var(--sama-news-overlap);
	inset-inline: 0;
	bottom: 0;
	z-index: 0;
	pointer-events: none;
}

.sama-news-bar-wrap::before {
	background-color: var(--wp--preset--color--light-background);
}

.sama-news-bar-wrap::after {
	background-color: var(--wp--preset--color--gray);
	opacity: 0.22;
	-webkit-mask-image: url("../../images/emblem-sama.png"), url("../../images/emblem-sama.png");
	mask-image: url("../../images/emblem-sama.png"), url("../../images/emblem-sama.png");
	-webkit-mask-repeat: repeat, repeat;
	mask-repeat: repeat, repeat;
	-webkit-mask-size: 40px 40px, 40px 40px;
	mask-size: 40px 40px, 40px 40px;
	-webkit-mask-position: 0 0, 20px 20px;
	mask-position: 0 0, 20px 20px;
}

/* نوار خبری باید روی پترن بنشیند، نه زیرش — بدون این، ::before با z-index صفر
   (المان پوزیشن‌دار) بالاتر از محتوای درون‌جریانِ بدون z-index رسم می‌شود. */
.sama-news-bar-wrap > .wp-block-query {
	position: relative;
	z-index: 1;
}

.sama-news-bar {
	background-color: var(--wp--preset--color--primary-navy);
	box-shadow: 0 24px 48px -20px rgba(15, 42, 61, 0.45);
}

/* هر آیتم: نسخه‌ی قدیمی (div دستی) و نسخه‌ی Query Loop (li.wp-block-post) */
.sama-news-bar-item,
.sama-news-bar > li {
	padding: 42px 32px;
	position: relative;
	margin: 0;
}

.sama-news-bar-item::before,
.sama-news-bar > li::before {
	content: "";
	position: absolute;
	top: 42px;
	bottom: 42px;
	inset-inline-start: 0;
	width: 1px;
	background: rgba(215, 201, 183, 0.25);
}

.sama-news-bar-item:first-child::before,
.sama-news-bar > li:first-child::before {
	display: none;
}

.sama-news-bar-eyebrow {
	display: block;
	color: var(--wp--preset--color--accent-beige);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	margin-bottom: 10px;
}

/* دسته‌بندی در Query Loop به‌صورت لینک رندر می‌شود */
.sama-news-bar-eyebrow a {
	color: inherit;
	text-decoration: none;
}

.sama-news-bar-eyebrow a:hover {
	text-decoration: underline;
}

.sama-news-bar-item h3,
.sama-news-bar > li h3 {
	margin: 0 0 12px;
	font-size: 1.05rem;
	line-height: 1.5;
}

.sama-news-bar-item h3 a,
.sama-news-bar > li h3 a {
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.sama-news-bar-item h3 a:hover,
.sama-news-bar > li h3 a:hover {
	color: var(--wp--preset--color--accent-beige);
}

/* در Query Loop این یک <a> (بلوک read-more) است، نه پاراگراف */
.sama-news-bar-go {
	display: inline-block;
	font-size: 0.8rem;
	color: var(--wp--preset--color--accent-beige);
	opacity: 0.8;
	margin-bottom: 0;
	padding: 0;
	border: 0;
	background: none;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

a.sama-news-bar-go:hover,
a.sama-news-bar-go:focus-visible {
	opacity: 1;
	text-decoration: underline;
}

.sama-news-bar-empty {
	background-color: var(--wp--preset--color--primary-navy);
	color: var(--wp--preset--color--accent-beige);
	padding: 42px 32px;
	margin: 0;
	box-shadow: 0 24px 48px -20px rgba(15, 42, 61, 0.45);
}

@media (max-width: 781px) {
	.sama-hero-photo.wp-block-cover {
		min-height: 520px !important;
	}

	.sama-hero-brand-logo {
		height: 78px;
		margin-bottom: 18px;
	}

	.sama-hero-brand-logo--wordmark {
		height: 128px;
		margin-bottom: 24px;
	}

	.sama-hero-slogan {
		font-size: 1.4rem;
	}

	.sama-news-bar-wrap {
		--sama-news-overlap: 48px;
	}

	.sama-news-bar-item,
	.sama-news-bar > li {
		padding: 22px 20px;
	}

	.sama-news-bar-item::before,
	.sama-news-bar > li::before {
		display: none;
	}
}
/* ===================================================================
   Full-width 2x2 photo grid (institute / law office / academy / GRC)
   One shared photo is cut into 4 pieces by a "+" divider. Hovering any
   tile crossfades ALL 4 pieces together into a different shared photo
   (the one belonging to the hovered section); the hovered tile also
   slides up a solid-color info card with its title/description.
=================================================================== */
.sama-quad-grid {
	position: relative;

	/* ⚠️ این بخش چهار تصویر پس‌زمینه‌ی CSS دارد که روی هم ۴۲۳KB می‌شوند و چون
	   background-image هستند، برخلاف <img loading="lazy">، به‌محض رندر شدن
	   المان دانلود می‌شوند — یعنی دقیقاً هم‌زمان با ثانیه‌های اول لود صفحه و
	   پخش انیمیشن اسپلش، در حالی که این بخش زیر تاشدگی است و اصلاً دیده نمی‌شود.
	   همین ازدحام (پهنای باند + رمزگشایی تصویر روی ترد اصلی) باعث گیر کردن پخش
	   ویدیوی اسپلش می‌شد. با content-visibility مرورگر تا وقتی این بخش به
	   دیدرس نزدیک نشود رندرش نمی‌کند و تصاویرش هم دانلود نمی‌شوند.
	   contain-intrinsic-size ارتفاع تخمینی است تا نوار اسکرول موقع رسیدن به
	   این بخش نپرد. */
	content-visibility: auto;
	contain-intrinsic-size: auto 600px;
}

.sama-quad-tiles {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 3px;
	background-color: var(--wp--preset--color--white);
}

.sama-quad-tile {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 230px;
	padding: 28px;
	overflow: hidden;
	text-decoration: none;
}

/* each tile shows its own quarter of whichever shared image is active,
   via background-size:200% + a per-quadrant background-position */
.sama-quad-layer {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: 200% 200%;
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
}

/* ⚠️ عمداً پشت `html:not(.sama-splash-active)` قفل شده.
   این چهار فایل روی هم ۴۲۳KB هستند و چون background-image اند (نه <img>)،
   loading="lazy" شاملشان نمی‌شود و به‌محض resolve شدن استایل دانلود می‌شوند —
   یعنی دقیقاً در همان ثانیه‌های اولی که ویدیوی اسپلش باید روان پخش شود، در
   حالی که این بخش هم زیر تاشدگی است و هم پشت اسپلش. (content-visibility
   بالا فقط رندر و رمزگشایی را عقب می‌اندازد، نه خودِ دانلود را — تست شد.)
   کلاس sama-splash-active را اسکریپت اسپلش می‌گذارد و بعد از پایانش برمی‌دارد،
   پس این تصاویر از همان لحظه دانلود می‌شوند و تا وقتی کاربر تا این بخش اسکرول
   کند آماده‌اند. اگر جاوااسکریپت خاموش باشد یا prefers-reduced-motion فعال
   باشد، کلاس هیچ‌وقت گذاشته نمی‌شود و تصاویر مثل قبل بلافاصله لود می‌شوند. */
html:not(.sama-splash-active) .sama-quad-layer[data-img="law"] { background-image: url(../../images/quad-law.webp); }
html:not(.sama-splash-active) .sama-quad-layer[data-img="academy"] { background-image: url(../../images/quad-academy.webp); }
html:not(.sama-splash-active) .sama-quad-layer[data-img="grc"] { background-image: url(../../images/quad-grc.webp); }
html:not(.sama-splash-active) .sama-quad-layer[data-img="institute"] { background-image: url(../../images/quad-institute.webp); }

/* ===== مکانیک «یک عکس مشترک بریده‌شده به ۴ تکه» — فقط دسکتاپ با ماوس واقعی =====
   ⚠️ این بلوک عمداً داخل `(hover: hover)` است. قبلاً بیرون بود و چون مرورگرهای
   موبایل بعد از لمس یک لینک حالت :hover را روی آن «می‌چسبانند»، انتخاب‌گرهای
   `:has(...:hover)` (ویژگی 0,6,0) روی قوانین موبایل (0,4,0) برنده می‌شدند و با
   لمس یک کاشی، **هر چهار کاشی** عکس همان بخش را می‌گرفتند.
   قوانین `[data-pos]` هم همین‌جا هستند: ویژگی‌شان (0,3,0) از قانون موبایلِ
   `background-position: center` (0,2,0) بیشتر بود و روی موبایل عکسِ هر کاشی را
   به‌جای وسط، از گوشه کراپ می‌کرد. */
@media (hover: hover) and (min-width: 601px) {
	.sama-quad-tile[data-pos="tr"] .sama-quad-layer { background-position: 100% 0%; }
	.sama-quad-tile[data-pos="tl"] .sama-quad-layer { background-position: 0% 0%; }
	.sama-quad-tile[data-pos="br"] .sama-quad-layer { background-position: 100% 100%; }
	.sama-quad-tile[data-pos="bl"] .sama-quad-layer { background-position: 0% 100%; }

	/* پیش‌فرض (وقتی روی هیچ کاشی‌ای هاور نیست): عکس «حقوقی» هر چهار ربع را پر می‌کند */
	.sama-quad-layer[data-img="law"] {
		opacity: 1;
	}

	/* هاور روی هر کاشی، عکس مشترک را روی همه‌ی کاشی‌ها عوض می‌کند */
	.sama-quad-tiles:has(.sama-quad-tile[data-quad="law"]:hover) .sama-quad-layer[data-img="law"] { opacity: 1; }
	.sama-quad-tiles:has(.sama-quad-tile[data-quad="law"]:hover) .sama-quad-layer:not([data-img="law"]) { opacity: 0; }

	.sama-quad-tiles:has(.sama-quad-tile[data-quad="academy"]:hover) .sama-quad-layer[data-img="academy"] { opacity: 1; }
	.sama-quad-tiles:has(.sama-quad-tile[data-quad="academy"]:hover) .sama-quad-layer:not([data-img="academy"]) { opacity: 0; }

	.sama-quad-tiles:has(.sama-quad-tile[data-quad="grc"]:hover) .sama-quad-layer[data-img="grc"] { opacity: 1; }
	.sama-quad-tiles:has(.sama-quad-tile[data-quad="grc"]:hover) .sama-quad-layer:not([data-img="grc"]) { opacity: 0; }

	.sama-quad-tiles:has(.sama-quad-tile[data-quad="institute"]:hover) .sama-quad-layer[data-img="institute"] { opacity: 1; }
	.sama-quad-tiles:has(.sama-quad-tile[data-quad="institute"]:hover) .sama-quad-layer:not([data-img="institute"]) { opacity: 0; }
}

.sama-quad-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(15, 42, 61, 0.65) 0%, rgba(15, 42, 61, 0.05) 55%);
	z-index: 1;
}

/* (تاریخچه: فونت heading قبلی Cormorant Garamond گلیف فارسی نداشت، پس این‌جا فونت
   body صدا زده شد. از ۱۴۰۴/۰۶/۰۳ هر دو «مدام»‌اند و تفاوتی ندارند.) */
.sama-quad-label {
	position: relative;
	z-index: 2;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.4rem;
	font-weight: 700;
}

.sama-quad-card {
	position: absolute;
	inset-inline-start: 0;
	top: 100%;
	width: 100%;
	/* 🐛 قالب هیچ ریست سراسری `box-sizing: border-box` ندارد، پس این کارت با
	   `width:100%` + `padding:28px` در واقع ۵۶ پیکسل پهن‌تر از کاشی می‌شد. چون
	   `inset-inline-start: 0` است، در RTL لبه‌ی *راست* کارت به کاشی قفل می‌شود و
	   آن ۵۶ پیکسل اضافه از سمت *چپ* بیرون می‌زد و با `overflow:hidden` کاشی
	   بریده می‌شد — یعنی انتهای هر سطر از متن توضیح زیر کاشی بغلی گم می‌شد.
	   روی موبایل که کاشی فقط ۱۸۶ پیکسل عرض دارد این ۳۶ پیکسل (پدینگ موبایل)
	   کاملاً تو چشم بود و حتی جای شکستن خط را هم به‌هم می‌ریخت. */
	box-sizing: border-box;
	min-height: 100%;
	z-index: 3;
	background-color: var(--wp--preset--color--primary-navy);
	transition: top 0.4s ease-in-out;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 28px;
}

/* ⚠️ همان دلیل بلوک بالا: روی موبایل :hover چسبنده است و این قانون (0,3,0) از
   قانون موبایلِ `.sama-quad-card { top: auto }` (0,1,0) قوی‌تر بود، پس با لمس
   کاشی، کارت توضیح تمام تصویر را می‌پوشاند. */
@media (hover: hover) and (min-width: 601px) {
	.sama-quad-tile:hover .sama-quad-card,
	.sama-quad-tile:focus-visible .sama-quad-card {
		top: 0;
	}
}

.sama-quad-card-title {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--wp--preset--color--white);
	margin: 0 0 10px;
}

.sama-quad-card-desc {
	display: block;
	color: var(--wp--preset--color--accent-beige);
	font-size: 0.88rem;
	line-height: 1.8;
}

/* ===== دستگاه‌های لمسی / صفحه‌های کوچک =====
   کل مکانیک این گرید بر پایه‌ی :hover است — روی موبایل هیچ‌وقت اتفاق نمی‌افتد،
   یعنی کارت توضیح (که پیش‌فرض زیر کاشی پنهان است) اصلاً دیده نمی‌شد و کاربر
   فقط یک عنوان روی یک تکه عکس نامفهوم می‌دید. روی موبایل:
   ۱) هر کاشی عکس مخصوص خودش را نشان می‌دهد (چون سوییچ هاور معنا ندارد)،
   ۲) عنوان و توضیح همیشه دیده می‌شوند. */
@media (hover: none), (max-width: 600px) {
	.sama-quad-tile {
		min-height: 190px;
		padding: 0;
		align-items: stretch;
	}

	/* هر کاشی = یک عکس کامل مخصوص خودش، نه یک‌چهارم عکس مشترک.
	   ⚠️ انتخاب‌گر عمداً دوکلاسه است: قانون پیش‌فرض `.sama-quad-layer[data-img="law"]`
	   هم دوکلاسه است و با یک کلاس خاموش نمی‌شد — نتیجه‌اش رندر هم‌زمان دو عکس روی
	   هر کاشی بود. */
	.sama-quad-tile .sama-quad-layer {
		background-size: cover;
		background-position: center;
		opacity: 0;
	}

	.sama-quad-tile[data-quad="law"] .sama-quad-layer[data-img="law"],
	.sama-quad-tile[data-quad="academy"] .sama-quad-layer[data-img="academy"],
	.sama-quad-tile[data-quad="grc"] .sama-quad-layer[data-img="grc"],
	.sama-quad-tile[data-quad="institute"] .sama-quad-layer[data-img="institute"] {
		opacity: 1;
	}

	/* عنوان داخل خود کارت تکرار شده، پس برچسب پس‌زمینه اضافی است */
	.sama-quad-label {
		display: none;
	}

	/* کارت به‌جای «کشوی هاوری»، یک نوار همیشه‌پیدا در پایین کاشی */
	.sama-quad-card {
		position: absolute;
		top: auto;
		bottom: 0;
		min-height: 0;
		justify-content: flex-end;
		padding: 16px 18px;
		background: linear-gradient(
			to top,
			rgba(15, 42, 61, 0.94) 0%,
			rgba(15, 42, 61, 0.82) 55%,
			rgba(15, 42, 61, 0) 100%
		);
		transition: none;
	}

	.sama-quad-card-title {
		font-size: 1.12rem;
		margin-bottom: 6px;
	}

	/* 🐛 عنوان‌های چهار کاشی هم‌تراز نبودند: کارت به پایینِ کاشی چسبیده
	   (bottom: 0) و ارتفاعش را محتوایش تعیین می‌کرد، پس کاشی‌ای که توضیحش
	   ۳ خط می‌شد (دفتر حقوقی سما) عنوانش ۲۶px بالاتر از کاشی بغل‌دستی‌اش
	   با توضیح ۲ خطی می‌نشست — کنار هم در گرید ۲×۲ کاملاً تابلو بود.
	   با قفل کردن ارتفاع توضیح روی دقیقاً ۳ خط (کف با min-height، سقف با
	   line-clamp)، ارتفاع هر چهار کارت یکی می‌شود و عنوان‌ها هم‌تراز می‌مانند
	   — در هر عرض صفحه‌ای، نه فقط ۳۷۵px. */
	.sama-quad-card-desc {
		font-size: 0.86rem;
		line-height: 1.7;
		min-height: calc(1.7em * 3);
		display: -webkit-box;
		-webkit-line-clamp: 3;
		line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/* محتوای کارت از بالای خودش شروع شود تا عنوان‌ها روی یک خط بنشینند */
	.sama-quad-card {
		justify-content: flex-start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sama-quad-card,
	.sama-quad-layer {
		transition: none !important;
	}
}
.sama-about-institute {
	position: relative;
	background-color: var(--wp--preset--color--primary-navy);
	padding: 84px 20px;
	text-align: center;
	overflow: hidden;
}

.sama-about-texture {
	position: absolute;
	inset: 0;
	pointer-events: none;
	-webkit-mask-image: url("../../images/emblem-sama.png"), url("../../images/emblem-sama.png");
	mask-image: url("../../images/emblem-sama.png"), url("../../images/emblem-sama.png");
	-webkit-mask-repeat: repeat, repeat;
	mask-repeat: repeat, repeat;
	-webkit-mask-size: 78px 78px, 78px 78px;
	mask-size: 78px 78px, 78px 78px;
	-webkit-mask-position: 0 0, 39px 39px;
	mask-position: 0 0, 39px 39px;
	background-color: var(--wp--preset--color--accent-beige);
	opacity: 0.07;
}

.sama-about-inner {
	position: relative;
	max-width: 740px;
	margin: 0 auto;
}

.sama-about-eyebrow {
	font-size: 0.85rem;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--accent-beige);
	margin: 0 0 22px;
}

.sama-about-statement {
	font-family: var(--wp--preset--font-family--heading);
	font-style: italic;
	font-weight: 600;
	font-size: 2.1rem;
	line-height: 1.55;
	color: var(--wp--preset--color--white);
	margin: 0 0 34px;
}

.sama-about-masthead {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 0.8rem;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--accent-beige);
	margin: 0 0 34px;
}

.sama-about-masthead .sama-about-dot {
	opacity: 0.5;
}

.sama-about-cta {
	display: inline-block;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--wp--preset--color--accent-beige);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--accent-beige);
	padding-bottom: 2px;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.sama-about-cta:hover {
	color: var(--wp--preset--color--white);
	border-bottom-color: var(--wp--preset--color--white);
}

@media (max-width: 640px) {
	.sama-about-institute {
		padding: 60px 20px;
	}
	.sama-about-statement {
		font-size: 1.5rem;
	}
}
/* نوار لوگوی شرکای همکار — اسکرول افقی خودکار و بی‌پایان (تا وقتی لوگوهای واقعی جایگزین شوند). */
.sama-logo-marquee {
	background-color: var(--wp--preset--color--white);
	padding-block: 48px;
}

.sama-logo-marquee-head {
	max-width: 640px;
	margin: 0 auto 32px;
	padding-inline: 20px;
	text-align: center;
}

.sama-logo-marquee-eyebrow {
	font-size: 0.85rem;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--secondary-blue);
	margin: 0 0 6px;
}

.sama-logo-marquee-head h2 {
	margin: 0 0 8px;
}

.sama-logo-marquee-note {
	font-size: 0.82rem;
	color: var(--sama-gray-text);
	margin: 0;
}

/* دکمه‌ی «پیام در بله» — نسخه‌ی هم‌رنگ با تمِ روشنِ همین بخش (سرمه‌ای/سفید،
   نه بژ روی سرمه‌ای مثل هیروی پیمان)، هم‌سبک دکمه‌ی sama-contact-band-btn */
.sama-logo-marquee-bale-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 18px;
	background-color: var(--wp--preset--color--primary-navy);
	color: var(--wp--preset--color--white);
	text-decoration: none;
	font-size: 0.88rem;
	font-weight: 600;
	padding: 11px 24px;
	border-radius: 999px;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.sama-logo-marquee-bale-btn:hover {
	background-color: var(--wp--preset--color--secondary-blue);
	transform: translateY(-2px);
	color: var(--wp--preset--color--white);
}

.sama-logo-marquee-bale-btn svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.sama-logo-marquee-bale-btn .sama-bale-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	-o-object-fit: contain;
	   object-fit: contain;
}

.sama-logo-marquee-bale-btn small {
	display: block;
	font-weight: 400;
	font-size: 0.68rem;
	opacity: 0.8;
}

.sama-logo-marquee-track {
	overflow: hidden;
	/* عمداً LTR: چیدمان راست‌به‌چپِ صفحه باعث می‌شد نوار به‌صورت پیش‌فرض چسبیده به لبه‌ی راست بایستد
	   و بخش اضافه‌اش از سمت چپ (خارج از دید) شروع بشه؛ در نتیجه translateX(-50%) بیش‌ازحد جابه‌جا می‌کرد
	   و برای بخشی از هر چرخه، کل ردیف لوگوها کاملاً از دید خارج می‌شد (یک خلأ خالی دیده می‌شد).
	   با LTR کردن همین ردیف، لوگوها از لبه‌ی چپ شروع می‌شن و اسکرول بی‌وقفه و بدون خلأ می‌شود. */
	direction: ltr;
	-webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
	mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.sama-logo-marquee-list {
	display: flex;
	align-items: center;
	gap: 64px;
	width: -moz-max-content;
	width: max-content;
	animation: sama-marquee-scroll 32s linear infinite;
}

.sama-logo-marquee-track:hover .sama-logo-marquee-list {
	animation-play-state: paused;
}

.sama-logo-chip {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	opacity: 0.65;
	filter: grayscale(1);
	transition: opacity 0.2s ease, filter 0.2s ease;
}

.sama-logo-chip:hover {
	opacity: 1;
	filter: grayscale(0);
}

.sama-logo-chip img {
	height: 68px;
	width: auto;
}

@keyframes sama-marquee-scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sama-logo-marquee-list {
		animation: none;
	}
	.sama-logo-marquee-track {
		overflow-x: auto;
	}
}
/* ===== نوار تماس صفحه اصلی — نسخه‌ی روشن (بک‌گراند بژ روشن، اجزا سرمه‌ای) با بافت نشان سما پشت‌زمینه ===== */
.sama-contact-band {
	position: relative;
	background-color: var(--wp--preset--color--light-background);
	overflow: hidden;
}

.sama-contact-band-texture {
	background-color: var(--wp--preset--color--primary-navy) !important;
	opacity: 0.05 !important;
}

.sama-contact-band-inner {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin-inline: auto;
	padding: 56px 20px;
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 48px;
}

.sama-contact-band-main {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.sama-contact-band-eyebrow {
	font-family: var(--wp--preset--font-family--heading);
	font-style: italic;
	font-size: 0.85rem;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--secondary-blue);
	direction: ltr;
	margin: 0 0 12px;
}

.sama-contact-band-title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 1.6rem;
	color: var(--wp--preset--color--primary-navy);
	margin: 0 0 12px;
}

.sama-contact-band-desc {
	font-size: 0.95rem;
	color: var(--wp--preset--color--text-black);
	line-height: 1.9;
	margin: 0 0 22px;
	max-width: 34ch;
}

.sama-contact-band-btn {
	display: inline-flex;
	align-self: flex-start;
	background-color: var(--wp--preset--color--primary-navy);
	color: var(--wp--preset--color--white);
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 600;
	padding: 12px 28px;
	border-radius: 2px;
	transition: background-color 0.2s ease;
}

.sama-contact-band-btn:hover {
	background-color: var(--wp--preset--color--secondary-blue);
	color: var(--wp--preset--color--white);
}

.sama-contact-band-side {
	border-inline-start: 1px solid rgba(15, 42, 61, 0.14);
	padding-inline-start: 36px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 22px;
}

.sama-contact-band-row {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.sama-contact-band-row svg {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	color: var(--wp--preset--color--secondary-blue);
	margin-top: 2px;
}

.sama-contact-band-label {
	display: block;
	font-size: 0.72rem;
	color: var(--sama-gray-text);
	margin-bottom: 3px;
}

.sama-contact-band-value {
	display: block;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary-navy);
	direction: ltr;
	text-align: right;
	unicode-bidi: plaintext;
}

a.sama-contact-band-value {
	text-decoration: none;
}

a.sama-contact-band-value:hover {
	color: var(--wp--preset--color--secondary-blue);
}

/* وقتی خودِ مقدار یک span است ولی داخلش چند لینک دارد (مثلاً دو شماره تلفن کنار هم) */
.sama-contact-band-value a {
	color: inherit;
	text-decoration: none;
}

.sama-contact-band-value a:hover {
	color: var(--wp--preset--color--secondary-blue);
	text-decoration: underline;
}

/* چند مقدار زیر هم (مثلاً دو ایمیل) */
.sama-contact-band-value--stack {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

/* آدرس فارسیه، برخلاف تلفن/ایمیل نباید چپ‌به‌راست اجباری بشه */
.sama-contact-band-value--address {
	direction: rtl;
	font-weight: 500;
	line-height: 1.6;
}

@media (max-width: 781px) {
	.sama-contact-band-inner {
		grid-template-columns: 1fr;
		gap: 32px;
		padding: 44px 20px;
	}

	.sama-contact-band-side {
		border-inline-start: none;
		border-top: 1px solid rgba(15, 42, 61, 0.14);
		padding-inline-start: 0;
		padding-top: 28px;
	}

	.sama-contact-band-desc {
		max-width: none;
	}
}
/* ===== شبکه‌ی کارت‌های آرشیو (حوزه/میز تخصصی، وکلا، دفاتر) ===== */
.wp-block-post-template.sama-cpt-grid {
	gap: 28px;
}

.wp-block-post-template.sama-cpt-grid > li {
	background-color: var(--wp--preset--color--light-background);
	border-radius: 6px;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	list-style: none;
}

.wp-block-post-template.sama-cpt-grid > li:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 34px -18px rgba(15, 42, 61, 0.35);
}

.wp-block-post-template.sama-cpt-grid .wp-block-post-featured-image {
	margin: 0;
}

.wp-block-post-template.sama-cpt-grid .wp-block-post-featured-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	-o-object-fit: cover;
	   object-fit: cover;
	display: block;
}

.wp-block-post-template.sama-cpt-grid .wp-block-post-title,
.wp-block-post-template.sama-cpt-grid .sama-cpt-meta {
	padding-inline: 22px;
}

.wp-block-post-template.sama-cpt-grid .wp-block-post-title {
	margin: 20px 0 8px;
	font-size: 1.15rem;
}

.wp-block-post-template.sama-cpt-grid .wp-block-post-title a {
	color: var(--wp--preset--color--primary-navy);
	text-decoration: none;
}

.wp-block-post-template.sama-cpt-grid .sama-cpt-meta {
	color: var(--sama-gray-text);
	font-size: 0.92rem;
	line-height: 1.7;
	margin: 0 0 22px;
}

/* ===== زیرتیتر هیرو (کارت‌های تک: توضیح کوتاه/سمت) ===== */
.sama-hero-subtitle {
	text-align: center;
	color: var(--wp--preset--color--accent-beige);
	font-size: 1.05rem;
	margin: 0;
}

/* ===== ردیف تاریخ/دسته‌بندی در هیروی تک‌خبر — جداکننده‌ی نقطه‌ای ===== */
.wp-block-post-date.sama-hero-subtitle,
.wp-block-post-terms.sama-hero-subtitle {
	font-size: 0.92rem;
	position: relative;
}

.wp-block-post-date.sama-hero-subtitle::after {
	content: "·";
	margin-inline-start: 10px;
	color: rgba(255, 255, 255, 0.4);
}

.wp-block-post-terms.sama-hero-subtitle a {
	color: var(--wp--preset--color--accent-beige);
}

/* ===== امضای نویسنده در هیروی تک‌خبر (بلوک sama-legal/post-byline) =====
   اگر فیلد «نام نویسنده» خالی باشد، خودِ بلوک چیزی رندر نمی‌کند. */
.sama-byline {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 20px;
	padding-top: 18px;
	position: relative;
}

/* خط جداکننده‌ی کوتاه و وسط‌چین بالای امضا */
.sama-byline::before {
	content: "";
	position: absolute;
	top: 0;
	inset-inline-start: 50%;
	transform: translateX(50%);
	width: 48px;
	height: 1px;
	background: rgba(215, 201, 183, 0.35);
}

.sama-byline-photo {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	-o-object-fit: cover;
	   object-fit: cover;
	border: 1px solid rgba(215, 201, 183, 0.55);
	flex-shrink: 0;
}

.sama-byline-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.5;
	text-align: start;
}

.sama-byline-name {
	color: var(--wp--preset--color--white);
	font-size: 0.98rem;
	font-weight: 600;
}

.sama-byline-role {
	color: var(--wp--preset--color--accent-beige);
	font-size: 0.82rem;
	opacity: 0.85;
}

@media (max-width: 600px) {
	.sama-byline {
		gap: 10px;
	}

	.sama-byline-photo {
		width: 38px;
		height: 38px;
	}

	.sama-byline-name {
		font-size: 0.92rem;
	}

	.sama-byline-role {
		font-size: 0.78rem;
	}
}
/* ===== آرشیو «میزهای تخصصی» — موزاییک بزرگ/کوچیک، بدون لینک، فقط نمایشی ===== */
/* نکته‌ی فنی مهم: نسخه‌ی قبلی این موزاییک (قبل از بازطراحی یک‌دست) با کاشی‌های
   بزرگِ nth-child(6n+1) روی auto-placement پیش‌فرض گرید (sparse) تکیه داشت؛ چون
   ۲۲ بر ۶ بخش‌پذیر نیست، این الگوریتم گاهی نمی‌تونست کاشی‌های بزرگ رو تمیز جا بده
   و ردیف‌ها نامنظم/ناتراز می‌شدن. اینجا با grid-auto-flow:dense این مشکل کلاً حل
   می‌شه — گرید همیشه اول خلأهای خالی رو با کاشی‌های کوچیک پر می‌کنه، پس صرف‌نظر از
   اینکه ۲۲ به چه عددی بخش‌پذیره، هیچ‌وقت جای خالی/ناهم‌تراز باقی نمی‌مونه. ارتفاع
   ردیف‌ها هم عمداً ثابته (نه auto) چون کاشی بزرگ باید دقیقاً ارتفاع ۲ ردیف کوچیک رو
   پر کنه تا لبه‌ها تراز بمونن. */
.wp-block-post-template.sama-desk-mosaic {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 148px;
	grid-auto-flow: dense;
	gap: 14px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.sama-desk-mosaic > li {
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	padding: 18px 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	list-style: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.sama-desk-mosaic > li:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 34px -18px rgba(0, 0, 0, 0.55);
}

.sama-desk-mosaic > li::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url(../../images/emblem-sama.png);
	background-repeat: no-repeat;
	background-position: left -24px bottom -24px;
	background-size: 110px 110px;
	opacity: 0.08;
	pointer-events: none;
}

/* ۵ گرادیان برند که به‌ترتیب تکرار می‌شن */
.sama-desk-mosaic > li:nth-child(5n+1) { background: linear-gradient(150deg, var(--wp--preset--color--secondary-blue), var(--wp--preset--color--primary-navy)); }
.sama-desk-mosaic > li:nth-child(5n+2) { background: linear-gradient(150deg, var(--wp--preset--color--primary-navy), #071620); }
.sama-desk-mosaic > li:nth-child(5n+3) { background: linear-gradient(150deg, #8a7454, var(--wp--preset--color--primary-navy)); }
.sama-desk-mosaic > li:nth-child(5n+4) { background: linear-gradient(150deg, #274a56, var(--wp--preset--color--primary-navy)); }
.sama-desk-mosaic > li:nth-child(5n) { background: linear-gradient(150deg, var(--wp--preset--color--primary-navy), var(--wp--preset--color--secondary-blue)); }

/* کاشی بزرگ (۲×۲) هر ۷ مورد یک‌بار — چهار کاشی بزرگ در کل ۲۲تا */
.sama-desk-mosaic > li:nth-child(7n+1) {
	grid-column: span 2;
	grid-row: span 2;
	padding: 28px 30px;
}

/* کاشی پهن (۲×۱) هر ۷ مورد یک‌بار (آفست‌شده از کاشی بزرگ) — سه کاشی پهن در کل ۲۲تا */
.sama-desk-mosaic > li:nth-child(7n+4) {
	grid-column: span 2;
}

.sama-desk-mosaic-dot {
	position: relative;
	z-index: 1;
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background-color: var(--wp--preset--color--accent-beige);
	margin: 0 auto 12px;
}

.sama-desk-mosaic .wp-block-post-title {
	margin: 0 0 6px;
	font-size: 0.94rem;
	line-height: 1.45;
	font-weight: 600;
	color: var(--wp--preset--color--white);
	position: relative;
	z-index: 1;
}

.sama-desk-mosaic > li:nth-child(7n+1) .wp-block-post-title {
	font-size: 1.4rem;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
}

.sama-desk-mosaic > li:nth-child(7n+4) .wp-block-post-title {
	font-size: 1.1rem;
}

/* توضیح کوتاه فقط روی کاشی بزرگ دیده می‌شه — کاشی پهن/کوچیک فقط عنوان دارن */
.sama-desk-mosaic-desc {
	display: none;
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.82rem;
	line-height: 1.7;
	margin: 0;
	position: relative;
	z-index: 1;
}

.sama-desk-mosaic > li:nth-child(7n+1) .sama-desk-mosaic-desc {
	display: block;
}

@media (max-width: 900px) {
	.wp-block-post-template.sama-desk-mosaic {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 640px) {
	.wp-block-post-template.sama-desk-mosaic {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: minmax(128px, auto);
		gap: 10px;
	}

	/* در موبایل چیدمان بزرگ/کوچیک به یک‌دست ساده تبدیل می‌شه تا هیچ کاشی خیلی
	   فشرده/برش‌خورده نشه — ارتفاع هم auto می‌شه چون فضای افقی کمتره */
	.sama-desk-mosaic > li:nth-child(7n+1),
	.sama-desk-mosaic > li:nth-child(7n+4) {
		grid-column: span 1;
		grid-row: span 1;
		padding: 16px 14px;
	}

	.sama-desk-mosaic > li:nth-child(7n+1) .wp-block-post-title,
	.sama-desk-mosaic > li:nth-child(7n+4) .wp-block-post-title {
		font-size: 0.9rem;
		font-family: inherit;
		font-weight: 600;
	}

	.sama-desk-mosaic > li:nth-child(7n+1) .sama-desk-mosaic-desc {
		display: none;
	}

	.sama-desk-mosaic .wp-block-post-title {
		font-size: 0.88rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sama-desk-mosaic > li {
		transition: none;
	}
}
/* ===== ساختار مجموعه — شاخه‌ها: ۴ رکن مجموعه به‌صورت کارت‌های شیشه‌ای روی بوم تیره =====
   ادامه‌ی sama-org-network در _ceo-intro.css؛ گرید نامتقارن (شاخه‌ها هم‌تراز نیستند)
   حس یک نقشه/شبکه را به‌جای ردیف صاف پنل‌ها منتقل می‌کند. */
.sama-org-rail {
	height: 1px;
	max-width: 980px;
	margin: 0 auto;
	background: rgba(215, 201, 183, 0.25);
}

.sama-org-branches {
	max-width: 1080px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
	padding-top: 40px;
}

.sama-org-node {
	position: relative;
	background: rgba(255, 255, 255, 0.045);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(215, 201, 183, 0.22);
	border-radius: 14px;
	padding: 24px 20px;
	transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.sama-org-node::before {
	content: "";
	position: absolute;
	top: -40px;
	right: 50%;
	width: 1px;
	height: 26px;
	background: rgba(215, 201, 183, 0.3);
}

.sama-org-node:nth-child(2) {
	margin-top: 34px;
}

.sama-org-node:nth-child(4) {
	margin-top: 34px;
}

.sama-org-node:hover {
	transform: translateY(-8px);
	border-color: var(--wp--preset--color--accent-beige);
	background: rgba(255, 255, 255, 0.08);
}

.sama-org-node-num {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-style: italic;
	font-size: 0.85rem;
	color: rgba(215, 201, 183, 0.65);
	margin-bottom: 10px;
}

.sama-org-node-name {
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0 0 10px;
	color: var(--wp--preset--color--accent-beige);
}

.sama-org-node-desc {
	font-size: 0.82rem;
	color: rgba(255, 255, 255, 0.68);
	line-height: 1.8;
	margin: 0 0 16px;
	min-height: 56px;
}

.sama-org-node-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.sama-org-node-tags span,
.sama-org-node-tags a {
	display: inline-block;
	font-size: 0.7rem;
	color: rgba(255, 255, 255, 0.8);
	background-color: transparent;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 999px;
	padding: 3px 10px;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.sama-org-node-tags a:hover {
	background-color: var(--wp--preset--color--accent-beige);
	border-color: var(--wp--preset--color--accent-beige);
	color: var(--wp--preset--color--primary-navy);
}

/* قانون عمومی .sama-body-dark لینک‌های داخل محتوا رو آبی می‌کنه (برای بدنه‌ی سفید بقیه‌ی صفحات)،
   ولی این بخش («ساختار مجموعه») همیشه زمینه‌ی سرمه‌ای تیره داره؛ آبی روی سرمه‌ای عملاً نامرئی می‌شد.
   با !important این چیپ‌ها همیشه رنگ روشن خودشون رو نگه می‌دارن، صرف‌نظر از پس‌زمینه‌ی بقیه‌ی صفحه. */
.sama-org-node-tags a {
	color: rgba(255, 255, 255, 0.8) !important;
}

.sama-org-node-tags a:hover {
	color: var(--wp--preset--color--primary-navy) !important;
}

/* ----- شعار موسسه، داخل متن مقدمه‌ی روشن بالای صفحه ----- */
.sama-motto {
	text-align: center;
	font-family: var(--wp--preset--font-family--heading);
	font-style: italic;
	font-size: 1.3rem;
	color: var(--wp--preset--color--primary-navy);
	margin: 12px auto 8px;
	max-width: 60ch;
}

@media (max-width: 900px) {
	.sama-org-branches {
		grid-template-columns: repeat(2, 1fr);
	}

	.sama-org-node:nth-child(2),
	.sama-org-node:nth-child(4) {
		margin-top: 0;
	}

	.sama-org-node::before,
	.sama-org-rail {
		display: none;
	}
}

@media (max-width: 560px) {
	.sama-org-branches {
		grid-template-columns: 1fr;
	}
}
/* ===== ساختار مجموعه — «نقشه مجموعه»: مدیرعامل به‌عنوان ریشه، ۴ رکن به‌عنوان شاخه =====
   جایگزین کارت روشن قبلی؛ این بخش یک بوم تیرهٔ مستقل (رادیال سرمه‌ای) است که با پنل‌های
   روشن بقیه‌ی صفحه تضاد ایجاد می‌کند، دقیقاً مثل زمینه‌ی تیره‌ی هیرو و آرشیوها. */
.sama-org-network {
	background: radial-gradient(ellipse at 50% -10%, #16374a 0%, #0A1D28 55%, #081319 100%);
	color: var(--wp--preset--color--white);
	padding: 72px 20px 88px;
	position: relative;
	overflow: hidden;
}

/* وقتی این سکشن اولین فرزند بدنه‌ی صفحه است (مثل /about-group/)، padding-top سفید main رو
   خنثی می‌کنیم تا هیرو مستقیم به این بوم تیره برسد، بدون کادر سفید فاصله. */
.entry-content > .sama-org-network:first-child {
	margin-top: -48px;
}

/* روی موبایل قبلاً این مقدار -32px بود در حالی که padding-top خودِ <main> در همه‌ی
   بریک‌پوینت‌ها 48px است (استایل inline در templates/page.html). نتیجه یک نوار سفید
   16 پیکسلی بین هیرو و این بوم تیره بود. چون مقدار پدینگ ریسپانسیو نیست، اورراید
   موبایل اصلاً لازم نبود و حذف شد؛ همان -48px بالا هر دو حالت را دقیق خنثی می‌کند. */

/* پشت این بوم تیره دیگر بافت هندسی تکرارشونده ندارد؛ به‌جایش یک درخشش نرم پشت کارت ریشه
   (مدیرعامل) عمق بصری می‌دهد، بدون الگوی نقطه‌ای. */
.sama-org-network::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(ellipse 640px 420px at 50% 0%, rgba(215, 201, 183, 0.1), transparent 70%);
}

.sama-org-network-inner {
	max-width: 1160px;
	margin-inline: auto;
	position: relative;
	z-index: 1;
}

.sama-org-eyebrow {
	text-align: center;
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--accent-beige);
	margin-bottom: 40px;
}

/* ----- ریشه: کارت مدیرعامل ----- */
.sama-org-root {
	display: grid;
	grid-template-columns: minmax(160px, 220px) 1fr;
	gap: 44px;
	align-items: start;
	max-width: 900px;
	margin: 0 auto;
	padding-bottom: 44px;
}

.sama-org-root-photo-wrap {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.sama-org-root-photo {
	width: 100%;
	aspect-ratio: 4 / 5;
	-o-object-fit: cover;
	   object-fit: cover;
	-o-object-position: center 20%;
	   object-position: center 20%;
	border-radius: 10px;
	border: 2px solid var(--wp--preset--color--accent-beige);
	box-shadow: 0 0 0 8px rgba(215, 201, 183, 0.08), 0 24px 44px rgba(0, 0, 0, 0.45);
}

.sama-org-root-eyebrow {
	display: inline-block;
	font-size: 0.78rem;
	color: var(--wp--preset--color--accent-beige);
	margin-bottom: 8px;
}

.sama-org-network .sama-org-root-name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 2rem;
	margin: 0 0 6px;
	color: var(--wp--preset--color--white);
}

.sama-org-root-role {
	font-size: 1.2rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.92);
	margin: 0 0 20px;
	line-height: 1.6;
	white-space: nowrap;
}

.sama-org-root-bio {
	font-size: 0.92rem;
	line-height: 2;
	color: rgba(255, 255, 255, 0.82);
	max-width: 64ch;
	margin: 0 0 16px;
}

.sama-org-root-creds {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 18px;
}

.sama-org-root-creds span {
	display: inline-block;
	font-size: 0.78rem;
	color: var(--wp--preset--color--white);
	background-color: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(215, 201, 183, 0.3);
	border-radius: 999px;
	padding: 5px 14px;
}

/* ----- عضویت در کانون وکلا — قاب شیشه‌ای هم‌اندازه با قاب عکس مدیرعامل ----- */
.sama-org-root-affiliation {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
	width: 100%;
}

.sama-org-root-affiliation img {
	width: 100%;
	height: auto;
	box-sizing: border-box;
	padding: 26px 22px;
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(16px) saturate(1.4);
	border-radius: 10px;
	border: 2px solid var(--wp--preset--color--accent-beige);
	box-shadow: 0 0 0 8px rgba(215, 201, 183, 0.08), 0 24px 44px rgba(0, 0, 0, 0.45);
}

.sama-org-root-affiliation span {
	font-size: 0.78rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.6);
	max-width: 22ch;
}

/* ----- رابط بصری ریشه → شاخه‌ها ----- */
.sama-org-trunk {
	width: 1px;
	height: 44px;
	background: rgba(215, 201, 183, 0.35);
	margin: 0 auto;
}

@media (max-width: 781px) {
	.sama-org-root {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.sama-org-root-photo-wrap {
		max-width: 200px;
		margin: 0 auto;
	}

	.sama-org-root-bio {
		margin-inline: auto;
	}

	.sama-org-root-creds {
		justify-content: center;
	}

	/* در عرض باریک موبایل، تک‌خط‌کردن باعث overflow/اسکرول افقی می‌شد؛ اینجا اجازه‌ی شکستن خط برمی‌گردد */
	.sama-org-root-role {
		white-space: normal;
		font-size: 1.05rem;
	}
}
/* ===== اسپلش لوگوموشن — فقط صفحه اصلی، هر بار که صفحه اصلی لود/رفرش بشه ===== */
.sama-splash {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--wp--preset--color--secondary-blue);
	overflow: hidden;
	opacity: 1;
	transition: opacity 0.5s ease;
}

.sama-splash.is-hidden {
	opacity: 0;
	pointer-events: none;
}

/* لایه‌ی اصلی: با کیفیت کامل (بدون بزرگ‌نمایی بیش‌ازحد)، لبه‌هاش با ماسک محو می‌شه تا داخل پس‌زمینه‌ی رنگی محو بشه، نه یک قاب مستطیل مشخص.
   قبلاً یک کپی‌ی بلورشده‌ی همین ویدیو هم به‌عنوان پس‌زمینه پخش می‌شد (دو ویدیوی هم‌زمان + فیلتر blur(50px) روی کل صفحه)
   که خیلی سنگین بود و باعث کندی/گیر کردن می‌شد؛ حذف شد و به‌جاش فقط رنگ ثابت پس‌زمینه‌ی .sama-splash باقی مونده. */
.sama-splash-video {
	position: relative;
	z-index: 1;
	width: min(440px, 78vw);
	height: auto;
	aspect-ratio: 896 / 1594;
	-o-object-fit: contain;
	   object-fit: contain;
	mask-image: radial-gradient(ellipse 65% 60% at center, black 55%, transparent 95%);
	-webkit-mask-image: radial-gradient(ellipse 65% 60% at center, black 55%, transparent 95%);
}

/* رزرو دائمی جای اسکرول‌بار — جلوگیری از پرش عرض صفحه وقتی overflow:hidden اسپلش برداشته می‌شه و اسکرول‌بار دوباره ظاهر می‌شه */
html {
	scrollbar-gutter: stable;
}

html.sama-splash-active,
html.sama-splash-active body {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.sama-splash {
		display: none;
	}
}
/* ===== ماست‌هد هیرو — لوگوی بخش کنار عنوان صفحه، داخل خودِ هیروی سرمه‌ای ===== */
.sama-hero-masthead {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 26px;
}

.sama-hero-masthead-text {
	text-align: right;
}

.sama-hero-masthead-tag {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-style: normal;
	font-weight: 400;
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--accent-beige);
	margin-bottom: 8px;
}

.sama-hero-masthead-title.wp-block-post-title {
	margin: 0 !important;
	color: #fff;
}

/* نسخه‌ی لینک‌دار برچسب کوچک بالای ماست‌هد — برای زیرصفحه‌هایی که بازگشت به صفحه‌ی والد رو نشون می‌دن */
.sama-hero-masthead-breadcrumb {
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.sama-hero-masthead-breadcrumb:hover {
	text-decoration: underline;
	opacity: 0.8;
}

.sama-hero-masthead-divider {
	width: 1px;
	align-self: stretch;
	background-color: rgba(255, 255, 255, 0.18);
	flex-shrink: 0;
}

.sama-hero-masthead-logo {
	height: 78px;
	width: auto;
	flex-shrink: 0;
	filter: brightness(0) invert(1);
	opacity: 0.96;
}

/* لوگوی دفتر حقوقی سما فضای خالی زیادی دور نشان دارد؛ در ارتفاع پایه به‌سختی دیده می‌شد */
.sama-hero-masthead-logo--lg {
	height: 128px;
}

/* روی موبایل هم لوگوی بخش کنار عنوان می‌ماند، نه زیر آن (تصمیم کارفرما ۱۴۰۴/۰۶/۰۳).
   قبلاً این بلوک flex-direction را column می‌کرد و لوگو زیر عنوان می‌افتاد؛
   حالا فقط ابعاد کوچک می‌شوند و چیدمان کنار هم دست‌نخورده می‌ماند. */
@media (max-width: 640px) {
	.sama-hero-masthead {
		gap: 14px;
	}

	/* بدون این، متنِ بلندِ عنوان جعبه‌ی flex را پهن‌تر از صفحه می‌کند و اسکرول
	   افقی می‌سازد — پیش‌فرض min-width آیتم‌های flex برابر min-content است. */
	.sama-hero-masthead-text {
		min-width: 0;
	}

	.sama-hero-masthead-tag {
		font-size: 0.68rem;
		margin-bottom: 5px;
	}

	/* عنوان در قالب inline روی 2.1rem ست شده؛ برای غلبه بر استایل inline
	   چاره‌ای جز !important نیست. */
	.sama-hero-masthead-title.wp-block-post-title {
		font-size: 1.5rem !important;
		line-height: 1.35;
	}

	.sama-hero-masthead-logo {
		height: 52px;
	}

	.sama-hero-masthead-logo--lg {
		height: 72px;
	}
}

/* گوشی‌های باریک: لوگو باز هم کوچک‌تر تا عنوان جای نفس کشیدن داشته باشد */
@media (max-width: 400px) {
	.sama-hero-masthead {
		gap: 10px;
	}

	.sama-hero-masthead-title.wp-block-post-title {
		font-size: 1.3rem !important;
	}

	.sama-hero-masthead-logo {
		height: 44px;
	}

	.sama-hero-masthead-logo--lg {
		height: 60px;
	}
}

/* ===== بدنه‌ی صفحه — برای صفحاتی با ماست‌هد لوگودار (دفتر حقوقی، آکادمی) و آرشیو/تک‌صفحه‌ی CPT ها ===== */
.sama-body-dark {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--text-black);
}

.sama-body-dark :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--primary-navy);
}

.sama-body-dark .wp-block-post-content :where(a):not(.wp-element-button) {
	color: var(--wp--preset--color--secondary-blue);
}

.sama-body-dark .wp-block-post-content :where(a):not(.wp-element-button):hover {
	color: var(--wp--preset--color--primary-navy);
}

/* بافت نشان سما روی CTA تیره باید روشن باشه تا روی زمینه‌ی آبی دیده بشه (پیش‌فرض سرمه‌ای‌رنگ بود، برای زمینه‌ی بژ طراحی شده بود) */
.sama-cta-dark::before {
	background-color: var(--wp--preset--color--accent-beige) !important;
	opacity: 0.1 !important;
}

/* ===== رنگ غالب کرم — مخصوص صفحه‌ی آکادمی سما ===== */
.sama-academy-cream {
	background-color: #F7F1E6;
}

/* هیرو (ماست‌هد بالای صفحه) به‌جای سرمه‌ای، هم‌رنگ سکشن CTA پایانی «سوالی دارید؟» است
   (بژ accent-beige + همون بافت نشان سمای سرمه‌ای‌رنگ ۴۴px که در sama-contact-cta استفاده می‌شه)
   نه هم‌رنگ بدنه‌ی روشن‌تر کرم — طبق درخواست صریح کارفرما، برای این‌که هیرو و CTA «قاب» یکسانی
   دور بدنه‌ی روشن‌تر بسازند. */
.sama-hero.sama-academy-cream.sama-hero.sama-academy-cream {
	background-color: var(--wp--preset--color--accent-beige) !important;
}

.sama-hero.sama-academy-cream .sama-hero-masthead-tag {
	color: var(--wp--preset--color--secondary-blue);
}

.sama-hero.sama-academy-cream .sama-hero-masthead-title.wp-block-post-title {
	color: var(--wp--preset--color--primary-navy) !important;
}

.sama-hero.sama-academy-cream .sama-hero-masthead-divider {
	background-color: rgba(15, 42, 61, 0.18);
}

.sama-hero.sama-academy-cream .sama-hero-masthead-logo {
	filter: none;
	opacity: 1;
}

.sama-hero.sama-academy-cream .sama-hero-emblem-texture {
	background-color: var(--wp--preset--color--primary-navy);
	opacity: 0.06;
	-webkit-mask-size: 44px 44px, 44px 44px;
	mask-size: 44px 44px, 44px 44px;
	-webkit-mask-position: 0 0, 22px 22px;
	mask-position: 0 0, 22px 22px;
}

.sama-academy-cream .sama-bento-chip {
	border-color: rgba(138, 116, 84, 0.28);
}

.sama-academy-cream .sama-bento-chip .sama-bento-dot {
	background-color: #8a7454;
}

a.sama-academy-cream .sama-bento-chip:hover,
.sama-academy-cream a.sama-bento-chip:hover {
	background-color: #efe6d4;
	border-color: #8a7454;
}

.sama-academy-cream .sama-course-item {
	border-color: rgba(138, 116, 84, 0.22);
}

.sama-academy-cream .sama-achievement {
	background-color: #efe6d4;
	border-color: rgba(138, 116, 84, 0.4);
}

/* کاشی‌های بنتوی اصلی آکادمی به‌جای گرادیان سرمه‌ای/آبی، تن کرم/طلایی برند.
   گرادیان به‌عنوان فال‌بک زیر عکس می‌ماند (تا اگر عکس لود نشد کاشی خالی/سفید نشود). */
.sama-bento-tile.bg-cream-a { background: linear-gradient(150deg, #cbb489, #8a7454); }
.sama-bento-tile.bg-cream-b { background: linear-gradient(150deg, #b79c72, #6f5a38); }
.sama-bento-tile.bg-cream-c { background: linear-gradient(150deg, #a98f66, #5c4a2e); }

/* ⚠️ گرادیان‌های پایه عمداً *بالای* قانون‌های کاشی عکس‌دار قرار دارند.
   این‌ها از خاصیت مختصر `background` استفاده می‌کنند که background-image و
   background-size را ریست می‌کند؛ وقتی پایین‌تر بودند، با specificity برابر
   برنده می‌شدند و عکس کاشی‌های دفتر حقوقی اصلاً نمایش داده نمی‌شد. */
.sama-bento-tile.bg-1 { background: linear-gradient(150deg, var(--wp--preset--color--secondary-blue), var(--wp--preset--color--primary-navy)); }
.sama-bento-tile.bg-2 { background: linear-gradient(150deg, var(--wp--preset--color--primary-navy), #071620); }
.sama-bento-tile.bg-3 { background: linear-gradient(150deg, #8a7454, var(--wp--preset--color--primary-navy)); }
.sama-bento-tile.bg-4 { background: linear-gradient(150deg, #274a56, var(--wp--preset--color--primary-navy)); }
.sama-bento-tile.bg-5 { background: linear-gradient(150deg, var(--wp--preset--color--primary-navy), var(--wp--preset--color--secondary-blue)); }

/* ===== کاشی‌های عکس‌دار آکادمی =====
   عکس با background-size:cover برش می‌خورد (هیچ‌وقت کشیده/تغییرنسبت نمی‌شود)،
   و یک لایه‌ی تیرگی گرادیانی روی آن می‌نشیند تا تیتر/توضیح سفید خوانا بماند. */
/* ⚠️ specificity عمداً دوکلاسه است: قانون‌های .sama-bento-tile.bg-cream-* از خاصیت
   مختصر `background` استفاده می‌کنند که background-size/position را ریست می‌کند و
   با یک کلاس (0,1,0) بر آن‌ها غلبه نمی‌شود. */
.sama-bento-tile.sama-bento-tile--photo {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.sama-bento-tile--photo::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(15, 42, 61, 0.9) 0%,
		rgba(15, 42, 61, 0.62) 45%,
		rgba(15, 42, 61, 0.22) 100%
	);
	transition: opacity 0.25s ease;
}

.sama-bento-tile--photo:hover::before {
	opacity: 0.86;
}

/* متن باید بالای لایه‌ی تیرگی بماند */
.sama-bento-tile--photo h3,
.sama-bento-tile--photo p {
	position: relative;
	z-index: 1;
}

/* لایه‌ی دوم (گرادیان) فال‌بک است: اگر عکس لود نشد، کاشی به‌جای خالی‌ماندن
   همان تن کرم/طلایی قبلی را نشان می‌دهد. */
.sama-bento-tile--photo.photo-courses {
	background-image: url("../../images/academy/academy-courses.webp"),
		linear-gradient(150deg, #cbb489, #8a7454);
}

.sama-bento-tile--photo.photo-rd {
	background-image: url("../../images/academy/academy-rd.webp"),
		linear-gradient(150deg, #b79c72, #6f5a38);
}

.sama-bento-tile--photo.photo-dadtalk {
	background-image: url("../../images/academy/academy-dadtalk.webp"),
		linear-gradient(150deg, #a98f66, #5c4a2e);
}

/* ===== کاشی‌های عکس‌دار دفتر حقوقی =====
   لایه‌ی دوم هر کدام همان گرادیان قبلی همان کاشی است، تا اگر عکس لود نشد
   ظاهر کاشی دقیقاً مثل قبل بماند.
*/
.sama-bento-tile--photo.photo-grc-governance {
	background-image: url("../../images/practice/grc-governance.webp"),
		linear-gradient(150deg, var(--wp--preset--color--primary-navy), var(--wp--preset--color--secondary-blue));
}

.sama-bento-tile--photo.photo-grc-risk {
	background-image: url("../../images/practice/grc-risk.webp"),
		linear-gradient(150deg, var(--wp--preset--color--secondary-blue), var(--wp--preset--color--primary-navy));
}

.sama-bento-tile--photo.photo-grc-compliance {
	background-image: url("../../images/practice/grc-compliance.webp"),
		linear-gradient(150deg, var(--wp--preset--color--primary-navy), #071620);
}

.sama-bento-tile--photo.photo-lo-litigation {
	background-image: url("../../images/practice/lo-litigation.webp"),
		linear-gradient(150deg, var(--wp--preset--color--secondary-blue), var(--wp--preset--color--primary-navy));
}

.sama-bento-tile--photo.photo-lo-contracts {
	background-image: url("../../images/practice/lo-contracts.webp"),
		linear-gradient(150deg, var(--wp--preset--color--primary-navy), #071620);
}

.sama-bento-tile--photo.photo-lo-grc {
	background-image: url("../../images/practice/lo-grc.webp"),
		linear-gradient(150deg, #8a7454, var(--wp--preset--color--primary-navy));
}

.sama-bento-tile--photo.photo-lo-adr {
	background-image: url("../../images/practice/lo-adr.webp"),
		linear-gradient(150deg, #274a56, var(--wp--preset--color--primary-navy));
}

/* CTA پایانی صفحه‌ی آکادمی هم‌رنگ با بقیه‌ی صفحه، کرم به‌جای آبی */
.sama-academy-cta.sama-academy-cta {
	background-color: var(--wp--preset--color--accent-beige) !important;
}

.sama-academy-cta.sama-academy-cta h2 {
	color: var(--wp--preset--color--primary-navy) !important;
}

.sama-academy-cta.sama-academy-cta::before {
	background-color: var(--wp--preset--color--primary-navy) !important;
	opacity: 0.06 !important;
}

.sama-academy-cta.sama-academy-cta .wp-element-button {
	background-color: var(--wp--preset--color--primary-navy) !important;
	color: var(--wp--preset--color--white) !important;
}

.sama-academy-cta.sama-academy-cta .wp-element-button:hover {
	background-color: var(--wp--preset--color--secondary-blue) !important;
}

/* ===== بنتوی دوسطحی — لایه‌ی اول: کاشی‌های اصلی نامتقارن ===== */
.sama-bento {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(2, 128px);
	grid-template-areas:
		"a a b c"
		"d e e f";
	gap: 14px;
	margin-top: 8px;
}

.sama-bento--split {
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 200px;
	grid-template-areas: "a b";
}

/* ===== کاشی «به‌زودی» (بدون لینک، چون هنوز صفحه‌ای ندارد) ===== */
.sama-bento-tile--soon {
	cursor: default;
}

/* این کاشی <div> است نه <a>، پس لیفت هاور بقیه را نباید داشته باشد */
.sama-bento-tile--soon:hover {
	transform: none;
	box-shadow: none;
}

.sama-bento-soon-badge {
	position: absolute;
	top: 14px;
	inset-inline-end: 14px;
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(215, 201, 183, 0.5);
	color: var(--wp--preset--color--accent-beige);
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	padding: 4px 10px;
	border-radius: 999px;
	backdrop-filter: blur(2px);
}

.sama-bento--trio {
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: 190px;
	grid-template-areas: "a b c";
}

.sama-bento-tile {
	position: relative;
	border-radius: 10px;
	padding: 18px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	color: #fff;
	overflow: hidden;
	text-decoration: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.sama-bento-tile:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 36px rgba(15, 42, 61, 0.26);
}

.sama-bento-tile h3 {
	margin: 0 0 4px;
	font-size: 1.05rem;
	color: #fff;
	font-weight: 600;
}

.sama-bento-tile p {
	margin: 0;
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.82);
	line-height: 1.65;
}

.sama-bento-tile--wide h3 {
	font-size: 1.3rem;
}


/* ===== بنتوی دوسطحی — لایه‌ی دوم: ردیف موارد مکمل/فرعی ===== */
.sama-bento-secondary {
	margin-top: 34px;
}

.sama-bento-secondary-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.sama-bento-chip {
	flex: 1 1 220px;
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid rgba(15, 42, 61, 0.16);
	border-radius: 8px;
	padding: 13px 16px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary-navy);
	text-decoration: none;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

a.sama-bento-chip:hover {
	border-color: var(--wp--preset--color--secondary-blue);
	background-color: var(--wp--preset--color--light-background);
}

.sama-bento-chip .sama-bento-dot {
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background-color: var(--wp--preset--color--accent-beige);
	flex-shrink: 0;
}

/* ===== فهرست دوره‌های برگزارشده — آکادمی سما ===== */
.sama-courses-list {
	margin-top: 34px;
}

.sama-courses-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}

.sama-course-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	border: 1px solid rgba(15, 42, 61, 0.12);
	border-radius: 8px;
	padding: 13px 16px;
	font-size: 0.86rem;
	line-height: 1.7;
	color: var(--wp--preset--color--text-black);
}

.sama-course-item-icon {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	color: var(--wp--preset--color--secondary-blue);
}

@media (max-width: 640px) {
	.sama-courses-grid {
		grid-template-columns: 1fr;
	}
}

/* ===== کارت دستاورد — برای افتخارات/جوایز مجموعه (مثلاً مسابقات داوری تجاری) ===== */
.sama-achievement {
	display: flex;
	gap: 30px;
	align-items: center;
	margin-top: 40px;
	padding: 34px 36px;
	background-color: var(--wp--preset--color--light-background);
	border: 1px solid rgba(215, 201, 183, 0.6);
	border-radius: 14px;
	position: relative;
	overflow: hidden;
	box-shadow: 0 18px 40px -28px rgba(15, 42, 61, 0.45);
}

/* نوار لهجه‌ی عمودی در لبه‌ی شروع کارت (RTL-aware) */
.sama-achievement::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 4px;
	background: linear-gradient(
		to bottom,
		var(--wp--preset--color--accent-beige),
		var(--wp--preset--color--secondary-blue)
	);
}

/* قاب سفید پشت لوگوی TRAC — لوگو سرمه‌ای است و روی زمینه‌ی کرم بی‌رمق می‌شود */
.sama-achievement-badge {
	flex-shrink: 0;
	/* قالب box-sizing سراسری border-box ندارد؛ بدون این خط، پدینگ و بوردر به
	   ابعاد اضافه می‌شد و قاب به‌جای ۱۳۲ به ۱۶۲ می‌رسید. */
	box-sizing: border-box;
	width: 132px;
	height: 132px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid rgba(215, 201, 183, 0.75);
	border-radius: 12px;
	padding: 14px;
	box-shadow: 0 10px 24px -16px rgba(15, 42, 61, 0.5);
}

.sama-achievement-badge img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	-o-object-fit: contain;
	   object-fit: contain;
}

.sama-achievement-body {
	min-width: 0;
}

/* برچسب کوچک بالای عنوان */
.sama-achievement-eyebrow {
	display: inline-block;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--secondary-blue);
	background: rgba(31, 78, 95, 0.08);
	border: 1px solid rgba(31, 78, 95, 0.16);
	padding: 5px 12px;
	border-radius: 999px;
	margin-bottom: 14px;
}

/* (تاریخچه: تا ۱۴۰۴/۰۶/۰۳ فونت heading قالب «Cormorant Garamond» بود که گلیف
   فارسی نداشت، برای همین این‌جا عمداً فونت body صدا زده می‌شد. حالا هر دو فونت
   «مدام»‌اند و این تفکیک بی‌اثر است — نگه داشته شد تا چیزی جابه‌جا نشود.) */
.sama-achievement-lead {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.32rem;
	font-weight: 600;
	line-height: 1.75;
	color: var(--wp--preset--color--primary-navy);
	margin: 0 0 14px;
	text-align: start;
}

.sama-achievement p:not(.sama-achievement-lead) {
	font-size: 0.95rem;
	line-height: 2;
	color: var(--wp--preset--color--text-black);
	margin: 0 0 16px;
}

.sama-achievement-link {
	display: inline-block;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--wp--preset--color--secondary-blue);
	text-decoration: none;
	border-bottom: 1px solid rgba(31, 78, 95, 0.35);
	padding-bottom: 2px;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.sama-achievement-link:hover {
	color: var(--wp--preset--color--primary-navy);
	border-color: var(--wp--preset--color--primary-navy);
}

@media (max-width: 700px) {
	.sama-achievement {
		flex-direction: column;
		align-items: flex-start;
		gap: 22px;
		padding: 26px 22px;
	}

	.sama-achievement-badge {
		width: 104px;
		height: 104px;
		padding: 11px;
	}

	.sama-achievement-lead {
		font-size: 1.12rem;
	}
}

@media (max-width: 781px) {
	.sama-bento,
	.sama-bento--split,
	.sama-bento--trio {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: none;
		grid-template-areas: none;
		/* minmax(..., auto) به‌جای یک عدد ثابت — وقتی تیتر/توضیح کاشی طولانی باشه، به‌جای
		   کلیپ‌شدن/روی‌هم‌افتادن متن (چون overflow:hidden + flex-end متن رو از بالا می‌بره)،
		   خودِ ردیف قد می‌کشه تا کامل جا بشه. */
		grid-auto-rows: minmax(128px, auto);
	}

	.sama-bento-tile {
		grid-area: auto !important;
	}

	.sama-bento-tile--wide {
		grid-column: span 2;
		min-height: 150px;
	}
}

@media (max-width: 480px) {
	.sama-bento,
	.sama-bento--split,
	.sama-bento--trio {
		grid-template-columns: 1fr;
	}

	.sama-bento-tile--wide {
		grid-column: span 1;
	}
}
/* ===== صفحه‌ی «تماس با ما» — کارت‌های شیشه‌ای (گزینه‌ی تایید‌شده‌ی کارفرما)، هیرو استاندارد مثل بقیه‌ی صفحات،
   پس‌زمینه‌ی بدنه هم‌سبک بخش معرفی مدیرعامل در «درباره موسسه» (گرادیان رادیال عمیق، بدون پترن تکرارشونده) ===== */
.sama-contact-page {
	position: relative;
	background: radial-gradient(ellipse at 50% -10%, #16374a 0%, #0A1D28 55%, #081319 100%);
	padding: 72px 20px 88px;
	overflow: hidden;
}

.sama-contact-page::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(ellipse 640px 420px at 50% 0%, rgba(215, 201, 183, 0.1), transparent 70%);
}

.sama-contact-page-inner {
	position: relative;
	z-index: 1;
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
}

/* پاراگراف اول محتوای صفحه (متن مقدمه) به‌شکل تیتر سریف بزرگ — بقیه‌ی پاراگراف‌ها (اگر باشند) استایل عادی می‌گیرند */
.sama-contact-page-inner .entry-content > p:first-child {
	font-family: var(--wp--preset--font-family--heading);
	font-style: italic;
	font-weight: 600;
	font-size: clamp(1.25rem, 2.4vw, 1.75rem);
	line-height: 1.6;
	color: #fff;
	max-width: 620px;
	margin: 0 auto 40px;
	text-align: center !important;
}

.sama-contact-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

.sama-contact-card {
	background: rgba(255, 255, 255, 0.07);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(215, 201, 183, 0.35);
	border-radius: 12px;
	padding: 24px 18px;
	text-align: right;
}

.sama-contact-card svg {
	width: 26px;
	height: 26px;
	color: var(--wp--preset--color--accent-beige);
	margin-bottom: 14px;
}

.sama-contact-card h3 {
	color: #fff;
	font-size: 0.95rem;
	margin: 0 0 10px;
	font-weight: 600;
}

.sama-contact-card p {
	margin: 0 0 4px;
	font-size: 0.84rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.85);
	text-align: right !important;
}

.sama-contact-card a {
	color: rgba(255, 255, 255, 0.85) !important;
	text-decoration: none;
}

.sama-contact-card a:hover {
	color: var(--wp--preset--color--accent-beige) !important;
}

.sama-contact-role {
	display: block;
	color: var(--wp--preset--color--accent-beige);
	font-size: 0.72rem;
	letter-spacing: 0.02em;
	margin-bottom: 2px;
}

.sama-contact-role.sama-contact-role--spaced {
	margin-top: 10px;
}

.sama-contact-map {
	max-width: 100%;
	margin: 24px auto 0;
	height: 320px;
	border-radius: 12px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(215, 201, 183, 0.4);
	position: relative;
}

.sama-contact-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	filter: invert(92%) hue-rotate(180deg) brightness(0.95) contrast(0.88);
}

.sama-contact-map-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.82rem;
	text-decoration: none;
	transition: color 0.2s ease;
}

.sama-contact-map-link svg {
	width: 16px;
	height: 16px;
	color: var(--wp--preset--color--accent-beige);
	flex-shrink: 0;
}

.sama-contact-map-link:hover {
	color: var(--wp--preset--color--accent-beige);
}

.sama-contact-note {
	margin-top: 32px;
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.55);
	text-align: center !important;
}

@media (max-width: 640px) {
	.sama-contact-cards {
		grid-template-columns: 1fr;
	}
}
/* ===== دکمه‌ی بله داخل هیروی پیمان ===== */
.sama-peyman-live-cta {
	position: relative;
	z-index: 2;
	margin-top: 22px;
	display: flex;
	justify-content: flex-end;
}

.sama-peyman-live-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--wp--preset--color--accent-beige);
	color: var(--wp--preset--color--primary-navy);
	text-decoration: none;
	font-weight: 700;
	font-size: 0.96rem;
	padding: 13px 26px;
	border-radius: 999px;
	box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.4);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sama-peyman-live-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 36px -12px rgba(0, 0, 0, 0.45);
}

.sama-peyman-live-btn svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.sama-peyman-live-btn .sama-bale-icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	-o-object-fit: contain;
	   object-fit: contain;
}

.sama-peyman-live-btn small {
	display: block;
	font-weight: 400;
	font-size: 0.7rem;
	opacity: 0.75;
}

@media (max-width: 640px) {
	.sama-peyman-live-cta {
		justify-content: center;
		margin-top: 18px;
	}
}

/* ===== ریل فرآیند — توالی واقعی گفتگو در بله، شماره‌گذاری موجه است ===== */
.sama-peyman-rail {
	display: flex;
	justify-content: space-between;
	gap: 6px;
	max-width: 900px;
	margin: 30px auto 8px;
	position: relative;
}

.sama-peyman-rail::before {
	content: "";
	position: absolute;
	top: 15px;
	right: 6%;
	left: 6%;
	height: 1px;
	background: rgba(15, 42, 61, 0.14);
}

.sama-peyman-rail-step {
	position: relative;
	flex: 1;
	text-align: center;
	font-size: 0.78rem;
	color: var(--sama-gray-text);
}

.sama-peyman-rail-num {
	width: 31px;
	height: 31px;
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	border: 1.5px solid #8a7454;
	color: var(--wp--preset--color--primary-navy);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 0.9rem;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 10px;
	position: relative;
	z-index: 1;
}

.sama-peyman-rail-step span {
	display: block;
	max-width: 110px;
	margin: 0 auto;
}

@media (max-width: 640px) {
	.sama-peyman-rail {
		flex-wrap: wrap;
		row-gap: 22px;
	}

	.sama-peyman-rail::before {
		display: none;
	}

	.sama-peyman-rail-step {
		flex: 0 0 33%;
	}
}

/* ===== درهای پیمان — کانال‌های تماس مستقیم به‌جای فرم ===== */
/* پس‌زمینه (.sama-peyman-doors) سرتاسری/تمام‌عرض می‌مونه؛ خودِ گرید کارت‌ها (.sama-peyman-doors-grid)
   با max-width + margin:auto نزدیک هم و وسط‌چین می‌شه، بدون اینکه بک‌گراند رو محدود کنه */
.sama-peyman-doors {
	background-color: #0a1d28;
	padding: 44px 20px 52px;
	position: relative;
}

/* بافت هندسی نشان سما روی زمینه‌ی سرمه‌ای این بخش — قبلاً رنگ تخت و خالی بود،
   در حالی که فوتر بلافاصله زیرش همین بافت را داشت و تفاوتشان تو می‌خورد.
   عمداً هم‌اندازه و هم‌شفافیتِ بافت فوتر (۴۴px / opacity 0.06) است تا این دو
   ناحیه‌ی چسبیده به هم یک پیوستار دیده شوند. */
.sama-peyman-doors::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	-webkit-mask-image: url("../../images/emblem-sama.png"), url("../../images/emblem-sama.png");
	mask-image: url("../../images/emblem-sama.png"), url("../../images/emblem-sama.png");
	-webkit-mask-repeat: repeat, repeat;
	mask-repeat: repeat, repeat;
	-webkit-mask-size: 44px 44px, 44px 44px;
	mask-size: 44px 44px, 44px 44px;
	-webkit-mask-position: 0 0, 22px 22px;
	mask-position: 0 0, 22px 22px;
	background-color: var(--wp--preset--color--accent-beige);
	opacity: 0.06;
}

/* کارت‌ها باید روی بافت بنشینند، نه زیرش */
.sama-peyman-doors-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1fr;
	gap: 12px;
	max-width: 860px;
	margin-inline: auto;
}

.sama-peyman-door {
	border-radius: 12px;
	padding: 26px 20px;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
	transition: transform 0.2s ease;
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: #fff;
}

.sama-peyman-door:hover {
	transform: translateY(-4px);
}

.sama-peyman-door--primary {
	background: linear-gradient(150deg, var(--wp--preset--color--accent-beige), #8a7454);
	color: var(--wp--preset--color--primary-navy);
	border: none;
}

.sama-peyman-door svg {
	width: 26px;
	height: 26px;
}

.sama-peyman-door .sama-bale-icon {
	width: 26px;
	height: 26px;
	-o-object-fit: contain;
	   object-fit: contain;
}

.sama-peyman-door--primary svg {
	color: var(--wp--preset--color--primary-navy);
}

.sama-peyman-door:not(.sama-peyman-door--primary) svg {
	color: var(--wp--preset--color--accent-beige);
}

.sama-peyman-door-label {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.15rem;
}

.sama-peyman-door-value {
	font-size: 0.84rem;
	opacity: 0.9;
}

.sama-peyman-door-note {
	font-size: 0.72rem;
	opacity: 0.65;
	margin-top: auto;
}

@media (max-width: 781px) {
	.sama-peyman-doors-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 480px) {
	.sama-peyman-doors {
		padding: 36px 20px 44px;
	}

	.sama-peyman-doors-grid {
		grid-template-columns: 1fr;
	}
}
/* ============ Scroll reveal ============ */
.reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-visible {
	opacity: 1;
	transform: none;
}

.reveal-stagger.is-visible > * {
	animation: sama-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.reveal-stagger.is-visible > *:nth-child(1) { animation-delay: 0.05s; }
.reveal-stagger.is-visible > *:nth-child(2) { animation-delay: 0.12s; }
.reveal-stagger.is-visible > *:nth-child(3) { animation-delay: 0.19s; }
.reveal-stagger.is-visible > *:nth-child(4) { animation-delay: 0.26s; }
.reveal-stagger.is-visible > *:nth-child(5) { animation-delay: 0.33s; }
.reveal-stagger.is-visible > *:nth-child(6) { animation-delay: 0.4s; }
.reveal-stagger.is-visible > *:nth-child(n+7) { animation-delay: 0.46s; }

@keyframes sama-fade-up {
	from { opacity: 0; transform: translateY(22px); }
	to { opacity: 1; transform: none; }
}

/* ============ Hero motion ============ */
@keyframes sama-drift {
	0%, 100% { transform: translate(0, 0) rotate(0deg); }
	50% { transform: translate(-16px, 14px) rotate(4deg); }
}

@keyframes sama-drift-slow {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(12px, -10px) scale(1.04); }
}

.sama-hero-pattern-a {
	animation: sama-drift 14s ease-in-out infinite;
}

.sama-hero-pattern-b {
	animation: sama-drift-slow 18s ease-in-out infinite;
}

.sama-hero .wp-block-image,
.sama-hero h1,
.sama-hero p,
.sama-hero .wp-block-buttons {
	animation: sama-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.sama-hero h1 { animation-delay: 0.1s; }
.sama-hero p { animation-delay: 0.22s; }
.sama-hero .wp-block-buttons { animation-delay: 0.34s; }

@keyframes sama-pulse-ring {
	0% { transform: scale(0.94); opacity: 0.55; }
	70% { transform: scale(1.15); opacity: 0; }
	100% { transform: scale(1.15); opacity: 0; }
}

/* ============ Card hover lift ============ */
.sama-card {
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
	will-change: transform;
}

.sama-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 34px rgba(15, 42, 61, 0.16);
}

.sama-card--dark:hover {
	box-shadow: 0 18px 34px rgba(0, 0, 0, 0.35);
}

/* ============ Buttons ============ */
.wp-block-button__link {
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, background-color 0.25s ease;
}

.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(15, 42, 61, 0.22);
}

/* ============ Nav underline ============ */
.sama-nav-item-row > a,
.sama-nav-list > li > a {
	position: relative;
}

.sama-nav-item-row > a::after,
.sama-nav-list > li > a::after {
	content: "";
	position: absolute;
	bottom: 6px;
	inset-inline: 16px;
	height: 2px;
	background: var(--wp--preset--color--accent-beige);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.25s ease;
}

.sama-nav-item-row > a:hover::after,
.sama-nav-list > li > a:hover::after {
	transform: scaleX(1);
}

.sama-nav-contact::after {
	display: none;
}

/* ============ Mega panel fade/slide ============ */
.sama-mega-panel {
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
	display: grid !important;
}

.has-mega:hover .sama-mega-panel,
.has-mega:focus-within .sama-mega-panel {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
}

/* آستانه هم‌راستا با _navigation.css به ۱۰۲۴px منتقل شد (دلیلش همان‌جا توضیح داده شده) */
@media (max-width: 1024px) {
	.sama-mega-panel {
		transform: none;
	}

	.has-mega .sama-mega-panel {
		opacity: 0;
		visibility: hidden;
		max-height: 0;
		overflow: hidden;
		display: block !important;
		transition: opacity 0.25s ease, max-height 0.3s ease;
	}

	.has-mega.is-open .sama-mega-panel {
		opacity: 1;
		visibility: visible;
		max-height: 600px;
	}
}

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
	.reveal,
	.reveal-stagger > *,
	.sama-hero .wp-block-image,
	.sama-hero h1,
	.sama-hero p,
	.sama-hero .wp-block-buttons {
		animation: none !important;
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	.sama-hero-pattern-a,
	.sama-hero-pattern-b {
		animation: none !important;
	}

	.sama-card,
	.wp-block-button__link {
		transition: none !important;
	}
}
/* ⚠️ آخرین import بماند — توضیح دلیلش داخل خود فایل */
/* ===================================================================
   لایه‌ی پالایش موبایل
   ===================================================================
   ⚠️ این فایل باید **آخرین** import در main.css باشد.
   دلیلش: مدیا-کوئری به specificity چیزی اضافه نمی‌کند. اگر این قانون‌ها در
   _base.css (که دومین import است) بمانند، هر فایل بعدی که همان کلاس را با
   specificity برابر تعریف کرده باشد بر آن‌ها غلبه می‌کند — دقیقاً همان اتفاقی
   که موقع نوشتن این‌ها افتاد و اندازه‌ی فونت‌ها تغییر نکرد.
   =================================================================== */

@media (max-width: 600px) {
	/* ===== کف خوانایی متن‌های ریز =====
	   برچسب‌ها/چیپ‌ها در دسکتاپ ۰.۶۸ تا ۰.۷۲rem هستند که با فونت ریشه‌ی ۱۰۸٪
	   حدود ۱۱.۸ تا ۱۲.۴ پیکسل می‌شوند — روی گوشی زیر آستانه‌ی راحتِ خواندن. */
	.sama-contact-band-label,
	.sama-news-bar-eyebrow,
	.sama-achievement-eyebrow,
	.sama-contact-role,
	.sama-peyman-door-note,
	.sama-org-node-tags span,
	.sama-org-node-tags a,
	.sama-bento-soon-badge,
	.sama-peyman-live-btn small,
	.sama-logo-marquee-bale-btn small {
		font-size: 0.82rem;
	}

	/* ===== اهداف لمسی =====
	   لینک‌های متنیِ تک‌خطی (تلفن، ایمیل، دسته‌بندی، «مشاهده») ارتفاع طبیعی‌شان
	   حدود ۲۰-۲۸px بود؛ با پدینگ عمودی به محدوده‌ی راحتِ انگشت می‌رسند بدون
	   اینکه چیدمان به‌هم بریزد (inline-block تا پدینگ واقعاً اعمال شود). */
	a[href^="tel:"]:not(.sama-peyman-door),
	a[href^="mailto:"]:not(.sama-peyman-door),
	.sama-news-bar-eyebrow a,
	.sama-news-bar-go,
	.sama-about-cta,
	.sama-contact-band-value a,
	.sama-footer-col a,
	.sama-mega-col-more,
	.sama-contact-map-link,
	.sama-achievement-link {
		display: inline-block;
		padding-block: 7px;
	}

	.sama-footer-col a {
		min-height: 40px;
	}

	/* عنوان کارت‌های اخبار روی موبایل کمی بزرگ‌تر تا هم خوانا باشد
	   هم خودش یک هدف لمسی راحت بسازد */
	.sama-news-bar > li h3 a,
	.sama-cpt-grid .wp-block-post-title a {
		display: inline-block;
		padding-block: 4px;
	}

	/* ===== حاشیه‌ی کناری صفحات آرشیو =====
	   قالب‌های آرشیو (اخبار، حوزه‌ها، دفاتر، دسته‌بندی) برای <main> فقط پدینگ
	   بالا/پایین دارند. روی دسکتاپ چون چیدمان به ۱۲۰۰px محدود است مشکلی پیدا
	   نمی‌شود، ولی روی موبایل کانتینر تمام‌عرض می‌شود و کارت‌ها بدون هیچ حاشیه‌ای
	   به لبه‌ی صفحه می‌چسبند. اینجا به‌جای دستکاری JSON بلوک‌ها در ۵ قالب، همان
	   حاشیه با CSS اضافه می‌شود.
	   انتخاب‌گر عمداً فرزند مستقیم است تا حلقه‌ی اخبارِ صفحه اصلی (که داخل یک
	   سکشن با پدینگ خودش است) دوباره پدینگ نگیرد. */
	main > .wp-block-query {
		padding-inline: 20px;
	}

	/* متن تک‌خبر/مقاله هم روی موبایل تا لبه‌ی صفحه می‌رفت و خواندنش سخت بود */
	main > .wp-block-post-content,
	main > .wp-block-post-featured-image {
		padding-inline: 20px;
	}

	/* ...ولی سکشن‌های تمام‌عرض (alignfull) داخل همین محتوا نباید آن پدینگ را بگیرند.
	   مکانیزم خودِ وردپرس برای این کار (--wp--style--root--padding-*) در این قالب
	   مقدار ندارد، چون theme.json مقدار styles.spacing.padding ست نکرده؛ در نتیجه
	   `calc(var(...) * -1)` بی‌اثر می‌شود و بوم تیره‌ی «ریشه‌ی مجموعه» در /about-group/
	   دو نوار سفید ۲۰ پیکسلی در چپ و راست پیدا می‌کرد. اینجا همان پدینگ دستی خنثی می‌شود. */
	main > .wp-block-post-content > .alignfull {
		margin-inline: -20px;
	}

	/* ===== نوار اخبار صفحه اصلی — اسلایدر افقی به‌جای ستون بلند =====
	   نسخه‌ی قبلی سه کارت را زیر هم می‌چید و ۵۷۸ پیکسل ارتفاع می‌گرفت: یک بلوک
	   سرمه‌ای طولانی بلافاصله بعد از هیرو که هم خسته‌کننده بود هم بقیه‌ی صفحه را
	   دور می‌کرد. حالا یک ریل افقی با scroll-snap است که فقط ارتفاع یک کارت
	   می‌گیرد؛ عرض ۸۴٪ باعث می‌شود لبه‌ی کارت بعدی پیدا باشد و کاربر بفهمد
	   قابل کشیدن است. */
	.sama-news-bar-wrap {
		margin-top: -34px;
	}

	/* ⚠️ عمداً از فلکس‌باکس استفاده می‌شود، نه گرید.
	   وردپرس برای این حلقه یک کلاس کانتینر می‌سازد و
	   `grid-template-columns: repeat(3, minmax(0,1fr))` را در یک \3c style> داخل
	   <head><meta charset="utf-8"> چاپ می‌کند. تلاش برای خنثی‌کردن آن با `grid-template-columns: none`
	   جواب نداد (ستون اول همچنان ۸۲px می‌ماند و کارت اول له می‌شد). با
	   `display: flex` کل مکانیک ستون‌های گرید بی‌اثر می‌شود و عرض کارت‌ها فقط از
	   `flex-basis` می‌آید — بدون جنگ specificity. */
	.sama-news-bar.wp-block-post-template {
		display: flex;
		flex-wrap: nowrap;
		gap: 0;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		border-radius: 10px;
	}

	.sama-news-bar::-webkit-scrollbar {
		display: none;
	}

	.sama-news-bar > li {
		flex: 0 0 78vw;
		max-width: 78vw;
		scroll-snap-align: center;
		padding: 20px 18px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	/* جداکننده‌ی عمودی بین کارت‌ها (در نسخه‌ی ستونی مخفی شده بود) */
	.sama-news-bar > li::before {
		display: block;
		top: 20px;
		bottom: 20px;
	}

	.sama-news-bar > li:first-child::before {
		display: none;
	}

	/* عنوان حداکثر دو خط تا ارتفاع همه‌ی کارت‌ها یکسان بماند */
	.sama-news-bar > li h3 {
		font-size: 1rem;
		margin-bottom: 10px;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}