/* Dark theme overrides.
   Loaded from f-head.php with media="(prefers-color-scheme: dark)"; an inline
   script forces it on/off for ?dark=true/false (remembered in localStorage,
   ?dark=auto clears).
   Must load after style.css, styles.css and the page's $extra_styles. */

:root {
  --dk-bg: #121412;
  --dk-surface: #1b1e1a;
  --dk-raised: #252923;
  --dk-text: #e2e4de;
  --dk-muted: #a3a89e;
  --dk-border: #3a4036;
  --dk-brand: #8fd47a;
  --dk-brand-hover: #b4e6a5;
  --dk-link: #a5aef0;
  --dk-link-hover: #c9cef8;
  --dk-red: #ff8a80;
  --dk-highlight-bg: #5c4a00;
  --dk-highlight-text: #fff3c4;
}

html {
  color-scheme: dark;
  background-color: var(--dk-bg);
  color: var(--dk-text);
}
body {
  background: var(--dk-bg);
}

/* =Text & headings */
h1, h2, h3,
blockquote {
  color: var(--dk-brand);
}
h5, h6 {
  color: var(--dk-muted);
}

/* =Links */
a {
  color: var(--dk-link);
}
a:hover, a:focus, a:active {
  color: var(--dk-link-hover);
}
a:link {
  -webkit-tap-highlight-color: rgba(165, 174, 240, 0.3);
}
.plain-link {
  color: var(--dk-text);
}
.viewoptions,
.scripture-page .scripture-tools a {
  color: var(--dk-brand);
}
.scripture-page .scripture-tools a:hover {
  color: var(--dk-brand-hover);
}

/* =Borders & rules */
hr,
tr {
  border-color: var(--dk-border);
}
abbr, acronym {
  border-bottom-color: var(--dk-muted);
}
fieldset {
  border-color: var(--dk-border);
}

/* =Code blocks */
pre {
  background: var(--dk-raised);
  color: var(--dk-text);
}
code, kbd, tt, var {
  color: var(--dk-text);
}

/* =Highlights & selection */
mark, ins, .highlight, .yellowHighlight {
  background-color: var(--dk-highlight-bg);
  color: var(--dk-highlight-text);
}
::-moz-selection {
  background: #3e4a8a;
  color: #fff;
}
::selection {
  background: #3e4a8a;
  color: #fff;
}

/* =Form fields */
[type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week'], input:not([type]), textarea, select {
  background-color: var(--dk-raised);
  color: var(--dk-text);
  border-color: var(--dk-border);
}
[type='color']:hover, [type='date']:hover, [type='datetime']:hover, [type='datetime-local']:hover, [type='email']:hover, [type='month']:hover, [type='number']:hover, [type='password']:hover, [type='search']:hover, [type='tel']:hover, [type='text']:hover, [type='time']:hover, [type='url']:hover, [type='week']:hover, input:not([type]):hover, textarea:hover {
  border-color: var(--dk-muted);
}
[type='color']:disabled, [type='date']:disabled, [type='datetime']:disabled, [type='datetime-local']:disabled, [type='email']:disabled, [type='month']:disabled, [type='number']:disabled, [type='password']:disabled, [type='search']:disabled, [type='tel']:disabled, [type='text']:disabled, [type='time']:disabled, [type='url']:disabled, [type='week']:disabled, input:not([type]):disabled, textarea:disabled {
  background-color: var(--dk-surface);
}
[type='color']::placeholder, [type='date']::placeholder, [type='datetime']::placeholder, [type='datetime-local']::placeholder, [type='email']::placeholder, [type='month']::placeholder, [type='number']::placeholder, [type='password']::placeholder, [type='search']::placeholder, [type='tel']::placeholder, [type='text']::placeholder, [type='time']::placeholder, [type='url']::placeholder, [type='week']::placeholder, input:not([type])::placeholder, textarea::placeholder {
  color: var(--dk-muted);
}
input[type="text"] :focus,
textarea :focus {
  color: #fff;
}
/* Header search box (borders are !important green in style.css, which already reads fine) */
.searchform .search-container {
  background: var(--dk-raised);
}
.searchform input.main-field {
  color: var(--dk-text);
}

/* =Page surfaces */
.site-content,
.site-content.scripture-page,
.search-section {
  background: var(--dk-bg);
}

/* =Index table (index.php) */
table.index-table.tan {
  background: var(--dk-surface);
}
table.index-table.tan th {
  color: #eef3ea;
}
table.index-table.tan td ul li a {
  border-right-color: var(--dk-border);
}
@media screen and (max-width: 699px) {
  table.index-table.tan tr[id] td {
    border-bottom-color: var(--dk-border) !important;
  }
  table.index-table.tan a.plain-link:after {
    color: var(--dk-brand);
  }
}
ol.reading-plan {
  border-color: var(--dk-border);
}
ol.reading-plan li:nth-child(odd) {
  background: var(--dk-surface);
}

/* =Scripture passage (scripture.php) */
.scripture-page .passage .inspired {
  background: var(--dk-surface);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}
.scripture-page .passage .inspired sup.label {
  color: #6fb0f2;
}
span.usfm-c,
span.usfm-v {
  color: #7cc96a;
}
p.usfm-hanging .usfm-v {
  color: #c9a0f0;
}
span.usfm-f1 > a,
span.wj {
  color: var(--dk-red);
}
td.usfm-th, td.usfm-tc {
  border-color: var(--dk-border);
}
audio.noscript {
  border-color: var(--dk-border);
}

/* =Footnote popup */
.footnote-overlay {
  background-color: rgba(0, 0, 0, 0.75);
}
.footnote-content {
  background-color: var(--dk-raised);
  color: var(--dk-text);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
}
.footnote-close {
  color: var(--dk-text);
  background: #44483f;
}
.footnote-close:hover {
  color: #fff;
  background-color: #5c6155;
}

/* =Footer */
.site-footer {
  background: #0c0d0c;
}
.site-footer .footer-menus ul.footer-menu li a:hover {
  background: var(--dk-raised);
}
.site-footer .footer-menus .language-switcher {
  background: var(--dk-surface);
}
.site-footer .footer-menus .language-switcher ul.language-list li a:hover {
  background: var(--dk-raised);
}