/* The text layer. Bootstrap styles the chrome; this styles scripture.
   Every selector here is a class render_books.py already emits, so restyling
   the text never means regenerating books/. */

/* Serif everywhere, chrome included. Overriding Bootstrap's own variable
   rather than setting font-family on elements means the navbar, modal and
   buttons all follow, and a typeface is named in exactly one place. System
   fonts on purpose: a webfont would be one more thing to keep cached for
   offline, and one more request before the text can be read. */
:root {
  --bs-body-font-family: Georgia, "Iowan Old Style", "Palatino Linotype",
                         "Times New Roman", serif;
}

/* Verse numbers. The markup is a <span>, not a <sup>, so the raise happens
   here -- and line-height:0 keeps the raised number from opening up the line
   it sits on. Not selectable, so copying a passage copies the words. */
.v {
  font-size: .7em;
  font-weight: 700;
  vertical-align: super;
  line-height: 0;
  margin-right: .15em;
  color: var(--bs-secondary-color);
  user-select: none;
}

/* These are real buttons -- compile_bible.py writes role and tabindex on every
   one of them -- so they need a visible focus ring. */
.v:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Chapter numbers are <h2>, which at heading size shouts over the text. */
.chapter-number {
  font-size: 2rem;
  font-weight: 400;
  color: var(--bs-secondary-color);
  margin: 2rem 0 .75rem;
}

/* Poetry lines are paragraphs, so left alone each one carries a paragraph's
   bottom margin and a psalm falls apart into separate blocks. Close the gap,
   indent by the level the generator recorded, and hang the indent so a line
   too long for the screen still reads as one line. */
.poetry { margin-bottom: 1rem; }
.poetry .line {
  margin: 0;
  padding-left: 1.5em;
  text-indent: -1.5em;
}
.poetry .line[data-indent="2"] { padding-left: 3em; }
.poetry .line[data-indent="3"] { padding-left: 4.5em; }

/* Descriptive titles: "A Psalm by David". */
.d {
  font-style: italic;
  color: var(--bs-secondary-color);
}

/* The notes are apparatus, not scripture, and should not read as it. */
.footnotes {
  font-size: .875rem;
  color: var(--bs-secondary-color);
}
.footnotes-title { font-size: 1rem; }
.marker { font-weight: 700; }

/* The callers are * † ‡ § and ✡, and the star is the one character in the
   whole corpus a browser may render as an emoji. render_books.py already
   appends U+FE0E to ask for the text glyph; this asks a second way, for
   renderers that ignore the variation selector. Newer property, so where it
   is not supported the selector is simply dropped and the variation selector
   is still doing the work. */
.noteref,
.marker { font-variant-emoji: text; }

/* The navbar is sticky, so an element scrolled to the top of the viewport
   lands underneath it. These two are everything an anchor in this app points
   at -- chapter headings and verse numbers -- so the offset lives on them
   rather than on a scroll container. Roughly the navbar's height. */
.chapter,
.v { scroll-margin-top: 4.5rem; }

/* The navbar's reference picker. form-select is width:100% by default, which
   in a flex row means both selects try to take the whole navbar; and the
   default right padding leaves the caret sitting on top of a three-digit
   chapter number. */
.reference .form-select {
  width: auto;
  padding-right: 2rem;
}

/* The book list is a list of links, not a table of facts. Reboot's bullets
   and the chapter count after each title are both noise between the reader
   and the book they came for.

   Hidden here rather than dropped from render_books.py: the count is real
   information the generator knows, and whether to show it is a presentation
   decision. It stays in the markup for anything that wants it later. */
.index ul {
  list-style: none;
  padding-left: 0;
}

.index .count { display: none; }