/* ================================================================
   هدر مشترک سایت ابرک (.abh) — بازطراحی 2026-09-29
   قالب: abrak_site.abrak_header (views/layout.xml) · رفتار: js/nav.js → initHeader
   همهٔ رنگ/شعاع/سایه/z از _tokens.css می‌آید؛ هیچ hex ثابتی اینجا نیست.

   🔴 این فایل RTL-native است و در باندل اودو نباید از rtlcss رد شود؛
   کل فایل داخل rtl:begin:ignore است (همان قرارداد site.css و native.css).

   وضعیت‌ها:
   • .abh (بدون .is-ready) — جاوااسکریپت اجرا نشده: پنل‌ها با hover/focus-within
     باز می‌شوند، دکمه‌های باز/بستن پنهان‌اند، همهٔ لینک‌ها در دسترس‌اند.
   • .abh.is-ready — nav.js فعال: state پنل فقط از aria-expanded/hidden می‌آید.
   • .abh.is-drawer-open — کشوی موبایل باز است (زیر 992px).
   ================================================================ */
/*rtl:begin:ignore*/

.abh {
  --abh-h: 64px;
  --abh-gutter: clamp(1rem, 4vw, 1.5rem);
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--color-bg) 90%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  font-family: inherit;
  line-height: 1.6;
}
/* خط نازک برند زیر هدر — امضای بصری، بدون افزودن ارتفاع */
.abh::after {
  content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 2px;
  background: var(--grad-brand-line); opacity: .85; pointer-events: none;
}

/* ── ریست محلی: صفحات بومی اودوو ریبوت بوت‌استرپ دارند ─────────────── */
.abh *, .abh *::before, .abh *::after { box-sizing: border-box; }
.abh ul { list-style: none; margin: 0; padding: 0; }
.abh p { margin: 0; }
.abh a { text-decoration: none; }
.abh img, .abh svg { display: block; flex: none; }
.abh button {
  font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0;
  cursor: pointer; -webkit-appearance: none; appearance: none;
}
.abh :focus-visible {
  outline: 2px solid var(--color-focus); outline-offset: 2px;
}
.abh-sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── ردیف اصلی ───────────────────────────────────────────────────── */
.abh-bar {
  position: relative; /* بلوک دربرگیرندهٔ پنل‌ها و کشوی موبایل */
  display: flex; align-items: center; gap: 1.5rem; height: var(--abh-h);
}
.abh-logo {
  flex: none; padding-block: .5rem;
  font-size: 1.55rem; font-weight: 800; line-height: 1; color: var(--color-brand);
}
.abh-logo:hover { color: var(--color-brand-hover); }
.abh-drawer { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 1rem; }
.abh-nav { flex: 1 1 auto; min-width: 0; }
.abh-list { display: flex; align-items: center; gap: .15rem; }
.abh-item { display: flex; align-items: center; height: var(--abh-h); }

.abh-link {
  position: relative; display: inline-flex; align-items: center; gap: .5rem;
  min-height: 40px; padding: .45rem .7rem; border-radius: var(--radius-1);
  color: var(--color-text); font-size: .95rem; font-weight: 600; white-space: nowrap;
  transition: color var(--dur-1) ease, background-color var(--dur-1) ease;
}
.abh-link:hover, .abh-item.is-open > .abh-link { color: var(--color-brand); background: var(--color-bg-tint); }
.abh-link.is-current, .abh-link[aria-current="page"] { color: var(--color-brand); }
.abh-link.is-current::after, .abh-link[aria-current="page"]::after {
  content: ""; position: absolute; inset-inline: .7rem; bottom: 2px; height: 2px;
  border-radius: 2px; background: currentColor;
}

/* دکمهٔ باز/بستن زیرمنو — فقط وقتی جاوااسکریپت آماده است دیده می‌شود */
.abh-disclosure { display: none; }
.abh.is-ready .abh-disclosure {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 36px; margin-inline-start: -.4rem; border-radius: var(--radius-1);
  color: var(--color-text-muted);
  transition: color var(--dur-1) ease, background-color var(--dur-1) ease;
}
.abh.is-ready .abh-disclosure:hover,
.abh.is-ready .abh-disclosure[aria-expanded="true"] { color: var(--color-brand); background: var(--color-bg-tint); }
.abh-chevron { transition: transform var(--dur-2) var(--ease-out); }
.abh-disclosure[aria-expanded="true"] .abh-chevron { transform: rotate(180deg); }

