/* ==========================================================================
   Search results (pages/search-results.php).

   Deliberately thin. The page is the weekly listing's toolbar, grid and card,
   so it loads wpl-landing.css and wpl-week-listing.css first and this sheet
   only carries what search genuinely adds: the query form in the hero, a
   six-facet control row, the second toolbar toggle, and the two dead ends
   (no matches, no query yet).

   Namespacing: .sr-* is this page, .wk-* the listing chrome it borrows, .pub-*
   the shared primitives. See the note at the top of wpl-public-theme.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

/* The weekly heroes lean on their own colour (blue for shelf dates, red for
   cutoffs) to tell the two apart. Search is neither, so it sits on the neutral
   page tint and lets the query itself be the loud thing. */
.sr-hero {
    background:
        radial-gradient(900px 320px at 50% -30%, var(--pub-accent-soft), transparent 70%),
        var(--pub-page-2);
}

/* A long query has to wrap somewhere sane rather than blowing out the grid. */
.sr-hero h1 {
    overflow-wrap: anywhere;
}

.sr-hero h1 em {
    color: var(--pub-accent-2);
}

/* Search-again form. Full width of the copy column, because on this page it is
   the primary control — the header's box is a typeahead, this one is the way
   you correct a search that missed. */
.sr-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    max-width: 620px;
    margin-top: 1.5rem;
}

.sr-form-field {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 260px;
}

.sr-form-field > i {
    position: absolute;
    left: 1rem;
    color: var(--pub-muted);
    font-size: 0.9rem;
    pointer-events: none;
}

.sr-form-input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.6rem;
    border: 1px solid var(--pub-border);
    border-radius: 999px;
    background: var(--pub-surface);
    color: var(--pub-ink);
    font-size: 0.95rem;
    line-height: 1.4;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sr-form-input::placeholder { color: var(--pub-muted); }

.sr-form-input:focus {
    outline: none;
    border-color: var(--pub-accent-2);
    box-shadow: 0 0 0 3px var(--pub-accent-soft);
}

/* Search clears the box with a native affordance in some engines; hiding it
   avoids a second X next to our own controls further down. */
.sr-form-input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* .wk-note is a warning on the FOC page (red rule, red icon). Here it only
   reports that the result set was capped, so it cools down to the accent. */
.sr-note {
    border-left-color: var(--pub-accent-2);
}

.sr-note i { color: var(--pub-accent-2); }

/* Counterpart to .wk-stat-urgent: the number of matches you can still get
   through a shop is good news, not a deadline. */
.wk-stat-good {
    border-color: var(--pub-good);
    background: var(--pub-good-soft);
}

.wk-stat-good .wk-stat-value { color: var(--pub-good); }

/* --------------------------------------------------------------------------
   Toolbar
   -------------------------------------------------------------------------- */

/* One more select than the weekly pages — series matters most when the rows
   span the whole catalogue rather than one week. */
.sr-controls {
    grid-template-columns: minmax(220px, 2fr) repeat(5, minmax(0, 1fr)) minmax(0, 1.15fr);
}

@media (max-width: 1399.98px) {
    .sr-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sr-controls .wk-search { grid-column: 1 / -1; }
}

@media (max-width: 767.98px) {
    .sr-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Two checkboxes rather than one, kept together at the end of the alphabet row.
   .wk-check pushes itself right with margin-left:auto, so the group takes that
   job over and the checks sit side by side. */
.sr-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    margin-left: auto;
}

.sr-toggles .wk-check { margin-left: 0; }

@media (max-width: 767.98px) {
    .sr-toggles { margin-left: 0; width: 100%; }
}

/* The window pills carry an icon; the weekly day pills do not. */
#wkDays .wk-pill i {
    margin-right: 0.15rem;
    font-size: 0.72rem;
    opacity: 0.75;
}

#wkDays .wk-pill.is-active i { opacity: 1; }

/* --------------------------------------------------------------------------
   Dead ends — no query yet, or a query nothing matched
   -------------------------------------------------------------------------- */

.sr-blank {
    margin-top: 2.5rem;
    max-width: 720px;
    margin-inline: auto;
}

.sr-blank p {
    max-width: 52ch;
    margin-inline: auto;
}

.sr-blank-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 1.6rem;
}

.sr-suggest-label {
    margin: 1.8rem 0 0.7rem !important;
    font-size: 0.72rem !important;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pub-muted) !important;
}

.sr-suggest {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
}

.sr-suggest-chip {
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--pub-border);
    border-radius: 999px;
    background: var(--pub-surface-2);
    color: var(--pub-ink);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.sr-suggest-chip:hover,
.sr-suggest-chip:focus-visible {
    border-color: var(--pub-accent-2);
    background: var(--pub-accent-soft);
    color: var(--pub-accent-2);
}

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */

/* Results span years, so the date pill reads "Oct 28 / 2026" rather than the
   weekly pages' "Tue / Oct 28" — the year is the part that disambiguates. */
.sr-page .wk-day-pill small { letter-spacing: 0.04em; }