/* استایل‌های سفارشی کنار Tailwind */
@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@300;400;500;700&family=Noto+Naskh+Arabic:wght@400;500;700&family=Noto+Sans+Arabic:wght@300;400;500;700&family=Vazirmatn:wght@300;400;500;700;800&display=swap');

/* ---------- تم‌های رنگی ---------- */
:root {                       /* آبی (پیش‌فرض) */
  --c-brand: 47 125 240;
  --c-brand-dark: 29 95 196;
  --c-soft: 142 197 243;
  --c-card: 198 224 251;
  --font: 'Vazirmatn', Tahoma, sans-serif;
}
[data-theme='green'] {
  --c-brand: 16 160 110;
  --c-brand-dark: 4 120 87;
  --c-soft: 150 225 190;
  --c-card: 200 240 220;
}
[data-theme='violet'] {
  --c-brand: 124 77 224;
  --c-brand-dark: 91 54 176;
  --c-soft: 196 176 245;
  --c-card: 226 215 252;
}

/* ---------- فونت و اندازه ---------- */
[data-font='sans']  { --font: 'Noto Sans Arabic', Tahoma, sans-serif; }
[data-font='naskh'] { --font: 'Noto Naskh Arabic', 'Times New Roman', serif; }
[data-font='kufi']  { --font: 'Noto Kufi Arabic', Tahoma, sans-serif; }
[data-font='system'] { --font: system-ui, Tahoma, sans-serif; }

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
html[data-size='sm'] { font-size: 14px; }
html[data-size='lg'] { font-size: 18px; }
body { font-family: var(--font); transition: background-color .2s, color .2s; }

/* ---------- تب فعال ---------- */
.tab-btn { position: relative; transition: color .25s, transform .25s; }
.tab-btn:hover { color: rgb(var(--c-brand)); }
.tab-btn::after {
  content: ''; position: absolute; inset-inline: 0; bottom: -6px;
  border-bottom: 2px dotted currentColor;
  transform: scaleX(0); opacity: 0;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), opacity .25s;
}
.tab-btn.is-active { color: rgb(var(--c-brand)); }
.tab-btn.is-active::after { transform: scaleX(1); opacity: 1; }
.tab-btn.is-active svg { animation: bob .5s ease; }

