/*
 * Portnox theme.
 * Section 1: Oxygen default color variables (from "How to Migrate a
 * Publishing Template to be Dark Mode-Ready", step 1). Unchanged.
 * Section 2: Portnox dark overrides. Scoped to dark mode on screen, so
 * light mode and print stay unchanged.
 * Section 3: Header layout on small screens. Applies in both modes.
 * Section 4: Font. Applies in both modes.
 * Section 5: Portnox light overrides (links, panels, borders, search icon).
 * Text color in light mode stays as defined in custom.css.
 */

/* ---------- Section 1: Oxygen variables ---------- */

:root {
    /* General */
    --wh-primary-bg: #fff;
    --wh-primary-color: #000;
    --wh-secondary-bg: #000;
    --wh-secondary-color: #fff;
    --wh-strong-color: #888;
    --wh-soft-color: #ccc;
    --wh-subtle-color: #f2f2f2;

    --wh-top-menu-bg: #e6e6e6;
    --wh-main-page-toc-bg: #f2f8ff;
    --wh-main-page-toc-border: #c0c0c0;
    --wh-main-page-shortdesc-color: #0d1a2b;
    --wh-close-toc-icon-border: #343a40;
    --wh-close-toc-button-shadow: rgba(0, 0, 0, .16);

    --wh-link-color: #337ab7;
    --wh-label-color: #666;
    --wh-pre-bg: #eee;
    --wh-tooltip-color: #5185cb;
    --wh-code-color: #800000;
    --wh-boolean-color: #008000;
    --wh-state-color: #ff0000;
    --wh-syntaxdiagram-color: #800000;
    --wh-markup-color: #639;
    --wh-fig-border: #c0c0c0;
    --wh-caution-bg: #ffd100;
    --wh-danger-bg: #c8102e;
    --wh-warning-bg: #ff8200;
    --wh-hazardstatement-bg: #0072ce;
    --wh-indexterm-bg: #fdf;
    --wh-go2top-bg: #444;
    --wh-go2top-border: #999;
    --wh-toggle-border: #347bb7;

    /* Search */
    --wh-search-color: #c93416;
    --wh-search-breadcrumb-color: #ccc;
    --wh-search-loader-base-bg: #eaecec;
    --wh-search-loader-glow-bg: #f3f3f3;
    --wh-search-facets-bg: #e3ebf3;
    --wh-search-facets-disabled-color: #b7b6b6;
    --wh-search-facets-border: #ebebeb;
    --wh-search-results-facets-bg: #f5f5f5;
    --wh-search-results-facets-color: #212c37;
    --wh-highlight-bg: #ffff88;
    --wh-scroll-bg: #d6d6d6;

    /* Change Tracking */
    --wh-oxy-delete-color: #ff0000;
    --wh-oxy-insert-color: #0000ff;
    --wh-oxy-change-done-color: #808080;
    --wh-oxy-range-color: #800000;
    --wh-oxy-comment-border: #ffa500;
    --wh-oxy-change-bg: #ffff00;
    --wh-oxy-attributes-footnote-bg: #00ffff;
    --wh-oxy-comment-footnote-bg: #ffffaa;
    --wh-oxy-delete-footnote-bg: #ffaaaa;
    --wh-oxy-insert-footnote-bg: #ddddff;

    /* Syntax Highlight */
    --wh-hl-json_key-color: #7263b9;
    --wh-hl-keyword-color: #7f0055;
    --wh-hl-string-color: #2a00ff;
    --wh-hl-comment-color: #006400;
    --wh-hl-directive-color: #8b26c9;
    --wh-hl-tag-color: #000096;
    --wh-hl-attribute-color: #ff7935;
    --wh-hl-value-color: #993300;
    --wh-hl-html-color: #000080;
    --wh-hl-xsl-color: #0066ff;
    --wh-hl-annotation-color: #808080;
    --wh-hl-tag-doctype-comment-color: #3f5fbf;
    --wh-hl-tag-doctype-color: #0000ff;

    /* OpenAPI */
    --wh-openapi-border: #c5c5c5;
    --wh-openapi-post-bg: #c2f2cb;
    --wh-openapi-get-bg: #ccebff;
    --wh-openapi-delete-bg: #ffceca;
    --wh-openapi-put-bg: #ffe7c7;
    --wh-openapi-head-bg: #f4e6ff;
}

