/* Live-search dropdown. Hangs under any <form class="wwhc-search">. */

.wwhc-search { position: relative; }

.wwls-panel {
    position: absolute;
    inset-inline: 0;
    inset-block-start: calc(100% + 0.5rem);
    z-index: 50;
    background: #fff;
    color: var(--wp--preset--color--text, #2B2640);
    border-radius: 12px;
    box-shadow:
        0 1px 2px rgba(21, 15, 51, 0.06),
        0 20px 40px -12px rgba(21, 15, 51, 0.18);
    overflow: hidden;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease;
    max-block-size: min(70vh, 640px);
    display: flex;
    flex-direction: column;
}
.wwls-panel[data-open="true"] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.wwls-status {
    padding: 1rem 1.25rem;
    font-size: 0.875rem;
    color: var(--wp--preset--color--text-muted, #7D7D99);
    border-block-end: 1px solid var(--wp--preset--color--border, #EDEDF7);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.wwls-status[data-state="idle"]     { display: none; }
.wwls-status .wwls-dot {
    inline-size: 6px;
    block-size: 6px;
    border-radius: 999px;
    background: var(--wp--preset--color--primary, #755AFA);
    animation: wwls-pulse 1.1s infinite ease-in-out;
}
@keyframes wwls-pulse {
    0%, 100% { opacity: 0.35; transform: scale(0.85); }
    50%      { opacity: 1;    transform: scale(1);    }
}

.wwls-list {
    list-style: none;
    margin: 0;
    padding: 0.25rem 0 0.5rem;
    overflow-y: auto;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.wwls-list:empty { display: none; }

/* Strong title / tiny supporting text. The title carries all the weight so the
   eye can scan by title alone, then drop into the snippet only when it pauses. */
.wwls-item {
    display: block;
    padding: 0.75rem 1.25rem 0.875rem;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background 120ms ease;
}
.wwls-item:hover,
.wwls-item[aria-selected="true"] {
    background: var(--wp--preset--color--bg-alt, #F7F7FA);
}

.wwls-item__cat {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--wp--preset--color--text-muted, #7D7D99);
    margin-block-end: 0.125rem;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wwls-item__title {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--wp--preset--color--text-strong, #150F33);
    line-height: 1.25;
    margin-block-end: 0.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.wwls-item:hover .wwls-item__title,
.wwls-item[aria-selected="true"] .wwls-item__title {
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}
.wwls-item__snippet {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #4D5156;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.wwls-item__snippet mark,
.wwls-item__snippet strong {
    background: transparent;
    color: inherit;
    padding: 0;
    border-radius: 0;
    font-weight: 700;
}

.wwls-footer {
    display: block;
    padding: 0.875rem 1.125rem;
    text-align: center;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--wp--preset--color--primary, #755AFA);
    text-decoration: none;
    border-block-start: 1px solid var(--wp--preset--color--border, #EDEDF7);
    background: #fff;
    transition: background 120ms ease, color 120ms ease;
}
.wwls-footer:hover {
    background: var(--wp--preset--color--primary, #755AFA);
    color: #fff;
}

.wwls-empty {
    padding: 1.25rem 1.25rem 1.5rem;
    text-align: center;
    color: var(--wp--preset--color--text-muted, #7D7D99);
    font-size: 0.9375rem;
}

/* Screen-reader-only live region — announces result count without visual noise. */
.wwls-sr {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .wwls-panel { transition: none; }
    .wwls-status .wwls-dot { animation: none; }
}