/* Color Variables */
:root {
    --color-darkmode-black: rgb(0, 0, 0);
    --color-darkmode-text-light: rgb(232, 234, 237);
    --color-darkmode-bg-1: rgb(26, 27, 29);
    --color-darkmode-bg-1-transparent: rgba(26, 27, 29, 0.9);
    --color-darkmode-bg-2: rgb(17, 17, 19);
    --color-darkmode-primary-blue: rgb(109, 154, 226);
    --color-darkmode-text-dark: rgb(27, 27, 27);
    --color-darkmode-selection-bg: rgb(76, 119, 171);
    --color-darkmode-white: rgb(255, 255, 255);
    --color-darkmode-primary-blue-hover: rgb(168, 199, 250);
    --color-darkmode-primary-blue-hover-dark: rgb(108, 140, 190);
    --color-darkmode-primary-yellow-button: rgb(255, 193, 7);
    --color-darkmode-primary-yellow-button-hover: rgb(236, 179, 8);
    --color-darkmode-bg-3: rgb(23, 23, 24);
    --color-darkmode-bg-4: rgb(41, 41, 42);
    --color-darkmode-header-gradient-start: rgb(67, 97, 146);
    --color-darkmode-header-gradient-end: rgb(49, 74, 114);
    --color-darkmode-footer-text: rgb(180, 180, 180);
    --color-darkmode-bg-5: rgb(35, 36, 39);
    --color-darkmode-info-bg: rgb(25, 39, 52);
    --color-darkmode-info-border: rgb(30, 73, 118);
    --color-darkmode-info-text: rgb(144, 202, 249);
    --color-darkmode-warning-bg: rgb(44, 30, 12);
    --color-darkmode-warning-border: rgb(101, 71, 16);
    --color-darkmode-warning-text: rgb(255, 183, 77);
    --color-darkmode-error-bg: rgb(52, 25, 25);
    --color-darkmode-error-border: rgb(118, 30, 30);
    --color-darkmode-error-text: rgb(239, 154, 154);
    --color-darkmode-border: rgb(64, 65, 68);
    --color-darkmode-table-header-bg: rgb(29, 40, 73);
    --color-darkmode-button-text-light: rgb(140, 140, 140);
    --color-sepia-bg: rgb(228, 203, 164);
    --color-sepia-text-dark: rgb(55, 51, 45);
    --color-darkmode-context-border: rgb(64, 65, 68);
    --color-darkmode-context-bg: rgb(35, 36, 39);
    --color-darkmode-green-light: rgb(136, 188, 148);
    --color-darkmode-hr-border: rgba(255, 255, 255, 0.2);
    --color-darkmode-mark-bg: rgb(90, 80, 40);
}

html.theme-dark body {
    background-color: var(--color-darkmode-black);
    color: var(--color-darkmode-text-light);
}

html.theme-dark main article {
    background-color: var(--color-darkmode-bg-1);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);
}

html.theme-dark header a:link, html.theme-dark header a:visited {
    color: var(--color-darkmode-white);
}

html.theme-dark header a:hover {
    color: var(--color-darkmode-primary-blue-hover);
}

html.theme-dark header div#location-container span, html.theme-dark select, html.theme-dark code, html.theme-dark input[type="text"] {
    background-color: var(--color-darkmode-bg-2);
    color: var(--color-darkmode-text-light);
}

html.theme-dark select:hover, html.theme-dark header div#location-container span:hover {
    background-color: var(--color-darkmode-bg-4);
}

html.theme-dark input[type="checkbox"] + label::before {
    background-color: var(--color-darkmode-bg-2);
    border-color: var(--color-darkmode-text-light);
}

html.theme-dark input[type="checkbox"] + label:hover::before {
    background-color: var(--color-darkmode-bg-4);
    border-color: var(--color-darkmode-text-light);
}

html.theme-dark input[type="checkbox"]:checked + label::before {
    background-color: var(--color-darkmode-primary-blue);
    border-color: var(--color-darkmode-primary-blue);
}

html.theme-dark #settings-panel label {
    background-color: var(--color-darkmode-black);
}

html.theme-dark #settings-panel input[type="radio"]:checked + label {
    background-color: var(--color-darkmode-primary-blue);
    color: var(--color-darkmode-text-dark);
}

