@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300;
    src: url('resources/fonts/Montserrat-Regular.ttf');
}

@font-face {
    font-family: 'Montserrat Bold';
    font-weight: 700;
    src: url('resources/fonts/Montserrat-Bold.ttf');
}

@font-face {
    font-family: 'Montserrat Italic Variable';
    font-weight: 700;
    src: url('resources/fonts/Montserrat-Italic-VariableFont_wght.ttf');
}

/* The next to selectors hide the 'Jump to main content' element that appeared after the OPE upgrade. */
a.sr-only.sr-only-focusable {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

a.sr-only.sr-only-focusable:focus {
  position: absolute;
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  overflow: visible;
  background: #ffffff;
  color: #005d80;
  padding: 0.5rem 1rem;
  z-index: 999;
  border: 1px solid #005d80;
  border-radius: 4px;
} 

/* The top section of the page where the logo and navigation elements are. */
.wh_header {
    background-color: #005D80;
    padding: 0.6em 0.0em 0.6em 0.0em;
}

/* The title of the publication, to the right of the logo */
.wh_publication_title > a {
    font-size: 12px;
}

.wh_logo+.wh_publication_title {
    margin-left: 1.1em;
}

/* Make sure header container uses flex. Added after OPE was upgraded. */
.wh_header_flex_container {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  /*  padding: 0.6em 1.2em !important;  */
  min-height: 64px;
  gap: 0 !important;
}
 
/* The section that surrounds the search input bar. CAN THE THREE BELOW BE SIMPLIFIED OR COMBINED? */
.wh_main_page .wh_search_input {
    background: none;
    background-color: #005D80;
    padding-top: 5px;
    padding-bottom: 15px;
}

.wh_search_input {
    background: none;
    background-color: #005D80;
    padding-top: 5px;
    padding-bottom: 15px;
}

/* TILES SECTION ON HTML HOMEPAGE */
.wh_tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Ensure responsive tile size */
    gap: 20px; /* Proper spacing between tiles */
    padding: 20px; /* Adds padding around the tiles */
    justify-items: center; /* Centers the tiles in each row */
}

.wh_tile {
    background-repeat: no-repeat;
    background-size: 50px;
    background-position: top;
    background-color: #F2F6F8;
    border-radius: 5px;
    width: 100%; /* Set width to 100% to take full space in the grid */
    min-width: 250px;
    min-height: 16pc;
    padding: 20px;
}

.wh_tile_title {
    color: black;
    font-size: 1em;
}

.wh_tile_title a {
    color: black;
    font-size: 1.2em;
    margin-top: 3em;
}

.wh_tile_shortdesc {
    color: black;
    margin: 2em 1.2em;
    text-align: center;
    font-size: 0.9em;
    line-height: 1.6em;
}

/* TILES */
.wh_tile[data-id="c_nozomi_platform"] {
    background-image:url('resources/mainpage-tile-images/tile-nozomi.svg');
}  

.wh_tile[data-id="security"] {
    background-image:url('resources/mainpage-tile-images/tile-security.svg');
}  

.wh_tile[data-id="sbom"] {
    background-image:url('resources/mainpage-tile-images/tile-sbom.svg');
} 

.wh_tile[data-id="feedback"] {
    background-image:url('resources/mainpage-tile-images/tile-feedback.svg');
} 

.wh_tile[data-id="support"] {
    background-image:url('resources/mainpage-tile-images/tile-support.svg');
}

.wh_tile[data-id="coveo"] {
    background-image:url('resources/mainpage-tile-images/tile-coveo.svg');
}

.wh_tile[data-id="n2os-release-notes"] {
    background-image:url('resources/mainpage-tile-images/tile-nozomi.svg');
}

.wh_tile[data-id="vantage-release-notes"] {
    background-image:url('resources/mainpage-tile-images/tile-vantage.svg');
}

.wh_tile[data-id="arc-release-notes"] {
    background-image:url('resources/mainpage-tile-images/tile-arc.svg');
}

.wh_tile[data-id="gair-release-notes"] {
    background-image:url('resources/mainpage-tile-images/tile-guardian-air.svg');
}

.wh_tile[data-id="n2os-config"] {
    background-image:url('resources/mainpage-tile-images/tile-config.svg');
}

.wh_tile[data-id="n2os-sdk"] {
    background-image:url('resources/mainpage-tile-images/tile-sdk.svg');
}

