/* =========================================================
   ORS — base / brand tokens
   ========================================================= */

:root {
  /* brand palette */
  /*
    سبز برند برای متن روی زمینه‌ی تیره و عناصر تزئینی (۵٫۱۵:۱ روی زغالی).
    ولی سفید روی همین سبز فقط ۳٫۵۵:۱ می‌دهد که از AA پایین‌تر است، و
    همه‌ی دکمه‌های اصلی سایت سفید روی سبزند. پس یک سبز تیره‌تر برای
    سطوحِ دارای متن سفید داریم: ۴٫۷۸:۱ و قابل قبول.
  */
  --ors-green: #4b9855;
  --ors-green-action: #3f8049;
  --ors-green-action-hover: #356d3e;
  --ors-charcoal: #151515;
  --ors-white: #ffffff;
  --ors-grey-text: #a7a7a7;
  --ors-grey-text-light: #c4c4c4;

  /* فونت فارسی در styles/fonts.css تعریف شده — تنها جای تغییرش
     همان‌جاست، چون پنل مدیریت هم از همان می‌خواند. */
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;

  background-color: var(--ors-charcoal);
  color: var(--ors-white);

  font-family: var(--ors-font-fa);
  font-size: 16px;
  line-height: 1.8;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* IranSans با این دو تنظیم در فارسی یکدست‌تر رندر می‌شود */
  font-feature-settings: "kern" 1, "liga" 1;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--ors-green);
  outline-offset: 3px;
}


/* متنی که فقط صفحه‌خوان می‌بیند */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* ---------------- مسیر راهنما ---------------- */

/*
  بدون این، مرورگر <ol> را با شماره‌گذاری پیش‌فرض نشان می‌داد:
  «۱. خانه ۲. تماس با ما». عنصر <ol> درست است — ترتیب معنا دارد و
  گوگل هم همین را می‌خواند — ولی ظاهرش باید مسیر باشد نه فهرست.
*/

.ors-crumbs {
  margin: 0 0 26px;
  font-size: 13px;
}

.ors-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;

  margin: 0;
  padding: 0;
  list-style: none;
}

.ors-crumbs li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ors-grey-text);
}

/* جداکننده پیش از هر مورد جز اولی. در RTL باید برعکس باشد. */
.ors-crumbs li + li::before {
  content: "‹";
  color: rgba(255, 255, 255, 0.3);
}

.ors-crumbs a {
  color: var(--ors-grey-text-light);
  text-decoration: none;
  transition: color 0.2s ease;
}

.ors-crumbs a:hover,
.ors-crumbs a:focus-visible {
  color: var(--ors-green);
}

.ors-crumbs [aria-current="page"] {
  color: #ffffff;
}

/*
  ‏<picture> فقط یک انتخاب‌کننده است، نه یک جعبه.

  با display:contents از چیدمان حذف می‌شود و <img> دقیقاً همان‌جایی
  می‌نشیند که قبل از اضافه شدن <picture> بود — پس قاعده‌هایی مثل
  «.ors-sub__media img { position:absolute }» بدون تغییر کار می‌کنند
  و نسبت‌های فلکس/گرید به‌هم نمی‌ریزند.
*/
picture { display: contents; }

/*
  روی گوشی، آخرین قلمِ مسیر پنهان می‌شود.

  آخرین قلم عنوان همین صفحه است و درست زیرش، در h1، دوباره نوشته
  شده. روی عرض کم، همین تکرار مسیر را به دو خط می‌برد و یک خط از
  صفحه‌ی اول را می‌خورد بدون اینکه چیزی بگوید. دادهٔ ساختاریافته
  دست‌نخورده می‌ماند، پس چیزی از گوگل پنهان نمی‌شود.
*/
@media (max-width: 599px) {
  .ors-crumbs li:last-child { display: none; }
}