html.theme-dark #settings-panel input[type="radio"] + label:hover {
    background-color: var(--color-darkmode-primary-blue-hover-dark);
    color: var(--color-darkmode-text-light);
}

html.theme-dark main article section:nth-of-type(even) {
    background-color: var(--color-darkmode-bg-2);
}

html.theme-dark main article #hero {
    background-image: url(/img/night.jpg);
    background-color: rgb(9, 33, 57);
}

html.theme-dark main article #hero #dove img {
    filter: brightness(0.8) contrast(1);
}

/* Mark tag */
html.theme-dark mark {
    background-color: var(--color-darkmode-mark-bg);
    color: var(--color-darkmode-text-light);
}

html.theme-dark ul.chapterList li a:link,
html.theme-dark ul.chapterList li a:visited {
    background-color: var(--color-darkmode-primary-blue);
    color: var(--color-darkmode-text-dark);
    text-shadow: none;
}

html.theme-dark ::selection {
    background-color: var(--color-darkmode-selection-bg);
    color: var(--color-darkmode-white);
}

html.theme-dark a:link, 
html.theme-dark a:visited {
    color: var(--color-darkmode-primary-blue);
}

html.theme-dark a:hover {
    color: var(--color-darkmode-primary-blue-hover);
}

html.theme-dark a[href="/about/brackets#look"]:link,
html.theme-dark a[href="/about/brackets#look"]:visited,
html.theme-dark a[href="/about/brackets#look"]:link mark,
html.theme-dark a[href="/about/brackets#look"]:visited mark {
    color: var(--color-darkmode-text-light);
}

html.theme-dark button, html.theme-dark a.button {
    background-color: var(--color-darkmode-primary-yellow-button);
    color: var(--color-darkmode-text-dark);
}

html.theme-dark button:hover, html.theme-dark a.button:hover {
    background-color: var(--color-darkmode-primary-yellow-button-hover);
}

html.theme-dark hr {
    border-top-color: var(--color-darkmode-hr-border);
    border-bottom-color: var(--color-darkmode-hr-border);
}

html.theme-dark input[type="text"], html.theme-dark input[type="number"], html.theme-dark textarea {
    background-color: var(--color-darkmode-bg-3);
    color: var(--color-darkmode-text-light);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

html.theme-dark input[type="text"]:focus, html.theme-dark textarea:focus {
    background-color: var(--color-darkmode-bg-4);
}

html.theme-dark header {
    background-color: var(--color-darkmode-header-gradient-start);
    background-image: linear-gradient(140deg, var(--color-darkmode-header-gradient-start) 0%, var(--color-darkmode-header-gradient-end) 100%);
}

html.theme-dark h2 {
    color: var(--color-darkmode-primary-blue);
    border-bottom-color: var(--color-darkmode-primary-blue);
}

html.theme-dark main article nav#breadcrumbs {
    background-color: var(--color-darkmode-bg-3);
    color: var(--color-darkmode-text-light);
}

html.theme-dark #frontPageBibleIndex {
    background-color: var(--color-darkmode-bg-1-transparent);
}

html.theme-dark footer {
    background-color: var(--color-darkmode-bg-1);
}

html.theme-dark footer a:link, 
html.theme-dark footer a:visited,
html.theme-dark footer a[href*="commentaries.2001translation.org"]:link,
html.theme-dark footer a[href*="commentaries.2001translation.org"]:visited {
    color: var(--color-darkmode-footer-text);
    text-decoration: underline;
}

html.theme-dark footer a:hover,
html.theme-dark footer a[href*="commentaries.2001translation.org"]:hover {
    color: rgb(150, 150, 150);
}

html.theme-dark footer p {
    color: var(--color-darkmode-footer-text);
}

html.theme-dark #bible {
    background-color: var(--color-darkmode-bg-5);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);
}

html.theme-dark img, html.theme-dark *[style*="background-image"] {
    filter: brightness(0.9) contrast(1.1);
}

html.theme-dark aside.info {
    background-color: var(--color-darkmode-info-bg);
    border-color: var(--color-darkmode-info-border);
    color: var(--color-darkmode-info-text);
}

