/*
 * 1. Target the ENTIRE page body for this specific article
 */
.page--black-background-view {
  /* Forces the HTML and BODY background to black */
  background-color: #000000 !important;
  background: #000000 !important;
  /* Ensures all default text is white */
  color: #ffffff;
}

/*
 * 2. Crucially, force the white container (<main role="main">) to black.
 * Note: Your theme might have an outer wrapper like .layout-container that
 * also needs to be forced to black.
 */
.page--black-background-view main[role="main"],
.page--black-background-view .layout-container, /* Include this just in case */
.page--black-background-view .page-wrapper {    /* Include this just in case */
  background-color: #000000 !important;
}

/*
 * 3. Preserve the styling for the article wrapper itself
 * (The class added in the my_theme_name_preprocess_node function)
 */
.node--black-background-mode {
  background-color: #000000;
  color: #ffffff;
  padding: 30px;
}

/*
 * 4. Ensure ALL text elements remain white
 */
.page--black-background-view h1,
.page--black-background-view h2,
.page--black-background-view h3,
.page--black-background-view p,
.page--black-background-view label,
.page--black-background-view li,
.page--black-background-view span {
  color: #ffffff !important;
}

/* ======================================= */
/* FIX 1: RESTORE MENU LINK COLORS         */
/* ======================================= */
/* Targets all navigation links in the header when on the black background page */
.page--black-background-view header .nav > li > a,
.page--black-background-view header .navbar-default .navbar-nav > li > a,
.page--black-background-view header .dropdown-menu > li > a {
    /* Use the original light white color from colors.css */
    color: #fffffe !important;
}

/* FIX 2: RESTORE FOOTER LINK COLORS       */
/* ======================================= */
/* Targets all links inside the footer when on the black background page */
.page--black-background-view body > footer nav ul.menu.nav li a,
.page--black-background-view body > footer section a {
    /* Use the original light white color from colors.css */
    color: #fffefe !important;
}

/* FIX 3: ENSURE MENU/FOOTER BACKGROUNDS ARE CORRECT (if not black) */
/* If the menu or footer are not supposed to be black, you need to restore their BG color. */
/* Based on colors.css, header is #343a40 (dark grey) and footer is #191919 (black). */
/* If you want the header to return to dark grey: */
.page--black-background-view header {
    background: #343a40 !important;
}