.wh_tile[data-id="universal-sdk"] {
    background-image:url('resources/mainpage-tile-images/tile-sdk.svg');
}

.wh_tile[data-id="legal"] {
    background-image:url('resources/mainpage-tile-images/tile-legal.svg');
} 

.wh_tile[data-id="cmc"] {
    background-image:url('resources/mainpage-tile-images/tile-cmc.svg');
}

.wh_tile[data-id="vantage"] {
    background-image:url('resources/mainpage-tile-images/tile-vantage.svg');
}

.wh_tile[data-id="vantage-gov"] {
    background-image:url('resources/mainpage-tile-images/tile-vantage-gov.svg');
}

.wh_tile[data-id="arc"] {
    background-image:url('resources/mainpage-tile-images/tile-arc.svg');
}

.wh_tile[data-id="arc-e"] {
    background-image:url('resources/mainpage-tile-images/tile-arc-e.svg');
}

.wh_tile[data-id="guardian"] {
    background-image:url('resources/mainpage-tile-images/tile-guardian.svg');
}

.wh_tile[data-id="guardian-air"] {
    background-image:url('resources/mainpage-tile-images/tile-guardian-air.svg');
}

.wh_tile[data-id="rc"] {
    background-image:url('resources/mainpage-tile-images/tile-rc.svg');
}

.wh_tile[data-id="vantage-iq"] {
    background-image:url('resources/mainpage-tile-images/tile-vantage-iq.svg');
}

.wh_tile[data-id="ai"] {
    background-image:url('resources/mainpage-tile-images/tile-ai.svg');
}

.wh_tile[data-id="sp"] {
    background-image:url('resources/mainpage-tile-images/tile-sp.svg');
}

.wh_tile[data-id="ti"] {
    background-image:url('resources/mainpage-tile-images/tile-ti.svg');
}

.wh_tile[data-id="integration-guides"] {
    background-image:url('resources/mainpage-tile-images/tile-guide.svg');
}

.wh_tile[data-id="reference-guides"] {
    background-image:url('resources/mainpage-tile-images/tile-guide.svg');
}

.wh_tile[data-id="hardware"] {
    background-image:url('resources/mainpage-tile-images/tile-hardware.svg');
}

.wh_tile[data-id="quick-start-guides"] {
    background-image:url('resources/mainpage-tile-images/tile-guide.svg');
}

.wh_tile[data-id="resources"] {
    display: none;
}

.wh_tile[data-id="print-docs"] {
    background-image:url('resources/mainpage-tile-images/tile-guide.svg');
}

.wh_tile[data-id="archive"] {
    background-image:url('resources/mainpage-tile-images/tile-guide.svg');
}

/* Changes the color of the button at the right of the search input bar */
.wh_search_button {
    background-color: #0093D2;
}

/*  The footer section at the bottom of the page */
.wh_footer {
    background-color: #494957;
}

/* The top level TOC titles */
.wh_main_page_toc a {
    color: #0175A0;
}

/* The highlight color for the product name in the top-left corner */
.wh_publication_title {
    font-weight: 600;
    font-size: 1.4em;
}

/* Hide publication title on all pages (title still appears in browser tab and for SEO) */
.wh_publication_title {
    display: none;
}

/* The highlight color for the current topic as shown in the left TOC */
.wh_publication_toc .active > .topicref a {
    color: black;
    font-weight: 600;
}

.wh_topic_content .title.topictitle1 {
    color: #0175A0;
    font-weight: 700;
}
 
/* More work might be needed for the fonts */
body {
    font-family: 'Montserrat';
    color: #6F707C;  
}

.topic .p {
    margin-top: -0.3em;
    margin-bottom: 0.5em;
}

/* Restore spacing when a paragraph directly follows a list (sibling, not nested).
   Counteracts the negative margin-top above, which otherwise pulls the paragraph
   too close to the preceding list item. */
.ul + .p,
.ol + .p {
    margin-top: 0.5em;
}

.wh_topic_content {
    max-width: 95%;
    margin-left:2%;
    margin-right:5%;
}

.sectiontitle {
    color: #0175A0;
    margin-bottom: 0.3em;
}

/* SHORT DESCRIPTIONS */
.shortdesc {
    font-style: italic;
    line-height: 1.3em;
}

.table thead th,
.simpletable thead th {
    color: #FFFFFF;
    background-color: var(--nn-bg);
    vertical-align: middle;
    border-bottom: 2px solid #dee2e6;
}