html.theme-dark aside.info::before {
    color: var(--color-darkmode-info-text);
}

html.theme-dark aside.warning {
    background-color: var(--color-darkmode-warning-bg);
    border-color: var(--color-darkmode-warning-border);
    color: var(--color-darkmode-warning-text);
}

html.theme-dark aside.warning::before {
    color: var(--color-darkmode-warning-text);
}

html.theme-dark aside.error {
    background-color: var(--color-darkmode-error-bg);
    border-color: var(--color-darkmode-error-border);
    color: var(--color-darkmode-error-text);
}

html.theme-dark aside.error::before {
    color: var(--color-darkmode-error-text);
}

html.theme-dark aside.box, html.theme-dark div.timeline div.contents, html.theme-dark p.noteBox {
    background-color: var(--color-darkmode-bg-5);
    border-color: var(--color-darkmode-border);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

html.theme-dark section:nth-of-type(even) aside.box {
    background-color: var(--color-darkmode-bg-4);
}

html.theme-dark div.timeline {
    padding-bottom: 0;
}

html.theme-dark div.timeline::after {
    display: block;
    width: 100%;
    content: "";
    background-image: url(/img/timeline-single.png);
    background-repeat: repeat-y;
    background-position: center;
    filter: brightness(3) contrast(1) hue-rotate(-90deg);
    height: 3rem;
}

html.theme-dark div.timeline.end::after {
    height: 0;
}

html.theme-dark aside.blurb {
    background-color: var(--color-darkmode-bg-5);
    color: var(--color-darkmode-text-light);
    border-left-color: var(--color-darkmode-table-header-bg);
}

html.theme-dark aside.blurb a {
    color: var(--color-darkmode-primary-blue);
}

html.theme-dark ul.panels li {
    background-color: var(--color-darkmode-bg-1);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

html.theme-dark ul.panels li:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7);
}

html.theme-dark table {
    border: 1px solid var(--color-darkmode-border);
}

html.theme-dark th {
    background-color: var(--color-darkmode-table-header-bg);
    color: var(--color-darkmode-text-light);
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.4);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

html.theme-dark td {
    border-bottom: 1px solid var(--color-darkmode-border);
    border-right: 1px solid var(--color-darkmode-border);
}

html.theme-dark tr:nth-child(even) {
    background-color: var(--color-darkmode-bg-5);
}

html.theme-dark tr:hover {
    background-color: var(--color-darkmode-info-bg);
}

html.theme-dark #settings-panel {
    background-color: var(--color-darkmode-bg-5);
}

html.theme-dark ul.chapterList li a {
    background-color: var(--color-darkmode-primary-blue);
    color: var(--color-darkmode-text-dark);
}

html.theme-dark ul.chapterList li a:link,
html.theme-dark ul.chapterList li a:visited {
    background-color: var(--color-darkmode-primary-blue);
    color: var(--color-darkmode-text-dark);
}

html.theme-dark ul.chapterList li a:hover {
    background-color: var(--color-darkmode-primary-blue-hover);
}

html.theme-dark ul.verseList li a:link, html.theme-dark ul.verseList li a:visited {
    background-color: var(--color-darkmode-bg-5);
    color: var(--color-darkmode-primary-blue);
    border: 1px solid var(--color-darkmode-primary-blue);
    font-size: 1rem;
    text-shadow: none;
    padding: 0.1rem 0rem 0rem 0rem;
}

html.theme-dark ul.chapterList li a:hover, html.theme-dark ul.verseList li a:hover {
    background-color: var(--color-darkmode-primary-blue-hover);
    color: var(--color-darkmode-black);
}

html.theme-dark p.editorNote {
    color: var(--color-darkmode-primary-blue);
    font-weight: 600;
    font-style: italic;
}

/* Display mode specific buttons */
html.theme-dark #settings-panel input[type="radio"] + label[for="settingsLightMode"]:hover,
html.theme-dark #settings-panel input[type="radio"]:checked + label[for="settingsLightMode"] {
    background-color: var(--color-darkmode-white);
    color: var(--color-darkmode-black);
}

