/**
 * Modernacy - Dark Mode Styles
 * Matches the live site's dark mode visual identity.
 */

html.drdt-dark-mode {
  --color-bg: #1A1A1A;
  --color-text: #d2d2d2;
  --color-text-muted: #9e9e9e;
  --color-head: #FFFFFF;
  --color-link: #9e9e9e;
  --color-link-hover: #FFFFFF;
  --color-border: #333333;
  --color-social-bg: #2d2d2d;
  --color-social-hover: #000000;
  --color-input-bg: #242424;
}

/* Logo Swap */
html.drdt-dark-mode .logo-dark {
  display: none !important;
}

html.drdt-dark-mode .logo-white {
  display: block !important;
}

/* Floating Dark Mode Toggle Button */
.dark_switch_box {
  position: fixed;
  left: 6%;
  bottom: 20px;
  width: 30px;
  height: 30px;
  z-index: 999;
  cursor: pointer;
  filter: invert(1);
  opacity: 0.75;
  transition: all 0.3s ease-in-out;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dark_switch_box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.dark_switch_box:hover {
  opacity: 1;
  transform: scale(1.2);
}

html.drdt-dark-mode .dark_switch_box {
  filter: invert(0);
}

/* Footer in Dark Mode */
html.drdt-dark-mode .site-footer {
  background-color: #000000;
  border-top-color: #222222;
}

/* Active Navigation & Tabs in Dark Mode */
html.drdt-dark-mode .menu-item.current-menu-item a {
  color: #ffffff;
  border-bottom-color: #cccccc;
}

html.drdt-dark-mode .tab-button.active-button {
  color: #ffffff;
  border-bottom-color: #ffffff;
}

/* Form controls in Dark Mode */
html.drdt-dark-mode .form-input,
html.drdt-dark-mode .form-textarea,
html.drdt-dark-mode .search-field {
  border-color: #444444;
  color: #ffffff;
}

html.drdt-dark-mode .form-submit-btn {
  background-color: #ffffff;
  color: #1A1A1A;
}

html.drdt-dark-mode .form-submit-btn:hover {
  background-color: #e0e0e0;
}

/* Metadata pills in Dark Mode */
html.drdt-dark-mode .project-details-meta {
  background-color: #242424;
  border: 1px solid #333333;
}