@media screen {
    :root[data-wh-theme = "dark"] {
        color-scheme: dark;
        /* General */
        --wh-primary-bg: #212529;
        --wh-primary-color: #e3e3e3;
        --wh-secondary-bg: #212529;
        --wh-secondary-color: #e3e3e3;
        --wh-strong-color: #e0e0e0;
        --wh-subtle-color: #3a3b3c;

        --wh-top-menu-bg: #2b3035;
        --wh-main-page-toc-bg: #22303c;
        --wh-main-page-shortdesc-color: #d5d5d5;
        --wh-close-toc-icon-border: var(--wh-primary-color);
        --wh-close-toc-button-shadow: rgba(255, 255, 255, .16);

        --wh-link-color: #76a5e0;
        --wh-label-color: #bbb;
        --wh-pre-bg: #444;
        --wh-code-color: #ffa500;
        --wh-boolean-color: #66ff66;
        --wh-state-color: #ff6666;
        --wh-syntaxdiagram-color: #ff4d4d;
        --wh-markup-color: #d1b3ff;
        --wh-caution-bg: #7f6000;
        --wh-danger-bg: #62002b;
        --wh-warning-bg: #993500;
        --wh-hazardstatement-bg: #0025cb;

        /* Search */
        --wh-search-color: #a2311a;
        --wh-search-breadcrumb-color: #555555;
        --wh-search-loader-base-bg: #3a3f44;
        --wh-search-loader-glow-bg: #4b525a;
        --wh-search-facets-bg: #2d333b;
        --wh-search-facets-disabled-color: var(--wh-label-color);
        --wh-search-facets-border: #444;
        --wh-search-results-facets-bg: #2c2f35;
        --wh-search-results-facets-color: #d8dee9;
        --wh-highlight-bg: #777700;
        --wh-scroll-bg: #444;

        /* Change Tracking */
        --wh-oxy-delete-color: #ff6b6b;
        --wh-oxy-insert-color: #66aaff;
        --wh-oxy-change-done-color: #ccc;
        --wh-oxy-range-color: #ff4d4d;
        --wh-oxy-comment-border: #995f00;
        --wh-oxy-change-bg: #666600;
        --wh-oxy-attributes-footnote-bg: #006666;
        --wh-oxy-comment-footnote-bg: #363600;
        --wh-oxy-delete-footnote-bg: #994d4d;
        --wh-oxy-insert-footnote-bg: #666699;

        /* Syntax Highlight */
        --wh-hl-json_key-color: #b5adda;
        --wh-hl-keyword-color: #ff89d8;
        --wh-hl-string-color: #b7a8ff;
        --wh-hl-comment-color: #00cf00;
        --wh-hl-directive-color: #d0a0ed;
        --wh-hl-tag-color: #aaaaff;
        --wh-hl-attribute-color: #ff9763;
        --wh-hl-value-color: #ff9661;
        --wh-hl-html-color: #a9a9ff;
        --wh-hl-xsl-color: #80b2ff;
        --wh-hl-annotation-color: #b0b0b0;
        --wh-hl-tag-doctype-comment-color: #a2b2e0;
        --wh-hl-tag-doctype-color: #a8a8ff;

        /* OpenAPI */
        --wh-openapi-border: #8a8a8a;
        --wh-openapi-post-bg: #7eae7a;
        --wh-openapi-get-bg: #7a9fcf;
        --wh-openapi-delete-bg: #b2746e;
        --wh-openapi-put-bg: #bfae86;
        --wh-openapi-head-bg: #7a70b2;
    }
}