/* ── پنل‌ها (دسکتاپ) ─────────────────────────────────────────────── */
.abh-panel {
  display: none; position: absolute; top: 100%; inset-inline: var(--abh-gutter);
  padding-top: 6px; /* پل بی‌فاصله بین ردیف و کارت تا hover قطع نشود */
  z-index: var(--z-dropdown);
}
.abh:not(.is-ready) .abh-item:hover > .abh-panel,
.abh:not(.is-ready) .abh-item:focus-within > .abh-panel,
.abh.is-ready .abh-panel:not([hidden]) { display: block; }
.abh-panel--account { inset-inline-start: auto; inset-inline-end: var(--abh-gutter); width: 21rem; }

.abh-card {
  max-height: calc(100vh - var(--abh-h) - 1.5rem); max-height: calc(100dvh - var(--abh-h) - 1.5rem);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 1.25rem 1.25rem 0;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-3); box-shadow: var(--shadow-3);
  animation: abh-in var(--dur-2) var(--ease-out);
}
.abh-panel--account .abh-card { padding-bottom: .75rem; }
@keyframes abh-in { from { opacity: 0; transform: translateY(-4px); } }

.abh-grid { display: grid; gap: 1.25rem 1.5rem; padding-bottom: 1.25rem; }
.abh-grid--apps, .abh-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.abh-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.abh-grid--services { grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(14rem, 17rem); }
.abh-col { min-width: 0; }
.abh-col--tint { margin: -.5rem; padding: .5rem; border-radius: var(--radius-2); background: var(--color-bg-tint); }

.abh-col-label, .abh-col-title {
  display: block; margin-bottom: .35rem; padding-inline: .5rem;
  font-size: .78rem; font-weight: 700; line-height: 1.8; color: var(--color-text-muted);
}
.abh-col-title { color: var(--color-brand); }
.abh-col-title:hover { color: var(--color-brand-hover); text-decoration: underline; text-underline-offset: 3px; }
.abh-account-head + .abh-col-label, .abh-links + .abh-col-label { margin-top: .75rem; }

.abh-links a, .abh-app {
  display: flex; align-items: center; gap: .6rem; min-height: 38px;
  padding: .35rem .5rem; border-radius: var(--radius-1);
  color: var(--color-text); font-size: .9rem; line-height: 1.6; overflow-wrap: anywhere;
  transition: color var(--dur-1) ease, background-color var(--dur-1) ease;
}
.abh-links a:hover, .abh-app:hover { color: var(--color-brand); background: var(--color-bg-tint); }
.abh-links--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.abh-app img { width: 24px; height: 24px; border-radius: 6px; object-fit: contain; }

.abh-cards a {
  display: flex; flex-direction: column; gap: .1rem; padding: .6rem .75rem;
  border: 1px solid transparent; border-radius: var(--radius-2); color: var(--color-text);
  transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease;
}
.abh-cards a:hover { background: var(--color-bg-tint); border-color: var(--color-border); }
.abh-cards strong { font-size: .93rem; font-weight: 700; }
.abh-cards a:hover strong { color: var(--color-brand); }
.abh-cards span { font-size: .8rem; color: var(--color-text-muted); }

.abh-promo {
  display: flex; flex-direction: column; align-items: flex-start; gap: .5rem;
  padding: 1.1rem; border: 1px solid var(--color-border); border-radius: var(--radius-2);
  background: var(--grad-hero-light);
}
.abh-promo-title { font-size: 1rem; font-weight: 800; color: var(--color-text); }
.abh-promo-text { font-size: .85rem; color: var(--color-text-muted); }
.abh-promo-cta {
  display: inline-flex; align-items: center; min-height: 40px; margin-top: .25rem; padding: .45rem 1.1rem;
  border-radius: var(--radius-pill); background: var(--grad-cta); color: var(--color-text-on-brand); font-weight: 700;
}
.abh-promo-cta:hover { background: var(--grad-cta-hover); color: var(--color-text-on-brand); }
.abh-promo-link { font-size: .85rem; color: var(--color-brand); }
.abh-promo-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.abh-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.25rem;
  margin-inline: -1.25rem; padding: .75rem 1.25rem;
  background: var(--color-bg-tint); border-top: 1px solid var(--color-border);
  font-size: .86rem;
}
.abh-foot a { display: inline-flex; align-items: center; min-height: 32px; color: var(--color-text-muted); }
.abh-foot a:hover { color: var(--color-brand); }
.abh-foot .abh-foot-main { margin-inline-end: auto; color: var(--color-brand); font-weight: 700; }
.abh-foot-main::after { content: "←"; margin-inline-start: .4rem; }

