/* =========================================================
   HIDIZBAD — Brand Overrides (Global)
   - استایل‌های برند + بک‌گراند متحرک سراسری
   - تضمین: #bg-canvas همیشه پشتِ محتوا (مخصوصاً موبایل/iOS)
   - بدون تداخل با view.css و بقیه فایل‌ها
   ========================================================= */

/* رنگ برند لینک‌ها (طلایی) */
:root{ --accent:#f59e0b; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ opacity:.92; }

/* ---------------------------------------------------------
   Canvas BG — سراسری
   نکته مهم: فقط یک‌بار #bg-canvas را تعریف می‌کنیم.
   هیچ تعریف متناقضی برای #bg-canvas در جاهای دیگر نداشته باشید.
   --------------------------------------------------------- */
html, body { position: relative; }
body { isolation: isolate; }               /* استکینگ روت مستقل بساز؛ منفی‌ z-index درست کار کنه */

#bg-canvas{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: -1 !important;                  /* همیشه پشتِ همه‌ی محتوا بماند */
  mix-blend-mode: normal !important;       /* اگر جایی قبلاً تغییر داده شده بود */
  filter: none !important;
}

/* برای اطمینان: بعضی بلاک‌های اصلی بالاتر از کانواس */
.brand, .view-2col, .left-col, .right-col, .hero, .meta-card,
.content, header, nav {
  position: relative;
  z-index: 1;
}
/* تصویر قهرمان در صفحات view قطعاً بالاتر از کانواس بماند */
.hero img{ position: relative; z-index: 2; }

/* ---------------------------------------------------------
   Header/Brand — قرصِ لوگو مثل هوم‌پیج
   (پس‌زمینه‌ی هدر/نویگیشن شفاف بماند تا بک‌گراند دیده شود)
   --------------------------------------------------------- */
.brand{ 
  display:flex; justify-content:center; 
  margin-top: 8px; 
  background: transparent !important;
}
.brand .logo{
  display:inline-flex; align-items:center; justify-content:center;
  width:192px; height:60px; padding:0 8px;
  background:#f59e0b;                      /* طلایی برند */
  border-radius:9999px;
  box-shadow:0 12px 30px rgba(245,158,11,.32);
}

/* ---------------------------------------------------------
   Global filter/video nav — تایپوگرافی و رنگ
   کلاس‌ها: .video-nav و .filter-nav
   --------------------------------------------------------- */
.video-nav, .filter-nav {
  font-family: "Courier New", Courier, monospace;
  font-size: 16px;
  letter-spacing: .25em;        /* فاصلهٔ حروف مثل هوم‌پیج */
  text-transform: uppercase;    /* اگر خواستی lowercase باشد، این خط را حذف کن */
  font-weight: 700;
  background: transparent !important;  /* شفاف تا بک‌گراند دیده شود */
}
.video-nav a, .filter-nav a {
  color: #ffffff;
  text-decoration: none;
}
.video-nav a:hover, .filter-nav a:hover { opacity: .86; }
.video-nav a.active, .filter-nav a.active { color: var(--accent); } /* طلاییِ فعال */

/* نقطه بین آیتم‌های منو */
.video-nav a + a::before,
.filter-nav a + a::before {
  content: "•";
  margin: 0 18px;
  color: rgba(255,255,255,.35);
}

/* ---------------------------------------------------------
   Layout container عمومی برای صفحات گالری/فهرست
   کلاس‌ها: .content و .grid (بدون تداخل با view.css)
   --------------------------------------------------------- */
.content{
  width: min(2000px, calc(100vw - 32px)); /* نزدیکِ تمام عرض، 16px گاتر هر طرف */
  max-width: none;
  margin: 118px auto 80px;
  padding: 0;
}
.grid{
  column-gap: 14px;
  column-width: 280px;          /* پایه دسکتاپ */
  padding-bottom: 24px;
}
.video-card{ margin: 0 0 14px; }

/* ریسپانسیو ستون‌های گرید */
@media (min-width: 2000px){ .grid{ column-width: 300px; } }
@media (max-width: 1600px){ .grid{ column-width: 260px; } }
@media (max-width: 1400px){ .grid{ column-width: 240px; } }
@media (max-width: 1200px){ .grid{ column-width: 220px; } }
@media (max-width: 900px) { .grid{ column-width: 200px; } }
@media (max-width: 768px) { .grid{ column-width: 180px; } }
@media (max-width: 640px) { .grid{ column-width: 160px; } }
@media (max-width: 400px){
  .grid{ column-width: 120px; column-gap: 10px; }
}