/* ---------- Section 2: Portnox dark overrides ---------- */

@media screen {

/*
   * Dark mode palette.
   *   #151515  page background
   *   #202020  panels (TOC, breadcrumb bar, code, table rows)
   *   #2A2A2A  borders (Portnox Dark Gray)
   *   #B3B3B6  text and headings (about 8.7:1 on #151515)
   *   #1F9AAD  links (about 5.5:1 on #151515)
   *   #93E0EC  link hover
   */
    :root[data-wh-theme = "dark"] {
        --px-bg: #151515;
        --px-panel: #202020;
        --px-border: #2A2A2A;
        --px-text: #B3B3B6;
        --px-heading: #B3B3B6;
        --px-link: #1F9AAD;
        --px-link-hover: #93E0EC;

        /* Map Oxygen variables to the palette */
        --wh-primary-bg: var(--px-bg);
        --wh-primary-color: var(--px-text);
        --wh-secondary-bg: var(--px-bg);
        --wh-secondary-color: var(--px-text);
        --wh-subtle-color: var(--px-panel);
        --wh-top-menu-bg: var(--px-panel);
        --wh-main-page-toc-bg: var(--px-bg);
        --wh-main-page-toc-border: var(--px-border);
        --wh-main-page-shortdesc-color: var(--px-text);
        --wh-link-color: var(--px-link);
        --wh-tooltip-color: var(--px-link);
        --wh-pre-bg: var(--px-panel);
        --wh-code-color: var(--px-text);
        --wh-fig-border: var(--px-border);
    }

    /* Page, header, footer, and search band (light.css sets white) */
    :root[data-wh-theme = "dark"] body,
    :root[data-wh-theme = "dark"] .navbar,
    :root[data-wh-theme = "dark"] .wh_header,
    :root[data-wh-theme = "dark"] .wh_footer,
    :root[data-wh-theme = "dark"] .wh_search_input {
        background-color: var(--px-bg) !important;
    }

    /*
   * Logo: show the approved logo for dark backgrounds.
   * Case 1: the logo is an <img>. WebHelp can add a query string to the
   * file name (for example logo.svg?buildId=...), so the rule matches
   * "images/logo.svg" anywhere in the src. The padding pushes the light
   * logo out of the visible box, and the dark logo shows as the background.
   * The path is relative to theme.css (output folder oxygen-webhelp/template).
   */
    :root[data-wh-theme = "dark"] img[src *= "images/logo.svg"] {
        box-sizing: border-box !important;
        width: 164px !important;
        height: 42px !important;
        padding-left: 164px !important;
        background: url("images/logo-dark.svg") left center/contain no-repeat !important;
    }
    /*
   * Case 2: the logo is inlined as <svg id="DESIGN">. Recolor the text
   * paths (class cls-1) to Icy White, as in logo-dark.svg.
   */
    :root[data-wh-theme = "dark"] svg#DESIGN .cls-1 {
        fill: #FAFEFE !important;
    }

    /* Body text (light.css and custom.css set dark text) */
    :root[data-wh-theme = "dark"] body,
    :root[data-wh-theme = "dark"] .wh_topic_content,
    :root[data-wh-theme = "dark"] .wh_content_area,
    :root[data-wh-theme = "dark"] .wh_footer {
        color: var(--px-text);
    }
    :root[data-wh-theme = "dark"] p,
    :root[data-wh-theme = "dark"] li {
        color: inherit;
    }

    /* Headings and publication title */
    :root[data-wh-theme = "dark"] h1,
    :root[data-wh-theme = "dark"] h2,
    :root[data-wh-theme = "dark"] h3,
    :root[data-wh-theme = "dark"] h4,
    :root[data-wh-theme = "dark"] h5,
    :root[data-wh-theme = "dark"] h6,
    :root[data-wh-theme = "dark"] .wh_publication_title a .title {
        color: var(--px-heading) !important;
    }

    /* Links */
    :root[data-wh-theme = "dark"] body a {
        color: var(--px-link) !important;
    }
    :root[data-wh-theme = "dark"] body a:hover {
        color: var(--px-link-hover) !important;
    }

    /* Panels: TOC, breadcrumb and tools bar, related links */
    :root[data-wh-theme = "dark"] .wh_publication_toc,
    :root[data-wh-theme = "dark"] .wh_tools,
    :root[data-wh-theme = "dark"] .wh_breadcrumb ol,
    :root[data-wh-theme = "dark"] .wh_related_links,
    :root[data-wh-theme = "dark"] .wh_child_links,
    :root[data-wh-theme = "dark"] .wh_topic_content .related-links {
        background-color: var(--px-panel) !important;
    }
    :root[data-wh-theme = "dark"] .wh_publication_toc,
    :root[data-wh-theme = "dark"] .wh_tools {
        border: 1px solid var(--px-border);
    }

    /* Search field */
    :root[data-wh-theme = "dark"] .wh_search_textfield {
        background-color: var(--px-panel);
        border-color: var(--px-border);
        color: var(--px-text);
    }

    /* Code, keyboard input, system output */
    :root[data-wh-theme = "dark"] code,
    :root[data-wh-theme = "dark"] pre,
    :root[data-wh-theme = "dark"] kbd,
    :root[data-wh-theme = "dark"] .systemoutput {
        background-color: var(--px-panel) !important;
    }

    /* Tables */
    :root[data-wh-theme = "dark"] .wh_topic_content table.table tbody tr:nth-child(even) > td {
        background-color: var(--px-panel) !important;
    }
    :root[data-wh-theme = "dark"] .wh_topic_content table,
    :root[data-wh-theme = "dark"] .wh_topic_content th,
    :root[data-wh-theme = "dark"] .wh_topic_content td {
        border-color: var(--px-border) !important;
    }

    /* Images: replace the invisible shadow with a thin border, dim slightly */
    :root[data-wh-theme = "dark"] p img {
        box-shadow: 0 0 0 1px var(--px-border);
    }
    :root[data-wh-theme = "dark"] .wh_topic_content img {
        filter: brightness(0.9);
    }

    /* FAQ accordion */
    :root[data-wh-theme = "dark"] .wh_topic_content dl.faq {
        border-bottom-color: var(--px-border);
    }
    :root[data-wh-theme = "dark"] .wh_topic_content dl.faq > dt.dt {
        color: var(--px-link) !important;
        border-top-color: var(--px-border);
    }
    :root[data-wh-theme = "dark"] .wh_topic_content dl.faq > dt.dt:hover {
        background-color: var(--px-panel) !important;
        color: var(--px-link-hover) !important;
    }
    :root[data-wh-theme = "dark"] .wh_topic_content dl.faq > dt.dt::before {
        color: var(--px-link) !important;
    }
    :root[data-wh-theme = "dark"] .wh_topic_content dl.faq > dd.dd {
        color: inherit !important;
    }

    /* "Copy link to this text" button (text-highlight-link.js sets inline white) */
    :root[data-wh-theme = "dark"] body > button[style *= "absolute"] {
        background: var(--px-panel) !important;
        color: var(--px-link) !important;
        border-color: var(--px-link) !important;
    }
}

