.site-search + .site-home-content {
    display: none;
}

.site-search {
    padding: 56px 0 80px;
    color: #555;
}

.site-search h1 {
    margin: 0 0 28px;
    font: 600 36px/1.2 "Raleway", sans-serif;
}

.site-search__form {
    display: flex;
    gap: 12px;
    max-width: 720px;
}

.site-search__form input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 13px 16px;
    border: 1px solid #c7c7c7;
    border-radius: 6px;
    background: #fff;
    color: #333;
    font: inherit;
}

.site-search__form button {
    flex: 0 0 auto;
    padding: 13px 24px;
    border: 0;
    border-radius: 6px;
    background: #80c552;
    color: #fff;
    font: 600 16px/1.4 "Raleway", sans-serif;
    cursor: pointer;
}

.site-search :is(a, input, button):focus-visible {
    outline: 3px solid #9b83b3;
    outline-offset: 4px;
}

.site-search__message {
    margin: 24px 0;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.site-search__results {
    display: grid;
    gap: 0;
    margin: 0 0 32px;
    padding: 0;
    list-style: none;
}

.site-search__results li {
    padding: 22px 0;
    border-bottom: 1px solid #e6e6e6;
}

.site-search__results h2 {
    margin: 0;
    font: 600 22px/1.3 "Raleway", sans-serif;
    overflow-wrap: anywhere;
}

.site-search__results a,
.site-search__home {
    color: #6a943a;
    text-underline-offset: 3px;
}

.site-search__results a:hover,
.site-search__home:hover {
    text-decoration: underline;
}

.site-search__results p {
    max-width: 900px;
    margin: 10px 0 0;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

@media (max-width: 650px) {
    .site-search {
        padding: 32px 0 48px;
    }

    .site-search h1 {
        font-size: 28px;
    }

    .site-search__form {
        gap: 8px;
    }

    .site-search__form button {
        padding: 12px 16px;
    }

    .site-search__results h2 {
        font-size: 20px;
    }
}