/* ---------- انیمیشن باز شدن تب‌ها ---------- */
#tab-panels { --dir: 1; }
.tab-leave { animation: tabOut .2s ease forwards; }
.tab-enter { animation: tabIn .55s cubic-bezier(.22, 1, .36, 1) both; }
.stagger-item { animation: rise .55s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--i, 0) * 70ms + 120ms); }
.tab-zoom { animation: zoomIn .9s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes tabIn  { from { opacity: 0; transform: translateX(calc(var(--dir) * 40px)); } to { opacity: 1; transform: none; } }
@keyframes tabOut { to { opacity: 0; transform: translateX(calc(var(--dir) * -24px)); } }
@keyframes rise   { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes zoomIn { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes bob    { 40% { transform: translateY(-4px); } }

/* ---------- منوی کشویی ---------- */
#drawer { transition: transform .3s ease; }
#drawer.is-closed { transform: translateX(100%); }
#overlay { transition: opacity .3s ease; }

/* ---------- اسلایدر کارت اصلی ---------- */
.hero-slide {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .6s;
}
.hero-slide[data-pos='before'] { transform: translateX(48px); }
.hero-slide[data-pos='after']  { transform: translateX(-48px); }
.hero-slide.is-active {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition-delay: 0s;
}
.hero-slide .hero-media { transition: transform 1.2s ease; transform: scale(1.08); }
.hero-slide.is-active .hero-media { transform: scale(1); }

.hero-avatar { transition: transform .25s ease, box-shadow .25s ease, opacity .25s; opacity: .75; }
.hero-avatar:hover { opacity: 1; transform: translateY(-2px); }
.hero-avatar.is-active {
  opacity: 1; transform: scale(1.18);
  box-shadow: 0 0 0 3px rgb(var(--c-brand)), 0 4px 12px rgb(0 0 0 / .2);
}

/* ---------- مدال‌ها (dialog) ---------- */
dialog[open] { animation: pop .22s ease; }
dialog[open]::backdrop { animation: fade .22s ease; }
@keyframes pop  { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.opt { border: 1.5px solid rgb(148 163 184 / .4); transition: border-color .15s, background-color .15s; }
.opt:hover { border-color: rgb(var(--c-brand) / .6); }
.opt[aria-pressed='true'] { border-color: rgb(var(--c-brand)); background-color: rgb(var(--c-brand) / .1); }

#search-results li[aria-selected='true'] { background-color: rgb(var(--c-brand) / .12); }

@media (prefers-reduced-motion: reduce) {
  .hero-slide, .hero-slide .hero-media, .hero-avatar, dialog[open], dialog[open]::backdrop,
  .tab-enter, .tab-leave, .stagger-item, .tab-zoom, .tab-btn::after, .tab-btn.is-active svg { transition: none; animation: none; }
}

/* کلید دۆخی تاریک */
#dark-switch span { transition: transform .2s ease; }
#dark-switch[aria-checked='true'] span { transform: translateX(-1.25rem); }

/* ---------- اسلایدر کارە سەرچاوە کراوە (بلور، چپ ← راست) ---------- */
.apps-leave .app-card { animation: blurOut .4s ease forwards; animation-delay: calc(var(--i, 0) * 50ms); }
.apps-enter .app-card { animation: blurIn .8s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--i, 0) * 110ms); }
@keyframes blurOut { to { opacity: 0; filter: blur(12px); transform: translateX(70px); } }
@keyframes blurIn  { from { opacity: 0; filter: blur(14px); transform: translateX(-70px); } to { opacity: 1; filter: blur(0); transform: none; } }

.apps-dot {
  height: .55rem; width: .55rem; border-radius: 9999px; cursor: pointer;
  background: rgb(var(--c-brand) / .3);
  transition: width .35s cubic-bezier(.22, 1, .36, 1), background-color .25s;
}
.apps-dot:hover { background: rgb(var(--c-brand) / .6); }
.apps-dot.is-active { width: 1.6rem; background: rgb(var(--c-brand)); }

@media (prefers-reduced-motion: reduce) {
  .apps-leave .app-card, .apps-enter .app-card, .apps-dot { animation: none; transition: none; }
}

/* ---------- شیوهٔ نمایش لیست: Mini / List / Grid ---------- */
.view-btn {
  display: grid; place-items: center; height: 2rem; width: 2rem; border-radius: .5rem;
  color: #94a3b8; transition: color .2s, background-color .2s, transform .2s;
}
.view-btn:hover { color: rgb(var(--c-brand)); transform: translateY(-1px); }
.view-btn[aria-pressed='true'] { color: rgb(var(--c-brand)); background-color: rgb(var(--c-brand) / .12); }

.view-leave { animation: viewOut .18s ease forwards; }
@keyframes viewOut { to { opacity: 0; filter: blur(6px); transform: scale(.98); } }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .view-leave, .view-btn { animation: none; transition: none; }
}

/* ---------- نوار منوی چسبان ---------- */
#topbar { transition: background-color .3s, box-shadow .3s, padding .3s; }
#toolbar { transition: border-color .3s; }
#topbar.is-stuck #toolbar { border-color: transparent; }
#topbar.is-stuck {
  background-color: rgb(241 245 249 / .85);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 2px 14px rgb(0 0 0 / .08);
  padding-block: .5rem;
}
.dark #topbar.is-stuck { background-color: rgb(30 41 59 / .85); box-shadow: 0 2px 14px rgb(0 0 0 / .4); }

/* ---------- پس‌زمینهٔ شبکه‌ای + درخشش (بالای صفحه و پاورقی) ---------- */
:root {
  --accent: rgb(var(--c-brand));        /* با تم رنگی عوض می‌شود */
  --bg-grid: rgb(var(--c-brand) / .09);
}
.dark { --bg-grid: rgb(255 255 255 / .06); }

/* بالای صفحه: از بالاترین نقطه شروع می‌شود و زیر نوار منو می‌رود */
.hero { position: absolute; inset: 0 0 auto; height: 42rem; z-index: -1; overflow: hidden; pointer-events: none; }
.hero::before {
  content: "";
  position: absolute;
  inset: -40px calc(50% - 50vw) 0;
  z-index: -1;
  background-image: radial-gradient(600px 380px at 75% 10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%), linear-gradient(var(--bg-grid) 1px, transparent 1px), linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px);
  background-size: auto, 32px 32px, 32px 32px;
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
  pointer-events: none;
}

