/* The page carries no block, so the band a block would bring is the component's own.
   1119px, the ten of twelve columns the design draws the results on. The element is named
   because WordPress puts `search` on the body of a results page as well. */
div.search {
    /* Against the page rather than the parent, since what stands beside the band is what the
       filter panel of the bar below measures itself against. */
    --search-band: min(69.9375rem, 100vw - 2 * var(--sav-page-margin));

    display: flex;
    flex-direction: column;
    width: var(--search-band);
    margin-inline: auto;
    padding-block: 2.5rem;
}

.search__form {
    /* The panel of the choice opens inside the results band, not the wider page band. */
    --filter-panel-band: var(--search-band);

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* The choice keeps to the right edge; what comes between it and the field is the filter
       and sort row the design has not settled yet. */
    justify-content: space-between;
    gap: 1.25rem;
}

.search__query {
    display: flex;
    flex: 1 1 20rem;
    align-items: center;
    gap: 0.5rem;
    /* 774px, the width the design draws the field at. */
    max-inline-size: 48.375rem;
    min-inline-size: 0;
    /* 60px → 64px. */
    min-block-size: clamp(3.75rem, 3.75rem + (100vw - 24.375rem) * 0.00299, 4rem);
    margin: 0;
    /* 24px → 32px before the term, 20px → 24px after the magnifier. */
    padding-inline: clamp(1.5rem, 1.5rem + (100vw - 24.375rem) * 0.00598, 2rem)
        clamp(1.25rem, 1.25rem + (100vw - 24.375rem) * 0.00299, 1.5rem);
    border-radius: 6.25rem;
    background-color: var(--sav-color-hellgrau);
}

.search__field {
    flex: 1 1 auto;
    min-inline-size: 0;
    /* The user agent pads a field of its own accord, which would make the pill taller. */
    padding: 0;
    border: 0;
    background-color: transparent;
    font-size: var(--sav-text-s-size);
    line-height: var(--sav-text-s-line);
    font-weight: var(--sav-font-weight-regular);
    letter-spacing: normal;

    /* The pill shows the focus, so the field itself carries none. */
    &:focus-visible {
        outline: none;
    }

    /* Safari draws its own decorations on a search field. */
    &::-webkit-search-decoration,
    &::-webkit-search-cancel-button {
        appearance: none;
    }

    &::placeholder {
        color: var(--sav-color-dunkelblau);
        opacity: 1;
    }
}

.search__submit {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: var(--sav-color-dunkelblau);
    cursor: pointer;

    &:active {
        color: var(--sav-color-dunkelblau-hover);
    }

    /* Only where a pointer can rest without pressing: a touch screen keeps the state after the
       tap, over a page the tap has already answered. */
    @media (hover: hover) and (pointer: fine) {
        &:hover {
            color: var(--sav-color-dunkelblau-hover);
        }
    }

    &:focus-visible {
        outline: 2px solid var(--sav-color-dunkelblau);
        outline-offset: 2px;
    }

    & svg {
        /* 24px → 26px. */
        inline-size: clamp(1.5rem, 1.5rem + (100vw - 24.375rem) * 0.0015, 1.625rem);
        block-size: clamp(1.5rem, 1.5rem + (100vw - 24.375rem) * 0.0015, 1.625rem);
    }
}

.search__frame {
    &[aria-busy='true'] {
        opacity: 0.5;
        /* The delay is the point: an answer under 300ms never dims, so a quick one does not
           flash. */
        transition: opacity 100ms 300ms;
    }

    /* Only where a control follows: on a single page the wrapper renders empty, and the
       distance would trail under the last hit. */
    & > .pagination__controls:has(.pagination__nav) {
        /* 60px → 92px below the last hit. */
        margin-block-start: clamp(3.75rem, 3.75rem + (100vw - 24.375rem) * 0.02392, 5.75rem);
    }
}

/* The design draws this page at 1728px only. What it draws there is kept and the distances
   shrink towards the narrow screen on the rhythm the overview pages carry — 24px, 48px, 60px —
   rather than standing at their desktop size on a phone. */
.search__count {
    /* 48px → 120px below the field row. */
    margin: clamp(3rem, 3rem + (100vw - 24.375rem) * 0.05381, 7.5rem) 0 0;
}

.search__hits,
.search__empty {
    /* 24px → 48px below the count. */
    margin: clamp(1.5rem, 1.5rem + (100vw - 24.375rem) * 0.01794, 3rem) 0 0;
}

.search__hits {
    padding: 0;
    list-style: none;
}

.search__hit {
    position: relative;
    display: grid;
    /* The arrow keeps the right edge; 24px → 71px of air before it, or the text column would
       be a third of a narrow screen. */
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: clamp(1.5rem, 1.5rem + (100vw - 24.375rem) * 0.03513, 4.4375rem);
    align-items: start;
    /* 24px → 32px between a hit and the line under it. */
    padding-block-end: clamp(1.5rem, 1.5rem + (100vw - 24.375rem) * 0.00598, 2rem);
    border-block-end: 1px solid var(--sav-color-dunkelblau);

    /* The line under the hit reaches 2px, and it grows downward so no row below moves. The
       ring belongs on the hit too, since the link covers it whole. */
    &:has(.search__link:focus-visible) {
        outline: 2px solid var(--sav-color-dunkelblau);
        outline-offset: 2px;
        box-shadow: 0 1px 0 var(--sav-color-dunkelblau);

        & .search__arrow {
            background-color: var(--sav-color-hellblau);
        }
    }

    /* The same on the way past, but only where a pointer can rest without pressing: on a touch
       screen the state would stick after the tap that has already left the page. */
    @media (hover: hover) and (pointer: fine) {
        &:hover {
            box-shadow: 0 1px 0 var(--sav-color-dunkelblau);

            & .search__arrow {
                background-color: var(--sav-color-hellblau);
            }
        }
    }

    /* 24px → 32px between the line and the hit under it, so the first one starts flush. */
    & + & {
        padding-block-start: clamp(1.5rem, 1.5rem + (100vw - 24.375rem) * 0.00598, 2rem);
    }
}

.search__title {
    color: var(--sav-color-dunkelblau);

    .search__kicker + & {
        margin-block-start: 0.25rem;
    }
}

.search__excerpt {
    margin-block-start: 1rem;
}

.search__link {
    color: inherit;
    text-decoration: none;

    /* Stretched over the hit, so the whole row leads to it with one link in the tab order.
       Its text stops being selectable, which is the price. */
    &::after {
        position: absolute;
        inset: 0;
        content: '';
    }

    &:focus-visible {
        outline: none;
    }
}

.search__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 46px, the circle the design puts the arrow in — the same on a phone, where it is what
       a finger aims at. */
    inline-size: 2.875rem;
    block-size: 2.875rem;
    border-radius: 50%;
    background-color: var(--sav-color-hellgrau);
    color: var(--sav-color-dunkelblau);

    @media (prefers-reduced-motion: no-preference) {
        transition: background-color 0.2s;
    }

    & svg {
        inline-size: 1.5rem;
        block-size: 1.5rem;
    }
}