/* 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;
}

/* app.js turns these into real buttons, 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 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;
}