/**
 * Search results, archives and 404.
 *
 * One stylesheet for all three because they share the result card: the search
 * template and the archive template render the same `results-list` pattern, so
 * splitting the card styles across two files would guarantee they drift.
 *
 * Everything is scoped under `.ccg-results-page` / `.ccg-404-page` — the scope
 * classes on `.ccg-main` — so nothing here can leak into a content page.
 */

.ccg-results-page,
.ccg-404-page {
  --ccg-results-measure: 48rem;

  padding-block: 3rem 5rem;
}

.ccg-results-page .ccg-page-shell,
.ccg-404-page .ccg-page-shell {
  max-width: var(--fusion-site-max-width);
  margin-inline: auto;
  padding-inline: var(--fusion-site-padding-x);
}

@media (min-width: 48em) {
  .ccg-results-page .ccg-page-shell,
  .ccg-404-page .ccg-page-shell {
    padding-inline: var(--fusion-site-padding-x-md);
  }
}

/* ---------------------------------------------------------------- Summary */

.ccg-search-summary {
  max-width: var(--ccg-results-measure);
  margin-block-end: 2.5rem;
}

.ccg-search-summary__title {
  font-family: var(--font-family-heading);
  font-size: var(--wp--preset--font-size--xxxl);
  line-height: 1.2;
  margin-block: 0 0.5rem;

  /* Long unbroken search terms must not push the page sideways. */
  overflow-wrap: anywhere;
}

.ccg-search-summary__count {
  color: var(--color-muted);
  font-size: var(--wp--preset--font-size--base);
  margin-block: 0 1.5rem;
}

.ccg-search-summary__form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.ccg-search-summary__input {
  flex: 1 1 18rem;
  min-width: 0;
  padding: 0.75rem 1rem;
  font-size: var(--wp--preset--font-size--base);
  font-family: var(--font-family-body);
  color: var(--color-base);
  background: var(--color-white);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-default);
}

.ccg-search-summary__input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.ccg-search-summary__submit {
  flex: 0 0 auto;
}

/* ------------------------------------------------------------ Type filter */

.ccg-search-summary__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-start: 1.25rem;
}

.ccg-search-summary__chip,
.ccg-search-summary__chip:link,
.ccg-search-summary__chip:visited {
  display: inline-block;
  padding: 0.375rem 0.875rem;
  font-size: var(--wp--preset--font-size--sm);
  line-height: 1.5;
  color: var(--color-primary);
  text-decoration: none;
  background: var(--color-white);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-pill);
}

.ccg-search-summary__chip:hover,
.ccg-search-summary__chip:focus-visible {
  background: var(--color-primary-lightest);
  border-color: var(--color-primary);
}

.ccg-search-summary__chip--active,
.ccg-search-summary__chip--active:link,
.ccg-search-summary__chip--active:visited,
.ccg-search-summary__chip--active:hover {
  color: var(--color-white);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* --------------------------------------------------------- Archive header */

.ccg-archive-header {
  max-width: var(--ccg-results-measure);
  margin-block-end: 2.5rem;
}

.ccg-archive-header__title {
  font-family: var(--font-family-heading);
  font-size: var(--wp--preset--font-size--xxxl);
  line-height: 1.2;
  margin-block: 0 0.5rem;
}

.ccg-archive-header__description {
  color: var(--color-muted);
  margin-block: 0;
}

/* ----------------------------------------------------------- Result cards */

.ccg-results-list {
  max-width: var(--ccg-results-measure);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ccg-result-card {
  padding-block: 1.5rem;
  border-block-start: 1px solid var(--color-border);
}

.ccg-results-list > li:first-child .ccg-result-card,
.ccg-result-card:first-child {
  border-block-start: 0;
  padding-block-start: 0;
}

.ccg-result-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-block: 0 0.5rem;
  font-size: var(--wp--preset--font-size--sm);
}

.ccg-result-card__type {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  font-weight: 600;
  color: var(--color-primary-darker);
  background: var(--color-primary-lightest);
  border-radius: var(--radius-small);
}

.ccg-result-card__date {
  color: var(--color-muted);
}

.ccg-result-card__title {
  font-family: var(--font-family-heading);
  font-size: var(--wp--preset--font-size--xl);
  line-height: 1.35;
  margin-block: 0 0.375rem;
}

.ccg-result-card__title a,
.ccg-result-card__title a:link,
.ccg-result-card__title a:visited {
  color: var(--color-primary);
  text-decoration: none;
}

.ccg-result-card__title a:hover,
.ccg-result-card__title a:focus-visible {
  text-decoration: underline;
}

.ccg-result-card__excerpt {
  color: var(--color-base);
  margin-block: 0;
}

.ccg-result-card__excerpt .wp-block-post-excerpt__more-text {
  margin-block-start: 0.25rem;
}

/* ----------------------------------------------------------- Empty states */

.ccg-results-empty {
  max-width: var(--ccg-results-measure);
  padding: 2rem;
  background: var(--color-gray-lightest);
  border-radius: var(--radius-medium);
}

.ccg-results-empty__title {
  font-family: var(--font-family-heading);
  font-size: var(--wp--preset--font-size--xxl);
  margin-block: 0 0.5rem;
}

.ccg-results-empty__text {
  color: var(--color-muted);
  margin-block: 0 1rem;
}

.ccg-results-empty__links,
.ccg-404__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ------------------------------------------------------------- Pagination */

.ccg-results-pagination {
  max-width: var(--ccg-results-measure);
  margin-block-start: 2.5rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--color-border);
  font-size: var(--wp--preset--font-size--base);
}

.ccg-results-pagination a,
.ccg-results-pagination a:link,
.ccg-results-pagination a:visited {
  color: var(--color-primary);
  text-decoration: none;
}

.ccg-results-pagination a:hover,
.ccg-results-pagination a:focus-visible {
  text-decoration: underline;
}

.ccg-results-pagination .page-numbers.current {
  font-weight: 700;
  color: var(--color-base);
}

/* ------------------------------------------------------------------- 404 */

.ccg-404 {
  max-width: var(--ccg-results-measure);
}

.ccg-404__eyebrow {
  margin-block: 0 0.5rem;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.ccg-404__title {
  font-family: var(--font-family-heading);
  font-size: var(--wp--preset--font-size--xxxxl);
  line-height: 1.15;
  margin-block: 0 1rem;
}

.ccg-404__text {
  font-size: var(--wp--preset--font-size--lg);
  color: var(--color-base);
  margin-block: 0 2rem;
}

.ccg-404__search .wp-block-search__inside-wrapper {
  gap: 0.75rem;
}

.ccg-404__search .wp-block-search__input {
  padding: 0.75rem 1rem;
  font-size: var(--wp--preset--font-size--base);
  font-family: var(--font-family-body);
  color: var(--color-base);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-default);
}

.ccg-404__search .wp-block-search__button {
  padding: 0.75rem 1.5rem;
  color: var(--color-white);
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-default);
  cursor: pointer;
}

.ccg-404__search .wp-block-search__button:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

.ccg-404__links-title {
  font-family: var(--font-family-heading);
  font-size: var(--wp--preset--font-size--xxl);
  margin-block: 2.5rem 1rem;
}

/* ---------------------------------------------------------- Accessibility */

@media (prefers-reduced-motion: reduce) {
  .ccg-search-summary__chip {
    transition: none;
  }
}

@media (forced-colors: active) {
  .ccg-search-summary__chip--active {
    forced-color-adjust: none;
    color: HighlightText;
    background: Highlight;
    border-color: Highlight;
  }

  .ccg-result-card {
    border-block-start-color: CanvasText;
  }
}