.table thead th img{
    text-align: center;
}

.li.substep {
    line-height: 1.3em;
    margin-top: 0.5em;
    margin-top: 0.7em;
}

/* Adds a prefix before a stepresult */
.stepresult::before {
    content: "Result: ";
    font-family: 'Montserrat Italic Variable';
    color: #494957;
}

.stepresult {
    margin-top: 0.3em;
    margin-bottom: 0.5em;
}

/* Troubleshooting task labels */
.condition::before {
    content: "Condition ";
    font-size: 1.2em;
    font-weight: 700; 
    color: #D13164;
}

.cause::before {
    content: "Possible cause ";
    font-size: 1.2em;
    font-family: 'Montserrat Bold';
    /* font-weight: 700;  */
    color: #494957;
}

caption {
    color: #0175A0;
    }

figcaption {
    color: #0175A0;
    }

div.imagecenter {
    padding-top: 0.2em;
}

.note__title {
    font-family: 'Montserrat Bold';
}

.b {
    font-family: 'Montserrat Bold';
}

strong {
    font-family: 'Montserrat Bold';
}

.filepath {
    /*  color: white; */
    font-size: 0.9em;
    background-color: #eee;
    padding: 0.15em 0.1em 0.15em 0.1em;
    font-family: monospace;
    color: #e83e8c;
    background-color: white;
}

.codeph {
    /* color: black;  */
    font-size: 0.9em;
    font-family: monospace;
    padding: 0.15em 0.1em 0.15em 0.1em;
    background-color: white;
}

.codeblock {
    background-color: black;
    padding: 0.15em 0.9em 0.15em 0.9em;
    font-family: monospace;
}

.hl-json_key {
    color: #9cdcfe;
}

.hl-string {
    color: #ce9178;
}

.hl-keyword {
    color: #c586c0;
}

.hl-comment {
    color: #6a9955;
}

.hl-directive {
    color: #c586c0;
}

.hl-tag {
    color: #569cd6;
}

.hl-attribute {
    color: #9cdcfe;
}

.hl-value {
    color: #ce9178;
}

.hl-html {
    color: #4ec9b0;
}

.hl-xsl {
    color: #4ec9b0;
}
.userinput {
    color: black;
    background-color: white;
    font-size: 1.0em;
    font-family: monospace;
    padding: 0.15em 0.5em 0.15em 0.5em;
}

pre code {
    color: white;
    background-color: black;
    padding-left: 0.0em;
    padding-right: 1em;
}

.wintitle {
    font-family: 'Montserrat Bold';
}

.uicontrol {
    font-family: 'Montserrat Bold';
}

.choices::before {
    content: "Choose from: ";
    font-family: 'Montserrat Bold';
    color: #494957;
}

.wh_breadcrumb .topicref .wh-tooltip, .wh-toc-tooltip {
    background-color: #0175A0 !important;
    color: #fff;
    font-size: 1.4rem;
}

[data-tooltip-position="right"] .topicref .wh-tooltip::before, [data-tooltip-position="right"] .wh-toc-tooltip::before {
    border-right-color: #0175A0 !important;
}

.wh_top_menu ul li a {
    text-transform: capitalize;
    font-size: 1.1em;
}

.wh_top_menu ul li:hover, .wh_top_menu.activated-on-click ul li.active {
    background-color: #b7cbd7;
}

.wh_top_menu li ul li a {
    color: #1D2732;
    background-color: #eff3f6;
    border-radius:4px;
}

/* The submenus */
.wh_top_menu ul ul {
    background-color: #FFFFFF;
    padding:2px;
    border:2px solid #C8D7E0;
}

.wh_top_menu ul[role="menuitem"] > li {
    background: transparent;
}


.wh_top_menu ul[role="menuitem"] > li a {
    background: transparent;
    line-height: 2em;
    border-radius: 4px;
    color: #fff;
}

.wh_top_menu ul li:hover a {
    color: #6F707C; /* Text color on hover */
}

.wh_top_menu ul li {
    border-radius: 5px;
    margin:5px;
}
.wh_top_menu ul{
    border-radius: 5px;
}
.wh_top_menu ul {
    transition: none!important;
}

