/* ==========================================================================
   Sitewide search page (custom_search_content view, /search)
   ========================================================================== */

.ssuk-search-page {
  font-family: var(--font-sans);
}

/* The site chrome nests the view inside #main-container-inner (max-width
   1280px) plus several padded w3.css wrappers, but the reference design runs
   the hero and results bands edge to edge. Break out of that stack rather than
   unpicking the shared containers, which other pages rely on. `overflow-x:
   clip` on the page body absorbs the extra width where a classic scrollbar
   makes 100vw wider than the viewport; unlike `hidden` it does not create a
   scroll container, so the sticky sidebar still works. */
.ssuk-search-page {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
body.path-search .page-wrapper {
  overflow-x: clip;
}
/* Those same wrappers add 12px of margin and 24px of padding above and below
   the content, which shows as an empty white band between the header and the
   hero. The reference stacks its sections flush, so collapse the vertical
   spacing here only — the horizontal padding is already bypassed by the
   break-out above. */
body.path-search .main-box {
  margin-top: 0;
  margin-bottom: 0;
}
/* layout-regions.css sets `padding: 24px !important` on this wrapper, so the
   override has to be !important too. Only the vertical sides are reset; the
   horizontal padding is what the break-out above centres against. */
body.path-search .main-box > .d8-fade {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ---- Hero ----
   The site sets an 18px root font-size and a 1.8 body line-height, so rem
   values taken from the 16px-based reference render ~1.125x too large and the
   heading inherits a 73px line box. Everything here is therefore in px with
   explicit line-heights, to hold the reference's proportions. */
.ssuk-search-hero {
  background: linear-gradient(135deg, #2d1b4e 0%, var(--color-primary-hover) 100%);
  padding: 56px 16px;
}
.ssuk-search-hero__inner {
  max-width: 768px;
  margin: 0 auto;
  text-align: center;
}
.ssuk-search-hero__eyebrow {
  display: block;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.ssuk-search-hero__heading {
  font-family: var(--font-display);
  color: #fff;
  font-size: 30px;
  line-height: 1.2;
  font-weight: 600;
  margin: 0 0 32px;
}
@media (min-width: 768px) {
  .ssuk-search-hero__heading { font-size: 36px; }
}

.ssuk-search-hero-form__wrapper {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  padding: 0;
}
.ssuk-search-hero-form__wrapper label {
  display: none;
}
.ssuk-search-hero-form__wrapper .form-item,
.ssuk-search-hero-form__wrapper .js-form-item {
  flex: 1;
  margin: 0 !important;
}
.ssuk-search-hero-form__wrapper .form-actions {
  margin: 0 !important;
}
.ssuk-search-hero-form__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-left: 20px;
  color: var(--color-primary);
}
.ssuk-search-hero-form__clear {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  color: var(--color-muted);
  transition: background-color 0.15s, color 0.15s;
}
.ssuk-search-hero-form__clear svg {
  width: 16px;
  height: 16px;
}
.ssuk-search-hero-form__clear:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: #1f2937;
}
.ssuk-search-hero-form__wrapper input[type="text"],
.ssuk-search-hero-form__input {
  flex: 1;
  width: 100%;
  border: none !important;
  outline: none;
  background: transparent !important;
  height: 56px !important;
  padding: 0 16px !important;
  font-size: 16px;
  line-height: 24px;
  color: #1f2937;
  box-shadow: none !important;
}
.ssuk-search-hero-form__wrapper input[type="text"]::placeholder,
.ssuk-search-hero-form__input::placeholder {
  color: var(--color-muted);
}
.ssuk-search-hero-form__wrapper input[type="submit"],
.ssuk-search-hero-form__submit {
  display: inline-flex !important;
  align-items: center;
  gap: 0.375rem;
  background-color: var(--color-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  height: 40px !important;
  padding: 0 24px !important;
  margin: 8px !important;
  font-size: 15px;
  /* `#main-container .w3-button` wins on specificity and forces a 56px line
     box onto this 40px button, which pushes the label below centre, plus a
     Montserrat face that does not match the rest of the search pill. Both need
     !important to beat an ID-scoped selector. */
  line-height: 40px !important;
  font-family: inherit !important;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s;
}
.ssuk-search-hero-form__submit:hover {
  background-color: var(--color-primary-hover) !important;
}
.ssuk-search-hero-form__submit .btn-icon {
  width: 16px;
  height: 16px;
}

/* ---- Empty / suggested-search state ---- */
.ssuk-search-empty-state {
  text-align: center;
  padding: 4rem 1rem;
}
.ssuk-search-empty-state__text {
  color: var(--color-muted);
  font-size: 0.9375rem;
  margin-bottom: 2rem;
}
.ssuk-search-empty-state__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}
.ssuk-search-chip {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 9999px;
  font-size: 0.875rem;
  color: #4b5563;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: border-color 0.15s, color 0.15s;
}
.ssuk-search-chip:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ---- Body layout ---- */
.ssuk-search-body {
  background: #f9fafb;
  padding: 2.5rem 1rem;
}
.ssuk-search-body__inner {
  max-width: 1024px;
  margin: 0 auto;
}
.ssuk-search-layout {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: flex-start;
}
@media (min-width: 1024px) {
  .ssuk-search-layout {
    flex-direction: row;
  }
}

/* ---- Sidebar / type filter ---- */
.ssuk-search-sidebar {
  width: 100%;
  flex-shrink: 0;
}
@media (min-width: 1024px) {
  .ssuk-search-sidebar {
    width: 224px;
    position: sticky;
    top: 6rem;
  }
}
.ssuk-search-sidebar__inner {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  padding: 1.25rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.ssuk-search-sidebar__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0 0 1rem;
}
.ssuk-search-sidebar__title svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
.ssuk-search-sidebar .facets-widget-links ul,
.ssuk-search-sidebar .item-list__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.ssuk-search-sidebar .facets-widget-links li {
  border-radius: 0.75rem;
}
.ssuk-search-sidebar .facets-widget-links li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  color: var(--color-muted);
  text-decoration: none;
  font-size: 0.875rem;
  transition: background-color 0.15s, color 0.15s;
}
.ssuk-search-sidebar .facets-widget-links li a:hover {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}
.ssuk-search-sidebar .facets-widget-links li a.is-active {
  background-color: var(--color-primary);
  color: #fff;
  font-weight: 500;
}
.ssuk-search-sidebar .facet-item__value {
  flex: 1;
  min-width: 0;
}
.ssuk-search-sidebar .facet-item__count {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.0625rem 0.375rem;
  border-radius: 9999px;
  background: #f3f4f6;
  color: #6b7280;
}
/* Facets flags the list .facet-inactive until a type is selected, so that is
   when the "All" reset row is the active one. */
.ssuk-search-sidebar .facets-widget-links ul.facet-inactive li.facets-reset a {
  background-color: var(--color-primary);
  color: #fff;
  font-weight: 500;
}
.ssuk-search-sidebar .facets-widget-links ul.facet-inactive li.facets-reset a .facet-item__count {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.ssuk-search-sidebar .facets-widget-links li a.is-active .facet-item__count {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.ssuk-search-sidebar .facets-widget-links li a.is-active .facet-item__status {
  color: rgba(255, 255, 255, 0.8);
}

/* ---- Results ---- */
.ssuk-search-results {
  flex: 1;
  min-width: 0;
  width: 100%;
}
.ssuk-search-results__count {
  color: var(--color-muted);
  font-size: 0.875rem;
  margin: 0 0 1.25rem;
}
.ssuk-search-results__count strong {
  color: var(--color-primary);
  font-weight: 600;
}
.ssuk-search-results__term {
  color: #374151;
  font-weight: 600;
}
.ssuk-search-results__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ssuk-search-result-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  padding: 1.25rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}
.ssuk-search-result-card:hover {
  box-shadow: 0 8px 20px rgba(68, 45, 114, 0.1);
  border-color: var(--color-primary-light);
  transform: translateY(-1px);
}
.ssuk-search-result-card__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 0.75rem;
  background: var(--color-primary-light);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ssuk-search-result-card__icon svg {
  width: 20px;
  height: 20px;
}
.ssuk-search-result-card__body {
  flex: 1;
  min-width: 0;
}
.ssuk-search-result-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}
.ssuk-search-result-card__badge {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  background: var(--color-primary-light);
  color: var(--color-primary);
}

/* ---- Per-type accent colours (icon + badge), matching the reference design ---- */
.ssuk-search-result-card--article .ssuk-search-result-card__icon,
.ssuk-search-result-card--article .ssuk-search-result-card__badge {
  background: #f5f3ff;
  color: #6d28d9;
}
.ssuk-search-result-card--event .ssuk-search-result-card__icon,
.ssuk-search-result-card--event .ssuk-search-result-card__badge {
  background: #fffbeb;
  color: #b45309;
}
.ssuk-search-result-card--faq .ssuk-search-result-card__icon,
.ssuk-search-result-card--faq .ssuk-search-result-card__badge {
  background: #eff6ff;
  color: #1d4ed8;
}
/* News uses the reference design's rose accent. */
.ssuk-search-result-card--news .ssuk-search-result-card__icon,
.ssuk-search-result-card--news .ssuk-search-result-card__badge {
  background: #fff1f2;
  color: #be123c;
}
/* ---- "Members only" results ----
   Restricted articles are only ever returned to users entitled to see them, so
   the badge doubles as a reminder of what the membership is paying for. Gold
   against the neutral type badges, plus a tinted left edge so the cards are
   distinguishable while scanning. */
.ssuk-search-result-card__members {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  background: #fdf4d7;
  color: #8a6100;
  white-space: nowrap;
}
.ssuk-search-result-card__members svg {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}
.ssuk-search-result-card.is-members-only {
  border-left: 3px solid #e6b422;
  background: linear-gradient(to right, #fffdf5 0%, #fff 40%);
}
.ssuk-search-result-card.is-members-only:hover {
  border-left-color: #d4a017;
}

.ssuk-search-result-card__date,
.ssuk-search-result-card__location {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  color: #9ca3af;
}
.ssuk-search-result-card__date svg,
.ssuk-search-result-card__location svg {
  width: 12px;
  height: 12px;
}
.ssuk-search-result-card__title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0 0 0.375rem;
}
.ssuk-search-result-card__title a {
  color: inherit;
  text-decoration: none;
}
.ssuk-search-result-card__title a:hover {
  color: var(--color-primary-hover);
}
/* overrides/responsive.css sets `p { padding-top/bottom: 10px !important }`
   under 600px. Because box-sizing is border-box that padding eats into the
   clamped height, leaving room for only ~1.1 lines of text and slicing the
   second line through the middle. It has to be beaten with !important. The
   max-height then caps the box at exactly two lines (2 x the 1.625
   line-height = 3.25em) so no partial line can show even if the clamp itself
   is defeated. */
.ssuk-search-result-card__excerpt {
  color: var(--color-muted);
  font-size: 0.875rem;
  line-height: 1.625;
  margin: 0;
  padding: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 3.25em;
}

/* Same responsive rule, same fix, for the other paragraphs on the page. */
.ssuk-search-results__count,
.ssuk-search-empty-state__text,
.ssuk-search-no-results p {
  padding: 0 !important;
}
.ssuk-search-result-card__arrow {
  flex-shrink: 0;
  align-self: center;
  width: 16px;
  height: 16px;
  color: #d1d5db;
  transition: color 0.2s, transform 0.2s;
}
.ssuk-search-result-card:hover .ssuk-search-result-card__arrow {
  color: var(--color-primary);
  transform: translateX(2px);
}

.ssuk-search-no-results {
  text-align: center;
  padding: 3.5rem 1.5rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  color: var(--color-muted);
}
.ssuk-search-no-results svg {
  width: 32px;
  height: 32px;
  margin: 0 auto 1rem;
  color: var(--color-primary);
}

.ssuk-search-pager {
  margin-top: 2rem;
}

/* Pagination, ported from events.css so /search and /events match. The rules
   are scoped to the search page because .pagination-* lives in the `events`
   library, which this page does not load. */
.ssuk-search-pager .pagination {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  background: transparent;
  padding: 0;
  border: none;
  box-shadow: none;
}
.ssuk-search-pager .pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 0.875rem 2rem;
  min-width: 140px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 3rem;
  color: #9b8bc4;
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
.ssuk-search-pager .pagination-btn:hover:not(:disabled) {
  background: #f9fafb;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.ssuk-search-pager .pagination-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background: #fff;
  border-color: #e5e7eb;
  color: #d1d5db;
}
.ssuk-search-pager .pagination-btn svg {
  width: 1.125rem;
  height: 1.125rem;
}
.ssuk-search-pager .pagination-numbers {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0 0.5rem;
}
.ssuk-search-pager .pagination-number {
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  color: #374151;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}
.ssuk-search-pager .pagination-number:hover {
  background: #f9fafb;
  color: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 2px 4px rgba(68, 45, 114, 0.15);
}
.ssuk-search-pager .pagination-number.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  box-shadow: 0 2px 4px rgba(68, 45, 114, 0.2);
}
.ssuk-search-pager .pagination-ellipsis {
  padding: 0 0.5rem;
  color: var(--color-muted);
  font-size: 1rem;
  font-weight: 600;
  user-select: none;
}

@media (min-width: 768px) {
  .ssuk-search-pager .pagination {
    gap: 0.75rem;
  }
  .ssuk-search-pager .pagination-btn {
    padding: 0.5rem 0;
    gap: 0.5rem;
    border-width: 2px;
    border-radius: 0.5rem;
    color: var(--color-primary);
  }
  .ssuk-search-pager .pagination-btn svg {
    width: 1.25rem;
    height: 1.25rem;
  }
  .ssuk-search-pager .pagination-numbers {
    gap: 0.5rem;
    margin: 0 0.75rem;
  }
  .ssuk-search-pager .pagination-number {
    min-width: 2.75rem;
    height: 2.75rem;
    font-size: 0.9rem;
  }
  .ssuk-search-pager .pagination-ellipsis {
    font-size: 1.125rem;
    padding: 0 0.625rem;
  }
}