/*
 * Bible reader.
 *
 * As in redeem.css, colours come from HumHub theme variables with plain fallbacks, so
 * the reader follows the active theme including dark mode rather than carrying its own
 * palette.
 *
 * The one thing this stylesheet is really for is the measure. A panel is as wide as
 * the page, and text set to that width is unreadable at length — the eye loses the
 * line on the way back. So the text column is capped at ~34em and centred, which is
 * the same reason a printed Bible is set in columns.
 */

/* ---------- Chrome shared by the reader's pages ---------- */

/* "Bible ›" back to the book list, ahead of the page's own title. */
.redeem-reader-up {
    color: var(--text-color-secondary, #7a7a7a);
    font-weight: 400;
}

.redeem-reader-up::after {
    content: " › ";
    color: var(--text-color-secondary, #7a7a7a);
}

.redeem-reader-translations {
    display: inline-flex;
    gap: 2px;
}

.redeem-reader-translation {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.6px;
    padding: 2px 9px;
    border-radius: 999px;
    color: var(--text-color-secondary, #7a7a7a);
}

.redeem-reader-translation:hover {
    background: var(--background-color-secondary, rgba(0, 0, 0, 0.06));
    text-decoration: none;
}

.redeem-reader-translation.active {
    background: var(--primary, #435f6f);
    color: #fff;
}

/* Explanatory text: the versification footnote, an empty search, a missing chapter. */
.redeem-reader-note {
    font-size: 13px;
    color: var(--text-color-secondary, #7a7a7a);
    margin: 14px auto 0;
    max-width: 34em;
}

/* ---------- Search form ---------- */

.redeem-reader-search {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
}

.redeem-reader-search .form-control {
    flex: 1 1 auto;
    min-width: 0;
}

.redeem-reader-search .btn {
    flex: 0 0 auto;
}

/* ---------- Book index ---------- */

.redeem-reader-testaments {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.redeem-reader-testament {
    flex: 1 1 280px;
    min-width: 0;
}

.redeem-reader-testament-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-color-secondary, #7a7a7a);
    margin: 0 0 8px;
}

/*
 * Two or three columns of book names rather than one tall list: the 39 books of the
 * Old Testament are otherwise a scroll on their own.
 */
.redeem-reader-books {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 2;
    column-gap: 18px;
}

.redeem-reader-books li {
    break-inside: avoid;
}

.redeem-reader-book {
    display: block;
    padding: 3px 0;
    font-size: 14px;
}

/* ---------- Chapter grid ---------- */

.redeem-reader-chapters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.redeem-reader-chapter-link {
    /* Wide enough for three digits (Psalm 119) without the tiles going ragged. */
    min-width: 42px;
    padding: 8px 6px;
    text-align: center;
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.12));
    border-radius: 6px;
    background: var(--background-color-secondary, rgba(0, 0, 0, 0.02));
    font-variant-numeric: tabular-nums;
}

.redeem-reader-chapter-link:hover {
    border-color: var(--primary, #435f6f);
    text-decoration: none;
}

/* ---------- Chapter navigation ---------- */

.redeem-reader-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 20px;
}

.redeem-reader-nav:last-child {
    margin: 24px 0 0;
}

.redeem-reader-step {
    font-size: 13px;
    padding: 5px 10px;
    border-radius: 6px;
    color: var(--text-color-secondary, #7a7a7a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.redeem-reader-step:hover {
    background: var(--background-color-secondary, rgba(0, 0, 0, 0.05));
    text-decoration: none;
}

/*
 * The book link sits in the middle and takes the slack, so "previous" stays hard left
 * and "next" hard right even at Genesis 1 and Revelation 22, where one of them is
 * absent entirely.
 */
.redeem-reader-step-up {
    flex: 1 1 auto;
    text-align: center;
    font-weight: 600;
}

.redeem-reader-step-prev {
    order: -1;
}

.redeem-reader-step-next {
    order: 1;
}

.redeem-reader-step-arrow {
    opacity: 0.6;
}

.redeem-reader-step-prev .redeem-reader-step-arrow {
    margin-right: 6px;
}

.redeem-reader-step-next .redeem-reader-step-arrow {
    margin-left: 6px;
    /* The arrow follows the label on "next", so the source order is reversed here. */
    order: 1;
}

.redeem-reader-step-next {
    display: inline-flex;
    align-items: baseline;
}

/* ---------- The text ---------- */

.redeem-reader-text {
    max-width: 34em;
    margin: 0 auto;
}

.redeem-reader-title {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-align: center;
    color: var(--text-color-secondary, #7a7a7a);
    margin: 0 0 18px;
}

.redeem-reader-paragraph {
    /*
     * A serif face and a long line-height, which is what a page of continuous prose
     * wants and what the rest of the interface — set in a UI sans-serif for short
     * labels — does not.
     */
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    line-height: 1.75;
    margin-bottom: 1.1em;
    /* Justification without hyphenation opens rivers at this measure. */
    text-align: left;
}

.redeem-reader-paragraph:last-child {
    margin-bottom: 0;
}

.redeem-reader-verse {
    /* Verses run together into prose; the number is the only separator. */
    scroll-margin-top: 120px;
}

.redeem-reader-verse-number {
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 10px;
    font-weight: 700;
    vertical-align: super;
    line-height: 0;
    margin-right: 1px;
    color: var(--text-color-secondary, #7a7a7a);
    font-variant-numeric: tabular-nums;
}

.redeem-reader-verse-number:hover {
    color: var(--primary, #435f6f);
    text-decoration: none;
}

/* The verse a reference or a search result pointed at. */
.redeem-reader-verse.marked {
    /*
     * A wash rather than a highlighter: this marks where you landed, and is not the
     * persistent highlighting that belongs in Textus.
     */
    background: var(--warning-light, rgba(255, 214, 102, 0.32));
    border-radius: 3px;
    box-shadow: 0 0 0 2px var(--warning-light, rgba(255, 214, 102, 0.32));
}

/*
 * Poetry — the five poetic books — sets one verse to a line. Run together as prose a
 * psalm reads as an argument, which is not what it is.
 */
.redeem-reader-poetry .redeem-reader-verse {
    display: block;
    /* Continuation lines indent, so a long verse still reads as one unit. */
    padding-left: 1.4em;
    text-indent: -1.4em;
}

.redeem-reader-poetry .redeem-reader-paragraph {
    margin-bottom: 1.4em;
}

/* ---------- Search results ---------- */

.redeem-reader-results {
    list-style: none;
    margin: 0;
    padding: 0;
}

.redeem-reader-result {
    padding: 9px 0;
    border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
}

.redeem-reader-result:last-child {
    border-bottom: 0;
}

.redeem-reader-result-ref {
    font-weight: 600;
    margin-right: 8px;
    white-space: nowrap;
}

.redeem-reader-result-text {
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1.6;
}

/* ---------- Narrow screens ---------- */

@media (max-width: 767px) {
    .redeem-reader-books {
        columns: 1;
    }

    .redeem-reader-paragraph {
        font-size: 16px;
    }

    /* The neighbouring chapter's name is the first thing worth dropping. */
    .redeem-reader-step-label {
        display: none;
    }

    .redeem-reader-step-arrow {
        font-size: 16px;
    }
}