.wh_top_menu ul ul li a:hover {
    background: #C8D7E0;
    color:#1D2732;
}
.wh_top_menu ul ul li {
    width: 270px;
    text-transform: capitalize;
    border-top:0px;
}
.wh_top_menu ul li a.nav_title {
    color:#fff;
    background-color:#005d80;
}
.wh_top_menu ul li a.nav_title:hover {
    color:#004762;
    background-color:#b7cbd7;
}
.wh_top_menu ul ul li.has-children:after{
    border-style: solid;
    border-width: 0.1em 0.1em 0 0;
    content: '';
    display: inline-block;
    height: 0.45em;
    right: 13px;
    position: absolute;
    top: 1em;
    transform: rotate(45deg);
    vertical-align: middle;
    width: 0.45em;
    color: #262D3D;
}

/* Publication TOC*/
.wh_publication_toc {
    border-radius: 3px;
    padding: 1.5em .5em;
    background-color: #EFF3F6
}

.wh_publication_toc .active > .topicref a {
    color: #5185CB;
    font-weight: 900;
}
.wh_publication_toc div, .wh_publication_toc a, .wh_publication_toc a:visited, .wh_publication_toc a:hover {
    color: #262D3D;
}
/* Publication TOC tooltip */
.wh_breadcrumb .topicref .wh-tooltip,
.wh-toc-tooltip {
    background-color: #F2F6F8;
    color: #fff;
    font-size: 1.4rem;
}


@media only screen and (max-width: 767px){

    .wh_top_menu ul ul {
        position:inherit;
        top: 0px;
    }

    .wh_top_menu ul ul li {
        width:96%;
    }
    
    .wh_tiles {
        gap: 0px;
    }
    
    .wh_tile {
        width: 10pc; /* Smaller width for mobile */
        min-height: auto; /* Smaller height for mobile */
        padding: 10px; /* Adjust padding for smaller screen */
        border-radius: 5px; /* Makes radius smaller for smaller screen */
    }
    
    .wh_tile_title {
        font-size: 0.9em; /* Adjust title font size */
    }

    .wh_tile_shortdesc {
        display: none !important;
        margin-top: 1em;
    }
}

/* Outer border for simpletables and choicetables with frame="all" */
.simpletableborder,
.choicetableborder {
    border: 1px solid;
}

/* --------------------------------------------------------------------------
   DOCS-1144: Homepage-aligned WebHelp look-and-feel
   This override block is intentionally placed last to avoid risky edits
   in the legacy theme rules above.
   -------------------------------------------------------------------------- */

:root {
    --nn-accent: #0093d2;
    --nn-accent-deep: #0175a0;
    --nn-accent-bright: #5fc9f2; /* 4.69:1 on --nn-bg (WCAG AA); was #4cc3f0 = 4.37 */
    --nn-bg: #494957;
    --nn-text-light: #ffffff;
    --nn-muted: #c3c6ce;
    --nn-surface: rgba(255, 255, 255, 0.07);
    --nn-border: rgba(255, 255, 255, 0.45); /* 3.21:1 on --nn-bg (WCAG 1.4.11); was .22 = 1.83 */
    --nn-link-card-hover: #016a91; /* link hover inside the white card: 6.05:1 on #fff */
    --nn-card-bg: #ffffff;
    --nn-card-text: #1d2732;
    --nn-card-muted: #6f707c;
    --nn-card-border: #e2e2e2;
}

body {
    background-color: var(--nn-bg);
    color: var(--nn-card-text);
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
}

/* Links are scoped to their background. The bare default is the shell-safe
   light blue (accent-bright = 4.69:1 on the dark shell); inside the white
   content card the deep brand blue is used (accent-deep = 5.18:1 on #fff,
   hover = 6.05:1). Shell regions (top menu, TOC, breadcrumb, related links,
   footer) set their own light colors in the dark-theme block below. */
a {
    color: var(--nn-accent-bright);
}

.topic a,
.wh_topic_content a {
    color: var(--nn-accent-deep);
}

.topic a:hover,
.wh_topic_content a:hover {
    color: var(--nn-link-card-hover);
}

/* Header + search chrome */
.wh_header,
.wh_search_input,
.wh_main_page .wh_search_input {
    background-color: var(--nn-bg);
}

.wh_search_textfield {
    border-radius: 8px;
    border: 1px solid var(--nn-border);
    background: rgba(255, 255, 255, 0.94);
}

.wh_search_button {
    background-color: var(--nn-accent);
}

.wh_search_button:hover {
    background-color: var(--nn-accent-deep);
}

