/* ═══════════════════════════════════════════════════════════
   site-footer.css — فوتر مشترک سایت آرسس
   قوانین عیناً از index.html گرفته شده‌اند (مرجع پروژه).
   جفتش: assets/site-footer.js  |  بعد از site-base.css لود شود.
   ═══════════════════════════════════════════════════════════ */

#footer {
  background: linear-gradient(180deg, #0b0920 0%, #060810 100%);
  border-top: 1px solid rgba(255, 255, 255, .05);
  position: relative;
  overflow: hidden;
  padding: 72px 64px 36px
}

#footer-canvas {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* canvas یک replaced element است؛ left/right به‌تنهایی کشش نمی‌دهد */
  width: 100%;
  height: 240px;
  pointer-events: none;
  opacity: .55
}

.foot-wm {
  position: absolute;
  bottom: -60px;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Expletus Sans", "Futura PT", sans-serif;
  font-size: 320px;
  font-weight: 800;
  color: rgba(101, 50, 255, .06);
  letter-spacing: .06em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  direction: ltr;
  line-height: 1
}

.foot-main {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 48px;
  max-width: 1080px;
  margin: 0 auto;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.foot-brand {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end
}

.foot-logo-row {
  display: flex;
  align-items: center;
  gap: 12px
}

.foot-logo-text {
  font-family: "AbarMidFaNum", "Vazirmatn", sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: rgba(255, 255, 255, .82);
  text-align: right;
  line-height: 1.4
}

.foot-tagline {
  font-family: "HandelGothic", "Futura PT", sans-serif;
  font-size: 14px;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .70);
  direction: ltr;
  text-align: right
}

.foot-col-h {
  font-family: "Vazirmatn", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: rgba(255, 255, 255, .82);
  margin-bottom: 18px;
  text-align: right
}

.foot-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px
}

.foot-links a,
.foot-links .foot-product-disabled {
  font-family: "Vazirmatn", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.75;
}

.foot-links a {
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  transition: color .2s;
  display: block;
  text-align: right
}

.foot-links a:hover {
  color: #fff
}

.contact-line {
  font-family: "Vazirmatn", sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, .70);
  line-height: 1.75;
  margin-bottom: 10px;
  text-align: right
}

.contact-line strong {
  color: rgba(255, 255, 255, .65)
}

.social-row {
  display: flex;
  gap: 9px;
  margin-top: 18px;
  flex-direction: row
}

.soc-btn {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s, transform .2s;
  text-decoration: none
}

.soc-btn:hover {
  transform: translateY(-2px) scale(1.08)
}

/* اندازهٔ آیکون‌ها اینجا تعیین می‌شود، نه در مارک‌آپ.
   در فوترِ هر صفحه width/height به‌صورت inline نوشته شده و هر سه هم
   یک عدد ندارند (۳۲/۳۲/۳۶)؛ این قاعده بر همه‌شان غالب می‌شود و با یک
   فایل، همهٔ صفحات یکدست می‌شوند. */
.soc-btn img {
  width: 40px;
  height: 40px;
  display: block
}

/* تلگرام دایره است و بقیه مربع؛ در یک اندازه، دایره همیشه کوچک‌تر
   دیده می‌شود چون مساحت کمتری از قاب را پر می‌کند. دو پیکسل جبران.
   سلکتور هم روی aria-label کار می‌کند و هم روی نام فایل، چون در
   بعضی صفحات Telegram.svg با تِ بزرگ است. */
.soc-btn[aria-label="Telegram"] img,
.soc-btn img[src*="elegram"] {
  width: 42px;
  height: 42px
}

.social-row {
  gap: 6px
}

.foot-bottom {
  position: relative;
  z-index: 2;
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center
}

.foot-copy {
  font-family: "Vazirmatn", sans-serif;
  font-size: 12px;
  padding-top: 10px;
  color: rgba(255, 255, 255, .70)
}

.foot-legal {
  font-family: "Vazirmatn", sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, .70);
  text-decoration: none;
  padding-top: 10px;
  transition: color .2s
}

.foot-legal:hover {
  color: rgba(255, 255, 255, .6)
}

/* index.html هیچ بریک‌پوینتی برای فوتر نداشت و سه ستون در موبایل له می‌شدند.
   fdp/about/hub از قبل این را داشتند — حالا هر چهار صفحه یکسان‌اند. */
@media (max-width: 860px) {
  #footer {
    padding: 60px 24px 30px
  }

  .foot-main {
    grid-template-columns: 1fr;
    gap: 32px
  }

  .foot-brand {
    align-items: flex-start
  }

  .foot-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px
  }

  .foot-wm {
    font-size: 140px;
    bottom: -26px
  }
}

/* Upcoming products stay legible, without a clickable destination. */
.foot-links .foot-product-disabled {
  display: block;
  color: rgba(255, 255, 255, .45);
  text-align: right;
  cursor: default;
}
.foot-coming-soon {
  font: inherit;
  white-space: nowrap;
}

[dir="ltr"] .foot-links .foot-product-disabled {
  text-align: left;
}

/* Keep the unavailable Instagram account hidden until its link is ready. */
.soc-btn[aria-label="Instagram"][aria-disabled="true"] {
  display: none;
}