/*------------------------------------*\
    SITE SEARCH
\*------------------------------------*/

/* header toggle */
.navbar .apq-search-toggle {
  background: none;
  border: 0;
  color: #333;
  font-size: 1.2em;
  line-height: 1;
  padding: 8px 4px 8px 16px;
  cursor: pointer;
}
.navbar .apq-search-toggle:hover,
.navbar .apq-search-toggle[aria-expanded="true"] {
  color: var(--bs-primary);
}
/* mobile/tablet: Responsive Menu Pro's hamburger is fixed at right:5% (55x55)
   at <=1200px and sat on top of the icon. Anchor the icon to the (full-width,
   fixed) navbar with the same rules so it sits just left of it.
   RMP's own top:15px left both buttons 18px above the middle of the 121px
   header, so both use top:33px (121/2 - 55/2). */
@media (max-width: 1200px) {
  html body #responsive-menu-pro-button {
    top: 33px;
  }
  .navbar .apq-search-toggle {
    position: absolute;
    top: 33px;
    right: calc(5% + 55px + 6px);
    height: 55px;
    padding: 0 10px;
    font-size: 1.4rem;
  }
}
/* 1201-1399px: the desktop menu shows but Bootstrap's container is only 1140px,
   and menu + search icon filled the space beside the logo exactly, so the menu
   wrapped to two lines. Trim the icon's left padding and the menu list's unused
   32px left padding (empty space anyway) for ~25px of slack. */
@media (min-width: 1201px) and (max-width: 1399.98px) {
  .navbar .apq-search-toggle {
    padding-left: 8px;
  }
  .navbar #responsive-menu-pro-wrapper > ul {
    padding-left: 8px;
  }
}
.navbar .apq-search-toggle:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

/* panel below the header bar */
.apq-search-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}
.apq-search-panel > .container {
  position: relative;
  padding-top: 16px;
  padding-bottom: 16px;
}

/* the form (header and results page) */
.apq-search-form {
  display: flex;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.apq-search-form .form-control {
  flex: 1 1 auto;
  font-size: 1.05em;
  padding: 10px 14px;
  border: 2px solid #ccc;
  border-right: 0;
  border-radius: 0;
}
.apq-search-form .form-control:focus {
  border-color: var(--bs-primary);
  box-shadow: none;
}
.apq-search-form .apq-search-submit {
  flex: 0 0 auto;
  padding: 0 18px;
  border-radius: 0;
  background: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}
.apq-search-form .apq-search-submit:hover {
  background: var(--bs-primary-dark);
  border-color: var(--bs-primary-dark);
}
.apq-search-page .apq-search-form {
  margin-left: 0;
}

/* live dropdown (inside the panel, so the plugin's inline left/top are overridden) */
.apq-search-results {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
}
.apq-search-results .searchwp-live-search-results {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 4px !important;
  width: auto !important;
  z-index: 1050;
  background: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
}
.apq-search-results .searchwp-live-search-results-showing {
  opacity: 1;
  visibility: visible;
}
.apq-search-results .searchwp-live-search-result {
  border-bottom: 1px solid #eee;
}
.apq-search-results .searchwp-live-search-result[aria-selected="true"],
.apq-search-results .searchwp-live-search-result:hover {
  background: var(--bs-light);
}
.apq-search-results .searchwp-live-search-no-results {
  padding: 14px 16px;
  margin: 0;
}
.apq-search-results .spinner {
  top: 24px !important;
}

/* a result: label, title, snippet */
.navbar .apq-search-result,
.apq-search-result {
  display: block;
  padding: 12px 16px;
  color: var(--bs-body-color);
  text-decoration: none;
  text-transform: none;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
}
.navbar .apq-search-result:hover,
.apq-search-result:hover {
  color: var(--bs-body-color);
}
.apq-search-result-label {
  display: block;
  font-size: 0.75em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--bs-primary);
  margin-bottom: 2px;
}
.apq-search-result-title {
  font-size: 1em;
  font-weight: 700;
  margin: 0 0 4px;
  color: #333;
}
.apq-search-result:hover .apq-search-result-title {
  color: var(--bs-primary);
}
.apq-search-result-excerpt {
  font-size: 0.875em;
  line-height: 1.45;
  margin: 0;
  color: #666;
}
.apq-search-result mark {
  background: none;
  padding: 0;
  color: inherit;
  font-weight: 700;
}

/* "See all results" */
.navbar .apq-search-all a {
  display: block;
  padding: 12px 16px;
  font-size: 0.9rem;
  color: var(--bs-primary);
}

/* full results page */
.apq-search-count {
  color: #666;
}
.apq-search-list {
  max-width: 820px;
  border-top: 1px solid #eee;
}
.apq-search-list .apq-search-result {
  padding: 18px 0;
  border-bottom: 1px solid #eee;
}
.apq-search-list .apq-search-result-title {
  font-size: 1.2em;
}
.apq-search-list .apq-search-result-excerpt {
  font-size: 0.95em;
}
.apq-search-more {
  font-size: 1.1em;
  font-weight: 700;
  color: #666;
  margin: 40px 0 0;
  padding-bottom: 10px;
}
.apq-search-list-more .apq-search-result-title {
  font-size: 1.05em;
}

@media (max-width: 575.98px) {
  .apq-search-results .searchwp-live-search-results {
    max-height: calc(100vh - 170px);
  }
}