/* Search results (search.php) — a result count + refine box (.search-summary) above a list of result cards (.search-result, one per templates/partials/ components/search-result.php). Each card is a single stretched link. */ /* ---- Summary: count + refine search ---- */ .search-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-m); margin-block-end: var(--space-l); padding-block-end: var(--space-m); border-block-end: 1px solid var(--color-border); } .search-summary__count { margin: 0; } /* Block search box on the results page (the bar/drawer copies stay compact). */ .search-form--block { inline-size: 100%; max-inline-size: 28rem; } .search-form--block .search-form__input { flex: 1; inline-size: auto; padding-block: 0.55rem; } /* ---- Result list ---- */ /* Scoped `body .search-results` on purpose: WordPress adds `search-results` as a BODY class on the results page, and these flex/list rules must hit only our result

— never the itself. The descendant combinator matches the list inside but can't match (it isn't its own descendant). */ body .search-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-m); } .search-result { position: relative; /* stretched-link context */ display: flex; gap: var(--space-m); background-color: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: clip; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .search-result:hover, .search-result:focus-within { border-color: var(--color-green-strong); box-shadow: var(--shadow-soft); } /* ---- Thumbnail (decorative; the title link covers the whole card) ---- */ .search-result__media { flex: none; inline-size: 11rem; align-self: stretch; background-color: var(--color-green-muted); } .search-result__media img { inline-size: 100%; block-size: 100%; object-fit: cover; } /* ---- Body ---- */ .search-result__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3xs); padding: var(--space-m); min-inline-size: 0; } .search-result__type { margin-block-end: var(--space-3xs); } .search-result__title { margin: 0; color: var(--color-text); text-decoration: none; } /* Stretch the title link across the card so the whole card is clickable. */ .search-result__title::after { content: ""; position: absolute; inset: 0; } .search-result:hover .search-result__title, .search-result__title:focus-visible { text-decoration: underline; } .search-result__excerpt { margin: 0; color: var(--color-text); } .search-result__excerpt mark { background-color: var(--color-green-light); color: var(--color-text); padding-inline: 0.15em; border-radius: 0.2em; } .search-result__more { margin-block-start: var(--space-2xs); color: var(--color-link); font-weight: 700; } .search-empty { margin: 0; } /* ---- Narrow screens: stack the thumbnail above the body ---- */ @media (max-width: 36rem) { .search-result { flex-direction: column; } .search-result__media { inline-size: 100%; block-size: 9rem; } }