/* ================================================================
   Smart Search — ILO-branded styles v1.2
   ILO Blue #003399 · Hover #1e2dbe · Cyan #009FDB
   Yellow #F7B731 · Green #00A650
   Neutrals: #333F48 · #5B6770 · #A9B2BC · #DDE1E6 · #F5F6F7
   ================================================================ */

:root {
    --ilo-blue:         #003399;
    --ilo-blue-dark:    #002277;
    --ilo-blue-hover:   #1e2dbe;
    --ilo-blue-light:   #D6E4FF;
    --ilo-blue-xlight:  #ebf5fd;
    --ilo-cyan:         #009FDB;
    --ilo-cyan-light:   #e8f6fc;
    --ilo-yellow:       #F7B731;
    --ilo-yellow-light: #FEF3D7;
    --ilo-green:        #00A650;
    --ilo-green-light:  #D6F0E4;
    --ilo-dark:         #333F48;
    --ilo-mid:          #5B6770;
    --ilo-light:        #A9B2BC;
    --ilo-xlight:       #DDE1E6;
    --ilo-bg:           #F5F6F7;
    --ilo-white:        #FFFFFF;
    --ss-font:          "Noto Sans", Arial, sans-serif;
}

/* ================================================================
   GLOBAL RESETS for plugin elements
   Kill browser button styling everywhere in this plugin
   ================================================================ */
.ss-nav-icon-btn,
.ss-panel-close,
.ss-clear-btn,
.ss-sidebar-toggle,
.ss-facet-more-btn,
.ss-facet-less-btn,
.ss-clear-filters-btn {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    font-family: var(--ss-font);
    margin: 0;
    padding: 0;
}

/* ================================================================
   NAV SEARCH ICON
   ================================================================ */
.ss-nav-search {
    display: inline-flex;
    align-items: center;
}

/* Search icon link — strip button chrome, let mega menu control bg/hover */
.ss-nav-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    line-height: 1;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    /* colour inherits from menu link — mega menu will set this */
    color: inherit;
    text-decoration: none;
}
/* The SVG icon itself: white so it shows on dark menu backgrounds */
.ss-nav-icon-btn .ss-nav-search svg { stroke: currentColor; }

/* Swap magnifier / x when open */
.ss-nav-icon-btn .ss-nav-icon-close { display: none; font-size: 20px; line-height: 1; color: #fff; }
.ss-nav-icon-btn[aria-expanded="true"] .ss-nav-icon-open  { display: none; }
.ss-nav-icon-btn[aria-expanded="true"] .ss-nav-icon-close { display: block; }

/* ================================================================
   SEARCH PANEL — ILO mega-menu style drop panel
   Fixed below the menu bar, full-width, ~300px tall
   ================================================================ */
.ss-panel {
    /* Slide down from under the menu bar like a mega-menu */
    position: fixed;
    left: 0;
    right: 0;
    z-index: 99998;
    background: var(--ilo-white);
    /* No bottom border */
    box-shadow: 0 6px 20px rgba(0,0,0,.10);
    padding: 36px 0 32px;
    /* Hidden state: slide up + fade */
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform .22s cubic-bezier(.4,0,.2,1), opacity .18s ease;
}
.ss-panel.ss-panel--open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.ss-panel-inner {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 24px;
}

.ss-panel-label { display: none; }  /* removed per design */

/* The search input row */
.ss-panel-form {
    position: relative;
}

.ss-panel-input-row {
    display: flex;
    align-items: center;
    border: 1px solid var(--ilo-xlight);
    background: var(--ilo-white);
    transition: background .12s, border-color .12s;
}
.ss-panel-input-row:focus-within {
    background: var(--ilo-blue-xlight);
    border-color: var(--ilo-xlight);
    border-left-color: var(--ilo-blue);
}

.ss-panel-input-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 0 12px;
    color: var(--ilo-light);
    pointer-events: none;
}
.ss-panel-input-row:focus-within .ss-panel-input-icon {
    color: var(--ilo-blue);
}

.ss-panel-input {
    flex: 1;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    font-size: 16px;
    font-family: var(--ss-font);
    color: var(--ilo-dark);
    padding: 14px 0;
    caret-color: var(--ilo-blue);
}
.ss-panel-input::placeholder { color: var(--ilo-light); }

