@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&display=swap');

:root{
  --bg: #fffaf3;
  --panel: #ffffff;
  --text: #2b1c0b;
  --muted: #6e5636;
  --accent: #7b5628;
  --border: #e6d1b6;
  --lyrics-bg: #fffaf2;
  --lyrics-border: #d3b884;
}

/* dark overrides */
body.dark-mode {
  --bg: #14120f;
  --panel: #1f1d1a;
  --text: #efe7d8;
  --muted: #d1b58c;
  --accent: #d8b574;
  --border: #3d352b;
  --lyrics-bg: #26221b;
  --lyrics-border: #b78b4c;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Playfair Display', serif;
  transition: background 0.4s ease, color 0.4s ease;
  line-height:1.7;
}

.container{
  max-width:720px;
  margin:0 auto;
  background:var(--panel);
  padding:24px 24px 100px 24px; /* extra bottom reserve for footer/nav space */
  min-height:calc(100vh - 60px); /* ensures it fills screen minus nav area */
}



/* header/book info */
.header-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  flex-wrap:wrap;
}
.book-title{
  font-size:28px;
  margin:0;
  color:var(--accent);
  font-weight:700;
  flex:1 1 auto;
  text-align:left;
}
.compiled-by{
  margin:0;
  font-style:italic;
  color:var(--muted);
  font-size:15px;
  text-align:right;
}

/* MOBILE: stack and center header */
@media (max-width:600px){
  .header-row{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:4px;
  }
  .book-title{
    text-align:center;
    font-size:26px;
    margin-bottom:2px;
  }
  .compiled-by{
    text-align:center;
    font-size:15px;
    margin-top:0;
  }
}

.divider{border:none;border-top:1px solid var(--border);margin:14px 0 18px}

/* chapter header */
.chapter-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.chapter-title{
  font-size:26px;
  margin:0;
  color:var(--accent); /* matches theme accent color */
  font-weight:700;
}

.home-link{color:var(--accent);text-decoration:none;font-weight:600}

/* subtitle & description */
.chapter-sub{font-size:18px;color:var(--muted);margin:6px 0}
.chapter-sub-nested{font-size:17px;color:var(--muted);font-style:italic;margin:4px 0 6px 16px}
.chapter-description{font-size:17px;color:var(--text);margin:8px 0 14px;line-height:1.75}
.chapter-description-nested{font-size:16px;margin:4px 0 10px 20px;color:var(--muted)}

/* front-matter name */
h2.fm-name{font-size:22px;font-weight:600;margin:10px 0 4px;color:var(--accent)}

/* lyrics styling (no italic) */
.lyrics-block{margin:18px 0;padding:14px 18px;background:var(--lyrics-bg);border-left:4px solid var(--lyrics-border);border-radius:6px;box-shadow: inset 0 0 10px rgba(0,0,0,0.04);}
.lyric-line{display:block;font-size:1.05rem;line-height:1.9;margin:0.35rem 0;text-align:left;color:var(--text);padding-left:6px;font-weight:500;font-style:normal}

/* TOC: main items block, subsections indented as list */
.toc-heading{font-size:20px;margin:8px 0 12px}
.toc-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.toc-list > li{background:linear-gradient(145deg,var(--panel),var(--lyrics-bg));border:1px solid var(--border);padding:12px 14px;border-radius:10px;display:block}
.toc-list > li > a{color:var(--text);text-decoration:none;font-weight:700;font-size:18px}
.toc-list ul{list-style:none;margin:8px 0 0 16px;padding:0}
.toc-list ul li{padding:6px 0}
.toc-list ul li a{color:var(--muted);text-decoration:none;font-weight:500;font-size:15px}



/* theme toggle */
.theme-toggle{position:fixed;bottom:24px;right:24px;background:var(--panel);border:1px solid var(--border);border-radius:50%;width:46px;height:46px;font-size:20px;color:var(--accent);cursor:pointer;display:flex;align-items:center;justify-content:center}

/* glossary */
.glossary-grid{display:grid;grid-template-columns:1fr 3fr;gap:.5rem 1rem;margin-top:1.5rem}
@media(max-width:600px){.glossary-grid{grid-template-columns:1fr}}
.glossary-item{display:contents}
.glossary-word{font-weight:600;font-style:italic;color:var(--accent);text-align:right;padding-right:.5rem}
.glossary-def{font-weight:400;color:var(--text)}

/* Images floated to right for acknowledgements & author */
.ack-img{float:right;width:180px;margin:0 0 12px 16px;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.08);}
.author-img{float:right;width:180px;margin:0 0 12px 16px;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.08);}
.clearfix::after{content:"";display:table;clear:both}

.bottom-nav{
  position:fixed;
  left:0; right:0; bottom:0;
  max-width:720px;
  margin:0 auto;
  background:var(--panel);
  border-top:1px solid var(--border);
  display:flex;
  justify-content:center;
  gap:18px;
  padding:6px 10px; /* reduced vertical padding */
  box-shadow:0 -4px 10px rgba(0,0,0,0.05);
  z-index:10;
}
.nav-btn{color:var(--accent);text-decoration:none;font-weight:700}

/* footer stays hidden until bottom of page, appears above nav */
.footer-line{
  position:fixed;
  bottom:60px; /* sits just above bottom nav */
  left:0;
  right:0;
  max-width:720px;
  margin:0 auto;
  padding-top:4px;
  border-top:1px solid var(--border);
  text-align:center;
  color:var(--muted);
  font-size:13px;
  background:var(--panel);
  opacity:0;
  transform:translateY(10px);
  transition:opacity 0.4s ease, transform 0.4s ease;
  pointer-events:none; /* not clickable when hidden */
  z-index:10;
}

.footer-line.visible{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}




.toc-link{display:block;text-decoration:none;}
.toc-entry{display:flex;justify-content:space-between;align-items:center;
padding:12px 16px;background:linear-gradient(145deg,var(--panel),var(--lyrics-bg));
color:var(--text);font-weight:700;font-size:18px;border-radius:10px;
transition:background 0.2s ease;position:relative;}
.toc-entry:hover{background:var(--lyrics-bg);}
.toc-arrow{position:absolute;right:16px;color:var(--muted);font-weight:600;}