/* ── ناحیهٔ کاربر ─────────────────────────────────────────────────── */
.abh-actions { flex: none; display: flex; align-items: center; gap: .4rem; }
.abh-icon-link {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-width: 40px; min-height: 40px; border-radius: var(--radius-1); color: var(--color-text-muted);
}
.abh-icon-link:hover { color: var(--color-brand); background: var(--color-bg-tint); }
.abh-icon-label {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.abh-login {
  display: inline-flex; align-items: center; min-height: 40px; padding: .45rem .8rem;
  border-radius: var(--radius-1); color: var(--color-text); font-weight: 600; white-space: nowrap;
}
.abh-login:hover { color: var(--color-brand); background: var(--color-bg-tint); }
.abh-cta {
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px;
  padding: .5rem 1.15rem; border-radius: var(--radius-pill);
  background: var(--grad-cta); color: var(--color-text-on-brand); box-shadow: var(--glow-brand);
  font-size: .93rem; font-weight: 700; white-space: nowrap;
  transition: background var(--dur-1) ease, transform var(--dur-1) ease;
}
.abh-cta:hover { background: var(--grad-cta-hover); color: var(--color-text-on-brand); transform: translateY(-1px); }

.abh-list--account .abh-item { position: static; }
.abh-user { gap: .5rem; padding-inline: .5rem; }
.abh-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--grad-cta); color: var(--color-text-on-brand); font-size: .78rem; font-weight: 700; line-height: 1;
}
.abh-user-name { max-width: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.abh-account-head {
  display: flex; flex-direction: column; margin: 0 -.25rem .25rem; padding: 0 .75rem .75rem;
  border-bottom: 1px solid var(--color-border);
}
.abh-account-head strong { font-size: .95rem; overflow-wrap: anywhere; }
.abh-account-head span { font-size: .8rem; color: var(--color-text-muted); overflow-wrap: anywhere; }
.abh-links .abh-logout { color: var(--color-danger); }

/* دکمهٔ منوی موبایل */
.abh-burger { display: none; }
.abh-burger-lines { position: relative; display: block; width: 20px; height: 14px; }
.abh-burger-lines span {
  position: absolute; inset-inline: 0; height: 2px; border-radius: 2px; background: var(--color-brand);
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-1) ease;
}
.abh-burger-lines span:nth-child(1) { top: 0; }
.abh-burger-lines span:nth-child(2) { top: 6px; }
.abh-burger-lines span:nth-child(3) { top: 12px; }
.abh-burger[aria-expanded="true"] .abh-burger-lines span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.abh-burger[aria-expanded="true"] .abh-burger-lines span:nth-child(2) { opacity: 0; }
.abh-burger[aria-expanded="true"] .abh-burger-lines span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* صفحه زیر کشوی باز موبایل اسکرول نشود.
   🔴 فقط روی html: overflow:hidden روی body، خودِ body را scroll container می‌کند؛
   هدر sticky آن‌وقت به body می‌چسبد (که اسکرول نمی‌خورد) و در صفحهٔ اسکرول‌شده
   به بالای سند می‌پرد — کشو بیرون از دید باز می‌شد. */
html.abh-lock { overflow: hidden; }
/* کشوی باز روی همهٔ عناصر شناور صفحه بنشیند: دکمهٔ بازگشت به بالا (z 1040)،
   نوار CTA پایین صفحهٔ اصلی (z 60 > هدر) و هر عنصر fixed آینده. حباب چت اودوو
   z-index حداکثری دارد و در shadow DOM است؛ فقط پنهان کردن میزبانش کار می‌کند. */
.abh.is-drawer-open { z-index: 2147483000; }
html.abh-lock .o-livechat-root { display: none !important; }

.abh-cta--bar { display: none; }

/* ── تبلت کوچک‌تر: فشرده‌تر ولی هنوز یک ردیف ───────────────────────── */
@media (max-width: 1180px) and (min-width: 992px) {
  .abh-bar { gap: 1rem; }
  .abh-link { padding-inline: .5rem; font-size: .92rem; }
  .abh-login { padding-inline: .5rem; }
  .abh-user-name { display: none; }
  .abh-grid--services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .abh-promo { grid-column: 1 / -1; }
}