/* Top menu links against dark header */
.wh_top_menu ul li a.nav_title,
.wh_top_menu ul[role="menuitem"] > li a,
.wh_top_menu > ul > li > a {
    color: var(--nn-text-light);
    background: transparent;
}

.wh_top_menu ul li a.nav_title:hover,
.wh_top_menu > ul > li:hover > a {
    color: var(--nn-accent-bright);
    background: var(--nn-surface);
}

/* Main page cards and product tiles */
.wh_main_page .wh_content_area,
.wh_main_page .wh_main_page_toc {
    background: transparent;
}

.wh_tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: 1rem;
    max-width: 64rem;
    margin: 0 auto;
    padding: 0 1.5rem;
    justify-items: stretch;
}

.wh_tile {
    width: auto;
    min-width: 0;
    min-height: 0;
    padding: 0.85rem 1.1rem 0.85rem 3.9rem;
    background-repeat: no-repeat;
    background-size: 38px;
    background-position: 1.1rem 0.95rem;
    background-color: var(--nn-card-bg);
    border: 1px solid var(--nn-card-border);
    border-top: 4px solid var(--nn-accent-deep);
    border-radius: 0 0 8px 8px;
    transition: transform 0.2s ease, border-color 0.2s ease, border-top-color 0.2s ease;
}

.wh_main_page .wh_main_page_toc .wh_tile,
.wh_main_page .wh_tile {
    background-color: var(--nn-card-bg) !important;
}

.wh_tile > div {
    height: auto !important;
}

.wh_tile_text:after {
    content: none;
    background: none;
}

.wh_tile:hover {
    transform: translateY(-3px);
    border-color: var(--nn-accent);
    border-top-color: var(--nn-accent);
}

.wh_tile_title,
.wh_tile_title a {
    color: var(--nn-card-text);
    font-size: 0.95rem;
    font-weight: 600;
    margin-top: 0;
    line-height: 1.3;
    text-align: left;
}

.wh_tile_shortdesc {
    color: var(--nn-card-muted);
    font-size: 0.8rem;
    line-height: 1.55;
    margin: 0;
    text-align: left;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: opacity 0.25s ease 0.1s, margin-top 0.35s ease, max-height 0.35s ease;
}

.wh_tile:hover .wh_tile_shortdesc,
.wh_tile:focus-within .wh_tile_shortdesc {
    opacity: 1;
    margin-top: 0.6rem;
    max-height: 9rem;
}

/* Topic pages: light content cards on dark shell */
.wh_content_area {
    padding: 1rem;
}

.wh_topic_content {
    background: var(--nn-card-bg);
    border: 1px solid var(--nn-card-border);
    border-radius: 8px;
    padding: 1.1rem 1.4rem;
    color: var(--nn-card-text);
    line-height: 1.6;
}

.wh_topic_content .title.topictitle1,
.sectiontitle,
caption,
figcaption {
    color: var(--nn-accent-deep);
}

/* Side TOC panes (left publication TOC + right "On this page" rail) use
   the dark panel look from the homepage list: dark grey panel, white text,
   bold for the current entry. The content pane stays a white card. */
.wh_publication_toc,
#wh_topic_toc {
    background: var(--nn-bg);
    border: none;
}

/* The right rail's visible box is the nav#wh_topic_toc wrapper (a Bootstrap
   navbar). The inner .wh_topic_toc div stays transparent so the dark surface
   isn't layered twice. */
.wh_topic_toc {
    background: transparent;
}

.wh_publication_toc,
.wh_publication_toc div,
.wh_publication_toc a,
.wh_publication_toc a:visited,
.wh_topic_toc,
.wh_topic_toc div,
.wh_topic_toc a,
.wh_topic_toc a:visited {
    color: var(--nn-text-light);
}

.wh_publication_toc a:hover,
.wh_topic_toc a:hover {
    color: var(--nn-accent-bright);
}

/* Current topic / section */
.wh_publication_toc .active > .topicref a,
.wh_topic_toc .active > a,
.wh_topic_toc li.active > a,
.wh_topic_toc a.active {
    color: var(--nn-accent-bright);
    font-weight: 700;
}

/* Breadcrumb bar: blend into the dark shell (same grey as the page, no
   divider line) with light crumb text and a bold, accent-bright current
   crumb. The right-side tools (expand/collapse, print, mobile toggler)
   are lightened so they stay visible on the dark band. */
.wh_tools {
    background-color: var(--nn-bg);
}