/* Clear × inside panel — plain span, no button */
.ss-panel-clear {
    display: none;
    align-items: center;
    padding: 0 14px;
    color: var(--ilo-light);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: color .12s;
}
.ss-panel-clear:hover { color: var(--ilo-dark); }
.ss-panel-clear--visible { display: flex; }

/* Close panel × — top-right corner, plain span */
.ss-panel-close {
    position: absolute;
    top: -28px;
    right: 24px;
    color: var(--ilo-mid);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color .12s;
}
.ss-panel-close:hover { color: var(--ilo-dark); }
.ss-panel-close-x {
    font-size: 20px;
    line-height: 1;
}

/* Backdrop */
.ss-panel-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99997;
    background: rgba(0,0,0,.3);
}
.ss-panel-backdrop--open { display: block; }

/* ================================================================
   AUTOCOMPLETE DROPDOWN
   ================================================================ */
.ss-dropdown {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 99999;
    background: var(--ilo-white);
    border: 1px solid var(--ilo-xlight);
    border-top: 2px solid var(--ilo-blue);
    box-shadow: 0 6px 20px rgba(0,51,153,.10);
    display: none;
    font-family: var(--ss-font);
}
.ss-dropdown.ss-open { display: block; }

.ss-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    text-decoration: none !important;
    color: var(--ilo-dark);
    border-bottom: 1px solid var(--ilo-bg);
    transition: background .1s;
}
.ss-dropdown-item:last-of-type { border-bottom: none; }
.ss-dropdown-item:hover,
.ss-dropdown-item.ss-focused { background: var(--ilo-blue-xlight); }

