/*
 * Scoped to one legacy technical page only.
 * The source diagrams are supplied on white canvases, so dark mode is produced
 * with an inversion + hue rotation. This keeps the line art readable while
 * changing the white canvas to near black.
 */

body.hfdxarc-noise-dark-panels {
    --hfdx-ndp-bg: #071019;
    --hfdx-ndp-panel: #0c1823;
    --hfdx-ndp-panel-2: #102231;
    --hfdx-ndp-border: rgba(126, 199, 235, .22);
    --hfdx-ndp-text: #eaf5fb;
    --hfdx-ndp-muted: #a9bfcc;
    --hfdx-ndp-accent: #55d6ff;
}

body.hfdxarc-noise-dark-panels .entry-content {
    color: var(--hfdx-ndp-text);
}

body.hfdxarc-noise-dark-panels .entry-content h1,
body.hfdxarc-noise-dark-panels .entry-content h2,
body.hfdxarc-noise-dark-panels .entry-content h3,
body.hfdxarc-noise-dark-panels .entry-content h4,
body.hfdxarc-noise-dark-panels .entry-content h5,
body.hfdxarc-noise-dark-panels .entry-content h6 {
    color: #ffffff;
}

/* Remove the glaring white panel around legacy image paragraphs and figures. */
body.hfdxarc-noise-dark-panels .entry-content figure,
body.hfdxarc-noise-dark-panels .entry-content .wp-block-image,
body.hfdxarc-noise-dark-panels .entry-content .wp-caption,
body.hfdxarc-noise-dark-panels .entry-content p:has(> img),
body.hfdxarc-noise-dark-panels .entry-content a:has(> img) {
    overflow: hidden;
    padding: clamp(10px, 1.5vw, 18px) !important;
    border: 1px solid var(--hfdx-ndp-border) !important;
    border-radius: 16px !important;
    background: linear-gradient(145deg, var(--hfdx-ndp-panel-2), var(--hfdx-ndp-panel)) !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .28) !important;
}

body.hfdxarc-noise-dark-panels .entry-content p:has(> img) {
    margin: 18px 0 10px !important;
}

body.hfdxarc-noise-dark-panels .entry-content figure,
body.hfdxarc-noise-dark-panels .entry-content .wp-caption,
body.hfdxarc-noise-dark-panels .entry-content .wp-block-image {
    margin-top: 18px !important;
    margin-bottom: 10px !important;
}

/* Convert the original white image canvas to a dark diagram. */
body.hfdxarc-noise-dark-panels--deep .entry-content img:not(.emoji):not(.avatar):not(.custom-logo),
body.hfdxarc-noise-dark-panels--deep .entry-content input[type="image"] {
    filter: invert(1) hue-rotate(180deg) brightness(.84) contrast(1.15) saturate(1.08) !important;
}

body.hfdxarc-noise-dark-panels--soft .entry-content img:not(.emoji):not(.avatar):not(.custom-logo),
body.hfdxarc-noise-dark-panels--soft .entry-content input[type="image"] {
    filter: invert(.91) hue-rotate(180deg) brightness(.95) contrast(1.08) saturate(1.04) !important;
}

body.hfdxarc-noise-dark-panels--original .entry-content img:not(.emoji):not(.avatar):not(.custom-logo),
body.hfdxarc-noise-dark-panels--original .entry-content input[type="image"] {
    filter: none !important;
}

body.hfdxarc-noise-dark-panels .entry-content img:not(.emoji):not(.avatar):not(.custom-logo) {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0 auto !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #09131c !important;
    box-shadow: none !important;
}

/* Captions should no longer look like detached dark text below a white card. */
body.hfdxarc-noise-dark-panels .entry-content figcaption,
body.hfdxarc-noise-dark-panels .entry-content .wp-caption-text,
body.hfdxarc-noise-dark-panels .entry-content p + p:has(> em:only-child) {
    margin: 8px 0 0 !important;
    color: var(--hfdx-ndp-muted) !important;
    font-size: .9rem;
    text-align: center;
}

body.hfdxarc-noise-dark-panels .entry-content hr {
    border-color: rgba(126, 199, 235, .16) !important;
}

body.hfdxarc-noise-dark-panels .entry-content table,
body.hfdxarc-noise-dark-panels .entry-content pre,
body.hfdxarc-noise-dark-panels .entry-content blockquote {
    border-color: var(--hfdx-ndp-border) !important;
    background: var(--hfdx-ndp-panel) !important;
    color: var(--hfdx-ndp-text) !important;
}

body.hfdxarc-noise-dark-panels .entry-content a {
    color: var(--hfdx-ndp-accent);
}

@media (max-width: 760px) {
    body.hfdxarc-noise-dark-panels .entry-content figure,
    body.hfdxarc-noise-dark-panels .entry-content .wp-block-image,
    body.hfdxarc-noise-dark-panels .entry-content .wp-caption,
    body.hfdxarc-noise-dark-panels .entry-content p:has(> img),
    body.hfdxarc-noise-dark-panels .entry-content a:has(> img) {
        padding: 8px !important;
        border-radius: 12px !important;
    }
}