/*
 * Custom theme styles to support light and dark modes.
 * When `dark-mode` is applied to the body element, the colours
 * throughout the site will shift to a darker palette.  These
 * overrides only set high‑level colours; the underlying Minimal
 * Mistakes styles still control layout and typography.
 */

/* Position the theme toggle to the far right of the masthead */
.theme-toggle-container {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.theme-toggle-button {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  padding: 0.25rem 0.5rem;
  color: inherit;
}

/* Dark mode overrides */
body.dark-mode {
  background-color: #121212;
  color: #e0e0e0;
}

body.dark-mode .masthead,
body.dark-mode .masthead__inner-wrap {
  background-color: #1e1e1e;
}

body.dark-mode .masthead__menu-item a,
body.dark-mode .masthead__menu-item--lg a {
  color: #e0e0e0;
}

body.dark-mode .masthead__menu-item a:hover,
body.dark-mode .masthead__menu-item--lg a:hover {
  color: #bb86fc;
}

body.dark-mode .page,
body.dark-mode .page__content {
  background-color: #121212;
  color: #e0e0e0;
}

body.dark-mode .sidebar,
body.dark-mode .page__hero--overlay {
  background-color: #1e1e1e;
}

body.dark-mode a {
  color: #bb86fc;
}

body.dark-mode a:hover {
  color: #d0a3ff;
}

body.dark-mode .notice--primary {
  background-color: #1f1f1f;
  border-color: #333;
  color: #e0e0e0;
}