/* sitesearch.css — minimal, unobtrusive, mobile-first styling for the search widget.
   All class names are prefixed `sitesearch-` so they won't collide with a site's own CSS.
   Colours use currentColor / inherit where possible so it adopts the host theme. */

.sitesearch-status { color: #666; font-style: italic; }
.sitesearch-error { color: #b00020; }
.sitesearch-summary { margin: 0 0 0.5em; }
.sitesearch-suggestion { margin: 0 0 1em; }

.sitesearch-layout { display: block; }
@media (min-width: 720px) {
  .sitesearch-layout { display: flex; gap: 1.5rem; align-items: flex-start; }
  .sitesearch-facets { flex: 0 0 15rem; }
  .sitesearch-results-list { flex: 1 1 auto; min-width: 0; }
}

.sitesearch-facets h3 { margin: 0 0 0.25rem; font-size: 1rem; }
.sitesearch-facets h4 { margin: 0.75rem 0 0.25rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; color: #666; }
.sitesearch-facets ul { list-style: none; margin: 0; padding: 0; }
.sitesearch-facets li { margin: 0.1rem 0; }
.sitesearch-facet { text-decoration: none; }
.sitesearch-facet.on { font-weight: 600; }
.sitesearch-clear { font-size: 0.85rem; }

.sitesearch-result { margin: 0 0 1.25rem; }
.sitesearch-result h3 { margin: 0 0 0.15rem; font-size: 1.1rem; }
.sitesearch-meta { font-size: 0.8rem; color: #777; margin-bottom: 0.2rem; }
.sitesearch-snippet { margin: 0; }
.sitesearch-snippet mark { background: #fff3a3; padding: 0 0.05em; }

.sitesearch-pagination { display: flex; gap: 1rem; align-items: center; margin: 1.5rem 0; }
.sitesearch-page { color: #666; }