html.theme-dark #settings-panel input[type="radio"] + label[for="settingsDarkMode"]:hover,
html.theme-dark #settings-panel input[type="radio"]:checked + label[for="settingsDarkMode"] {
    background-color: var(--color-darkmode-black);
    color: var(--color-darkmode-white);
}

html.theme-dark #settings-panel input[type="radio"] + label[for="settingsSepiaMode"]:hover,
html.theme-dark #settings-panel input[type="radio"]:checked + label[for="settingsSepiaMode"] {
    background-color: var(--color-sepia-bg);
    color: var(--color-sepia-text-dark);
}

html.theme-dark #settings-panel input[type="radio"] +label[for="settingsAutoMode"]:hover,
html.theme-dark #settings-panel input[type="radio"]:checked + label[for="settingsAutoMode"] {
    background-color: var(--color-darkmode-primary-blue);
    color: var(--color-darkmode-text-dark);
}

html.theme-dark #settings-panel input[type="radio"]:checked + label {
    border-color: var(--color-darkmode-primary-blue);
    font-weight: 600;
}

html.theme-dark #context-menu {
    background-color: var(--color-darkmode-bg-5);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

html.theme-dark #context-menu ul li label {
    background-color: var(--color-darkmode-bg-4);
    color: var(--color-darkmode-button-text-light);
}

html.theme-dark #context-menu ul li label:hover {
    background-color: var(--color-darkmode-primary-blue);
    color: var(--color-darkmode-text-dark);
}

html.theme-dark aside.context {
    border: 1px solid var(--color-darkmode-context-border);
    background-color: var(--color-darkmode-context-bg);
    border-left: 8px solid var(--color-darkmode-primary-blue);
}

html.theme-dark section:nth-of-type(even) aside.context {
    background-color: var(--color-darkmode-bg-1);
}

html.theme-dark aside.context p, html.theme-dark aside.context li {
    color: var(--color-darkmode-text-light);
}

html.theme-dark article.text sup.v {
    color: var(--color-darkmode-primary-blue);
}

html.theme-dark article a[href*="/notes/"], html.theme-dark article a[href*="/notes/"] mark,
html.theme-dark #floating-preview a[href*="/notes/"], html.theme-dark #floating-preview a[href*="/notes/"] mark {
    color: var(--color-darkmode-green-light);
}

html.theme-dark article.text div.large-gap hr {
    border-top-color: var(--color-darkmode-hr-border);
}

html.theme-dark .panel, html.theme-dark #settings-panel {
    background-color: var(--color-darkmode-bg-5);
}

html.theme-dark a[href*="commentaries.2001translation.org"]:link, html.theme-dark a[href*="commentaries.2001translation.org"]:visited,
html.theme-dark #floating-preview a[href*="commentaries.2001translation.org"]:link, html.theme-dark #floating-preview a[href*="commentaries.2001translation.org"]:visited {
    color: var(--color-darkmode-primary-blue);
    text-decoration: none;
}

html.theme-dark a[href*="commentaries.2001translation.org"]:hover,
html.theme-dark #floating-preview a[href*="commentaries.2001translation.org"]:hover {
    color: var(--color-darkmode-primary-blue-hover);
    text-decoration: underline;
}

/* Floating Preview */
html.theme-dark #floating-preview {
    background-color: var(--color-darkmode-bg-1);
    border-color: var(--color-darkmode-border);
    color: var(--color-darkmode-text-light); /* Ensure text color is light */
}

html.theme-dark #floating-preview section {
    border-top: 1px solid var(--color-darkmode-hr-border);
}

html.theme-dark article.interlinears h4.interlinearVerseNumber + ul li.opened {
    background-color:var(--color-darkmode-bg-1);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

/* Interlinear highlights */
html.theme-dark article.interlinears h4.interlinearVerseNumber + ul:nth-of-type(odd) {
    background-color: var(--color-darkmode-bg-5);
}

html.theme-dark article.interlinears h4.interlinearVerseNumber:target {
    background-color: var(--color-darkmode-mark-bg);
}

html.theme-dark article.interlinears h4.interlinearVerseNumber:target + ul, html.theme-dark article.interlinears h4.interlinearVerseNumber:target + ul:nth-child(odd) {
    background-color: var(--color-darkmode-bg-2);
}