/* Font sizes here use the type-scale tokens declared in style.css :root
   (--fs-12 ... --fs-48). This file is loaded after it on /search.html, so the
   tokens resolve. Keep this file on the same scale. */
/* Page-specific styling for /search.html. Lives in an external file
   because the site's CSP includes `style-src 'self'` with no nonce or
   'unsafe-inline' - an inline <style> block here gets silently dropped
   by the browser, taking all of these rules with it. */

.search-page-wrap {
    max-width: 820px;
    margin: 2rem auto 4rem;
    padding: 0 1rem;
}
.search-page-wrap h1 {
    text-align: center;
    margin-bottom: 0.5rem;
}
.search-intro {
    text-align: center;
    /* --csoh-search-muted is this file's own token and has a value for each
       theme, including the system-dark branch (no data-theme set), where a
       light-only grey would be 3.95:1. */
    color: var(--csoh-search-muted);
    margin-bottom: 2rem;
}

/* CSS-level color-scheme declaration. Belt-and-braces with the
   <meta name="color-scheme"> in search.html's <head> - both should
   opt this page out of browser-level "force dark" filters. */
:root {
    color-scheme: dark light;
    --csoh-search-bg: #ffffff;
    --csoh-search-text: #1a1f24;
    --csoh-search-muted: #5a6470;
    --csoh-search-border: #d0d7de;
    --csoh-search-accent: #2c3e50;
    --csoh-search-chip-bg: #f1f3f5;
    --csoh-search-chip-active-bg: #2c3e50;
    --csoh-search-chip-active-text: #ffffff;
    --csoh-search-mark-bg: #fff3a3;
    --csoh-search-mark-text: #1a1f24;
    --csoh-search-card-hover: #f5f7fa;
}

/* Match the dual-selector dark-mode pattern from the rest of the site:
   apply when JS has set data-theme="dark" AND when prefers-color-scheme
   is dark without an explicit light override. */
[data-theme="dark"] {
    --csoh-search-bg: #0d1117;
    --csoh-search-text: #f0f6fc;
    --csoh-search-muted: #8b949e;
    --csoh-search-border: #30363d;
    --csoh-search-accent: #58a6ff;
    --csoh-search-chip-bg: #21262d;
    --csoh-search-chip-active-bg: #58a6ff;
    --csoh-search-chip-active-text: #0d1117;
    --csoh-search-mark-bg: #b58900;
    --csoh-search-mark-text: #0d1117;
    --csoh-search-card-hover: #161b22;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --csoh-search-bg: #0d1117;
        --csoh-search-text: #f0f6fc;
        --csoh-search-muted: #8b949e;
        --csoh-search-border: #30363d;
        --csoh-search-accent: #58a6ff;
        --csoh-search-chip-bg: #21262d;
        --csoh-search-chip-active-bg: #58a6ff;
        --csoh-search-chip-active-text: #0d1117;
        --csoh-search-mark-bg: #b58900;
        --csoh-search-mark-text: #0d1117;
        --csoh-search-card-hover: #161b22;
    }
}

/* ----- Controls -------------------------------------------------- */

#csoh-search {
    color: var(--csoh-search-text);
}

.csoh-search-label {
    display: block;
    font-size: var(--fs-14);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--csoh-search-muted);
    margin-bottom: 0.5rem;
}

#csoh-search-input {
    width: 100%;
    padding: 0.85rem 1rem;
    font-size: var(--fs-18);
    line-height: 1.4;
    border: 2px solid var(--csoh-search-border);
    border-radius: 8px;
    background-color: var(--csoh-search-bg);
    color: var(--csoh-search-text);
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#csoh-search-input:focus {
    outline: none;
    border-color: var(--csoh-search-accent);
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15);
}
#csoh-search-input::placeholder {
    color: var(--csoh-search-muted);
    opacity: 0.7;
}

.csoh-search-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.85rem;
}
.csoh-filter-chip {
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--csoh-search-border);
    border-radius: 9999px;
    background-color: var(--csoh-search-chip-bg);
    color: var(--csoh-search-text);
    font-size: var(--fs-14);
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.csoh-filter-chip:hover {
    border-color: var(--csoh-search-accent);
}
.csoh-filter-chip.is-active {
    background-color: var(--csoh-search-chip-active-bg);
    color: var(--csoh-search-chip-active-text);
    border-color: var(--csoh-search-chip-active-bg);
}

.csoh-search-status {
    color: var(--csoh-search-muted);
    font-size: var(--fs-14);
    margin: 1.25rem 0 0.5rem;
}

/* ----- Results --------------------------------------------------- */

.csoh-search-results {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
}

.csoh-result {
    border-top: 1px solid var(--csoh-search-border);
    padding: 1.1rem 0;
}
.csoh-result:last-child {
    border-bottom: 1px solid var(--csoh-search-border);
}

.csoh-result-link {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 0.4rem 0.6rem;
    margin: -0.4rem -0.6rem;
    border-radius: 6px;
    transition: background-color 0.1s ease;
}
.csoh-result-link:hover,
.csoh-result-link:focus {
    background-color: var(--csoh-search-card-hover);
    outline: none;
}
.csoh-result-link:focus-visible {
    box-shadow: 0 0 0 2px var(--csoh-search-accent);
}

.csoh-result-type-badge {
    display: inline-block;
    font-size: var(--fs-12);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 4px;
    margin-right: 0.5rem;
    vertical-align: 2px;
}
.csoh-type-guide    { background-color: #2c3e50; color: #f1f3f5; }
.csoh-type-glossary { background-color: #b58900; color: #1a1f24; }
.csoh-type-faq      { background-color: #1f7a4f; color: #f1f3f5; }
.csoh-type-feed     { background-color: #6e3a8a; color: #f1f3f5; }
.csoh-type-resource { background-color: #0b6e99; color: #f1f3f5; }
.csoh-type-site     { background-color: #5a6470; color: #f1f3f5; }

.csoh-result-title {
    font-size: var(--fs-18);
    font-weight: 700;
    line-height: 1.35;
    color: var(--csoh-search-accent);
}
.csoh-result-breadcrumb {
    display: block;
    font-size: var(--fs-14);
    color: var(--csoh-search-muted);
    margin-top: 0.2rem;
}
.csoh-result-snippet {
    margin: 0.55rem 0 0;
    color: var(--csoh-search-text);
    opacity: 0.85;
    font-size: var(--fs-15);
    line-height: 1.55;
}

.csoh-result-snippet mark,
.csoh-result-title mark {
    background-color: var(--csoh-search-mark-bg);
    color: var(--csoh-search-mark-text);
    padding: 1px 4px;
    border-radius: 3px;
    font-weight: 700;
}

.csoh-result-others {
    margin: 0.6rem 0 0 1rem;
    padding: 0;
    list-style: disc;
    font-size: var(--fs-14);
}
.csoh-result-others li {
    margin: 0.15rem 0;
}
.csoh-result-others a {
    color: var(--csoh-search-accent);
    text-decoration: none;
}
.csoh-result-others a:hover { text-decoration: underline; }
.csoh-result-others-more {
    color: var(--csoh-search-muted);
    list-style: none;
    margin-left: -1rem;
    font-style: italic;
}