/* unified site header: same markup and look on every page */
.site-topbar {
  --sn-bg: rgba(10, 12, 24, .94);
  --sn-line: rgba(255, 255, 255, .09);
  --sn-text: #eef1fb;
  --sn-muted: #a9b0cc;
  --sn-hover: rgba(124, 92, 255, .16);
  --sn-active: #00d4ff;
  --sn-active-bg: rgba(0, 212, 255, .13);

  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  background: var(--sn-bg);
  border-bottom: 1px solid var(--sn-line);
  color: var(--sn-text);
  font-family: "Vazirmatn", system-ui, sans-serif;
  direction: rtl;
  box-sizing: border-box;
}

body.light-theme .site-topbar,
html[data-theme="light"] .site-topbar {
  --sn-bg: rgba(255, 255, 255, .96);
  --sn-line: rgba(16, 24, 48, .1);
  --sn-text: #141a38;
  --sn-muted: #59608a;
  --sn-hover: rgba(91, 61, 240, .1);
  --sn-active: #5b3df0;
  --sn-active-bg: rgba(91, 61, 240, .1);
}

html[data-perf-blur="on"] .site-topbar {
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.site-topbar-inner {
  display: flex;
  align-items: center;
  gap: .5rem 1.1rem;
  width: min(1280px, 100%);
  min-height: 62px;
  margin-inline: auto;
  padding: .55rem clamp(.85rem, 3vw, 2rem);
  box-sizing: border-box;
}

/* brand */
.site-brand {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-shrink: 0;
  color: inherit;
  text-decoration: none;
}
.site-brand img { width: 36px; height: 36px; display: block; }
.site-brand span {
  font-size: 1.15rem;
  font-weight: 800;
  white-space: nowrap;
  background: linear-gradient(135deg, #00d4ff, #7c5cff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* nav */
.site-nav {
  display: flex;
  align-items: center;
  gap: .2rem;
  min-width: 0;
  margin-inline-start: .4rem;
}
.site-nav a {
  padding: .42rem .85rem;
  border-radius: 10px;
  font-size: .86rem;
  line-height: 1.6;
  color: var(--sn-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s ease, background .18s ease;
}
.site-nav a:hover { color: var(--sn-text); background: var(--sn-hover); }
.site-nav a[aria-current="page"] {
  color: var(--sn-active);
  background: var(--sn-active-bg);
  font-weight: 700;
}
.site-nav a:focus-visible,
.site-brand:focus-visible {
  outline: 2px solid var(--sn-active);
  outline-offset: 2px;
}

/* actions (theme, display quality, account) sit at the far end */
.site-topbar .site-actions { margin-inline-start: auto; }

/* narrow screens: brand + actions on the first row, nav scrolls on the second */
@media (max-width: 900px) {
  .site-topbar-inner {
    flex-wrap: wrap;
    min-height: 0;
    padding-block: .5rem;
  }
  .site-nav {
    order: 3;
    width: 100%;
    margin: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a {
    flex: 0 0 auto;
    padding: .34rem .8rem;
    font-size: .8rem;
  }
}

@media print {
  .site-topbar { display: none; }
}

/* defense: a page stylesheet with bare `header` / `nav` rules must never restyle this header */
.site-topbar { animation: none; background-image: none; box-shadow: none; padding: 0; margin: 0; }
.site-topbar::before, .site-topbar::after { content: none; display: none; }
.site-nav { padding: 0; }
.site-nav a { background: transparent; border: 0; box-shadow: none; transform: none; font-weight: 500; }
.site-nav a:hover { background: var(--sn-hover); transform: none; }
.site-nav a[aria-current="page"] { background: var(--sn-active-bg); font-weight: 700; }

/* language switch (English <-> فارسی) */
.site-lang {
  flex-shrink: 0;
  margin-inline-start: auto;
  padding: .28rem .85rem;
  border: 1px solid var(--sn-active);
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--sn-active);
  text-decoration: none;
  background: transparent;
  transition: background .18s ease;
}
.site-lang:hover { background: var(--sn-active-bg); }
.site-lang:focus-visible { outline: 2px solid var(--sn-active); outline-offset: 2px; }
.site-topbar .site-lang + .site-actions { margin-inline-start: 0; }