/* ---------- Section 3: Header layout on small screens ---------- */

/*
 * On small screens, Bootstrap collapses the header menu container
 * (.wh_top_menu_and_indexterms_link) behind a menu button. custom.css
 * hides that menu button, so the theme switch button never shows.
 * Below 768 px only, this shows the container as one row below the title:
 * theme switch button on the left, "Go to portnox.com" on the right.
 * The desktop layout is not touched.
 */
@media screen and (max-width : 767.98px) {
    .wh_top_menu_and_indexterms_link.navbar-collapse.collapse {
        display: flex !important;
        flex-basis: 100%;
        width: 100%;
        justify-content: space-between;
        align-items: center;
    }
    .wh_top_menu_and_indexterms_link p {
        margin: 0;
    }
}

/* ---------- Section 4: Font ---------- */

/*
 * Roboto everywhere. custom.css sets Barlow. light.css already loads
 * Roboto (weights 300, 400, 700) from Google Fonts.
 */
body,
h1,
h2,
h3,
h4,
h5,
h6,
input,
button,
select,
textarea,
.wh_publication_title,
.wh_tile_title {
    font-family: 'Roboto', sans-serif !important;
}

/* ---------- Section 5: Portnox light overrides ---------- */

/*
 * Light mode. Applies to every mode except dark, and to print.
 * Text (#2D3140) is not overridden. custom.css keeps controlling it.
 *   #0A6E7A  links (Portnox Peacock, about 6:1 on white)
 *   #074D55  link hover (Peacock, same hue and saturation, lightness 26% to 18%)
 *   #F4F4F4  panels (Portnox Light Gray)
 *   #B6F4F6  borders (Portnox Light Teal)
 *   #36D1DC  search icon (Portnox Brand Teal)
 */
