:root {
    /* The following override the values in global.css */
    --primary-background-color: white;
    --top-heading-background-color: white;
    --font-body: var(--font-body-sans);
    --font-heading: var(--font-heading-serif);

    /* The remaining items are only used in CombinedGospels.html */
    --display-verse: inline;
    --display-verse-num: none;
    --display-added-format: inline;
    --display-removed-format: none;
    --display-ref: inline;
    --display-notes: block;
    --display-sources: none;
    --display-outline-title: none;
    --display-inline-title: block;
    --display-text: block;
    --para-indent: 30px;
    --first-letter: lowercase;
    --jst-weight: 600;
    --jst-style: normal;
    --display-hover: none;
    --hover-cursor: auto;
    --matt-color: black;
    --mark-color: black;
    --luke-color: black;
    --john-color: black;
    --acts-color: black;
    /*--font-body-sans: "system-ui", sans-serif;*/
    /*--font-heading-sans: "PT Sans Caption", sans-serif;*/
    /*--font-body-serif: "PT Serif", serif;*/
    /*--font-heading-serif: "PT Serif Caption", serif;*/
    --font-body-sans: "Open Sans", sans-serif;
    --font-heading-sans: "Open Sans", sans-serif;
    --font-body-serif: "Lora", serif;
    --font-heading-serif: "Lora", serif;
}

/* All of the styles below are used only in CombinedGospels.html */

h1 {
    counter-reset: section-counter;
}
h2 {
    counter-reset: subsection-counter;
    counter-increment: section-counter;
    display: var(--display-outline-title);
}
h2::before {
    content: counter(section-counter) ". ";
}
h3 {
    counter-increment: subsection-counter;
    display: var(--display-outline-title);
}
h3::before {
    content: counter(section-counter) "." counter(subsection-counter) " ";
}
.h3-subtext {
    margin: 1px;
    font-size: 9pt;
    font-weight: normal;
}
.event {
    counter-increment: event-counter;
    /*padding-left: 20px;*/
}
.inline-title {
    font-family: var(--font-heading);
    font-size: 135%;
    /*padding-right: 60px;*/
    text-align: center;
    margin-block-start: 0.3em;
    margin-block-end: 0.15em;

    display: var(--display-text);
}
.section {
    display: var(--display-text);
}
.sub-event {
    display: var(--display-text);
}
.source {
    margin-top: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
}
.source p {
    margin: 0;
}
.reference {
    font-weight: bold;
}
.center-text {
    text-align: center;
}
.end {
    vertical-align: top;
    height: 12px;
    display: inline-block;
    width: 25%;
    margin: 0 auto;
    padding: 0;
    border-bottom-color: black;
    border-bottom-style: double;
    border-bottom-width: 7px;
    border-top-style: hidden;
    border-left-style: hidden;
    border-right-style: hidden;
}
.end-text {
    display: inline-block;
    font-size: 18pt;
}
sup {
    /* Prevents the superscript from affecting the line box height */
    line-height: 0;
    /* Use relative positioning to raise the text without affecting layout */
    position: relative;
    top: -0.5em; /* Adjust this value as needed to align with your font */
    /* Ensure the font size is appropriate (optional, but common) */
    font-size: 0.75em;
    /* Fallback vertical alignment if needed, but 'top' or 'baseline' works well with relative positioning */
    vertical-align: baseline;
}

.verse::before {
    content: "[" attr(data-vr) "] "; /* Retrieves the value of data-vr */
    /* Prevents the superscript from affecting the line box height */
    line-height: 0;
    /* Use relative positioning to raise the text without affecting layout */
    position: relative;
    bottom: 0; /* Adjust this value as needed to align with your font */
    /* Ensure the font size is appropriate (optional, but common) */
    font-size: 0.5em;
    font-style: italic;
    /* Fallback vertical alignment if needed, but 'top' or 'baseline' works well with relative positioning */
    vertical-align: baseline;
    display: var(--display-verse-num);
}

/* span.hover credit: https://www.impressivewebs.com/pure-css-tool-tips/ */
span.hover {
    position: relative;
    /*text-decoration: none;*/
    text-indent: 0;
    cursor: var(--hover-cursor);
}

span.hover:before {
    content: "";
    position: absolute;
    border-top: 1em solid #0090ff;
    border-left: 1.5em solid transparent;
    border-right: 1.5em solid transparent;
    display: none;
    top: -1em;
}

span.hover:after {
    content: attr(data-bk) " " attr(data-ch) ":" attr(data-vr);
    position: absolute;
    color: white;
    top: -2.5em;
    left: -1em;
    background: #0090ff;
    padding: .25em .75em;
    border-radius: .5em;
    white-space: nowrap;
    font-size: 60%;
    font-weight: normal;
    display: none;
}

span.hover:hover:before, span.hover:hover:after {
    display: var(--display-hover);
}

.sources a {
    color: inherit;
}

.para {
    text-indent: var(--para-indent);
    /*margin-block-start: 0.15em;*/
    /*margin-block-end: 0.2em;*/
    /*padding-right: 40px;*/
}
.verse {
    display: var(--display-verse);
    margin-top: 7px;
}
.sources {
    margin: 1px 1px 1px 30px;
    font-size: 60%;
    font-weight: normal;
    display: var(--display-sources);
}
.jst {
    font-weight: var(--jst-weight);
    font-style: var(--jst-style);
}
.jst-removed {
    text-decoration: line-through;
}
.matt {
    color: var(--matt-color);
}
.mark {
    color: var(--mark-color);
}
.luke {
    color: var(--luke-color);
}
.john {
    color: var(--john-color);
}
.acts {
    color: var(--acts-color);
}
.matt-color {
    color: SaddleBrown;
}
.mark-color {
    color: green;
}
.luke-color {
    color: blue;
}
.john-color {
    color: DarkViolet;
}
.acts-color {
    color: DarkTurquoise;
}
.ref {
    font-size: 70%;
    font-weight: normal;
    font-style: italic;
    text-wrap: nowrap;
    display: var(--display-ref);
}
.added-format {
    display: var(--display-added-format);
}
.removed-format {
    display: var(--display-removed-format);
}
.notes {
    font-size: 70%;
    font-weight: normal;
    display: var(--display-notes);
}
hr.footnote {
    width: 100px;
    margin-left: 0;
    margin-block-start: 0.5em;
    margin-block-end: 0.2em;
}
.footnote-verse {
    display: var(--display-verse-num);
}
a {
    text-wrap: nowrap;
}
.first-letter {
    text-transform: var(--first-letter);
}
.alt-trans {
    font-size: 70%;
    font-weight: normal;
    font-style: italic;
    color: black;
    display: var(--display-ref);
}
.options {
    margin: 6px;
}