.wh_breadcrumb,
.wh_tools .wh_breadcrumb a,
.wh_tools .wh_breadcrumb a:visited {
    color: var(--nn-muted);
}

.wh_tools .wh_breadcrumb a:hover {
    color: var(--nn-accent-bright);
}

.wh_breadcrumb li:last-child,
.wh_breadcrumb li:last-child a {
    color: var(--nn-text-light);
    font-weight: 600;
}

.wh_right_tools a,
.wh_right_tools button,
.wh_right_tools .wh_print_link,
.wh_tools .oxy-icon {
    color: var(--nn-text-light);
}

.wh_right_tools a:hover,
.wh_right_tools button:hover,
.wh_tools .oxy-icon:hover {
    color: var(--nn-accent-bright);
}

/* "Related information" links sit on the dark shell below the white
   content card, so theme them to match the other dark sections: white
   bold heading, white links (accent-bright on hover), muted descriptions. */
.wh_related_links .relinfo > strong,
.wh_related_links strong {
    color: var(--nn-text-light);
}

.wh_related_links a,
.wh_related_links a:visited {
    color: var(--nn-text-light);
}

.wh_related_links a:hover {
    color: var(--nn-accent-bright);
}

.wh_related_links [class*="desc"] {
    color: var(--nn-muted);
}

/* Home (house) icon at the left of the top nav -> this publication's home.
   Injected by the header-nav fragment; the logo itself goes to the portal. */
.nn-home-link {
    color: var(--nn-text-light);
}

/* Bottom-align the house icon with the nav text items. The icon is an inline
   element in the normal menu link; the negative vertical-align drops its
   bottom edge onto the text's bottom. */
.nn-home-link svg {
    width: 20px;
    height: 20px;
    vertical-align: -0.3em;
}

.wh_top_menu ul li.nn-home-item:hover .nn-home-link,
.nn-home-link:hover {
    color: var(--nn-accent-bright);
}

/* Documentation version selector (injected into the header by
   version-selector.js on versioned publications). Dark to match the shell. */
.nn-version-selector {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 1rem 0 1.25rem;
    color: var(--nn-text-light);
    font-size: 1rem;
    white-space: nowrap;
}

.nn-version-label {
    color: var(--nn-muted);
}

.nn-version-select {
    background-color: var(--nn-bg);
    color: var(--nn-text-light);
    border: 1px solid var(--nn-border);
    border-radius: 6px;
    padding: 0.25rem 1.7rem 0.25rem 0.65rem;
    font-size: 1rem;
    cursor: pointer;
    /* custom caret so the native one doesn't clash with the dark field */
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23c3c6ce' d='M6 8.5 1.5 4h9z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 10px;
}

.nn-version-select:hover {
    border-color: var(--nn-accent-bright);
}

.nn-version-select option {
    color: var(--nn-card-text);
    background: var(--nn-card-bg);
}

/* DOCS-1144 follow-up: per-guide PDF release picker on the PDF Library catalog
   (injected by template/fragments/pdf-versions). Unlike .nn-version-select,
   which sits in the dark header shell, this one renders inside the white
   content card next to a guide's download link, so it is light-themed and
   sized down to sit inline with the link text. */
.nn-pdf-version {
    display: inline-flex;
    align-items: center;
    margin-left: 0.5rem;
}

.nn-pdf-version-select {
    background-color: var(--nn-card-bg);
    color: var(--nn-card-text);
    border: 1px solid var(--nn-border);
    border-radius: 6px;
    padding: 0.1rem 0.45rem;
    font-size: 0.85em;
    line-height: 1.4;
    cursor: pointer;
}

.nn-pdf-version-select:hover {
    border-color: var(--nn-accent-deep);
}

/* DOCS-1144 (a11y, WCAG 2.4.7): explicit keyboard-focus indicators. The
   version <select> sets appearance:none which suppresses the native ring, and
   the injected home icon had none. Shell controls/links get a light ring
   (accent-bright = 4.69:1 on the shell); content-card links get a dark ring
   (accent-deep = 5.18:1 on the white card). */
.nn-version-select:focus-visible,
.nn-home-link:focus-visible,
.wh_top_menu ul li a:focus-visible,
.wh_publication_toc a:focus-visible,
.wh_topic_toc a:focus-visible,
.wh_breadcrumb a:focus-visible,
.wh_right_tools a:focus-visible,
.wh_right_tools button:focus-visible,
.wh_footer a:focus-visible,
.wh_related_links a:focus-visible {
    outline: 2px solid var(--nn-accent-bright);
    outline-offset: 2px;
    border-radius: 2px;
}

