/* IRANYekan: در صورت میزبانی محلی، مسیر فونت‌ها را مطابق سرورت تنظیم کن */
@font-face {
  font-family: 'IRANYekan';
  src: url('./font/IRANYekanXRegular.woff2') format('woff2'),
       url('./font/IRANYekanXRegular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IRANYekan';
  src: url('./font/IRANYekanXBold.woff2') format('woff2'),
       url('./font/IRANYekanXBold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
/* Root Variables */
:root{
  --bg:#f7f8fb;
  --card:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --note-bg:#daebff;
  --note-border:#2563eb;
  --brand-blue:#2563eb;
  --brand-green:#16a34a;
  --brand-yellow:#f59e0b;
  --brand-red:#ef4444;
  --ring:rgba(37,99,235,.25);
  --shadow:0 6px 20px rgba(0,0,0,.06);
  --radius:14px;
  --stripe-height:22px;  /* ارتفاع لوگوی چهاررنگ (کاهش‌ یافته طبق درخواست) */
}
/* 🔸 نوار رنگی بالای هر بخش کوتاه‌تر */
.section-stripes span {
  display: block;
  flex: 1;
  height: 0px !important; /* قبلاً 22px بود */
  border-radius: 4px;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-green), var(--brand-yellow), var(--brand-red));
  background-size: 300% 100%;
  animation: gradientMove 4s infinite alternate;
}
html[data-theme="dark"]{
  --bg:#0f172a;
  --card:#1e293b;
  --text:#f1f5f9;
  --muted:#94a3b8;
  --note-bg:#0b1220;
  --note-border:#3b82f6;
  --shadow:0 6px 20px rgba(0,0,0,.4);
}
section {
  scroll-margin-top: 120px; /* ارتفاع نوار منو */
}
html{scroll-behavior:smooth;transition:background .3s ease,color .3s ease}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:"IRANYekan",system-ui,-apple-system,"Segoe UI",Roboto,Tahoma,sans-serif;
  line-height:1;overflow-x:hidden;
}
/* Layout */
.wrap{max-width:960px;margin:auto;padding:16px 14px 120px}
.header{display:flex;flex-direction:column;align-items:center;gap:14px;margin:22px 0 12px}
/* Top logo stripes (blink) */
.logo-stripes{display:flex;gap:6px;align-items:center;background:var(--card);
  padding:8px 14px;border-radius:18px;box-shadow:var(--shadow);animation:blink 1s infinite alternate}
