/* zz_dark_link_readability.css — loaded last (zz_ prefix sorts after all other Dash assets).
   Fixes the dark-blue (#004aad) links/text that become unreadable on dark surfaces:
   - whenever the user's OS prefers dark color scheme
   - whenever an element sits inside a Bootstrap `.bg-dark`, navbar-dark, or other dark container

   Pattern: bump the brand blue from #004aad → #7eb8ff (sky blue, AA contrast on #1a1a1a)
   for text/link uses; keep #004aad for backgrounds/borders so brand identity stays.
*/

/* --- 1. Universal: any link inside a dark container --- */
.bg-dark a,
.bg-dark .verse-link,
.bg-dark .character-link,
.text-bg-dark a,
.navbar-dark a,
.navbar.bg-dark .nav-link,
.navbar[data-bs-theme="dark"] a,
footer.bg-dark a,
.bg-secondary a {
    color: #7eb8ff !important;
}
.bg-dark a:hover,
.text-bg-dark a:hover,
.navbar-dark a:hover,
.navbar.bg-dark .nav-link:hover,
footer.bg-dark a:hover,
.bg-secondary a:hover {
    color: #b8d8ff !important;
}

/* --- 2. OS-level dark mode override for the whole document --- */
@media (prefers-color-scheme: dark) {
    /* General anchor tags default brand-blue */
    body a {
        color: #7eb8ff;
    }
    body a:hover {
        color: #b8d8ff;
    }

    /* Verse / character links (defined in shared_styles.css) */
    .verse-link {
        color: #7eb8ff !important;
    }
    .verse-link:hover {
        color: #e6b8f0 !important;
    }
    .character-link {
        color: #c89dde !important;
    }
    .character-link:hover {
        color: #7eb8ff !important;
    }

    /* Tab styling — active tab needs to read on a dark backdrop */
    .nav-tabs .nav-link.active {
        color: #7eb8ff !important;
        border-bottom-color: #7eb8ff !important;
    }
    .nav-tabs .nav-link {
        color: #c0c0c0;
    }
    .nav-tabs .nav-link:hover {
        color: #7eb8ff !important;
        border-bottom-color: rgba(126, 184, 255, 0.4) !important;
    }

    /* Header text that was hardcoded #004aad */
    h1[style*="#004aad"], h2[style*="#004aad"], h3[style*="#004aad"], h4[style*="#004aad"], h5[style*="#004aad"],
    p[style*="#004aad"], span[style*="#004aad"], div[style*="#004aad"] {
        color: #7eb8ff !important;
    }
}

/* --- 3. Bootstrap text-primary class (defaults to brand blue) --- */
@media (prefers-color-scheme: dark) {
    .text-primary {
        color: #7eb8ff !important;
    }
}