/* ─── Font-face imports for Font picker ─────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;700&display=swap");
/* serif  */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap");
/* sans   */
@import url("https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;700&display=swap");
/* mono   */
@import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;700&display=swap");
/* slab   */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300;700&display=swap");
/* condensed */
@import url("https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&display=swap");
/* comic  */
@import url("https://fonts.googleapis.com/css2?family=Archivo+Expanded:wght@400;700&display=swap");
/* wide   */


/* ======================================================================
   HolyBibleKJV  –  master stylesheet
   • 11 colour themes  (data-th)
   • 9 font styles     (data-font)
   • Two-row mobile header
   ====================================================================== */

/* ---------- THEME VARIABLES ---------- */
:root {
  --bg: #ffffff;
  --text: #1a1a1a;
  --bar: #f3f3f3;
  --link: #0077cc;
}

/* ==========  COLOUR THEMES  ========== */
/* originals */
html[data-th="dark"] {
  --bg: #1e1e1e;
  --text: #e6e6e6;
  --bar: #2d2d2d;
  --link: #4dabff;
}

html[data-th="sepia"] {
  --bg: #f4ecd8;
  --text: #3b2f25;
  --bar: #e9e1ce;
  --link: #7c4e12;
}

html[data-th="gray"] {
  --bg: #eeeeee;
  --text: #111;
  --bar: #d5d5d5;
  --link: #0077cc;
}

html[data-th="blue"] {
  --bg: #eaf3ff;
  --text: #0e2748;
  --bar: #d0e4ff;
  --link: #114b9c;
}

html[data-th="olive"] {
  --bg: #f6f9f2;
  --text: #2c341d;
  --bar: #e2e9d4;
  --link: #566c18;
}

html[data-th="solar"] {
  --bg: #fdf6e3;
  --text: #586e75;
  --bar: #eee8d5;
  --link: #268bd2;
}

/* new */
html[data-th="lavender"] {
  --bg: #f5f4ff;
  --text: #342d47;
  --bar: #e4e2fa;
  --link: #5c4fcf;
}

html[data-th="night"] {
  --bg: #0d1117;
  --text: #c9d1d9;
  --bar: #161b22;
  --link: #58a6ff;
}

html[data-th="paper"] {
  --bg: #fcfcf7;
  --text: #2e2e29;
  --bar: #ebeae2;
  --link: #5f4b32;
}

html[data-th="contrast"] {
  --bg: #000000;
  --text: #ffffff;
  --bar: #000000;
  --link: #ffd700;
}

/* GLOBAL RESET – no direct font here */
html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* default fallback */
html {
  font-family: serif;
}

/* FONT OPTIONS (data-font) */
html[data-font="serif"],
html[data-font="serif"] body {
  font-family: serif;
}

html[data-font="sans"],
html[data-font="sans"] body {
  font-family: system-ui, sans-serif;
}

html[data-font="mono"],
html[data-font="mono"] body {
  font-family: ui-monospace, "Courier New", monospace;
}

html[data-font="slab"],
html[data-font="slab"] body {
  font-family: "Roboto Slab", serif;
}

html[data-font="condensed"],
html[data-font="condensed"] body {
  font-family: "Arial Narrow", "Helvetica Neue", sans-serif;
}

html[data-font="comic"],
html[data-font="comic"] body {
  font-family: "Comic Sans MS", "Comic Neue", cursive, sans-serif;
}

html[data-font="pro"],
html[data-font="pro"] body {
  font-family: "Source Sans Pro", sans-serif;
}

html[data-font="wide"],
html[data-font="wide"] body {
  letter-spacing: .03em;
}

html[data-font="large"],
html[data-font="large"] body {
  font-size: 112.5%;
}

/* ======================================================================
   HEADER (toolbar)
   ====================================================================== */
#uiBar {
  position: relative;
  display: flex;
  gap: .6rem;
  padding: .6rem .8rem;
  background: var(--bar);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

#uiBar button,
#uiBar .dropdownBtn {
  padding: .45rem .8rem;
  font: inherit;
  border: 1px solid #888;
  border-radius: 4px;
  background: var(--bar);
  color: var(--text);
  /* stays readable on dark themes */
  cursor: pointer;
}

#uiBar button:hover,
#uiBar .dropdownBtn:hover {
  background: rgba(0, 0, 0, .05);
}

/* ---------- search cluster ---------- */
.searchWrap {
  position: relative;
  flex: 1 1 18rem;
  display: flex;
}

#searchBox {
  flex: 1 1 auto;
  padding: .45rem 2.6rem .45rem .65rem;
  border: 1px solid #888;
  border-radius: 4px;
  font: inherit;
}

#clearBtn {
  position: absolute;
  right: .4rem;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

/* ======================================================================
   DROPDOWN MENUS
   ====================================================================== */
.dropdownMenu {
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 10;
  background: var(--bg);
  color: inherit;
  border: 1px solid #888;
  border-radius: 4px;
  margin: 0;
  padding: 0;
  max-height: 60vh;
  overflow-y: auto;
  list-style: none;
}

.dropdownMenu li {
  padding: .4rem .8rem;
  cursor: pointer;
}

.dropdownMenu li:hover {
  background: rgba(0, 0, 0, .075);
}

/* ======================================================================
   READER CONTENT
   ====================================================================== */
#reader {
  max-width: 60ch;
  padding: 1rem 5vw 3rem;
  margin: 0 auto;
  font-size: 1.05rem;
}

#reader h2 {
  text-align: center;
  margin-top: 2rem;
  font-size: 1.4rem;
}

#reader sup {
  font-size: .75em;
  vertical-align: super;
  user-select: none;
}

