/* Shared language/theme controls and dark palette. */
.top-bar-inner {
  gap: 0.65rem;
}

.theme-switcher {
  display: inline-flex;
  margin-left: 0.35rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
}

.theme-button {
  width: 2rem;
  min-height: 1.8rem;
  padding: 0.1rem;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  background: transparent;
  cursor: pointer;
  line-height: 1;
}

.theme-button:last-child { border-right: 0; }
.theme-button:hover { background: rgba(255, 255, 255, 0.14); }
.theme-button.active {
  color: #8f1018;
  background: #fff;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --mcgill-dark-red: #e43a48;
  --text-dark: #f3f4f6;
  --text-medium: #c5cad3;
  --text-light: #aeb6c2;
  --background: #15171a;
  --background-soft: #1e2125;
  --background-muted: #292d32;
  --border: #3e444d;
  --border-light: #3e444d;
  --border-medium: #555d68;
  background: #15171a;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .main-navigation,
html[data-theme="dark"] .site-header {
  background-color: var(--background) !important;
}

/* The individual pages predate the theme and hard-code white on their
   central content surfaces. These overrides keep each entire content column
   in the same dark palette as its text. */
html[data-theme="dark"] .page-frame,
html[data-theme="dark"] .navigation-list {
  color: var(--text-dark) !important;
  background: var(--background) !important;
  background-color: var(--background) !important;
}

html[data-theme="dark"] .navigation-list a:hover,
html[data-theme="dark"] .navigation-list a:focus-visible {
  background: var(--background-soft) !important;
  background-color: var(--background-soft) !important;
}

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

html[data-theme="dark"] :is(
  .card, .member-card, .publication-card, .patent-card, .service-card,
  .contact-card, .outreach-card, .equipment-card, .stat-card,
  .filter-panel, .content-card, .info-card, .map-card, .alumni-card,
  .project-card, .video-card, .year-block, .service-details,
  .slideshow-container, .mySlides, .mySlides > a
) {
  color: var(--text-dark);
  background-color: var(--background-soft) !important;
  border-color: var(--border) !important;
}

html[data-theme="dark"] :is(
  .toolbar, .location-section, .team-card, .scholar-box,
  .visitor-note, .service-details summary, .content-tag,
  .contact-button, .outreach-link
) {
  color: var(--text-dark);
  background: var(--background-soft) !important;
  border-color: var(--border) !important;
}

html[data-theme="dark"] :is(.outreach-image.contain, .equipment-image) {
  background: var(--background-soft) !important;
}

html[data-theme="dark"] .publication-item {
  border-color: var(--border) !important;
}

html[data-theme="dark"] :is(
  .news-panel, .news-heading, .news-list, .news-list li
) {
  color: var(--text-dark) !important;
  background: var(--background-soft) !important;
  background-color: var(--background-soft) !important;
  border-color: var(--border) !important;
  scrollbar-color: #606873 var(--background-soft);
}

html[data-theme="dark"] .news-panel :is(
  p, span, strong, em, a
) {
  color: var(--text-dark) !important;
}

html[data-theme="dark"] .news-panel .news-date {
  color: #ff6673 !important;
}

/* Use a clean monochrome treatment so the transparent wordmark remains
   legible against the dark header. Light mode keeps the original red/black. */
html[data-theme="dark"] .site-logo {
  filter: brightness(0) invert(1);
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  color: var(--text-dark);
  background: #24282d;
  border-color: var(--border);
}

@media (max-width: 520px) {
  .theme-switcher { margin-left: auto; }
  .theme-button { width: 1.85rem; }
}