:root:not([data-wh-theme = "dark"]) {
    --pxl-link: #0A6E7A;
    --pxl-link-hover: #074D55;
    --pxl-panel: #F4F4F4;
    --pxl-border: #B6F4F6;
    --pxl-accent: #36D1DC;

    /* Map Oxygen variables to the palette */
    --wh-link-color: var(--pxl-link);
    --wh-pre-bg: var(--pxl-panel);
    --wh-subtle-color: var(--pxl-panel);
    --wh-fig-border: var(--pxl-border);
    --wh-main-page-toc-border: var(--pxl-border);
}

/* Links (custom.css sets #428bca, hover #2d363b) */
:root:not([data-wh-theme = "dark"]) body a,
:root:not([data-wh-theme = "dark"]) .wh_topic_content dl.faq > dt.dt,
:root:not([data-wh-theme = "dark"]) .wh_topic_content dl.faq > dt.dt::before {
    color: var(--pxl-link) !important;
}
:root:not([data-wh-theme = "dark"]) body a:hover,
:root:not([data-wh-theme = "dark"]) .wh_topic_content dl.faq > dt.dt:hover {
    color: var(--pxl-link-hover) !important;
}

/* Panels (custom.css sets #edf5f7) */
:root:not([data-wh-theme = "dark"]) .wh_publication_toc,
:root:not([data-wh-theme = "dark"]) .wh_tools,
:root:not([data-wh-theme = "dark"]) .wh_breadcrumb ol,
:root:not([data-wh-theme = "dark"]) .wh_related_links,
:root:not([data-wh-theme = "dark"]) .wh_child_links,
:root:not([data-wh-theme = "dark"]) .wh_topic_content .related-links,
:root:not([data-wh-theme = "dark"]) code,
:root:not([data-wh-theme = "dark"]) pre,
:root:not([data-wh-theme = "dark"]) kbd,
:root:not([data-wh-theme = "dark"]) .systemoutput,
:root:not([data-wh-theme = "dark"]) .wh_topic_content table.table tbody tr:nth-child(even) > td {
    background-color: var(--pxl-panel) !important;
}

/* Search field and button (light.css sets #CCC, custom.css sets #00cbcc) */
:root:not([data-wh-theme = "dark"]) .wh_search_textfield {
    border-color: var(--pxl-border);
}
:root:not([data-wh-theme = "dark"]) .wh_search_button {
    color: var(--pxl-accent) !important;
}

/* FAQ accordion borders and hover background (custom.css sets #d7e4e8, #edf5f7) */
:root:not([data-wh-theme = "dark"]) .wh_topic_content dl.faq {
    border-bottom-color: var(--pxl-border);
}
:root:not([data-wh-theme = "dark"]) .wh_topic_content dl.faq > dt.dt {
    border-top-color: var(--pxl-border);
}
:root:not([data-wh-theme = "dark"]) .wh_topic_content dl.faq > dt.dt:hover {
    background-color: var(--pxl-panel) !important;
}