/* ============================================================
   AUTOCOMPLETE DA BUSCA — CORREÇÃO
   ============================================================ */

.search-field {
    position: relative;
    overflow: visible !important;
}

.search-suggestions {
    position: absolute !important;

    top: calc(100% + 10px) !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;

    z-index: 9999 !important;

    display: none;

    background: #ffffff;

    border: 1px solid var(--line-strong);
    border-radius: 14px;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, .12),
        0 4px 12px rgba(0, 0, 0, .05);

    overflow: hidden;

    text-align: left;
}

.search-suggestions.is-visible {
    display: block !important;
}


/* Cada resultado */

.search-suggestions .suggestion {
    display: block;

    width: 100%;

    box-sizing: border-box;

    padding: 15px 18px;

    text-decoration: none;

    background: #fff;

    border-bottom: 1px solid var(--line);

    transition:
        background .15s ease,
        padding-left .15s ease;
}

.search-suggestions .suggestion:last-child {
    border-bottom: 0;
}

.search-suggestions .suggestion:hover,
.search-suggestions .suggestion.is-active {
    background: var(--forest-tint);
    padding-left: 21px;
}


/* Título do artigo */

.search-suggestions .suggestion strong {
    display: block;

    width: 100%;

    margin: 0;

    color: var(--ink-700);

    font-size: 14px;
    font-weight: 600;

    line-height: 1.4;

    white-space: normal;

    overflow: visible;

    text-overflow: unset;
}


/* Descrição */

.search-suggestions .suggestion small {
    display: block;

    width: 100%;

    margin-top: 5px;

    color: var(--ink-500);

    font-size: 12.5px;
    font-weight: 400;

    line-height: 1.45;

    white-space: normal;

    overflow: hidden;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}


/* Mobile */

@media (max-width: 560px) {

    .search-suggestions {
        top: calc(100% + 8px) !important;

        border-radius: 13px;

        max-height: 320px;

        overflow-y: auto;
    }

    .search-suggestions .suggestion {
        padding: 14px 15px;
    }

    .search-suggestions .suggestion strong {
        font-size: 13.5px;
    }

    .search-suggestions .suggestion small {
        font-size: 12px;
    }
}

.kb-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    text-decoration: none;
    white-space: nowrap;
}

.kb-brand img {
    display: block;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}