/* ---------- پیوند مستقیم تیترهای مقاله ----------
   این فایل بعد از features.css بارگذاری می‌شود (Layout.tsx).
   --topbar-h را anchors.js با ارتفاع واقعی هدر پر می‌کند؛ مقدار پیش‌فرض فقط برای پیش از اجرای اسکریپت است.
   ---------------------------------------------------------- */

.prose h2[id^="sec-"],
.prose h3[id^="sec-"],
.prose h4[id^="sec-"] {
  /* تیتر مقصد زیر هدر چسبان (sticky) پنهان نمی‌ماند */
  scroll-margin-top: calc(var(--topbar-h, 84px) + 16px);
  border-radius: 10px;
}

.prose .sec-anchor {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6em;
  min-height: 1.6em;
  margin-inline-start: 0.35em;
  padding: 0 0.25em;
  border-radius: 8px;
  vertical-align: middle;
  font-size: 0.8em;
  font-weight: 700;
  line-height: 1;
  color: var(--muted);
  text-decoration: none;
  opacity: 0.45; /* لمسی و موبایل: همیشه قابل دیدن اما ظریف */
  transition: opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.prose .sec-anchor:hover {
  color: var(--accent);
  background: var(--soft);
  opacity: 1;
}

.prose .sec-anchor:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  opacity: 1;
}

/* بازخورد کپی: متن کوتاه بالای آیکون (از روی data-state که anchors.js می‌گذارد) */
.prose .sec-anchor[data-state]::after {
  position: absolute;
  bottom: calc(100% + 6px);
  inset-inline-start: 50%;
  transform: translateX(50%);
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--fg);
  color: var(--bg);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
  pointer-events: none;
  content: "کپی شد ✓";
}

.prose .sec-anchor[data-state="failed"]::after {
  content: "کپی نشد";
  background: #e5484d;
  color: #fff;
}

/* دسکتاپ: لینک تیترها همیشه قابل مشاهده باشد */
@media (hover: hover) and (pointer: fine) {
  .prose .sec-anchor {
    opacity: 0.45;
  }

  .prose .sec-anchor:hover,
  .prose .sec-anchor:focus-visible {
    opacity: 1;
  }
}

/* موبایل: هدف لمسی بزرگ‌تر، بدون تغییر چیدمان متن */
@media (max-width: 640px) {
  .prose .sec-anchor {
    min-width: 2.2rem;
    min-height: 2.2rem;
    font-size: 0.9em;
  }
}

/* لینک مقصد: کمی پس‌زمینه‌ی رنگی که کم‌کم محو می‌شود تا خواننده جای رسیدن را ببیند */
.prose :is(h2, h3, h4)[id^="sec-"]:target {
  animation: sec-target-flash 1.8s ease-out;
}

@keyframes sec-target-flash {
  from {
    background-color: color-mix(in srgb, var(--accent) 22%, transparent);
  }
  to {
    background-color: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .prose :is(h2, h3, h4)[id^="sec-"]:target {
    animation: none;
    background-color: color-mix(in srgb, var(--accent) 12%, transparent);
  }
}