:root {
  --bible-bg: #f8f8d4;
  --bible-text: #000000;
  --bible-border: blue;
  --bible-header-bg: yellow;
  --bible-header-border: blue;
  --bible-link: #0000ee;
  --bible-bg-image: url("https://pub-04cc3e731d514ccd8bd75e6061be07b0.r2.dev/Image_Files/parchmnt.jpg");
}

.dark-mode {
  --bible-bg: #0f172a;
  --bible-text: #e5e7eb;
  --bible-border: #334155;
  --bible-header-bg: #111827;
  --bible-header-border: #7dd3fc;
  --bible-link: #7dd3fc;
  --bible-bg-image: none;
}

body {
  font-family: "Source Sans Pro", Arial, sans-serif;
  position: relative;
  background-image: var(--bible-bg-image);
  background-color: var(--bible-bg);
  color: var(--bible-text);
}

a {
  color: var(--bible-link);
}

table.style6 {
  word-break: break-all;
  tr td a {
    margin-left: 6px;
  }
}

/* ================= Bible Navigation content ======================= */
#globalNav {
  a {
    margin-left: 12px;
  }
}
/*
#content {
  transition: transform 0.3s ease-in-out;
  padding: 0 21px;
  transform: translate(210px, 0);
} */

/* ================= bible content ======================= */
div {
  border: 1px solid var(--bible-border);
  /* min-width: 320px; */

  .header {
    padding: 20px 0;
    background: var(--bible-header-bg);
    border: 2px solid var(--bible-header-border);

    a {
      font-weight: 600;
      margin-left: 20px;
      color: var(--bible-text);
    }
  }
  .groupBible {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;

    .section {
      grid-column: 1 / span 6;
      padding: 10px;
      box-sizing: border-box;
      color: var(--bible-text);
    }
  }
}

.relatedLinks {
  font-weight: bold;
  color: var(--bible-text);
}

/* MOBILE VERSION */
.mobile {
  .groupBible {
    grid-template-columns: 1fr;
    grid-template-rows: auto;

    .section {
      grid-column: span 1;
    }
  }
}

/* Dark-mode specific tweaks without altering light mode */
.dark-mode p span.style0 {
  color: #e5e7eb;
}

/* Ensure light mode text is black after toggling back */
.light-mode p span.style0 {
  color: #111827;
}

/* Ensure table strong text resets correctly per mode */
.dark-mode #table1 > tbody > tr > td > strong {
  color: var(--bible-text);
}

.light-mode #table1 > tbody > tr > td > strong {
  color: #111827;
}