/* ======================================================================
   BOOK GRID
   ====================================================================== */
.book-grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: .75rem;
}

.book-grid a {
  display: block;
  text-decoration: none;
  padding: .45rem .7rem;
  border: 1px solid #888;
  border-radius: 4px;
  background: var(--bar);
  color: var(--text);
  text-align: center;
}

.book-grid a:hover {
  background: rgba(0, 0, 0, .05);
}

/* ======================================================================
   NAV BUTTONS
   ====================================================================== */
nav .btn {
  display: inline-block;
  padding: .45rem .7rem;
  margin: .4rem .2rem;
  border: 1px solid #888;
  border-radius: 4px;
  background: var(--bar);
  font: inherit;
  text-decoration: none;
  color: var(--text);
}

nav .btn:hover {
  background: rgba(0, 0, 0, .05);
}

/* ======================================================================
   FOOTER
   ====================================================================== */
footer {
  text-align: center;
  padding: 1.2rem .8rem;
  font-size: .9rem;
  background: var(--bar);
  border-top: 1px solid #ddd;
}

footer a {
  color: var(--link);
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

/* ======================================================================
   TWO-ROW MOBILE HEADER (≤ 640 px)
   ====================================================================== */
@media(max-width:640px) {
  #uiBar {
    flex-wrap: wrap;
  }

  #uiBar .searchWrap {
    flex: 0 1 60%;
    max-width: 60%;
  }

  #goBtn {
    flex: 0 0 auto;
    margin-left: 0;
  }

  #goBtn~* {
    flex: 0 1 auto !important;
  }
}

/* ======================================================================
   FONT OPTIONS  (data-font)
   ====================================================================== */
html[data-font="serif"] {
  font-family: serif;
}

/* default */
html[data-font="sans"] {
  font-family: system-ui, sans-serif;
}

/* ─── heavier monospace for “Mono” option ───────────────── */
html[data-font="mono"],
html[data-font="mono"] body {
  /* bump to Consolas + Courier + strong weight */
  font-family: Consolas, "Courier New", monospace !important;
  font-weight: 600 !important;
}


html[data-font="slab"] {
  font-family: "Roboto Slab", serif;
}

html[data-font="condensed"] {
  font-family: "Arial Narrow", "Helvetica Neue", sans-serif;
}

html[data-font="comic"] {
  font-family: "Comic Sans MS", "Comic Neue", cursive, sans-serif;
}

html[data-font="pro"] {
  font-family: "Source Sans Pro", sans-serif;
}

html[data-font="wide"] {
  letter-spacing: .03em;
}

html[data-font="large"] {
  font-size: 112.5%;
}

/* ─── search cluster ───────────────────────────── */
.searchWrap {
  /* desktop default   */
  position: relative;
  flex: 1 1 18rem;
  display: flex;
}

/* let the input *really* shrink when the row is tight */
#searchBox {
  flex: 1 1 auto;
  min-width: 0;
  /* ← NEW: allow shrink */
}

/* ---------- TWO-ROW MOBILE HEADER (≤640 px) ------ */
@media(max-width:640px) {
  #uiBar .searchWrap {
    flex: 0 1 60%;
    max-width: 60%;
    min-width: 0;
    /* ← NEW: override 18 rem basis */
  }

  /* nothing else changes */
}

/* ─── 1) Chunkier “Mono” face override ───────────────────────────────── */
html[data-font="mono"],
html[data-font="mono"] body {
  /* swap in a heftier system mono + bold weight */
  font-family: Menlo, Consolas, "Courier New", monospace !important;
  font-weight: 700 !important;
}

/* ─── 2) Bigger “Jump to chapter” dropdown ───────────────────────────── */
nav select {
  display: inline-block;
  /* match nav .btn layout */
  padding: .45rem .7rem;
  /* same touch-friendly hit area */
  margin: .4rem .2rem;
  /* same spacing as buttons */
  font: inherit;
  /* stay in sync with zoom/font settings */
  border: 1px solid #888;
  /* match nav .btn border */
  border-radius: 4px;
  /* match nav .btn corners */
  background: var(--bar);
  /* same background as buttons */
  color: var(--text);
  /* same text color */
  min-width: 2.5rem;
  /* give it some guaranteed width */
}

/* ─── Font picker rules ─────────────────────────────────────── */
[data-style="serif"] {
  font-family: "Noto Serif", Georgia, serif;
}

[data-style="sans"] {
  font-family: "Open Sans", system-ui, sans-serif;
}

[data-style="mono"] {
  font-family: "Fira Mono", monospace;
}

[data-style="slab"] {
  font-family: "Roboto Slab", Georgia, serif;
}

[data-style="condensed"] {
  font-family: "Open Sans Condensed", sans-serif;
}

[data-style="comic"] {
  font-family: "Comic Neue", "Comic Sans MS", cursive;
}

[data-style="wide"] {
  font-family: "Archivo Expanded", sans-serif;
}

/* Large = bigger default sans (optional) */
[data-style="large"] {
  font-family: "Open Sans", system-ui, sans-serif;
  font-size: 1.125em;
}

/* keep language dropdown visible on small screens */
#langSelect {
  flex: 0 0 auto;
  /* don’t let searchWrap bully it */
  max-width: 8rem;
  /* stays inside toolbar */
}

/* keep language links tidy inside the top bar */
.langLinks {
  display: flex;
  gap: .5rem;
  margin-right: .75rem;
  flex: 0 0 auto
}

.langLink {
  font-weight: 600;
  text-decoration: none
}

/* --------------------------- END --------------------------- */
