@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,600;1,400&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Lora:ital,wght@0,400;0,600;1,400&family=Roboto:ital,wght@0,400;0,500;0,700;1,400&family=Source+Sans+3:ital,wght@0,400;0,600;1,400&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&display=swap');

/* Reader font preferences. UI chrome intentionally keeps its existing font. */

:root {
    --reader-content-font-family: inherit;
}

html[data-reader-font="classic"] {
    --reader-content-font-family: "Source Serif 4", Georgia, "Times New Roman", Times, serif;
}

html[data-reader-font="palatino"] {
    --reader-content-font-family: Lora, "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
}

html[data-reader-font="garamond"] {
    --reader-content-font-family: "EB Garamond", Garamond, "Times New Roman", Times, serif;
}

html[data-reader-font="georgia"] {
    --reader-content-font-family: "Libre Baskerville", Georgia, "Times New Roman", Times, serif;
}

html[data-reader-font="roboto"] {
    --reader-content-font-family: Roboto, Arial, sans-serif;
}

html[data-reader-font="sans"] {
    --reader-content-font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.chapter-verse-text,
.scripture-verse,
#modalText,
.strongs-verse-study,
.note-card-body,
#note-text,
.compare-reader-page .scripture-verse,
.compare-reader-page .chapter-verse-text {
    font-family: var(--reader-content-font-family);
}

/* JST verse text can contain nested elements with an explicit font-size.
   Let those elements follow the reader size selected by chapter.js instead of
   pinning the visible scripture text to the source markup's original size. */
#content .chapter-verse-text [style*="font-size"],
#content .scripture-verse [style*="font-size"] {
    font-size: inherit !important;
}

.reader-font-setting {
    margin-top: 8px;
}

.reader-font-setting label {
    display: block;
    margin: 0 0 5px;
    color: var(--reader-muted);
    font-size: .86em;
    line-height: 1.2;
}

.reader-font-select {
    width: 100%;
    min-height: 38px;
    padding: 6px 30px 6px 9px;
    border: 1px solid var(--reader-border);
    border-radius: 6px;
    background: var(--reader-surface);
    color: var(--reader-text);
    font: inherit;
    font-size: .92em;
    cursor: pointer;
}

.reader-font-select:focus-visible {
    outline: 2px solid var(--reader-accent, #3d8bfd);
    outline-offset: 1px;
}

@media (max-width: 900px) {
    .reader-font-setting-mobile {
        margin: 8px 0;
        padding: 8px 10px;
        border-top: 1px solid var(--reader-border);
        border-bottom: 1px solid var(--reader-border);
    }

    .reader-font-setting-mobile label {
        font-size: .9rem;
    }
}