/* ── موبایل و تبلت عمودی: کشوی کشویی زیر هدر ─────────────────────── */
@media (max-width: 991.98px) {
  .abh-bar { gap: .6rem; }
  .abh-logo { margin-inline-end: auto; }
  .abh-cta--bar { display: inline-flex; min-height: 38px; padding: .35rem .95rem; font-size: .85rem; box-shadow: none; }
  .abh.is-drawer-open .abh-cta--bar { visibility: hidden; }
  /* صفحهٔ اصلی نوار CTA چسبان پایین خودش را دارد؛ دکمهٔ هدر آن‌جا تکراری است */
  body:has(.ab-h4-bar) .abh-cta--bar { display: none; }

  /* بدون جاوااسکریپت: همان ردیف، افقی قابل پیمایش */
  .abh:not(.is-ready) .abh-bar { flex-wrap: wrap; height: auto; min-height: var(--abh-h); padding-block: .25rem; }
  .abh:not(.is-ready) .abh-drawer { flex: 0 0 100%; overflow-x: auto; }
  .abh:not(.is-ready) .abh-item { height: 48px; }

  .abh.is-ready .abh-burger {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 44px; height: 44px; border: 1px solid var(--color-border); border-radius: var(--radius-2);
    background: var(--color-bg-tint);
  }
  .abh.is-ready .abh-drawer {
    display: none; position: absolute; top: 100%; inset-inline: 0;
    height: calc(100vh - var(--abh-top, var(--abh-h))); height: calc(100dvh - var(--abh-top, var(--abh-h)));
    flex-direction: column; align-items: stretch; gap: 0;
    padding: .25rem var(--abh-gutter) calc(1.5rem + env(safe-area-inset-bottom, 0px));
    overflow-y: auto; overscroll-behavior: contain;
    background: var(--color-bg); border-top: 1px solid var(--color-border);
    box-shadow: var(--shadow-3);
  }
  .abh.is-ready.is-drawer-open .abh-drawer { display: flex; }
  .abh.is-ready .abh-nav { flex: none; }
  .abh.is-ready .abh-list { flex-direction: column; align-items: stretch; gap: 0; }
  .abh.is-ready .abh-item { flex-wrap: wrap; height: auto; border-bottom: 1px solid var(--color-border); }
  .abh.is-ready .abh-link {
    flex: 1 1 auto; min-height: 52px; padding: .75rem .25rem; border-radius: 0;
    font-size: 1rem; background: none;
  }
  .abh.is-ready .abh-link.is-current::after, .abh.is-ready .abh-link[aria-current="page"]::after { display: none; }
  .abh.is-ready .abh-disclosure { width: 48px; height: 48px; margin: 0; }

  .abh.is-ready .abh-panel { position: static; flex: 0 0 100%; width: auto; padding: 0 0 .75rem; }
  .abh.is-ready .abh-card {
    max-height: none; overflow: visible; padding: 0; animation: none;
    background: none; border: 0; border-radius: 0; box-shadow: none;
  }
  .abh.is-ready .abh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1rem; padding-bottom: .5rem; }
  /* هدف لمسی ۴۴px (WCAG 2.5.5) برای همهٔ لینک‌های کشو */
  .abh.is-ready .abh-links a, .abh.is-ready .abh-foot a { min-height: 44px; }
  .abh.is-ready .abh-col--tint { margin: 0; }
  .abh.is-ready .abh-promo { grid-column: 1 / -1; }
  /* در موبایل فهرست اپ‌ها به سرتیتر دسته‌ها خلاصه می‌شود؛ لینک‌ها در DOM می‌مانند */
  .abh.is-ready .abh-applist { display: none; }
  .abh.is-ready .abh-grid--apps { gap: .25rem 1rem; }
  .abh.is-ready .abh-grid--apps .abh-col-title {
    display: flex; align-items: center; min-height: 44px; margin: 0;
    font-size: .95rem; font-weight: 600; color: var(--color-text);
  }
  .abh.is-ready .abh-foot { margin: .25rem 0 0; padding: .5rem .75rem; border: 0; border-radius: var(--radius-2); }

  .abh.is-ready .abh-actions {
    flex-direction: column; align-items: stretch; gap: .6rem; padding-top: 1rem;
  }
  .abh.is-ready .abh-icon-link { justify-content: flex-start; min-height: 48px; padding-inline: .25rem; }
  .abh.is-ready .abh-icon-label { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
  .abh.is-ready .abh-login {
    justify-content: center; min-height: 48px; border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  }
  .abh.is-ready .abh-cta { min-height: 48px; }
  .abh.is-ready .abh-list--account .abh-item { border-top: 1px solid var(--color-border); }
  .abh.is-ready .abh-user-name { display: inline; max-width: none; }
  .abh.is-ready .abh-panel--account { width: auto; }
}
@media (max-width: 479px) {
  .abh.is-ready .abh-grid--4, .abh.is-ready .abh-grid--3, .abh.is-ready .abh-grid--services { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .abh *, .abh *::before, .abh *::after { animation: none !important; transition: none !important; }
}
@media print {
  .abh { position: static; backdrop-filter: none; }
  .abh-drawer, .abh-burger { display: none !important; }
}
/*rtl:end:ignore*/