/* پاورقی: همان افکت، رو به بالا محو می‌شود */
.footer-glow { position: relative; isolation: isolate; overflow: hidden; }
.footer-glow::before {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw) -40px;
  z-index: -1;
  background-image: radial-gradient(600px 380px at 25% 90%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%), linear-gradient(var(--bg-grid) 1px, transparent 1px), linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px);
  background-size: auto, 32px 32px, 32px 32px;
  mask-image: linear-gradient(to top, #000 55%, transparent);
  -webkit-mask-image: linear-gradient(to top, #000 55%, transparent);
  pointer-events: none;
}

/* ======================================================
   صفحهٔ پست تکی
   ====================================================== */

/* متن مقاله */
.post-body h2 { font-size: 1rem; font-weight: 800; margin: 2.25rem 0 .9rem; }
.post-body p, .post-body li { font-size: .875rem; line-height: 2.1; }
.post-body p { margin-bottom: 1rem; text-align: justify; }
.post-body a { color: rgb(var(--c-brand)); text-decoration: underline; text-underline-offset: 3px; }
.post-body ul, .post-body ol { margin: 0 1.25rem 1rem; }
.post-body ul { list-style: disc; }
.post-body ol { list-style: decimal; }
.post-body strong { font-weight: 800; }

/* نقل‌قول با گیومهٔ نارنجی */
.post-quote { position: relative; margin: 2.25rem auto; max-width: 40rem; padding: 1.25rem 3.5rem; font-size: .9rem; line-height: 2.1; }
.post-quote::before, .post-quote::after {
  position: absolute; font: 400 5rem/1 Georgia, 'Times New Roman', serif; color: #d9531e; opacity: .9; pointer-events: none;
}
.post-quote::before { content: '\201D'; top: -.4rem; right: .25rem; }
.post-quote::after  { content: '\201C'; bottom: -2.6rem; left: .25rem; }

/* تب‌های پایین مقاله */
.post-tab {
  position: relative; padding-bottom: .5rem; font-size: .875rem; font-weight: 700;
  color: rgb(var(--c-brand)); opacity: .8; transition: opacity .2s, color .2s;
}
.post-tab:hover { opacity: 1; }
.post-tab[aria-selected='true'] { color: #0f172a; opacity: 1; }
.dark .post-tab[aria-selected='true'] { color: #fff; }
.post-tab::after {
  content: ''; position: absolute; inset-inline: 0; bottom: -1px; border-bottom: 2px dotted currentColor;
  transform: scaleX(0); transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.post-tab[aria-selected='true']::after { transform: scaleX(1); }

/* فرم نظر */
.field {
  width: 100%; border: 1.5px solid rgb(148 163 184 / .5); border-radius: .75rem; background: transparent;
  padding: .65rem .9rem; font-size: .875rem; outline: none; transition: border-color .2s, box-shadow .2s;
}
.field:focus, .editor:focus-within { border-color: rgb(var(--c-brand)); box-shadow: 0 0 0 3px rgb(var(--c-brand) / .15); }
.field:user-invalid { border-color: #ef4444; }
.editor { position: relative; border: 1.5px solid rgb(148 163 184 / .5); border-radius: .75rem; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.editor textarea { width: 100%; resize: vertical; min-height: 10rem; background: transparent; padding: .9rem 1rem; font-size: .875rem; line-height: 2; outline: none; }
.editor-bar { display: flex; justify-content: center; align-items: center; gap: .25rem; padding: .35rem 2.75rem; border-bottom: 1px solid rgb(148 163 184 / .35); background: rgb(148 163 184 / .08); }
.tb-btn { display: grid; place-items: center; height: 2rem; width: 2rem; border-radius: .5rem; color: #64748b; transition: background-color .15s, color .15s; }
.tb-btn:hover:not(:disabled) { background: rgb(var(--c-brand) / .12); color: rgb(var(--c-brand)); }
.tb-btn[aria-pressed='true'] { background: rgb(var(--c-brand) / .15); color: rgb(var(--c-brand)); }
.tb-btn:disabled { opacity: .35; cursor: not-allowed; }
.tb-sep { width: 1px; height: 1.2rem; background: rgb(148 163 184 / .5); margin-inline: .35rem; }

.btn-primary { background: rgb(var(--c-brand)); color: #fff; padding: .6rem 1.6rem; border-radius: .75rem; font-size: .875rem; font-weight: 700; transition: background-color .2s, transform .2s; }
.btn-primary:hover { background: rgb(var(--c-brand-dark)); transform: translateY(-1px); }

/* دکمه‌های هم‌رسانی */
.share-btn { display: grid; place-items: center; height: 1.75rem; width: 1.75rem; color: #94a3b8; transition: color .2s, transform .2s; }
.share-btn:hover { color: rgb(var(--c-brand)); transform: translateY(-2px); }

/* پیام کوتاه (toast) */
#toast { position: fixed; bottom: 1.5rem; left: 50%; z-index: 60; transform: translate(-50%, 1rem); opacity: 0; pointer-events: none;
  background: #0f172a; color: #fff; padding: .55rem 1.1rem; border-radius: 9999px; font-size: .8rem; transition: opacity .25s, transform .25s; }
#toast.is-show { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .post-tab::after, .btn-primary, .share-btn, #toast { transition: none; }
}
@media print {
  #topbar, #drawer, #overlay, .hero, #post-extra, footer, #share-bar { display: none !important; }
}

/* ---------- افزودنی‌های صفحهٔ پست ---------- */
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.md-body p { margin: 0; }
.md-body ul, .md-body ol { margin: .25rem 1.25rem; }
.md-body ul { list-style: disc; }
.md-body ol { list-style: decimal; }
.md-body a { color: rgb(var(--c-brand)); text-decoration: underline; text-underline-offset: 3px; }