/**
 * @file
 * Small additions for the SearchStax results block.
 *
 * The search form itself uses the site's Bootstrap form classes (see
 * SearchResults.vue), and the library's own input-widget styling and fonts are
 * removed when dist/searchstudio.css is built, so the form and the text
 * inherit the site's styles. This file only covers what is left: the
 * autosuggest list and the search button's loading state.
 */

.gbc-search__input {
  position: relative;
}

/*
 * The Search label is styled like the facet group headings (16px bold), and
 * the text typed into the field is the same size as the facet labels (16px),
 * at every width.
 */
.gbc-search .gbc-search__input .form-label {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
}

.gbc-search .gbc-search__input .form-control {
  font-size: 1rem;
  line-height: 1.5;
}

/* The library adds this class to the search button while a search runs. */
.gbc-search .btn.searchstax-spinner-icon {
  cursor: progress;
  opacity: 0.65;
}

/* Autosuggest list, directly under the form controls. */
.gbc-search .searchstax-autosuggest-container {
  position: absolute;
  inset-block-start: calc(100% - 1rem);
  inset-inline: 0;
  z-index: 1000;
  border: var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6);
  background-color: var(--bs-body-bg, #fff);
  box-shadow: var(--bs-box-shadow-sm, 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075));
}

.gbc-search .searchstax-autosuggest-container.hidden {
  display: none;
}

.gbc-search .searchstax-autosuggest-item-term-container {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
}

