/*
 * Search autocomplete: the header search box and its suggestions panel.
 *
 * The theme's header search styles (scss/regions/_top_nav_search.scss) open
 * and close the box and style the input; these rules widen the box, use the
 * gold underline and lay out the panel. They load before the theme's CSS, so
 * the input rule has extra classes to win.
 */

/* The box fills the space the main menu leaves while search is open. */
body.search-bar-active .region-desktop-nav .block-chbrp-general-search-top-nav-toggle:has(.search-autocomplete),
body.search-bar-active .region-desktop-nav .block-chbrp-general-search-top-nav:has(.search-autocomplete) {
  flex: 1 1 auto;
  min-width: 0;
}

.active-search-container > .container > form.search-autocomplete {
  flex: 1 1 auto;
  min-width: 0;
}

.search-autocomplete .search-autocomplete__field {
  flex: 1 1 auto;
  min-width: 0;
}

body .active-search-container .search-autocomplete .search-autocomplete__field .search-autocomplete__input {
  border-bottom-color: #e4b244;
  appearance: none;
}

.search-autocomplete .search-autocomplete__input::-webkit-search-cancel-button {
  display: none;
}

/* The theme clips the open search container, and on small screens the
   header's containers too; let the panel out while it is open. */
body.search-bar-active .active-search-container:has(.search-autocomplete) {
  position: relative;
  z-index: 20;
  overflow: visible;
}

body.search-bar-active .container:has(.search-autocomplete__panel:not([hidden])) {
  overflow: visible;
}

/* Lined up with the header content by search-autocomplete.js. */
.search-autocomplete .search-autocomplete__panel {
  position: absolute;
  z-index: 100;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.05);
  font-family: "Nunito Sans", sans-serif;
  text-align: left;
}

.search-autocomplete .search-autocomplete__panel[hidden] {
  display: none;
}

.search-autocomplete .search-autocomplete__results {
  margin: 0;
  padding: 4px 37px 0 32px;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  scrollbar-color: #123b73 #f6f7f8;
  scrollbar-width: thin;
}

.search-autocomplete .search-autocomplete__item,
.search-autocomplete .search-autocomplete__empty {
  margin: 0;
  padding: 16px 0;
}

.search-autocomplete .search-autocomplete__item::before,
.search-autocomplete .search-autocomplete__empty::before {
  content: none;
}

.search-autocomplete .search-autocomplete__item + .search-autocomplete__item {
  border-top: 1px solid #f3f3f3;
}

.search-autocomplete .search-autocomplete__empty {
  color: #444;
  font-size: 1rem;
  line-height: 1.25rem;
}

.search-autocomplete .search-autocomplete__all {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 64px;
  padding: 0 32px;
  background: #e4b244;
  color: #123b73;
  font-family: "Nunito Sans", sans-serif;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.search-autocomplete .search-autocomplete__all[hidden] {
  display: none;
}

/* The theme's call-to-action chevron. */
.search-autocomplete .search-autocomplete__all::after {
  content: "";
  width: 7.64px;
  height: 12.64px;
  background: #123b73;
  -webkit-mask: url("../../images/SVGs-3x/HOMEPAGE/CTA-CHEVRON.svg") no-repeat center / contain;
  mask: url("../../images/SVGs-3x/HOMEPAGE/CTA-CHEVRON.svg") no-repeat center / contain;
}

.search-autocomplete .search-autocomplete__all:hover,
.search-autocomplete .search-autocomplete__all:focus-visible {
  background: #123b73;
  color: #e4b244;
}

.search-autocomplete .search-autocomplete__all:hover::after,
.search-autocomplete .search-autocomplete__all:focus-visible::after {
  background: #e4b244;
}

@media (max-width: 767.98px) {
  .search-autocomplete .search-autocomplete__results {
    padding: 4px 20px 0;
  }

  .search-autocomplete .search-autocomplete__all {
    height: 56px;
  }
}