/*
 * 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. Gray palette. Scoped to dark mode
 * on screen, so light mode and print output stay unchanged.
 * Section 3: Theme switch button on small screens. Applies in both modes.
 * Section 4: Font. Applies in both modes.
 * Section 5: Portnox light overrides. Brand colors. Scoped to light mode
 * (any mode except dark), so dark mode stays unchanged.
 */

/* ---------- 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: grays only, plus Brand Teal for links.
   *   #111111  page background
   *   #151515  panels (TOC, breadcrumb bar, code, table rows)
   *   #2A2A2A  borders (Portnox Dark Gray)
   *   #F4F4F4  body text (Portnox Light Gray)
   *   #FFFFFF  headings
   *   #36D1DC  links (Portnox Brand Teal)
   *   #B6F4F6  link hover (Portnox Light Teal)
   */
  :root[data-wh-theme="dark"] {
    --px-bg: #111111;
    --px-panel: #151515;
    --px-border: #2A2A2A;
    --px-text: #F4F4F4;
    --px-heading: #FFFFFF;
    --px-link: #36D1DC;
    --px-link-hover: #B6F4F6;

    /* 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: Theme switch button 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.
 * This keeps the container open on all screen sizes, as on desktop.
 */
.wh_top_menu_and_indexterms_link.navbar-collapse.collapse {
  display: flex !important;
}

@media screen and (max-width: 767.98px) {
  .wh_top_menu_and_indexterms_link.navbar-collapse.collapse {
    justify-content: center;
  }
}

/* ---------- 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 palette (brand colors, plus requested text and link colors).
 * Applies to every mode except dark, and to print.
 *   #FFFFFF  page background (unchanged)
 *   #151515  text and headings
 *   #2D22C3  links (Midnight #020112, same hue, lighter)
 *   #020112  link hover (Portnox Midnight)
 *   #F4F4F4  panels (Portnox Light Gray)
 *   #B6F4F6  borders (Portnox Light Teal)
 *   #36D1DC  search icon (Portnox Brand Teal)
 * The top banner (topbar.xml) keeps its inline red.
 */
:root:not([data-wh-theme="dark"]) {
  --pxl-text: #151515;
  --pxl-link: #2D22C3;
  --pxl-link-hover: #020112;
  --pxl-panel: #F4F4F4;
  --pxl-border: #B6F4F6;
  --pxl-accent: #36D1DC;

  /* Map Oxygen variables to the palette */
  --wh-primary-color: var(--pxl-text);
  --wh-link-color: var(--pxl-link);
  --wh-tooltip-color: var(--pxl-link);
  --wh-toggle-border: 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);
}

/* Body text (light.css sets #000000, custom.css sets #2d3140) */
:root:not([data-wh-theme="dark"]) body,
:root:not([data-wh-theme="dark"]) .wh_topic_content,
:root:not([data-wh-theme="dark"]) .wh_content_area,
:root:not([data-wh-theme="dark"]) p,
:root:not([data-wh-theme="dark"]) li {
  color: var(--pxl-text);
}

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

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

/* Tool buttons and current breadcrumb (light.css sets #347bb7 and #5185cb) */
:root:not([data-wh-theme="dark"]) .wh_print_link button,
:root:not([data-wh-theme="dark"]) .webhelp_expand_collapse_sections,
:root:not([data-wh-theme="dark"]) .wh_hide_highlight,
:root:not([data-wh-theme="dark"]) .wh_breadcrumb ol .active {
  color: var(--pxl-link);
}

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

/* Search autocomplete and pagination (light.css sets #346ec5) */
:root:not([data-wh-theme="dark"]) .ui-menu-item .ui-state-active,
:root:not([data-wh-theme="dark"]) #wh-search-pagination > ul > li.active > a {
  background-color: var(--pxl-link);
}

/* FAQ accordion (custom.css sets #428bca, #d7e4e8, #edf5f7, #2d3140) */
: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 {
  color: var(--pxl-link) !important;
  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;
  color: var(--pxl-link-hover) !important;
}
: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"]) .wh_topic_content dl.faq > dd.dd {
  color: var(--pxl-text) !important;
}

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