.ss-dd-thumb {
    width: 36px; height: 36px;
    object-fit: cover; flex-shrink: 0;
}
.ss-dd-icon {
    width: 36px; height: 36px;
    background: var(--ilo-blue-xlight);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: var(--ilo-blue);
}
.ss-dd-icon--pdf             { background: var(--ilo-yellow-light); color: #8a6200; }
.ss-dd-icon--tribe_events    { background: var(--ilo-cyan-light);   color: #005f84; }
.ss-dd-icon--country_profile { background: var(--ilo-green-light);  color: #005a2e; }
.ss-dd-icon--page,
.ss-dd-icon--link            { background: var(--ilo-bg);           color: var(--ilo-mid); }

.ss-dd-text { flex: 1; min-width: 0; }
.ss-dd-title {
    font-size: 13px; font-weight: 600; line-height: 1.35;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: var(--ilo-dark);
}
.ss-dd-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
    margin-top: 3px;
}
.ss-dd-badge {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
    padding: 1px 6px;
    background: var(--ilo-blue-light); color: var(--ilo-blue-dark);
}
.ss-dd-badge--pdf             { background: var(--ilo-yellow-light); color: #8a6200; }
.ss-dd-badge--tribe_events    { background: var(--ilo-cyan-light);   color: #005f84; }
.ss-dd-badge--country_profile { background: var(--ilo-green-light);  color: #005a2e; }
.ss-dd-badge--page,
.ss-dd-badge--link            { background: var(--ilo-bg);           color: var(--ilo-mid); }
.ss-dd-cat { font-size: 11px; color: var(--ilo-mid); white-space: nowrap; }
.ss-dd-cat::before { content: '›  '; }
.ss-dd-tag { font-size: 11px; color: var(--ilo-mid); white-space: nowrap; }

.ss-dropdown-footer {
    display: block; text-align: center;
    padding: 9px 14px;
    font-size: 13px; font-weight: 600;
    color: var(--ilo-blue);
    background: var(--ilo-blue-xlight);
    text-decoration: none !important;
    border-top: 1px solid var(--ilo-blue-light);
    transition: background .1s;
}
.ss-dropdown-footer:hover { background: var(--ilo-blue-light); }

/* ================================================================
   SHORTCODE [smart_search] — inline search bar
   ================================================================ */
.ss-shortcode-wrap { width: 100%; position: relative; }
.ss-shortcode-form .ss-input-wrap {
    display: flex; align-items: center;
    border: 2px solid var(--ilo-xlight); background: var(--ilo-white);
    padding: 0 8px 0 14px; transition: border-color .15s;
    position: relative;
}
.ss-shortcode-form .ss-input-wrap:focus-within { border-color: var(--ilo-blue); }
.ss-icon-search { color: var(--ilo-mid); flex-shrink: 0; margin-right: 10px; display: flex; align-items: center; }
.ss-main-input {
    flex: 1; border: none !important; outline: none !important;
    background: transparent; font-size: 16px;
    padding: 12px 0; color: var(--ilo-dark);
    box-shadow: none !important; font-family: var(--ss-font);
}
.ss-main-input::placeholder { color: var(--ilo-light); }
/* Clear × — plain span, not a button */
.ss-clear-btn {
    display: flex; align-items: center;
    color: var(--ilo-light); font-size: 20px; line-height: 1;
    padding: 0 4px;
    cursor: pointer;
    transition: color .15s;
}
.ss-clear-btn:hover { color: var(--ilo-dark); }
.ss-submit-btn {
    background: var(--ilo-blue); border: none; cursor: pointer; color: #fff;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; margin-left: 6px;
    transition: background .15s;
    appearance: none;
}
.ss-submit-btn:hover { background: var(--ilo-blue-dark); }

/* ================================================================
   RESULTS PAGE
   ================================================================ */
.ss-results-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 24px 60px;
    font-family: var(--ss-font);
    color: var(--ilo-dark);
    box-sizing: border-box;
}

.ss-results-header { margin-bottom: 20px; }
.ss-results-form { position: relative; margin-bottom: 10px; }
.ss-input-wrap {
    display: flex; align-items: center;
    border: 2px solid var(--ilo-xlight);
    background: var(--ilo-white);
    padding: 0 14px;
    transition: border-color .15s;
    position: relative;
}
.ss-input-wrap:focus-within { border-color: var(--ilo-blue); }

/* Meta row */
.ss-results-meta-row {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 10px; margin-top: 6px;
}
.ss-result-count { font-size: 14px; color: var(--ilo-mid); margin: 0; }
.ss-result-count strong { color: var(--ilo-dark); }

/* Active filter chips */
.ss-active-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ss-chips-label  { font-size: 11px; color: var(--ilo-mid); text-transform: uppercase; letter-spacing: .5px; }
.ss-chip {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px;
    padding: 2px 8px;
    text-decoration: none !important;
    background: var(--ilo-white);
    color: var(--ilo-dark);
    border: 1px solid var(--ilo-xlight);
    transition: border-color .12s, color .12s;
}
.ss-chip:hover { border-color: var(--ilo-blue-hover); color: var(--ilo-blue-hover); }
/* All chip variants: same white style, differentiated only by border accent */
.ss-chip--cat { border-left: 3px solid var(--ilo-cyan); }
.ss-chip--tag { border-left: 3px solid var(--ilo-mid); }
.ss-chip--type { border-left: 3px solid var(--ilo-blue); }
.ss-chip-x { font-size: 14px; line-height: 1; font-weight: 400; color: var(--ilo-light); }
.ss-chip:hover .ss-chip-x { color: var(--ilo-blue-hover); }
.ss-chip-clear-all {
    font-size: 12px; color: var(--ilo-mid);
    cursor: pointer; text-decoration: underline !important;
    background: none; border: none; padding: 0; appearance: none;
}
.ss-chip-clear-all:hover { color: var(--ilo-blue); }

/* ================================================================
   TWO-COLUMN LAYOUT
   ================================================================ */
.ss-layout { display: flex; gap: 32px; align-items: flex-start; }
.ss-layout--has-sidebar .ss-results-col { flex: 1; min-width: 0; }

/* ── Facet sidebar ───────────────────────────────────────────── */
.ss-sidebar {
    width: 220px; flex-shrink: 0;
    position: sticky; top: 20px;
    border-top: 3px solid var(--ilo-blue);
}

/* Mobile toggle — plain, no button styling */
.ss-sidebar-toggle {
    display: none; align-items: center; gap: 8px;
    border: 1px solid var(--ilo-xlight);
    padding: 9px 14px; font-size: 14px; font-weight: 600;
    color: var(--ilo-dark); width: 100%; margin-bottom: 12px;
    text-align: left;
}
.ss-filter-badge {
    background: var(--ilo-blue); color: #fff;
    font-size: 10px; font-weight: 700; padding: 1px 6px; margin-left: 4px;
}
.ss-facets-panel { display: block; }

.ss-facet-group { border-bottom: 1px solid var(--ilo-xlight); }

/* Facet headings — tiny, very light. div not h4 to avoid theme override */
.ss-facet-heading {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .6px !important;
    color: var(--ilo-mid) !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    padding: 9px 14px 5px !important;
    background: var(--ilo-bg) !important;
    border-bottom: 1px solid var(--ilo-xlight) !important;
    /* Reset any inherited heading styles */
    font-family: var(--ss-font) !important;
}

.ss-facet-list {
    list-style: none; margin: 0; padding: 4px 0;
    display: flex; flex-direction: column;
}

.ss-facet-link {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 14px;
    text-decoration: none !important;
    color: var(--ilo-dark); font-size: 13px;
    transition: background .1s, color .1s;
    line-height: 1.3;
}
.ss-facet-link:hover            { background: var(--ilo-blue-xlight); color: var(--ilo-blue-hover); }
.ss-facet-item--active .ss-facet-link { background: var(--ilo-blue-xlight); color: var(--ilo-blue-hover); font-weight: 600; }

.ss-facet-check {
    width: 14px; height: 14px; flex-shrink: 0;
    border: 1.5px solid var(--ilo-xlight);
    background: var(--ilo-white);
    display: flex; align-items: center; justify-content: center;
    color: var(--ilo-blue);
}
.ss-facet-item--active .ss-facet-check { background: var(--ilo-blue); border-color: var(--ilo-blue); color: #fff; }
.ss-facet-label { flex: 1; }
.ss-facet-count {
    font-size: 11px; color: var(--ilo-mid);
    background: var(--ilo-bg); padding: 0 5px; flex-shrink: 0; font-weight: 600;
}
.ss-facet-item--active .ss-facet-count { background: var(--ilo-blue-light); color: var(--ilo-blue-dark); }

/* Show more / less — plain underlined text, tiny, no button */
.ss-facet-more-btn, .ss-facet-less-btn {
    padding: 2px 14px 7px;
    font-size: 10px; color: var(--ilo-mid);
    text-decoration: underline;
    display: inline-block;
}
.ss-facet-more-btn:hover, .ss-facet-less-btn:hover { color: var(--ilo-blue-hover); }
.ss-facet-item--hidden { display: none; }
.ss-facet-item--shown  { display: flex !important; }

/* Tags: plain text, no bg, no border, inline tag icon via SVG img */
.ss-facet-list--tags {
    flex-direction: row; flex-wrap: wrap; gap: 0;
    padding: 6px 14px 10px;
}
.ss-facet-list--tags .ss-facet-link {
    padding: 3px 10px 3px 0;
    background: none; border: none;
    font-size: 12px; color: var(--ilo-mid);
    gap: 4px;
}
.ss-facet-list--tags .ss-facet-link:hover,
.ss-facet-list--tags .ss-facet-item--active .ss-facet-link {
    background: none; color: var(--ilo-blue-hover); text-decoration: underline;
}
.ss-facet-list--tags .ss-facet-check,
.ss-facet-list--tags .ss-facet-count { display: none; }

/* ================================================================
   RESULT CARDS
   ================================================================ */
.ss-results-list { display: flex; flex-direction: column; }
.ss-result {
    display: flex; align-items: flex-start; gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--ilo-xlight);
}
.ss-result:first-child { border-top: 1px solid var(--ilo-xlight); }

.ss-result-thumb-link { flex-shrink: 0; }
.ss-result-thumb { width: 90px; height: 68px; object-fit: cover; display: block; }
.ss-result-thumb-ilo {
    width: 90px; height: 68px;
    background: var(--ilo-blue-xlight);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; overflow: hidden;
}
.ss-result-thumb-ilo img { width: 68px; height: auto; opacity: .5; }

.ss-result-body { flex: 1; min-width: 0; }
.ss-result-title { font-size: 15px; font-weight: 700; margin: 0 0 5px; line-height: 1.35; }
.ss-result-title a { color: var(--ilo-blue); text-decoration: none !important; }
.ss-result-title a:hover { text-decoration: underline !important; }

/* Categories + Tags */
.ss-result-terms { display: flex; flex-wrap: wrap; gap: 4px 5px; margin-bottom: 6px; }
.ss-term {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; text-decoration: none !important; transition: color .12s;
}
/* Category: white bg, grey outline */
.ss-term--cat {
    font-weight: 600; padding: 1px 7px;
    background: var(--ilo-white); color: var(--ilo-mid);
    border: 1px solid var(--ilo-xlight);
}
.ss-term--cat:hover, .ss-term--cat.ss-term--active {
    color: var(--ilo-blue-hover); border-color: var(--ilo-blue-hover);
}
/* Tag: no bg, no border, inline SVG icon */
.ss-term--tag {
    font-weight: 400; padding: 1px 0;
    background: none; border: none; color: var(--ilo-mid);
}
.ss-term--tag .ss-tag-icon { flex-shrink: 0; opacity: .6; }
.ss-term--tag:hover, .ss-term--tag.ss-term--active { color: var(--ilo-blue-hover); }

.ss-result-excerpt {
    font-size: 13px; color: var(--ilo-mid); margin: 0 0 7px; line-height: 1.6;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.ss-result-footer { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ss-badge {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
    padding: 2px 7px; text-decoration: none !important;
    background: var(--ilo-blue-light); color: var(--ilo-blue-dark);
    transition: opacity .15s; display: inline-block;
}
.ss-badge--pdf             { background: var(--ilo-yellow-light); color: #8a6200; }
.ss-badge--tribe_events    { background: var(--ilo-cyan-light);   color: #005f84; }
.ss-badge--country_profile { background: var(--ilo-green-light);  color: #005a2e; }
.ss-badge--page,
.ss-badge--link            { background: var(--ilo-bg);           color: var(--ilo-mid); }
.ss-badge:hover { opacity: .8; }
.ss-result-date { font-size: 12px; color: var(--ilo-light); }
.ss-result-url  { font-size: 11px; color: var(--ilo-light); word-break: break-all; }

/* ── No results ──────────────────────────────────────────────── */
.ss-no-results {
    text-align: center; padding: 60px 20px; color: var(--ilo-mid);
    border-top: 1px solid var(--ilo-xlight);
}
.ss-no-results-icon { margin-bottom: 16px; }
.ss-no-results p    { font-size: 15px; margin: 0 0 6px; }
.ss-no-results-tip  { font-size: 13px; }
.ss-clear-filters-btn {
    display: inline-block; margin-top: 14px;
    background: var(--ilo-blue); color: #fff; padding: 8px 20px;
    text-decoration: none !important; font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px; transition: background .15s;
}
.ss-clear-filters-btn:hover { background: var(--ilo-blue-dark); color: #fff; }
.ss-empty-prompt { color: var(--ilo-mid); font-size: 15px; text-align: center; padding: 40px 0; }

/* ── Pagination ──────────────────────────────────────────────── */
.ss-pagination { margin-top: 28px; border-top: 1px solid var(--ilo-xlight); padding-top: 20px; }
.ss-pagination .page-numbers {
    display: flex; flex-wrap: wrap; gap: 4px;
    list-style: none; padding: 0; margin: 0; justify-content: center;
}
.ss-pagination .page-numbers li a,
.ss-pagination .page-numbers li span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 34px; padding: 0 10px;
    border: 1px solid var(--ilo-xlight);
    font-size: 13px; text-decoration: none !important; color: var(--ilo-dark);
    transition: all .15s;
}
.ss-pagination .page-numbers li a:hover { border-color: var(--ilo-blue); color: var(--ilo-blue-hover); background: var(--ilo-blue-xlight); }
.ss-pagination .page-numbers li span.current { background: var(--ilo-blue); color: #fff; border-color: var(--ilo-blue); font-weight: 700; }


/* Suppress native browser clear button on type=search inputs */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
.ss-panel-input::-webkit-search-cancel-button,
.ss-main-input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }

/* Ensure dropdown always appears above panel content */
.ss-panel-form .ss-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100000;
    max-height: 60vh;
    overflow-y: auto;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 860px) {
    .ss-layout--has-sidebar { flex-direction: column; }
    .ss-sidebar { width: 100%; position: static; }
    .ss-sidebar-toggle { display: flex; }
    .ss-facets-panel { display: none; }
    .ss-facets-panel--open { display: block; }
    .ss-result { gap: 12px; padding: 12px 0; }
    .ss-result-thumb, .ss-result-thumb-ilo { width: 64px; height: 52px; }
    .ss-result-title { font-size: 14px; }
    .ss-results-page { padding: 16px 16px 40px; }
    .ss-panel { padding: 24px 0 20px; }
}