.logo-stripes span{display:block;width:8px;height:var(--stripe-height);border-radius:20px}
.b{background:var(--brand-blue)}.g{background:var(--brand-green)}
.y{background:var(--brand-yellow)}.r{background:var(--brand-red)}
@keyframes blink{0%{opacity:1}50%{opacity:.55}100%{opacity:1}}
.title{text-align:center;font-size:22px;margin:0 8px}
.subtle{color:var(--muted);font-size:14px;text-align:center;margin-top:-6px}
.subtle a{color:var(--brand-blue);text-decoration:none}
/* Friendly welcome box */
.welcome{
  background:linear-gradient(180deg,#fff8f0, #ffffff);
  border:1px solid #fde2c2;
  border-radius:16px;
  padding:14px 16px;
  box-shadow:var(--shadow);
  margin:10px auto 16px;
}
html[data-theme="dark"] .welcome{
  background:linear-gradient(180deg,#0f172a,#111827);
  border-color:#374151;
}

/* TOC */
nav.toc{position:sticky;top:0;z-index:50;background:rgba(247,248,251,.96);
  backdrop-filter:blur(8px);border-bottom:1px solid #e5e7eb}
html[data-theme="dark"] nav.toc{background:rgba(15,23,42,.9);border-color:#334155}
.toc-inner{max-width:960px;margin:auto;padding:10px;display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
/* 🔹 TOC Sticky Navigation with soft glow animation */
nav.toc {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 248, 251, .96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #e5e7eb;
  animation: tocGlow 3s infinite ease-in-out;
}

/* حالت تیره (Dark Mode) */
html[data-theme="dark"] nav.toc {
  background: rgba(15, 23, 42, .9);
  border-color: #334155;
}

/* درخشش متناوب */
@keyframes tocGlow {
  0%, 100% { box-shadow: 0 0 0px rgba(22, 163, 74, 0); }
  50% { box-shadow: 0 0 15px rgba(22, 163, 74, 0.6); }
}

.toc-inner {
  max-width: 960px;
  margin: auto;
  padding: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

/* لینک‌ها */
.toc a {
  display: inline-block;
  padding: 9px 9px;
  border-radius: 26px;
  background: var(--card);
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  border: 1px solid #959595;
  transition: all 0.3s ease;
  margin: 0px 3px 0px -9px;
}

/* Hover */
.toc a:hover {
  background: #934ca2;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 0 8px rgba(22, 163, 74, 0.7);
}

/* حالت چشمک خاص برای لینک فعال */
.toc a.active {
  animation: linkPulse 1.5s infinite ease-in-out;
}

@keyframes linkPulse {
  0%, 100% { background-color: #16a34a; color: #fff; box-shadow: 0 0 4px rgba(22,163,74,0.4); }
  50% { background-color: #0a4d8c; box-shadow: 0 0 12px rgba(22,163,74,0.8); }
}

.toc a:hover{background:var(--brand-blue);color:#fff;transform:translateY(-1px)}
/* Sections (cards + details) */
.card{background:var(--card);border:1px solid #e5e7eb;border-radius:var(--radius);
  box-shadow:var(--shadow);margin:14px 0;overflow:hidden}
details{transition:box-shadow .25s ease}
details[open]{box-shadow:0 0 0 3px var(--ring)}
summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:12px;padding:14px;border-radius:10px;
  background:#f9fafb;border-bottom:1px solid #e5e7eb;font-weight:700;margin-bottom:4px}
html[data-theme="dark"] summary{background:#1e293b;border-color:#334155}
summary::-webkit-details-marker{display:none}
.sum-title{display:flex;align-items:center;gap:8px}
.chev{transition:transform .2s ease}
details[open] .chev{transform:rotate(180deg)}
.content{padding:12px 4px 12px 4px;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* Section stripes inside content headers */
.section-stripes{display:flex;gap:4px;margin:-6px 0 8px}
.section-stripes span{display:block;flex:1;height:var(--stripe-height);border-radius:4px;
  background:linear-gradient(90deg,var(--brand-blue),var(--brand-green),var(--brand-yellow),var(--brand-red));
  background-size:300% 100%;animation:gradientMove 4s infinite alternate}
@keyframes gradientMove{0%{background-position:0%}100%{background-position:100%}}
/* NOTE Box */
.note{
  background:var(--note-bg);
  border-right:5px solid var(--note-border);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
  margin:16px 0 8px;
  display:flex;align-items:flex-start;gap:10px;
}
.note-icon{font-size:22px;color:var(--note-border)}
/* Typography: فارسی راست‌چین و justify */
p, li{
  text-align:justify;
  text-align-last:right;
  direction:rtl;
  unicode-bidi:embed;
  line-height:1.6;
  word-spacing:-1px;
  hyphens:auto;
  
}
ul{margin:8px 0;padding-right:22px}
li{margin:6px 0}
/* Footer line thicker */
.hr{height:14px;border-radius:3px;margin:24px 0;
  background:linear-gradient(90deg,var(--brand-red),var(--brand-yellow),var(--brand-green),var(--brand-blue));
  background-size:200% 100%;animation:gradientMove 6s infinite alternate}
.footer{color:var(--muted);text-align:center;margin:22px 0 8px;font-size:13px}
.footer a{color:var(--brand-blue);text-decoration:none}
/* Back to top */
#toTop{
  position:fixed;bottom:24px;left:24px;z-index:999;background:var(--brand-blue);color:#fff;
  border:none;border-radius:50%;width:48px;height:48px;cursor:pointer;display:none;
  align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(37,99,235,.4);
  transition:all .3s ease
}
#toTop:hover{background:#1d4ed8;transform:translateY(-3px)}
/* Theme toggle */
#themeToggle{
  position:fixed;top:14px;left:14px;z-index:1000;background:var(--card);color:var(--text);
  border:1px solid #e5e7eb;border-radius:50px;height:40px;padding:0 12px;display:flex;
  align-items:center;gap:8px;cursor:pointer;box-shadow:var(--shadow);
  transition:all .25s ease;font-size:13px;font-weight:700;
}
#themeToggle:hover{transform:translateY(-1px)}
.theme-dot{width:10px;height:10px;border-radius:50%;background:var(--brand-blue)}