/* ============================================================
   home.css
   Styles for index.html (homepage).
   Mirrors the original React app's globalStyles + HomePageStyle.
   ============================================================ */

/* ── BODY ── */

body.light {
  --bg: #ffffff;
  --fg: #000000;
}
body.dark {
  --bg: #000000;
  --fg: #ffffff;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: auto;
  padding: 0;
  font-family: 'EB Garamond', serif;
  background-color: var(--bg);
  color: var(--fg);
  transition: all 0.3s ease;
}
body div { width: 100%; }
body button {
  border-radius: 5px;
  cursor: pointer;
}

body.light a { color: grey; }
body.light a:hover { color: black; }
body.light button {
  background-color: white;
  color: black;
  border-color: black;
}

/* dark theme */
body.dark a { color: grey; }
body.dark a:hover { color: white; }
body.dark button {
  background-color: black;
  color: white;
  border-color: white;
}

/* ── PAGE CONTAINER (mirrors PageContainer) ── */
.page-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: auto;
  width: 90%;
  max-width: 768px;
}
.page-container h1 { margin-bottom: 2rem; line-height: normal; font-weight: 650;}


@media screen and (max-width: 600px) {
  .page-container { width: 90%; }
}

/* ── THEME BUTTON (mirrors ButtonContainer + ChangeThemeButton) ── */
.button-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: right;
  width: 100%;
  top: 10px;
}
.theme-btn {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  top: 10px;
  right: 10px;
  font-family: inherit;
  font-weight: inherit;
  border: 1px solid;
  padding: 6px 14px;  /* bigger box */
  font-size: 1rem;
}
body.light .theme-btn:hover { background-color: black; color: white; }
body.dark  .theme-btn:hover { background-color: white; color: black; }

.theme-btn svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: middle;
}

/* ── PAGE HEADING (mirrors PageHeading2 = h1, xx-large, centered) ── */
.page-heading {
  width: 100%;
  font-size: xx-large;
  text-align: center;
  margin: 1rem 0;
}

.page-heading.light {color: black;}
.page-heading.dark {color: white;}

/* ── CONTENT CONTAINER ── */
.content-container { width: 100%; }
.content-container p { text-align: justify; }
.content-container p + p { margin-top: 1rem; }

/* ── BOOK LIST (mirrors BooksList + Book) ── */
.book-list {
  list-style: none;
  text-align: center;
  padding: 0;
  margin: 0.5rem 0;
}

@media screen and (max-width: 600px) {
  .book-list { margin: 2rem 0; }
}

.book-list li a { text-decoration: underline; }
.book-list li a:hover { font-weight: bold; }

/* ── CENTERED PARAGRAPH ── */
.text-center { text-align: center !important; }

.construction-note {
  margin-top: 2rem;
}