.wh_topic_content a:focus-visible,
.topic a:focus-visible,
.nn-pdf-version-select:focus-visible {
    outline: 2px solid var(--nn-accent-deep);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Search results page: results render directly on the dark shell, but the
   default result text is dark (snippets #333, the count black, titles a dim
   blue) - unreadable. Lighten them to match the rest of the dark theme.
   #searchResults scoping out-specifies the base app/search.css and the later
   search-enhancements.css. */
.wh_search_results_header_docs {
    color: var(--nn-text-light);
}

#searchResults .foundResult {
    color: var(--nn-accent-bright);
}

#searchResults .shortdesclink {
    color: var(--nn-muted);
}

/* Footer matches homepage chrome */
.wh_footer {
    background-color: var(--nn-bg);
    border-top: 1px solid var(--nn-border);
    color: var(--nn-muted);
}

.wh_footer a {
    color: var(--nn-text-light);
}

.wh_footer a:hover {
    color: var(--nn-accent-bright);
}

/* List format main page text (when tiles disabled) */
.wh_main_page_toc a {
    color: var(--nn-text-light);
}

.wh_main_page_toc,
.wh_main_page_toc .topicref,
.wh_main_page_toc div {
    color: var(--nn-text-light);
}

/* Hover / expanded / accordion states for the list-view homepage.
   The base Oxygen theme paints these states with pale backgrounds
   (rgb(242,248,255) / rgb(238,238,238)); against the white text above
   that makes rows vanish. Re-paint them with translucent light tints so
   they read as subtle highlights on the dark shell. */
.wh_main_page_toc {
    border: 1px solid var(--nn-border);
    border-radius: 8px;
    overflow: hidden;
}

.wh_main_page_toc .wh_main_page_toc_accordion_header,
.wh_main_page_toc > .wh_main_page_toc_entry {
    border-bottom: 1px solid var(--nn-border);
}

.wh_main_page_toc .expanded,
.wh_main_page_toc .wh_main_page_toc_accordion_header:hover,
.wh_main_page_toc > .wh_main_page_toc_entry:hover {
    background-color: rgba(255, 255, 255, 0.10);
}

.wh_main_page_toc_accordion_entries {
    background-color: rgba(255, 255, 255, 0.04);
}

.wh_main_page_toc .wh_main_page_toc_accordion_header:hover a,
.wh_main_page_toc > .wh_main_page_toc_entry:hover a {
    color: var(--nn-accent-bright);
}

/* Hide "Legal notices" from the publication homepages. It stays in the left
   publication TOC (no toc="no" on the map topicref), so it remains reachable
   from every topic page - it's just dropped from the landing page list/tiles.
   List view (arc, n2os, vantage, guardian-air): hide the legal accordion
   header and its sibling entries container. */
.wh_main_page_toc_accordion_header:has(a[data-id="legal"]),
.wh_main_page_toc_accordion_header:has(a[data-id="legal"]) + .wh_main_page_toc_accordion_entries {
    display: none;
}

/* Tile view (enhancements, pdf): hide the legal tile (overrides the
   background-image rule defined for this tile earlier in the file). */
.wh_tile[data-id="legal"] {
    display: none;
}

@media only screen and (max-width: 767px) {
    .wh_topic_content,
    .wh_topic_toc,
    .wh_publication_toc {
        border-radius: 6px;
    }

    .wh_topic_content {
        padding: 0.9rem 1rem;
    }

    .wh_tile {
        width: 100%;
        min-height: auto;
        background-size: 34px;
        background-position: 0.95rem 0.9rem;
        padding-left: 3.5rem;
    }

    .wh_tile_shortdesc {
        opacity: 1;
        max-height: none;
        margin-top: 0.6rem;
    }
}

@media (hover: none) {
    .wh_tile_shortdesc {
        opacity: 1;
        max-height: none;
        margin-top: 0.6rem;
    }
}

/* --------------------------------------------------------------------------
   Navbar + search chrome matched to the static homepage (homepage/css/home.css).
   The homepage header is a slim slate bar with a hairline bottom border, a
   40px logo and small medium-weight nav links that brighten on hover; its
   search is a compact centered white field with a separate rounded blue
   "Search" button. The WebHelp app CSS resets 1rem to 10px, so every
   homepage value (root 16px) is multiplied by 1.6 below (px in comments).
   -------------------------------------------------------------------------- */

