/* Light/dark theme. Light is the default look; dark applies when
   <html data-theme="dark"> (set by assets/js/theme.js). */

/* Toggle button: small pill at the top right, like multigeom.github.io */
.theme-toggle {
  position: fixed;
  top: 9px;
  right: 16px;
  z-index: 2000;
  border: 1px solid #d9d9d9;
  background: #fff;
  color: #1d1d1f;
  border-radius: 99px;
  padding: 3px 12px;
  font: inherit;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
}

.theme-toggle:hover {
  border-color: #369aae;
}

html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="dark"] .theme-toggle {
  background: #20232a;
  color: #e6e6e6;
  border-color: #3a3d44;
}

/* Page */
html[data-theme="dark"] body,
html[data-theme="dark"] #wrapper,
html[data-theme="dark"] #main,
html[data-theme="dark"] #header {
  background: #16181d;
}

html[data-theme="dark"] body,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] strong,
html[data-theme="dark"] b,
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,
html[data-theme="dark"] #header p {
  color: #e6e6e6;
}

html[data-theme="dark"] a {
  color: #e6e6e6;
}

html[data-theme="dark"] a:hover {
  color: #6fc3df !important;
}

/* Red accents from the original design, lightened for contrast */
html[data-theme="dark"] [style*="C70039"],
html[data-theme="dark"] #header h1,
html[data-theme="dark"] #header strong {
  color: #ff6b8b !important;
}

html[data-theme="dark"] hr,
html[data-theme="dark"] table td,
html[data-theme="dark"] table th {
  border-color: #3a3d44;
}

html[data-theme="dark"] table tbody tr:nth-child(2n + 1),
html[data-theme="dark"] blockquote,
html[data-theme="dark"] code,
html[data-theme="dark"] pre {
  background-color: #20232a;
}

/* Navigation bar (inline styles in each page) */
html[data-theme="dark"] .main-nav {
  background-color: #20232a;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

html[data-theme="dark"] .menu-toggle {
  color: #e6e6e6;
}

html[data-theme="dark"] .nav-links {
  background: #20232a;
  border-top-color: #3a3d44;
}

html[data-theme="dark"] .nav-link {
  color: #e6e6e6;
  border-bottom-color: #3a3d44;
}

html[data-theme="dark"] .nav-link:hover {
  background-color: #2a2d33;
}

@media (min-width: 768px) {
  html[data-theme="dark"] .nav-link:hover {
    background: none;
    color: #6fc3df;
  }
}

/* statement.html is a Word export with hard-coded black text on white */
html[data-theme="dark"] body.statement,
html[data-theme="dark"] body.statement * {
  background: transparent !important;
  color: #e6e6e6 !important;
}

html[data-theme="dark"] body.statement {
  background: #16181d !important;
}

html[data-theme="dark"] body.statement a,
html[data-theme="dark"] body.statement a * {
  color: #6fc3df !important;
}