/* Native dark theme. Overrides the light palette in main.css with explicit
   colors — no whole-page filter inversion. Loaded render-blocking as
   <link disabled id="dark-mode-theme"> and toggled by darkmode.js.
   The footer, banner, nav dropdown, mobile nav panel, and code blocks
   (syntax.css) are already dark in the base theme and need no overrides. */

/* Base */

html {
    color-scheme: dark;
    background-color: #192224;
}

body {
    color: #c6cccd;
}

h1, h2, h3, h4, h5, h6 {
    color: #e3e7e8;
}

strong, b {
    color: #e3e7e8;
}

a {
    color: #5f9bf5;
}

blockquote {
    border-left-color: #39464b;
}

hr {
    border-top-color: #39464b;
}

/* Inline code chips (block code in .chroma is already dark via syntax.css) */

code {
    background-color: #2a363b;
}

/* Media — dim so bright/white images and videos don't glare on dark pages.
   Same policy for the third-party GitHub button iframes, which always render
   in GitHub's light scheme and can't be styled cross-origin. */

img, video,
iframe[src^="https://buttons.github.io"] {
    -webkit-filter: brightness(70%);
    filter: brightness(70%);
}

/* Wrappers */

#header-wrapper {
    background: #1d2528;
}

#main-wrapper {
    background: #20282b;
}

#main-wrapper .major h2 {
    background: #20282b;
}

header.major {
    border-top-color: #39464b;
}

header.major h2 {
    background: #232c30;
}

/* Boxes (content cards) */

.box {
    background: #232c30;
    border-bottom-color: #11181a;
}

/* Homepage intro: the middle column's card-edge "wings" are drawn with
   hardcoded white box-shadows in main.css — repaint them in the dark
   surface color, keeping the soft drop shadow for the raised effect */

#intro .middle:before {
    box-shadow: 32px 0 0 0 #20282b, 0 -32px 0 0 #20282b, 0 32px 0 0 #20282b, 32px 32px 0 0 #20282b, 32px -32px 0 0 #20282b, 0 0 32px 0 rgba(0, 0, 0, 0.4);
}

#intro .middle:after {
    box-shadow: -32px 0 0 0 #20282b, 0 -32px 0 0 #20282b, 0 32px 0 0 #20282b, -32px 32px 0 0 #20282b, -32px -32px 0 0 #20282b, 0 0 32px 0 rgba(0, 0, 0, 0.4);
}

/* Header & nav */

#header h1 {
    color: #e3e7e8;
}

#darkmode > a {
    color: #a5adb0;
}

#nav > ul > li > a {
    color: #a5adb0;
}

#nav > ul > li:hover > a, #nav > ul > li.active > a {
    background: #2a363b;
}

/* Forms */

input, textarea, select {
    color: #c6cccd;
}

form label {
    color: #e3e7e8;
}

form input[type=text],
form input[type=email],
form select,
form textarea {
    background: #1b2326;
    border-color: #39464b;
}

form .formerize-placeholder {
    color: #7e898c !important;
}

form ::-webkit-input-placeholder {
    color: #7e898c !important;
}

form :-moz-placeholder {
    color: #7e898c !important;
}

form ::-moz-placeholder {
    color: #7e898c !important;
}

form :-ms-input-placeholder {
    color: #7e898c !important;
}

/* Highlight box callout */

.highlightbox {
    background: #3d3015;
}

/* Bootstrap tables */

.table {
    --bs-table-striped-color: #c6cccd;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.04);
    --bs-table-active-color: #c6cccd;
    --bs-table-active-bg: rgba(255, 255, 255, 0.1);
    --bs-table-hover-color: #c6cccd;
    --bs-table-hover-bg: rgba(255, 255, 255, 0.075);
    color: #c6cccd;
    border-color: #39464b;
}

/* Code block copy button (clipboard.css) */

.clipboard-button {
    /* !important: main.css's generic `button { color: #fff !important }`
       would otherwise win and leave the Copied/Error feedback text white */
    color: #9aa4a7 !important;
    border-color: #4a575c;
    background-color: #2a363b;
}

.clipboard-button > svg {
    fill: #9aa4a7;
}

.clipboard-button:hover {
    border-color: #5a686e;
    background-color: #324046;
}

.clipboard-button:hover > svg {
    fill: #b5bfc2;
}

/* Lightbox frame (lightbox.css) */

.lb-outerContainer {
    background-color: #20282b;
}