/* ===========================================================
   course.css — دورهٔ «نظریهٔ فعالیت و طراحی گسترش‌یابنده»
   طراحی بامزه و پاستلی 🐰🥕🐄 · فارسی (RTL) · کاملاً آفلاین
   Cute pastel, RTL-first, fully offline, print-friendly,
   with gamified/animated quiz styles. Linked by every page.
   =========================================================== */

/* ---------- Local Persian fonts (offline, bundled in assets/fonts) ---------- */
@font-face {
  font-family: "Vazirmatn"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/vazirmatn-400.woff2") format("woff2");
}
@font-face {
  font-family: "Vazirmatn"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/vazirmatn-700.woff2") format("woff2");
}
@font-face {              /* playful display font for big titles & box labels */
  font-family: "Lalezar"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/lalezar-400.woff2") format("woff2");
}

:root {
  --font-body: "Vazirmatn", "IRANSans", "IRANYekan", Tahoma, "Geeza Pro", "Segoe UI", sans-serif;
  --font-display: "Lalezar", "Vazirmatn", Tahoma, sans-serif;
  --paper:   #fff7fb;   /* soft pink cream */
  --paper2:  #ffffff;
  --ink:     #3b2f3a;   /* soft plum ink */
  --muted:   #8a7c86;
  --rule:    #f4d9e7;
  --pink:    #e05c86;   /* main accent */
  --pink-lt: #ffe3ee;
  --carrot:  #ef7d1e;   /* bonus / 🥕 */
  --carrot-lt:#ffedd8;
  --mint:    #2fae8e;   /* example / correct / 🐄 */
  --mint-lt: #dcf6ee;
  --lav:     #8a79e0;   /* key def */
  --lav-lt:  #ece7ff;
  --sky:     #4f9be0;
  --red:     #d94f57;   /* incorrect */
  --gold:    #e0a72e;
  --tri:     #4a3f49;
  --maxw:    47rem;
  --shadow:  0 3px 0 rgba(224,92,134,.12), 0 8px 22px rgba(224,92,134,.08);
}

