/*
 * 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 (panels, borders, search icon).
 * Text and link colors in light mode stay 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) and links (#428BCA, hover #2D363B) are not overridden.
 * custom.css keeps controlling them.
 *   #F4F4F4  panels (Portnox Light Gray)
 *   #B6F4F6  borders (Portnox Light Teal)
 *   #36D1DC  search icon (Portnox Brand Teal)
 */
:root:not([data-wh-theme="dark"]) {
  --pxl-panel: #F4F4F4;
  --pxl-border: #B6F4F6;
  --pxl-accent: #36D1DC;

  /* Map Oxygen variables to the palette */
  --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);
}

/* 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;
}