/*
 * Search Results Enhancements
 * Improves product visibility and breadcrumb consistency
 */

/* Enhanced search result items with better spacing and visual hierarchy.
   The divider follows the sub-site dark theme's border token, falling back
   to the legacy light grey elsewhere. */
.searchresult li {
    padding: 0.6em 0;
    border-bottom: 1px solid var(--nn-border, #e0e0e0);
}

.searchresult li:last-child {
    border-bottom: none;
}

/* Product badge styling — same look as the unified homepage search page
   (homepage/search.css .search-product-badge). Names come from the
   badge script already properly cased, so no text-transform here
   (capitalize would mangle "ServiceNow" into "Servicenow"). Sizes in px:
   the WebHelp app resets 1rem to 10px, so rem values would render tiny. */
.search-product-badge {
    display: inline-block;
    padding: 2.5px 9px;
    margin-right: 0.5em;
    font-size: 11.5px;
    font-weight: 600;
    border-radius: 3px;
    vertical-align: middle;
    color: #fff;
    white-space: nowrap;
}

/* Product-specific badge colors - using official brand colors from product CSS files */
.product-vantage {
    background-color: #c63663;
    color: white;
}

.product-guardian {
    background-color: #0175a0;
    color: white;
}

.product-arc {
    background-color: #0175a0;
    color: white;
}

.product-arc-embedded {
    background-color: #0175a0;
    color: white;
}

.product-cmc {
    background-color: #c63663;
    color: white;
}

.product-guardian-air {
    background-color: #0175a0;
    color: white;
}

.product-remote-collector, .product-rc {
    background-color: #0175a0;
    color: white;
}

.product-threat-intelligence, .product-ti {
    background-color: #604c8d;
    color: white;
}

.product-asset-intelligence, .product-ai {
    background-color: #604c8d;
    color: white;
}

.product-n2os {
    background-color: #0175a0;
    color: white;
    text-transform: uppercase; /* Keep N2OS in all caps */
}

.product-general {
    background-color: #6c757d;
    color: white;
}

.product-smart-polling {
    background-color: #604c8d;
    color: white;
}

.product-enhancements {
    background-color: #604c8d;
    color: white;
}

.product-vantage-gov {
    background-color: #c63663;
    color: white;
}

.product-sdk {
    background-color: #0175a0;
    color: white;
}

.product-reference-guides {
    background-color: #0175a0;
    color: white;
}

.product-pdf {
    background-color: #6c757d;
    color: white;
}

.product-supplemental {
    background-color: #6c757d;
    color: white;
}

/* Enhanced breadcrumb display in search results.
   Oxygen's app/search.css paints each crumb as a grey chip (background on
   the a) flanked by CSS-border chevrons on .title:before/:after, and the
   flex list wraps the extra text arrow onto its own line. Flatten all of
   that into the unified search page's plain muted text with " › "
   separators. Colors ride the sub-site dark theme's --nn-* custom
   properties with fallbacks for the legacy light theme. */
.searchresult .search-breadcrumb {
    font-size: 12.5px;
    margin-top: 0.25em;
    margin-bottom: 0 !important;
    color: var(--nn-muted, #666);
    line-height: 1.5;
}

.searchresult .search-breadcrumb ol {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    line-height: inherit;
}

.searchresult .search-breadcrumb li {
    display: inline;
    padding: 0;
    border: none;
    margin: 0;
    line-height: inherit;
}

.searchresult .search-breadcrumb li .title {
    display: inline;
}

/* Kill the chip chevrons (app/search.css) entirely. */
.searchresult .search-breadcrumb li .title:before,
.searchresult .search-breadcrumb li .title:after {
    content: none;
}

.searchresult .search-breadcrumb li a,
.searchresult .search-breadcrumb li .title a {
    background: transparent;
    color: inherit;
    display: inline;
    line-height: inherit;
    padding: 0 !important;
    text-align: left;
}

.searchresult .search-breadcrumb li a:hover {
    color: var(--nn-accent-bright, #23527c);
}

.searchresult .search-breadcrumb li:after {
    content: " › ";
    padding: 0 0.3em;
}

.searchresult .search-breadcrumb li:last-child:after {
    content: "";
}

/* Improve search result title visibility */
.searchresult li > a {
    font-size: 1.1em;
    font-weight: 600;
    text-decoration: none;
    color: #346ec5;
    display: inline-block;
    margin-bottom: 0.1em;
}

.searchresult li > a:hover {
    text-decoration: underline;
    color: #2554a0;
}

/* Search result description/snippet */
.searchresult .shortdesclink {
    color: #333;
    line-height: 1.5;
    margin: 0.1em 0 !important;
    display: block;
}

/* Relative path styling - make it more subtle */
.searchresult li .relativePath {
    font-size: 0.8em;
    color: #008000;
    margin-top: 0.3em;
}

.searchresult li .relativePath a {
    color: #008000;
    text-decoration: none;
}

.searchresult li .relativePath a:hover {
    text-decoration: underline;
}

/* Make search terms stand out in results */
.wh_search_expression {
    font-weight: 700;
    background-color: #fff3cd;
    padding: 0 0.2em;
    border-radius: 2px;
}

/* Improve pagination styling.
   The WebHelp app renders a bootpag pager (<ul class="pagination bootpag">
   with .page-item/.page-link items) into #wh-search-pagination, and the
   Bootstrap skin styles every state through --bs-pagination-* custom
   properties defined ON the ul itself. Override those properties at the
   same level to align the pager with the unified homepage search
   navigation: dark surface buttons, brand accent on hover, deep-accent
   active page, muted disabled arrows. The var(--nn-*, ...) fallbacks keep
   the legacy light theme on its current Bootstrap look. Sizes are px
   (mirroring the homepage pager's computed values) because the WebHelp app
   resets 1rem to 10px (html { font-size: 10px }). */
#wh-search-pagination ul.pagination {
    --bs-pagination-padding-x: 14px;
    --bs-pagination-padding-y: 7px;
    --bs-pagination-font-size: 13.5px;
    --bs-pagination-border-width: 1px;
    --bs-pagination-border-radius: 6px;
    --bs-pagination-color: var(--nn-text-light, #212529);
    --bs-pagination-bg: var(--nn-surface, #fff);
    --bs-pagination-border-color: var(--nn-border, #dee2e6);
    --bs-pagination-hover-color: var(--nn-accent-bright, #0d6efd);
    --bs-pagination-hover-bg: var(--nn-surface, #e9ecef);
    --bs-pagination-hover-border-color: var(--nn-accent-bright, #dee2e6);
    --bs-pagination-focus-color: var(--nn-accent-bright, #0d6efd);
    --bs-pagination-focus-bg: var(--nn-surface, #e9ecef);
    --bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgba(92, 201, 242, 0.35);
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: var(--nn-accent-deep, #346ec5);
    --bs-pagination-active-border-color: var(--nn-accent-deep, #346ec5);
    --bs-pagination-disabled-color: var(--nn-muted, #6c757d);
    --bs-pagination-disabled-bg: var(--nn-surface, #fff);
    --bs-pagination-disabled-border-color: var(--nn-border, #dee2e6);
    justify-content: center;
    gap: 8px;
    margin: 2em 0 0;
}

/* Separate rounded buttons (the skin glues them into a strip with a
   negative margin). */
#wh-search-pagination .page-link {
    margin-left: 0;
    border-radius: 6px;
    font-weight: 500;
}

/* template/oxygen.css hardcodes the active page's background; re-point it
   at the themed property (same selector, later stylesheet wins). */
#wh-search-pagination > ul > li.active > a {
    background-color: var(--bs-pagination-active-bg);
    border-color: var(--bs-pagination-active-border-color);
    color: var(--bs-pagination-active-color);
}

/* Add visual indicator for result relevance score */
.search-result-score {
    display: inline-block;
    margin-left: 0.5em;
    color: #999;
    font-size: 0.8em;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .searchresult li {
        padding: 0.6em 0;
    }
    
    .search-product-badge {
        display: block;
        margin-bottom: 0.5em;
        width: fit-content;
    }
}