/* ============================================================
   BELIEVE IN GOD — THEME v2
   Dark, editorial "daily devotion" look inspired by modern
   Bible-reading apps. Loaded last in <head> on every page so it
   wins the cascade over each page's local <style> block.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Lora:ital,wght@0,500;0,600;1,500&display=swap');

/* ---------- LIGHT THEME (default) ---------- */
:root{
  --ink:#faf8f4;
  --surface:#ffffff;
  --surface-2:#f2eee6;
  --surface-3:#e8e2d6;
  --border:#e7e1d5;

  --text:#221f26;
  --text-dim:#635d68;
  --text-faint:#948e99;

  --gold:#b8863a;
  --gold-deep:#96692b;
  --rose:#c15f3f;

  --accent:var(--gold);
  --accent-deep:var(--gold-deep);
  --accent-warm:var(--rose);

  --verse-grad: linear-gradient(160deg,#3a2f45 0%,#221c29 55%,#121014 100%);

  --r-lg:22px;
  --r-md:16px;
  --r-sm:12px;
  --shadow: 0 10px 24px rgba(30,25,15,.10);

  --nav-bg: rgba(255,255,255,.78);
  --nav-border: rgba(20,15,10,.08);
  --nav-shadow: 0 14px 34px rgba(30,25,15,.14);

  color-scheme: light;
}

/* ---------- DARK THEME (html.dark-mode / body.dark-mode) ----------
   Applied to BOTH html and body: custom properties only cascade to
   descendants, so if only body carried the class, the <html> element
   itself (an ancestor of body) would keep resolving these variables
   from the light :root block above. That produced a light/cream
   background in any area drawn outside body's own box — safe-area
   insets, overscroll bounce, and the strip behind floating fixed
   elements like the FAB and bottom nav. */
html.dark-mode, body.dark-mode{
  --ink:#111013;
  --surface:#1c1a1f;
  --surface-2:#26232a;
  --surface-3:#312d35;
  --border:#332f38;

  --text:#f3f1ee;
  --text-dim:#a8a3ac;
  --text-faint:#736e78;

  --gold:#d7a94b;
  --gold-deep:#b8863a;
  --rose:#d97757;

  --accent:var(--gold);
  --accent-deep:var(--gold-deep);
  --accent-warm:var(--rose);

  --verse-grad: linear-gradient(160deg,#3a2f45 0%,#221c29 55%,#121014 100%);

  --shadow: 0 12px 28px rgba(0,0,0,.45);

  --nav-bg: rgba(28,26,31,.62);
  --nav-border: rgba(255,255,255,.08);
  --nav-shadow: 0 14px 34px rgba(0,0,0,.5);

  color-scheme: dark;
}

/* Smooth transition whenever the theme is toggled */
body, .header, .topbar, .card, .top-card, .item, .menu, .chip,
.bottom-nav, .drawer, input, textarea, select, button{
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* ---------- base ---------- */
html, body, body.dark-mode{
  background:var(--ink) !important;
  color:var(--text) !important;
  font-family:'Poppins',sans-serif !important;
}

body, body.dark-mode{
  -webkit-font-smoothing:antialiased;
}

::selection{ background:var(--accent-deep); color:#fff; }

::-webkit-scrollbar{ width:6px; height:6px; }
::-webkit-scrollbar-thumb{ background:var(--surface-3); border-radius:6px; }

a{ color:var(--accent); }

/* ---------- headers / topbars ---------- */
.header, body.dark-mode .header,
.topbar, body.dark-mode .topbar{
  background:var(--surface) !important;
  color:var(--text) !important;
  border-bottom:1px solid var(--border) !important;
  box-shadow:none !important;
}

/* ---------- generic surfaces ---------- */
.card, body.dark-mode .card,
.top-card, body.dark-mode .top-card,
.journey, body.dark-mode .journey,
.selector-box,
.post-box, body.dark-mode .post-box,
.popupBox, body.dark-mode .popupBox,
.infoBox, #infoBox{
  background:var(--surface) !important;
  color:var(--text) !important;
  border:1px solid var(--border) !important;
  box-shadow:var(--shadow) !important;
  border-radius:var(--r-lg) !important;
}

.item, body.dark-mode .item,
.group .item{
  background:var(--surface) !important;
  color:var(--text) !important;
  border-bottom:1px solid var(--border) !important;
}
.item:active{ background:var(--surface-2) !important; }

.container{ color:var(--text); }

/* ---------- typography helpers ---------- */
.title, body.dark-mode .title{ color:var(--text) !important; }
.subtitle, body.dark-mode .subtitle{ color:var(--text-dim) !important; }
.section-title{ color:var(--text) !important; }
.logo, body.dark-mode .logo{ color:var(--accent) !important; }
.judul-kitab{ color:var(--accent) !important; }
.isi-alkitab{ color:var(--text) !important; }
.verse-num{ color:var(--accent-warm) !important; }
.desc{ color:var(--text-dim) !important; }
.ref{ color:var(--accent) !important; }
.reflection{ color:var(--text-dim) !important; }

/* ---------- menu grid / chips ---------- */
.menu, body.dark-mode .menu{
  background:var(--surface) !important;
  color:var(--text) !important;
  border:1px solid var(--border) !important;
  box-shadow:var(--shadow) !important;
  border-radius:var(--r-md) !important;
}
.chip, body.dark-mode .chip{
  background:var(--surface-2) !important;
  color:var(--accent) !important;
  border:1px solid var(--border) !important;
}

/* ---------- buttons / forms ---------- */
button, .btn, .button{
  background:var(--accent) !important;
  color:#0e1016 !important;
  border:none !important;
  font-weight:600 !important;
  border-radius:var(--r-sm) !important;
}
button:active{ opacity:.85; }
button.yesBtn{ background:var(--accent) !important; }
button.noBtn, .back-button{
  background:var(--surface-2) !important;
  color:var(--text) !important;
}
.guest{ color:var(--text-dim) !important; background:transparent !important; }

input, textarea, select,
body.dark-mode textarea, body.dark-mode input, body.dark-mode select{
  background:var(--surface-2) !important;
  color:var(--text) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--r-sm) !important;
}
input::placeholder, textarea::placeholder{ color:var(--text-faint) !important; }

/* ---------- bottom nav (floating, translucent, blurred) ---------- */
.bottom-nav, body.dark-mode .bottom-nav{
  position:fixed !important;
  left:12px !important; right:12px !important; bottom:12px !important;
  display:flex !important; justify-content:space-around !important;
  align-items:center !important;
  padding:10px 6px !important;
  background:var(--nav-bg) !important;
  -webkit-backdrop-filter:saturate(180%) blur(20px) !important;
  backdrop-filter:saturate(180%) blur(20px) !important;
  border:1px solid var(--nav-border) !important;
  border-top:1px solid var(--nav-border) !important;
  border-radius:20px !important;
  box-shadow:var(--nav-shadow) !important;
  z-index:100;
}
.nav-item, body.dark-mode .nav-item,
.bottom-nav .item, body.dark-mode .bottom-nav .item{
  color:var(--text-faint) !important;
  background:transparent !important;
  border-bottom:none !important;
  display:flex !important; flex-direction:column; align-items:center; gap:3px;
  font-size:11px !important;
}
.bottom-nav .item{ padding:0; }
.nav-item.active, body.dark-mode .nav-item.active,
.bottom-nav .item.active, body.dark-mode .bottom-nav .item.active{
  color:var(--accent) !important; font-weight:600 !important;
}

body:has(.bottom-nav){ padding-bottom:110px !important; }

/* ---------- icon system ---------- */
.icon, span.icon{
  display:inline-flex; align-items:center; justify-content:center;
  color:inherit; line-height:0;
}

/* ---------- drawer ---------- */
.drawer, body.dark-mode .drawer{
  background:var(--surface) !important;
  color:var(--text) !important;
  border-right:1px solid var(--border) !important;
}
.drawer .drawer-header{
  background:linear-gradient(135deg,var(--accent-deep),#2a3a72) !important;
}
.drawer-item, body.dark-mode .drawer-item{ color:var(--text) !important; }
.drawer-item:hover, body.dark-mode .drawer-item:hover{ background:var(--surface-2) !important; }
.overlay{ background:rgba(0,0,0,.55) !important; }
.profile-avatar{ background:#fff !important; color:var(--accent-deep) !important; }

/* ---------- misc components seen across pages ---------- */
.back, .arrow{ color:var(--text) !important; }
.status{ color:var(--text-dim) !important; }
.status.lock{ color:var(--text-faint) !important; }
.progress{ background:var(--surface-2) !important; }
.progress > *{ background:var(--accent) !important; }
.switch{ background:var(--surface-2) !important; }
.target{ color:var(--text-dim) !important; }
.version{ color:var(--text-faint) !important; }
.footer{ color:var(--text-faint) !important; }
.email{ color:var(--text-dim) !important; }
.name{ color:var(--text) !important; }
.avatar{ background:var(--accent) !important; color:#0e1016 !important; }

/* quiz specifics */
#timerBox, #timer{ color:var(--accent-warm) !important; }
.game{ color:var(--text) !important; }
.hidden{ display:none !important; }
