/* ===== DARK PAGES (triggered by the script adding .theme--dark) ===== */
.theme--dark,
.theme--dark body {
  background:#000 !important;
  color:#fff !important;
}

/* Links */
.theme--dark a { color:#fff !important; }
.theme--dark a:hover { color:#ddd !important; }

/* Header / site nav (works for most Format themes) */
.theme--dark header,
.theme--dark .site-header {
  background:#000 !important;
  border-color:#222 !important;
}

/* Menu links */
.theme--dark nav a,
.theme--dark .site-nav a,
.theme--dark .menu a,
.theme--dark .navigation a {
  color:#fff !important;
}

/* Buttons */
.theme--dark .btn,
.theme--dark button {
  background:#fff !important;
  color:#000 !important;
  border-color:#fff !important;
}
.theme--dark .btn:hover { background:#ddd !important; color:#000 !important; }

/* Optional: any "light" sections inside dark pages */
.theme--dark .section--light { background:#111 !important; color:#fff !important; }

/* LOGO — quick invert so dark pages show a white mark */
.theme--dark .logo img,
.theme--dark .site-logo img {
  filter: invert(1) brightness(1.15) contrast(1.05);
}

/* If your logo is SVG, force fills to white */
.theme--dark .logo svg,
.theme--dark .site-logo svg { fill:#fff; color:#fff; }
/* Force Flex full-width wrappers to render black on dark pages */
.theme--dark .full-width-background-wrapper,
.theme--dark [class*="full-width-background-wrapper"],
.theme--dark [class*="full-width-wrapper"] {
  background:#000 !important;
  background-image:none !important;
  border-color:#000 !important;
}

/* Also set the page/flex containers shown in your inspector to black */
.theme--dark [class*="content_page_wrapper"],
.theme--dark [class*="content_page_container"],
.theme--dark [class*="content_page_row"],
.theme--dark [class*="_4DRMAT_content_wrap"],
.theme--dark [class*="_4DRMAT_content_row"],
.theme--dark [class*="_4DRMAT_module_flexible"] {
  background:#000 !important;
  background-image:none !important;
  border-color:#000 !important;
}

/* Nuke any inline white backgrounds that Flex blocks may carry */
.theme--dark [style*="background:#fff"],
.theme--dark [style*="background: #fff"],
.theme--dark [style*="background:#ffffff"],
.theme--dark [style*="background: #ffffff"],
.theme--dark [style*="background-color:#fff"],
.theme--dark [style*="background-color: #fff"],
.theme--dark [style*="background-color:#ffffff"],
.theme--dark [style*="background-color: #ffffff"] {
  background-color:#000 !important;
}
/* ——— SCANNERS: force magenta hover in dark theme ——— */
/* Cover sidebar + header menus + any nested spans/SVGs/underlines */
.theme--dark .navigation a:hover,
.theme--dark .navigation a:hover *,
.theme--dark nav a:hover,
.theme--dark nav a:hover *,
.theme--dark .site-nav a:hover,
.theme--dark .site-nav a:hover *,
.theme--dark .menu a:hover,
.theme--dark .menu a:hover *,
.theme--dark .site-sidebar a:hover,
.theme--dark .site-sidebar a:hover *,
.theme--dark header a:hover,
.theme--dark header a:hover *,
.theme--dark a:hover,
.theme--dark a:hover * {
  color:#ff00ff !important;
  text-decoration-color:#ff00ff !important;
  border-color:#ff00ff !important;   /* for underline/border hovers */
  outline-color:#ff00ff !important;
  caret-color:#ff00ff !important;
  fill:#ff00ff !important;           /* SVG icons */
  stroke:#ff00ff !important;
}
/* ===== /scanners MOBILE HEADER: target div#menu.menu ===== */
@media (max-width: 900px) {
  /* Make the top bar black with white text/icons */
  .theme--dark #menu.menu {
    background:#000 !important;
    color:#fff !important;
    border-color:#222 !important;
  }

  /* Ensure the logo is visible on mobile (no hiding/opacities) */
  .theme--dark #menu.menu .logo,
  .theme--dark #menu.menu .menu-logo {
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
  }
  /* If your logo is a PNG/SVG: keep it white on black */
  .theme--dark #menu.menu .logo img,
  .theme--dark #menu.menu .menu-logo img {
    display:block !important;
    max-height:56px !important;      /* adjust if your header is taller */
    /* If your uploaded logo is already WHITE, leave filter OFF. 
       If it's dark, uncomment the next line to invert it to white. */
    /* filter: invert(1) brightness(1.15) contrast(1.05); */
  }
  .theme--dark #menu.menu .logo svg,
  .theme--dark #menu.menu .menu-logo svg {
    fill:#fff !important; color:#fff !important;
  }

  /* Hamburger / toggle in white */
  .theme--dark #menu.menu .mobile-menu-open-button,
  .theme--dark #menu.menu .menu-open-button,
  .theme--dark #menu.menu .menu-toggle,
  .theme--dark #menu.menu .hamburger {
    color:#fff !important;
  }
  .theme--dark #menu.menu .mobile-menu-open-button svg *,
  .theme--dark #menu.menu .menu-toggle svg *,
  .theme--dark #menu.menu .hamburger svg * {
    fill:#fff !important; stroke:#fff !important;
  }

  /* Links inside the header area */
  .theme--dark #menu.menu a { color:#fff !important; }
  .theme--dark #menu.menu a:hover { color:#ff00ff !important; }
}
/* ===== /scanners drawer: white panel, black links, magenta hover ===== */
.theme--dark .mobile-menu-panel,
.theme--dark .mobile-menu-links {
  background:#fff !important;   /* keep panel white */
  color:#000 !important;
  opacity:1 !important;
  visibility:visible !important;
}

/* Make the drawer links black and visible */
.theme--dark .mobile-menu-links a {
  color:#000 !important;
  text-decoration-color:#000 !important;
  opacity:1 !important;
}

/* Hover/active state = site magenta */
.theme--dark .mobile-menu-links a:hover,
.theme--dark .mobile-menu-links a:focus,
.theme--dark .mobile-menu-links .selected > a {
  color:#ff00ff !important;
  text-decoration-color:#ff00ff !important;
}

/* If your theme nests spans/SVGs inside the links, color those too */
.theme--dark .mobile-menu-links a *,
.theme--dark .mobile-menu-links a:hover *,
.theme--dark .mobile-menu-links a:focus * {
  color:inherit !important;
  fill:currentColor !important;
  stroke:currentColor !important;
}