/* Dark mode gap-fill: activates alongside Porto's html.dark skin and Bootstrap's
   data-bs-theme="dark" (both applied by the inline script in _Layout.cshtml).
   Everything here is html.dark-scoped, so light mode is untouched. */

html.dark {
    color-scheme: dark;
}

/* Porto's dark skin keeps body text at var(--default) (#777), which is below AA
   contrast on var(--dark) backgrounds */
html.dark body {
    color: var(--grey-800);
}

/* Porto utility used for the logged-in username in the header dropdown */
html.dark .text-color-dark {
    color: var(--light) !important;
}

html.dark #footer {
    border-top-color: var(--dark--200);
}

/* Porto's dark skin dims modal titles to var(--default) (#777) - same AA problem */
html.dark .modal-header h1, html.dark .modal-header h2, html.dark .modal-header h3,
html.dark .modal-header h4, html.dark .modal-header h5, html.dark .modal-header h6 {
    color: var(--grey-800);
}

/* Syntax Highlighting for Code Blocks (dark variants of the custom.css light theme;
   also overrides the CDN prism.min.css light theme) */
html.dark pre[class*="language-"] {
    background: var(--dark-100);
    border-color: var(--dark--200);
}

/* prism.min.css sets a white text-shadow that ghosts on dark backgrounds */
html.dark code[class*="language-"],
html.dark pre[class*="language-"] {
    color: #ced4da;
    text-shadow: none;
}

html.dark :not(pre) > code[class*="language-"] {
    background: var(--dark--100);
}

/* C# Syntax Highlighting */
html.dark .language-csharp .token.keyword {
    color: #569cd6;
}

html.dark .language-csharp .token.string {
    color: #ce9178;
}

html.dark .language-csharp .token.comment {
    color: #6a9955;
}

html.dark .language-csharp .token.number {
    color: #b5cea8;
}

html.dark .language-csharp .token.operator {
    color: #d4d4d4;
}

html.dark .language-csharp .token.punctuation {
    color: #808080;
}

html.dark .language-csharp .token.class-name {
    color: #4ec9b0;
}

html.dark .language-csharp .token.function {
    color: #dcdcaa;
}

html.dark .language-csharp .token.namespace {
    color: #9cdcfe;
}

/* JavaScript Syntax Highlighting */
html.dark .language-javascript .token.keyword,
html.dark .language-js .token.keyword {
    color: #c586c0;
}

html.dark .language-javascript .token.string,
html.dark .language-js .token.string {
    color: #ce9178;
}

html.dark .language-javascript .token.comment,
html.dark .language-js .token.comment {
    color: #6a9955;
}

html.dark .language-javascript .token.number,
html.dark .language-js .token.number {
    color: #b5cea8;
}

html.dark .language-javascript .token.function,
html.dark .language-js .token.function {
    color: #dcdcaa;
}

/* HTML Syntax Highlighting */
html.dark .language-html .token.tag {
    color: #569cd6;
}

html.dark .language-html .token.attr-name {
    color: #9cdcfe;
}

html.dark .language-html .token.attr-value {
    color: #ce9178;
}

/* CSS Syntax Highlighting */
html.dark .language-css .token.selector {
    color: #c586c0;
}

html.dark .language-css .token.property {
    color: #9cdcfe;
}

html.dark .language-css .token.important {
    color: #c586c0;
}

/* SQL keyword/string colors in custom.css are already dark-friendly (#569cd6 / #ce9178) */

/* Generic fallback for other languages */
html.dark pre[class*="language-"] .token.keyword {
    color: #569cd6;
}

html.dark pre[class*="language-"] .token.string {
    color: #ce9178;
}

html.dark pre[class*="language-"] .token.comment {
    color: #6a9955;
}

html.dark pre[class*="language-"] .token.number {
    color: #b5cea8;
}

html.dark pre[class*="language-"] .token.operator {
    color: #d4d4d4;
}

html.dark pre[class*="language-"] .token.punctuation {
    color: #808080;
}

/* Blog tag links (light-mode blues live in custom.css) */
html.dark .post-tags .tag-link {
    color: #6ea8fe;
}

html.dark .post-tags .tag-link:hover {
    color: #9ec5fe;
}

html.dark .post-tags .tag-link.selected {
    color: #75b798;
}

/* About-author box (light variant in custom.css) */
html.dark .about-author {
    background-color: var(--dark--100);
    border-left-color: var(--dark--300);
}

/* Porto's .text-secondary is brand red #b4040a - below AA contrast on dark backgrounds */
html.dark .text-secondary,
html.dark .text-color-secondary {
    color: #ea868f !important;
}

/* Page-header underline track is 80% white - too stark between two dark bands */
html.dark .page-header.page-header-classic:after {
    background: var(--dark--300);
}

/* Mobile nav: Porto's dark skin darkens the collapsed-nav backdrop but keeps
   link text near-black (its mobile nav is light unless .header-nav-main-mobile-dark
   is used, via an !important var(--dark) rule) */
@media (max-width: 991px) {
    html.dark #header .header-nav-main nav > ul li a {
        color: var(--grey-500);
    }

    html.dark #header .header-nav-main:not(.header-nav-main-mobile-dark) nav > ul > li > a:not(.active) {
        color: var(--grey-500) !important;
    }
}

/* No-JS fallback: the logo <picture> swaps to white via prefers-color-scheme even
   without JS, but the html.dark class (and the rest of the dark skin) needs the
   inline script. Keep the header dark so the white logo is never invisible. */
@media (prefers-color-scheme: dark) {
    html:not(.dark):not(.app-mode) #header .header-body {
        background: var(--dark);
        border-top-color: var(--dark--200);
    }
}