/*
 * Dark theme, applied when <html data-theme="dark"> (set by _includes/theme-init.html
 * and the navbar toggle in theme-toggle.js). Overrides Beautiful Jekyll's fixed colours
 * and this site's code.css / post.css; syntax colours are in pygment_highlights_dark.css.
 */

/* Navbar toggle: icon when the navbar is expanded, text in the collapsed menu */
#nav-theme-text {
  display: none;
}
@media (max-width: 767.98px) {
  #nav-theme-icon {
    display: none;
  }
  #nav-theme-text {
    display: inline;
  }
}

html[data-theme="dark"] {
  --dk-bg: #15171b;
  --dk-surface: #1d2025;
  --dk-border: #30353c;
  --dk-text: #d3d6db;
  --dk-heading: #eceef1;
  --dk-muted: #9aa1aa;
  --dk-link: #5eb1ff;
  --dk-hover: #4fc3dc;
  --dk-brand: #e7a0c0;
  color-scheme: dark;
}

/* --- General --- */
html[data-theme="dark"] body {
  color: var(--dk-text);
  background-color: var(--dk-bg);
}
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
  color: var(--dk-heading);
}
/* Not .btn: the share and tag buttons keep their own white text */
html[data-theme="dark"] a:not(.btn) {
  color: var(--dk-link);
}
html[data-theme="dark"] a:not(.btn):hover,
html[data-theme="dark"] a:not(.btn):focus {
  color: var(--dk-hover);
}
html[data-theme="dark"] blockquote,
html[data-theme="dark"] .text-muted {
  color: var(--dk-muted) !important;
}
html[data-theme="dark"] hr {
  border-top-color: var(--dk-border);
}

/* --- Navbar --- */
html[data-theme="dark"] .navbar-custom {
  background-color: var(--dk-surface);
  border-bottom-color: var(--dk-border);
}
html[data-theme="dark"] .navbar-custom .navbar-brand,
html[data-theme="dark"] .navbar-custom .navbar-nav .nav-link {
  color: var(--dk-brand);
}
html[data-theme="dark"] .navbar-custom .navbar-brand:hover,
html[data-theme="dark"] .navbar-custom .navbar-brand:focus,
html[data-theme="dark"] .navbar-custom .navbar-nav .nav-link:hover,
html[data-theme="dark"] .navbar-custom .navbar-nav .nav-link:focus {
  color: var(--dk-hover);
}
html[data-theme="dark"] .navbar-custom .navbar-collapse {
  border-top-color: var(--dk-border);
}
html[data-theme="dark"] .navbar-light .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.15);
}
/* Bootstrap's navbar-dark toggler icon */
html[data-theme="dark"] .navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.6)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* --- Footer --- */
html[data-theme="dark"] footer {
  background-color: var(--dk-surface);
  border-top-color: var(--dk-border);
}
html[data-theme="dark"] footer p.text-muted {
  color: var(--dk-muted) !important;
}
html[data-theme="dark"] footer a {
  color: var(--dk-text);
}
html[data-theme="dark"] footer a:hover,
html[data-theme="dark"] footer a:focus {
  color: var(--dk-hover);
}
/* Footer social icons are white glyphs on a circle in the link colour */
html[data-theme="dark"] footer .fa-inverse {
  color: var(--dk-bg);
}

/* --- Post list, meta and tags --- */
html[data-theme="dark"] .post-preview {
  border-bottom-color: var(--dk-border);
}
html[data-theme="dark"] .post-preview a {
  color: var(--dk-heading);
}
html[data-theme="dark"] .post-preview a:hover,
html[data-theme="dark"] .post-preview a:focus {
  color: var(--dk-hover);
}
html[data-theme="dark"] .post-preview .post-meta,
html[data-theme="dark"] .post-heading .post-meta,
html[data-theme="dark"] .readtime,
html[data-theme="dark"] #full-tags-list .tag-entry .entry-date,
html[data-theme="dark"] .blog-post .caption {
  color: var(--dk-muted);
}
html[data-theme="dark"] .blog-tags span,
html[data-theme="dark"] .blog-tags a,
html[data-theme="dark"] .blog-tags a:hover {
  color: var(--dk-text);
}
html[data-theme="dark"] .blog-tags a:hover {
  border-color: var(--dk-text);
}

/* --- Pager --- */
html[data-theme="dark"] .pagination .page-item .page-link {
  color: var(--dk-text);
  background-color: var(--dk-surface);
  border-color: var(--dk-border);
}
html[data-theme="dark"] .pagination .page-item .page-link:hover,
html[data-theme="dark"] .pagination .page-item .page-link:focus {
  color: #fff;
  border-color: #0085A1;
  background-color: #0085A1;
}

/* --- Tables, blockquotes, rules --- */
html[data-theme="dark"] table tr {
  border-top-color: var(--dk-border);
  background-color: var(--dk-bg);
}
html[data-theme="dark"] table tr:nth-child(2n) {
  background-color: var(--dk-surface);
}
html[data-theme="dark"] table tr th,
html[data-theme="dark"] table tr td {
  border-color: var(--dk-border);
}
html[data-theme="dark"] .blog-post blockquote {
  border-left-color: var(--dk-border);
}
html[data-theme="dark"] .blog-post hr {
  border-color: var(--dk-muted);
}

/* Screenshots are mostly white; take the glare off */
html[data-theme="dark"] .blog-post img {
  filter: brightness(0.9);
}

/* --- Code (see code.css) --- */
html[data-theme="dark"] pre {
  color: #c9d1d9;
}
html[data-theme="dark"] :not(pre) > code {
  background-color: rgba(110, 118, 129, 0.4);
}
html[data-theme="dark"] body .highlight > pre:not(.lineno) {
  border-color: var(--dk-border);
}
html[data-theme="dark"] .highlight > pre::-webkit-scrollbar-thumb {
  background-color: #484f58;
}
@supports (-moz-appearance: none) {
  html[data-theme="dark"] .highlight > pre {
    scrollbar-color: #484f58 transparent;
  }
}
html[data-theme="dark"] .highlight pre.lineno {
  color: #6e7681;
  border-right-color: var(--dk-border);
}
html[data-theme="dark"] .code-copy-btn {
  color: #c9d1d9;
  background: #21262d;
  border-color: var(--dk-border);
}
html[data-theme="dark"] .code-copy-btn:hover {
  background: #30363d;
}