/* --- darkmode.css အစ --- */

:root {
  /* White Mode (မူလလက်ရှိအရောင်) */
  --bg-color: #ffffff;
  --text-color:  #FFD700;
  --bottom-nav-bg: #ffffff;
  --nav-text: #000000;
  --accent-gold: #FFD700;
}

/* 📒 Reading Mode Class */
body.reading-mode {
  --bg-color: #f4ecd8; /* မျက်လုံးအေးစေမည့် ဝါညိုရောင် */
  --text-color: #5b4636; /* အညိုရင့်ရောင်စာသား */
  --bottom-nav-bg: #ede4d3;
  --nav-text: #8b4513;
}

/* 🌙 Dark Mode Class */
body.dark-mode {
  --bg-color: #000000;
  --text-color: #FFD700;
  --bottom-nav-bg: #111111;
  --nav-text: #FFD700;
}

/* တစ်ဆိုဒ်လုံး၏ နောက်ခံနှင့် စာသားအရောင်ကို Variable ဖြင့် ချိတ်ဆက်ခြင်း */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.4s ease, color 0.4s ease;
  margin: 0;
}

/* Bottom Navigation Bar အပြင်အဆင် */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--bottom-nav-bg);
  border-top: 1px solid var(--accent-gold);
  padding: 0.75rem 0;
  display: flex;
  justify-content: space-around;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

.bottom-nav a {
  color: var(--nav-text);
  text-decoration: none;
  font-weight: bold;
  padding: 6px 15px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

/* --- ခလုတ်နေရာ သတ်မှတ်ချက်များ --- */

/* ၁။ index.html အတွက် (ညာဘက်အပေါ်ထောင့်မှာ Fixed ထားခြင်း) */
/* ခလုတ်က main ထဲမှာဖြစ်ဖြစ်၊ body အောက်မှာ တိုက်ရိုက်ဖြစ်ဖြစ် ရှိနေရင် ဒီအတိုင်း ပေါ်ပါမယ် */
#modeToggle {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 9999;
  font-size: 1.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 5px;
  transition: transform 0.2s ease;
}


#modeToggle:active {
  transform: scale(0.9);
}


/* --- paper.html အတွက် သီးသန့် Dark Mode စာသားအဖြူရောင် --- */

/* .content-area ပါတဲ့ စာမျက်နှာ (paper.html) ရဲ့ Dark Mode မှာသာ အလုပ်လုပ်ပါမယ် */
body.dark-mode .content-area, 
body.dark-mode .book-header h1,
body.dark-mode .book-header p {
  color: #ffffff !important; /* စာသားကို အဖြူရောင် ပြောင်းလဲခြင်း */
}

/* White Mode မှာ စာသားကို အမည်းရောင် ထားချင်ရင် ဒါကိုပါ ထည့်ပါ */
body:not(.dark-mode):not(.reading-mode) .content-area,
body:not(.dark-mode):not(.reading-mode) .book-header h1 {
  color: #000000 !important;
}

/* ၁။ Reading Mode ဖွင့်ထားရင် Body ထဲက စာသားအားလုံးကို အဝါရောင်ပြမည် */
body.reading-mode {
  color: #FFD700 !important;
}


/* ၂။ paper.html အတွက်သာ သီးသန့် (အညိုရောင် ပြန်ပြောင်းခြင်း) */
/* .is-paper class ပါသည့် စာမျက်နှာများတွင်သာ အလုပ်လုပ်ပါမည် */
body.reading-mode.is-paper .content-area,
body.reading-mode.is-paper .book-header h1,
body.reading-mode.is-paper .book-header p {
  color: #5b4636 !important; /* အညိုရင့်ရောင် */
}

/* --- darkmode.css အဆုံး --- */