.gbc-search .searchstax-autosuggest-item:hover,
.gbc-search .searchstax-autosuggest-item.active {
  background-color: var(--bs-tertiary-bg, #f8f9fa);
}

/* Results and pagination use the site's own listing and pager markup. */
.gbc-search .gbc-news-listing__wrapper {
  /* The news listing puts text beside an image; search results have none. */
  flex-direction: column;
}

.gbc-search .gbc-search__pager-summary {
  display: flex;
  align-items: center;
  min-height: 26px;
}

/*
 * Facets. The library's own rules are long selector chains, so these repeat
 * enough of the chain to take precedence.
 */
.gbc-search .searchstax-facets-container-desktop .searchstax-facet-container .searchstax-facet-values-container .searchstax-facet-value-container .searchstax-facet-value-label {
  /* Labels are readable text now ("Gettysburg College"), and may wrap. */
  flex: 0 1 auto;
  font-size: 1rem;
  font-weight: 400;
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  text-transform: none;
  white-space: normal;
  overflow-wrap: anywhere;
}

.gbc-search .searchstax-facets-container-desktop .searchstax-facet-container .searchstax-facet-values-container .searchstax-facet-value-container .searchstax-facet-value-count {
  flex: none;
  font-size: 1rem;
  font-weight: 400;
  line-height: inherit;
  white-space: nowrap;
}

/*
 * Facets look the same at every width: the same checkbox, row height, text
 * size and group heading, with the count straight after the label. Desktop
 * facets are the library's markup, mobile facets are ours (below).
 */
.gbc-search .searchstax-facets-container-desktop .searchstax-facet-container .searchstax-facet-values-container .searchstax-facet-value-container {
  align-items: center;
  gap: var(--gbc-search-facet-gap);
  min-height: var(--gbc-search-facet-row);
}

.gbc-search .searchstax-facets-container-desktop .searchstax-facet-container .searchstax-facet-values-container .searchstax-facet-value-container .searchstax-facet-input-checkbox {
  flex: none;
  width: var(--gbc-search-facet-box);
  height: var(--gbc-search-facet-box);
  /* The library puts 6px around the box; the gap above spaces it instead. */
  margin: 0;
}

.gbc-search .searchstax-facets-container-desktop .searchstax-facet-container .searchstax-facet-values-container .searchstax-facet-value-container .searchstax-facet-value-label {
  flex: 0 1 auto;
  margin: 0;
}

.gbc-search .searchstax-facets-container-desktop .searchstax-facet-container .searchstax-facet-values-container .searchstax-facet-value-container .searchstax-facet-value-count {
  margin-inline-start: -0.5rem;
}

/* Group headings: bold text, as the mobile headings and the Programs form. */
.gbc-search .searchstax-facets-container-desktop .searchstax-facet-container .searchstax-facet-title-container .searchstax-facet-title {
  font-size: 1rem;
  font-weight: 700;
  text-transform: none;
}

/* The site's focus style, as on the other controls. */
.gbc-search .searchstax-facets-container-desktop .searchstax-facet-container .searchstax-facet-title-container .searchstax-facet-title:focus-visible,
.gbc-search .searchstax-facets-container-desktop .searchstax-facet-container .searchstax-facet-values-container .searchstax-facet-value-container .searchstax-facet-input-checkbox:focus-visible {
  box-shadow: none;
  outline: 1px dashed #000;
  outline-offset: 4px;
}

/*
 * A wider facet column, so labels like "Gettysburg College" do not wrap now
 * that the checkboxes are bigger. The library's values are 21% and 40px.
 */
@media (min-width: 767px) {
  .gbc-search .searchstax-page-layout-container .searchstax-page-layout-facet-result-container .searchstax-page-layout-facet-container {
    min-width: 26%;
    max-width: 26%;
    padding-right: 32px;
  }

  .gbc-search .searchstax-page-layout-container .searchstax-page-layout-facet-result-container .searchstax-page-layout-result-container {
    width: calc(74% - 32px);
  }
}

/*
 * The library gives its page container a 50px margin on each side. On mobile
 * that pushes the search content in from the page's 20px gutter, so it is
 * removed there and the content lines up with the page, as the Programs
 * Listing does.
 */
@media (max-width: 767px) {
  .gbc-search .searchstax-page-layout-container {
    margin-inline: 0;
  }
}

/*
 * Mobile filters: the Programs Listing pattern (a full-width light blue bar
 * with an outlined Filter button that turns navy with a cross while open, and
 * a panel of labelled controls below it, closed by Done). The colours are the
 * college theme's palette.
 */
.gbc-search {
  --gbc-search-filter-bg: #c7edff;
  --gbc-search-filter-accent: #2fbcff;
  --gbc-search-filter-underline: #8fdbff;
  --gbc-search-filter-open: #043371;
  /* Facet sizes, shared by the desktop and the mobile layouts. */
  --gbc-search-facet-box: 1.5rem;
  --gbc-search-facet-row: 44px;
  --gbc-search-facet-gap: 0.75rem;
}

/*
 * The library switches between its desktop and mobile facets at 767px; its
 * mobile styling is replaced by the rules below.
 */
.gbc-search .gbc-search-filters {
  margin-block-end: 1.5rem;
}

@media (min-width: 767px) {
  .gbc-search .gbc-search-filters {
    display: none;
  }
}

.gbc-search .gbc-search-filters__bar,
.gbc-search .gbc-search-filters__panel {
  /* Full width of the viewport, as the Programs Listing bar is. */
  box-sizing: border-box;
  position: relative;
  left: 50%;
  width: 100vw;
  margin-inline-start: -50vw;
  padding-inline: 20px;
  background-color: var(--gbc-search-filter-bg);
}

.gbc-search .gbc-search-filters__bar {
  display: flex;
  padding-block: 15px;
}

.gbc-search .gbc-search-filters__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border: 2px solid var(--gbc-search-filter-accent);
  background: transparent;
  color: #000;
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
}

.gbc-search .gbc-search-filters__toggle::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M8 4.4V3.2H10.4V0H11.6V3.2H14V4.4H8ZM10.4 14V6.4H11.6V14H10.4ZM2.4 14V10.8H0V9.6H6V10.8H3.6V14H2.4ZM2.4 7.6V0H3.6V7.6H2.4Z' fill='%23000000'/%3E%3C/svg%3E") center / contain no-repeat;
}

.gbc-search .gbc-search-filters__toggle.is-open {
  border-color: var(--gbc-search-filter-open);
  background: var(--gbc-search-filter-open);
  color: #fff;
}

.gbc-search .gbc-search-filters__toggle.is-open::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M0.530273 0.530335L12.5303 12.5303M0.530273 12.5303L12.5303 0.530334' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E");
}