/* Real Medium face so the 500-weight nav links/button match the homepage
   (the file already ships in resources/fonts; without this face, weight 500
   silently falls back to the 300-registered Regular). */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    src: url('resources/fonts/Montserrat-Medium.ttf');
}

/* ---------- header / navbar ---------- */

.wh_header {
    border-bottom: 1px solid var(--nn-border); /* homepage hairline (--n2-border) */
    padding: 1.2rem 0;                          /* 12px vertical; sides below */
}

/* .container-fluid already carries ~7.5px of Bootstrap gutter; 24px total
   matches the homepage header's 1.5rem side padding. */
.wh_header .container-fluid {
    padding-left: 2.4rem;
    padding-right: 2.4rem;
}

.wh_logo img {
    height: 4rem;   /* 40px, same as the homepage logo */
    width: auto;
    display: block;
}

.wh_top_menu ul li a {
    font-size: 1.28rem;     /* 12.8px = homepage .top-nav a (0.8rem) */
    font-weight: 500;
    padding: 0.5rem 1.1rem; /* link-to-link rhythm ≈ homepage 1.4rem gap */
}

.wh_top_menu > ul > li {
    margin: 0;
}

/* Flat homepage-style hover: color change only, no pill background. */
.wh_top_menu > ul > li:hover,
.wh_top_menu.activated-on-click > ul > li.active {
    background-color: transparent;
}

.wh_top_menu > ul > li:hover > a {
    color: var(--nn-accent-bright);
    background: transparent;
}

/* The version dropdown rides in the same bar - size it like the nav links. */
.nn-version-selector,
.nn-version-select {
    font-size: 1.28rem;
}

/* ---------- search field ---------- */

/* Compact centered bar: input + separate button, like .hero-search. */
#searchForm > div {
    display: flex;
    align-items: stretch;
    gap: 0.8rem;            /* 8px = homepage 0.5rem */
    width: 100%;
    max-width: 41.6rem;     /* 416px = homepage .hero-search max-width 26rem */
}

.wh_search_textfield {
    flex: 1;
    width: auto;
    min-width: 0;
    height: auto;
    margin: 0;
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    font-size: 1.52rem;     /* 15.2px = homepage 0.95rem */
    color: var(--nn-card-text);
    background: var(--nn-card-bg);
    border: 1px solid var(--nn-card-border);
    border-radius: 0.6rem;  /* 6px */
    padding: 1.04rem 1.44rem; /* 10.4px / 14.4px = homepage 0.65rem 0.9rem */
}

/* input:focus{outline:none} in the app theme; the homepage restores a ring. */
.wh_search_textfield:focus {
    outline: 2px solid var(--nn-accent-bright);
    outline-offset: 1px;
}

/* Separate rounded button carrying the "Search" label, like the homepage.
   The localized label is already in span.search_input_text; the app theme
   hides it and paints a magnifier glyph through :after instead. */
.wh_search_button {
    position: static;
    width: auto;
    height: auto;
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    font-size: 1.36rem;     /* 13.6px = homepage 0.85rem */
    font-weight: 500;
    color: var(--nn-text-light);
    background-color: var(--nn-accent);
    border: 1px solid var(--nn-accent);
    border-radius: 0.6rem;
    padding: 1.04rem 1.76rem; /* 10.4px / 17.6px = homepage 0.65rem 1.1rem */
}

.wh_search_button:hover {
    background-color: var(--nn-accent-deep);
    border-color: var(--nn-accent-deep);
}

.wh_search_button:focus-visible {
    outline: 2px solid var(--nn-accent-bright);
    outline-offset: 2px;
}

.wh_search_button > span {
    display: inline;
}

.wh_search_button:after {
    content: none;
}

/* A little breathing room under the header on publication homepages,
   echoing the homepage hero spacing above its search field. */
.wh_main_page .wh_search_input {
    padding-top: 2.4rem;
}

/* The homepage search keeps its button on small screens; the app theme
   hides it below 768px, which would leave no way to submit the form.
   The bar goes back to the app theme's 90% width so it keeps side margins. */
@media only screen and (max-width: 767px) {
    .wh_search_button {
        display: inline-block;
    }

    #searchForm > div {
        width: 90%;
    }
}