/* Dropdown for the client-side search. Deliberately unopinionated:
   it inherits the theme's colors where it can, so it doesn't fight
   Madara's stylesheet. The parent form gets position:relative only if
   it has none, hence the :has() guard plus a static fallback. */

.hss-panel {
    position: absolute;
    z-index: 9999;
    left: 0;
    right: 0;
    top: 100%;
    max-height: 60vh;
    overflow-y: auto;
    background: #fff;
    color: #222;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 4px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
    font-size: 14px;
}

.hss-panel[hidden] { display: none; }

.hss-item {
    display: block;
    padding: 8px 12px;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hss-item:last-child { border-bottom: 0; }
.hss-item:hover,
.hss-item:focus { background: rgba(0, 0, 0, .06); }

.hss-note {
    padding: 8px 12px;
    opacity: .65;
    font-size: 13px;
}

/* The search form must anchor the absolutely positioned panel. */
form.search-form,
form.manga-search-form,
form#blog-post-search { position: relative; }

@media (prefers-color-scheme: dark) {
    .hss-panel {
        background: #1e1e1e;
        color: #eee;
        border-color: rgba(255, 255, 255, .15);
    }
    .hss-item { border-bottom-color: rgba(255, 255, 255, .08); }
    .hss-item:hover,
    .hss-item:focus { background: rgba(255, 255, 255, .08); }
}