.gbc-search .gbc-search-filters__panel {
  padding-block: 0 30px;
}

.gbc-search .gbc-search-filters__panel[hidden] {
  display: none;
}

.gbc-search .gbc-search-filters__group {
  margin: 0 0 20px;
  padding: 0;
  border: 0;
}

/* The group names look like the Programs Listing's form labels. */
.gbc-search .gbc-search-filters__legend {
  float: none;
  width: auto;
  margin: 0 0 10px;
  padding: 0;
  font-size: 1rem;
  font-weight: 700;
}

/* Large touch targets, with the same sizes as the desktop facets. */
.gbc-search .gbc-search-filters__item {
  display: flex;
  align-items: center;
  gap: var(--gbc-search-facet-gap);
  min-height: var(--gbc-search-facet-row);
  margin: 0;
  padding: 0;
}

.gbc-search .gbc-search-filters__item .form-check-input {
  flex: none;
  float: none;
  width: var(--gbc-search-facet-box);
  height: var(--gbc-search-facet-box);
  margin: 0;
  /* White boxes disappear on the light blue; #626262 is 4.9:1 on it. */
  border-color: #626262;
}

.gbc-search .gbc-search-filters__item .form-check-label {
  flex: 0 1 auto;
  font-size: 1rem;
  line-height: inherit;
  padding-block: 0.5rem;
}

.gbc-search .gbc-search-filters__item-count {
  white-space: nowrap;
}

.gbc-search .gbc-search-filters__actions {
  display: flex;
  align-items: center;
  gap: 30px;
}

/* Done is styled as the Programs Listing's Apply button. */
.gbc-search .gbc-search-filters__done {
  padding: 8px 20px;
  border: 2px solid var(--gbc-search-filter-accent);
  background: transparent;
  color: #000;
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
}

/* Clear filters is styled as its Reset button. */
.gbc-search .gbc-search-filters__reset {
  padding: 8px 0 5px 18px;
  border: 0;
  background: url("data:image/svg+xml,%3Csvg width='12' height='13' viewBox='0 0 12 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.25 13C3.7375 12.8238 2.48438 12.2044 1.49063 11.1416C0.496875 10.0788 0 8.83107 0 7.39837C0 6.62331 0.1625 5.88053 0.4875 5.17005C0.8125 4.45958 1.275 3.84011 1.875 3.31165L2.94375 4.31572C2.46875 4.715 2.10938 5.17886 1.86562 5.70732C1.62187 6.23577 1.5 6.79946 1.5 7.39837C1.5 8.4318 1.85 9.34485 2.55 10.1375C3.25 10.9302 4.15 11.4146 5.25 11.5908V13ZM6.75 13V11.5908C7.8375 11.4029 8.73438 10.9155 9.44063 10.1287C10.1469 9.34191 10.5 8.4318 10.5 7.39837C10.5 6.22403 10.0625 5.22584 9.1875 4.40379C8.3125 3.58175 7.25 3.17073 6 3.17073H5.94375L6.76875 3.9458L5.71875 4.93225L3.09375 2.46612L5.71875 0L6.76875 0.98645L5.94375 1.76152H6C7.675 1.76152 9.09375 2.30759 10.2563 3.39973C11.4187 4.49187 12 5.82475 12 7.39837C12 8.81933 11.5031 10.0612 10.5094 11.124C9.51562 12.1868 8.2625 12.8121 6.75 13Z' fill='black'/%3E%3C/svg%3E") left 57% / auto no-repeat;
  box-shadow: inset 0 -2px 0 0 var(--gbc-search-filter-underline);
  color: #000;
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
}

.gbc-search .gbc-search-filters__done:focus-visible,
.gbc-search .gbc-search-filters__reset:focus-visible,
.gbc-search .gbc-search-filters__toggle:focus-visible {
  outline: 1px dashed #000;
  outline-offset: 4px;
}

.gbc-search .gbc-search-filters__toggle.is-open:focus-visible {
  outline-color: #fff;
}