* { box-sizing: border-box; }
html { font-size: 18px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0; padding: 0 1.2rem 6rem;
  background:
    radial-gradient(circle at 12% 4%, #fff0f6 0, transparent 34%),
    radial-gradient(circle at 88% 2%, #eefaf5 0, transparent 30%),
    var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.9;
  direction: rtl;
}

/* playful display font on the fun bits (titles, labels, hero) */
h1, .kicker, .box .label, .quiz > h2, .card .t, .recall .hint,
.quiz-done .msg, .lesson-nav a, .topbar .crumbs {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
}
h1 { line-height: 1.5; }

main, header, footer, .topbar { max-width: var(--maxw); margin-left: auto; margin-right: auto; }

/* ---------- English inline terms (professional, LTR) ---------- */
.en {
  direction: ltr; unicode-bidi: isolate; display: inline-block;
  font-family: "Segoe UI", system-ui, sans-serif; font-weight: 700;
  color: var(--pink); letter-spacing: .1px;
}
.en.pill {
  background: var(--pink-lt); color: #b73866;
  padding: .02em .5em; border-radius: 999px; font-size: .82em;
  border: 1px solid #f6c6d9; margin: 0 .12em;
}

/* ---------- Typography ---------- */
h1,h2,h3,h4 { line-height: 1.35; font-weight: 800; }
h1 { font-size: 2rem; margin: 1.6rem 0 .3rem; color: var(--pink); }
h2 { font-size: 1.4rem; margin: 2.2rem 0 .6rem; color: var(--ink);
     border-bottom: 3px dotted var(--rule); padding-bottom: .3rem; }
h3 { font-size: 1.12rem; margin: 1.5rem 0 .4rem; color: var(--lav); }
p  { margin: .7rem 0; }
a  { color: var(--pink); text-underline-offset: 3px; text-decoration-color: #f3b9cd; }
a:hover { color: var(--carrot); }
strong { font-weight: 800; color: #7a2f52; }
ol, ul { padding-inline-start: 1.4rem; }
li { margin: .35rem 0; }
code { font-family: "SF Mono", Menlo, monospace; background: #fff0f6; padding: .05em .35em; border-radius: 5px; font-size: .85em; }

.subtitle { color: var(--muted); font-size: 1.02rem; margin-top: .1rem; }
.kicker {
  display: inline-block; font-size: .72rem; letter-spacing: .12em; font-weight: 800;
  color: #b73866; background: var(--pink-lt); padding: .2rem .7rem; border-radius: 999px;
}

/* ---------- Cute mascot callout boxes ---------- */
.box {
  position: relative; border-radius: 16px; padding: 1rem 1.1rem 1rem 1.1rem;
  margin: 1.4rem 0; background: var(--paper2); box-shadow: var(--shadow);
  border: 2px solid var(--rule);
}
.box .label {
  font-size: .74rem; font-weight: 800; letter-spacing: .04em;
  display: inline-block; margin-bottom: .35rem;
}
.box .emoji { font-size: 1.35rem; margin-inline-end: .3rem; vertical-align: -2px; }

.box.rabbit { border-color:#f6c6d9; background: linear-gradient(180deg,#fff4f9,#fff); }
.box.rabbit .label { color: var(--pink); }
.box.carrot { border-color:#f7cf9e; background: linear-gradient(180deg,#fff6ea,#fff); }
.box.carrot .label { color: #c9670f; }
.box.cow    { border-color:#a9e6d4; background: linear-gradient(180deg,#eefaf5,#fff); }
.box.cow .label { color: #1c8a6e; }
.box.key    { border-color:#cabffb; background: linear-gradient(180deg,#f3f0ff,#fff); }
.box.key .label { color: var(--lav); }

.box.key .term-line { font-size: 1.05rem; }

/* little floating mascot in the corner */
.box .peek {
  position: absolute; top: -14px; inset-inline-start: 14px; font-size: 1.5rem;
  animation: bob 3s ease-in-out infinite;
}
@keyframes bob { 0%,100%{ transform: translateY(0) rotate(-4deg);} 50%{ transform: translateY(-5px) rotate(4deg);} }

blockquote {
  margin: 1.2rem 0; padding: .5rem 1rem; border-radius: 12px;
  background: #fbf1f6; border-inline-start: 5px solid #f3b9cd; color:#5f4a58; font-style: italic;
}
blockquote cite { display:block; font-style: normal; font-size:.8rem; color: var(--muted); margin-top:.4rem; }

/* ---------- Definition list ---------- */
dl.defs dt { font-weight: 800; color: var(--lav); margin-top: 1rem; }
dl.defs dd { margin: .15rem 0 0; padding-inline-start: .2rem; }

/* ---------- Tables ---------- */
table { border-collapse: separate; border-spacing: 0; width: 100%; margin: 1.3rem 0; font-size: .92rem;
  background:#fff; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
th, td { text-align: start; padding: .55rem .7rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
thead th { background: var(--pink-lt); color:#a83262; font-size:.82rem; font-weight:800; }
tbody tr:nth-child(even) { background:#fffafc; }
tbody tr:hover { background: var(--mint-lt); }
table tr:last-child td { border-bottom: none; }

/* ---------- Navigation ---------- */
.topbar {
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  font-size:.82rem; margin: .8rem auto 1.4rem; padding:.5rem .9rem;
  background:#fff; border:2px solid var(--rule); border-radius: 999px; box-shadow: var(--shadow);
}
.topbar a { text-decoration:none; color: var(--muted); font-weight:700; }
.topbar a:hover { color: var(--pink); }
.crumbs a { margin-inline-end:.3rem; }

.lesson-nav { display:flex; justify-content:space-between; gap:1rem; margin-top:2.5rem; }
.lesson-nav a {
  text-decoration:none; font-weight:800; font-size:.9rem; padding:.55rem 1rem;
  border-radius:999px; background:#fff; border:2px solid var(--rule); color:var(--pink); box-shadow:var(--shadow);
}
.lesson-nav a:hover { background: var(--pink-lt); }
.lesson-nav .prev::before { content:"→ "; }   /* RTL: prev is to the right visually */
.lesson-nav .next::after  { content:" ←"; }

/* ---------- Course home cards ---------- */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr)); gap:1rem; margin:1.6rem 0; }
.card {
  display:block; text-decoration:none; color:inherit; background:#fff;
  border:2px solid var(--rule); border-radius:18px; padding:1rem 1.1rem; box-shadow:var(--shadow);
  transition: transform .12s, border-color .12s;
}
.card:hover { transform: translateY(-3px) rotate(-.4deg); border-color: var(--pink); }
.card .num { font-size:.72rem; font-weight:800; color:var(--pink); background:var(--pink-lt); padding:.1rem .5rem; border-radius:999px; }
.card .t { font-weight:800; display:block; margin:.45rem 0 .2rem; font-size:1.05rem; }
.card .d { font-size:.86rem; color:var(--muted); }

/* ---------- primary-source pointer & ask-teacher ---------- */
.source-pointer {
  font-size:.88rem; background: var(--lav-lt); border:2px solid #d7cdff;
  border-radius:14px; padding:.7rem 1rem; margin:1.3rem 0;
}
.source-pointer b { color: var(--lav); }
.ask {
  font-size:.9rem; border:2px dashed var(--pink); border-radius:16px; padding:.8rem 1.1rem;
  margin:2rem 0 0; color:#a83262; background: var(--pink-lt);
}
.ask::before { content:"🐰 "; }

/* ---------- Exam Q&A page ---------- */
.qa { border:2px solid var(--rule); border-radius:20px; padding:1rem 1.2rem 1.2rem;
  margin:1.6rem 0; background:#fff; box-shadow:var(--shadow); }
.qa > h2 { margin-top:.3rem; border:none; color:var(--pink); }
.qa .qtext { background:var(--pink-lt); border-radius:12px; padding:.55rem .85rem;
  color:#a83262; margin:.2rem 0 .9rem; font-weight:700; }
.cite { display:grid; gap:.35rem; margin:.9rem 0 0; font-size:.86rem;
  background:var(--lav-lt); border:1px solid #d7cdff; border-radius:12px; padding:.65rem .85rem; }
.cite .pdf::before  { content:"📄 "; }
.cite .html::before { content:"🔗 "; }
.cite b { color:var(--lav); }
.cite q { color:#5a4a7a; font-style:italic; }
.answer-flag { font-family:var(--font-display); color:var(--mint); }

/* ---------- Figures / triangle ---------- */
figure { margin:1.5rem 0; text-align:center; background:#fff; border:2px solid var(--rule);
  border-radius:18px; padding:1rem; box-shadow:var(--shadow); }
figure svg { max-width:100%; height:auto; }
figcaption { font-size:.82rem; color:var(--muted); margin-top:.6rem; }

/* ---------- Recall flip cards ---------- */
.recall {
  border:2px solid #f7cf9e; border-radius:14px; padding:.7rem 1rem; margin:.7rem 0;
  background: linear-gradient(180deg,#fff6ea,#fff); cursor:pointer; transition: transform .1s;
}
.recall:hover { transform: scale(1.01); }
.recall:active { transform: scale(.995); }
.recall .hint { font-size:.68rem; font-weight:800; letter-spacing:.1em; color:#c9670f; }
.recall .prompt { font-weight:800; }
.recall .prompt::after { content:" 🥕"; opacity:.6; }
.recall .answer { display:none; margin-top:.5rem; color:#5f4a58; }
.recall.open .answer { display:block; animation: fadeup .25s ease; }
.recall.open .prompt::after { content:" ✔"; color: var(--mint); }
@keyframes fadeup { from{ opacity:0; transform: translateY(6px);} to{ opacity:1; transform:none;} }

/* ===========================================================
   QUIZ — gamified & animated
   =========================================================== */
.quiz { margin:1.8rem 0; background:#fff; border:2px solid var(--rule);
  border-radius:20px; padding:1rem 1.1rem 1.3rem; box-shadow:var(--shadow); }
.quiz > h2 { border:none; margin-top:.3rem; }
.quiz > h2::before { content:"🎮 "; }

/* score bar (injected by quiz.js) */
.scorebar { display:flex; align-items:center; gap:.7rem; margin:.4rem 0 1rem; }
.scorebar .mascot { font-size:1.6rem; animation: bob 3s ease-in-out infinite; }
.scorebar .track { flex:1; height:14px; background:var(--pink-lt); border-radius:999px; overflow:hidden; border:1px solid #f6c6d9; direction:ltr; }
.scorebar .fill { height:100%; width:0; border-radius:999px;
  background: linear-gradient(90deg,#ffd35c,#ef7d1e,#e05c86); transition: width .5s cubic-bezier(.2,.9,.3,1.3); }
.scorebar .pts { font-weight:800; color:var(--carrot); font-size:.9rem; white-space:nowrap; }
.scorebar .streak { font-size:.8rem; color:var(--mint); font-weight:800; }

.q { border:2px solid var(--rule); border-radius:16px; padding:.9rem 1rem; margin:.9rem 0; background:#fffafc; }
.q .stem { font-weight:800; margin-bottom:.6rem; }
.q .stem .n { color:var(--pink); }
.q ul { list-style:none; margin:0; padding:0; }
.q li { margin:.4rem 0; }
.q button.opt {
  display:block; width:100%; text-align:start; cursor:pointer; font:inherit; color:inherit;
  background:#fff; border:2px solid var(--rule); border-radius:12px; padding:.55rem .8rem;
  transition: background .12s, border-color .12s, transform .08s;
}
.q button.opt:hover:not(:disabled) { border-color:var(--lav); background:var(--lav-lt); transform: translateY(-1px); }
.q button.opt.correct   { background:var(--mint-lt); border-color:var(--mint); color:#0f7a5f; font-weight:800; animation: pop .4s ease; }
.q button.opt.incorrect { background:#fbe4e5; border-color:var(--red); color:#a33; animation: shake .4s ease; }
.q button.opt:disabled  { cursor:default; }
.q .fb { margin-top:.6rem; font-size:.9rem; display:none; padding:.5rem .7rem; border-radius:10px; }
.q .fb.show { display:block; animation: fadeup .25s ease; }
.q .fb.right { color:#0f7a5f; background:var(--mint-lt); }
.q .fb.wrong { color:#a33; background:#fbe4e5; }
.q .fb .en { color: inherit; }

@keyframes pop   { 0%{transform:scale(1);} 40%{transform:scale(1.06);} 100%{transform:scale(1);} }
@keyframes shake { 0%,100%{transform:translateX(0);} 20%{transform:translateX(-7px);} 40%{transform:translateX(6px);} 60%{transform:translateX(-4px);} 80%{transform:translateX(3px);} }

/* end-of-quiz celebration */
.quiz-done { margin-top:1rem; text-align:center; padding:1rem; border-radius:16px;
  background: linear-gradient(180deg,#fff4f9,#fff); border:2px dashed var(--pink); display:none; }
.quiz-done.show { display:block; animation: pop .5s ease; }
.quiz-done .big { font-size:2.4rem; }
.quiz-done .msg { font-weight:800; color:var(--pink); margin-top:.3rem; }
.quiz-done .again { margin-top:.6rem; }
.quiz-done button {
  font:inherit; font-weight:800; cursor:pointer; border:2px solid var(--rule);
  background:#fff; color:var(--pink); border-radius:999px; padding:.4rem 1rem;
}
.quiz-done button:hover { background: var(--pink-lt); }

/* confetti */
.confetti { position:fixed; top:-12px; width:10px; height:14px; z-index:9999; pointer-events:none;
  border-radius:2px; animation: fall linear forwards; }
@keyframes fall {
  0%   { transform: translateY(0) rotate(0); opacity:1; }
  100% { transform: translateY(105vh) rotate(720deg); opacity:.9; }
}

/* ---------- Print ---------- */
@media print {
  body { background:#fff; padding:0; }
  .topbar,.lesson-nav,.ask,.scorebar,.quiz-done { display:none !important; }
  .box,.card,.q,figure,table { break-inside: avoid; box-shadow:none; }
  .recall .answer,.q .fb { display:block !important; }
  a { color:#000; text-decoration:none; }
}

/* reduce motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}