/**
 * navbar-search component styling, promoted verbatim from the
 * gulp-compiled build artifact (dist/css/navbar-search.css) to a
 * permanently tracked static file.
 *
 * Source: src/stories/components/navbar-search/navbar-search.scss (still
 * present and tracked -- unlike program-finder.css, this is a
 * build-pipeline retirement, not a source-loss recovery).
 *
 * REAL CONSUMER: src/templates/block/block--search-form-block.html.twig
 * and src/templates/block/block--search-api-page-form-block.html.twig
 * both attach `lehigh_coe_theme/navbar-search` -- real, live sitewide
 * navbar search-form styling (desktop expand/collapse search, mobile
 * search-results block).
 *
 * PROMOTION CONTEXT (Phase 10 Batch C): this theme's gulp/Sass build
 * pipeline is being retired as part of the SDC conversion. The rules
 * below are transcribed verbatim from the current production build
 * output (dist/css/navbar-search.css), keeping only the genuinely
 * navbar-search-specific rules and excluding the shared Bootstrap/theme
 * preamble (font-face declarations, base typography, resets,
 * rich-text/list styles) that duplicate content already covered by
 * css/base/*.css and css/global.css. Includes the vendor-prefixed
 * `-webkit-appearance`/`-moz-appearance`/`::-moz-placeholder` duplicate
 * rules exactly as autoprefixer emits them in the current live build
 * output -- kept verbatim for zero intended visual change.
 *
 * LOAD-BEARING: the `#search-block-form--2 .form-submit::before` rule
 * (content: "search"; font-family: "Material Icons";) is a confirmed
 * real, live Material Icons ligature used to render the search-button
 * icon for the mobile/secondary search form (Phase 8 Finding 1) -- kept
 * verbatim, not treated as excludable preamble.
 *
 * Verified via full-content diff against the real, currently-served
 * dist/css/navbar-search.css build artifact (not a bare Sass recompile
 * -- a bare recompile misses autoprefixer-added vendor-prefixed
 * declarations) (see task-3-report.md for the exact command/output and
 * the autoprefixer-only discrepancy it surfaced).
 * Zero intended visual change from the current live CSS.
 */

.search-block-form {
  overflow: clip;
}
.search-block-form .form-submit,
.search-block-form .navbar-search__btn {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 48px;
  width: 48px;
  padding: 0 !important;
}
.search-block-form .navbar-search__wrapper {
  border-radius: 4px;
  display: flex;
  justify-content: flex-end;
  position: relative;
  overflow: clip;
}

#search-block-form {
  height: 48px;
  padding: 0;
  position: relative;
}
#search-block-form .form-type-search {
  left: 100%;
  top: 0;
  position: absolute;
  transition: left 300ms ease-in-out;
  width: calc(100% - 48px);
}
#search-block-form .form-type-search[data-visibility=show] {
  left: 0;
}
#search-block-form .form-type-search[data-visibility=hide] {
  left: 100%;
}
#search-block-form .form-type-search .form-search {
  background: var(--bs-primary);
  box-shadow: none;
  border-color: var(--bs-primary-20);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0;
  color: var(--bs-white);
  width: 100%;
  height: 48px;
}
#search-block-form .form-type-search .form-search::-moz-placeholder {
  color: var(--bs-white);
}
#search-block-form .form-type-search .form-search::placeholder {
  color: var(--bs-white);
}
#search-block-form .form-actions {
  position: absolute;
  top: 0;
  right: 0;
}
#search-block-form .form-actions > button {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary-20);
  --bs-btn-hover-border-color: var(--bs-primary-20);
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-width: 1px;
  border-left-width: 0;
}

.btn.navbar-search__btn {
  --bs-btn-bg: var(--bs-primary-dark);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary-20);
  --bs-btn-hover-border-color: var(--bs-secondary-20);
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 4px !important;
  border-width: 1px;
}
.btn.navbar-search__btn .material-symbols-outlined {
  color: var(--bs-secondary-20);
}
.btn.navbar-search__btn:hover, .btn.navbar-search__btn:focus {
  border-color: var(--bs-primary-20) !important;
}
.btn.navbar-search__btn:hover .material-symbols-outlined, .btn.navbar-search__btn:focus .material-symbols-outlined {
  color: var(--bs-white);
}

#navbar-search .form-actions,
#search-api-page-block-form-search-results .form-actions {
  margin-bottom: 0;
  padding-right: 0;
  padding-left: 0;
}
#navbar-search .form-actions .btn,
#search-api-page-block-form-search-results .form-actions .btn {
  --bs-btn-border-color: var(--bs-primary-60);
  --bs-btn-hover-border-color: var(--bs-secondary-20);
  background-color: var(--bs-primary) !important;
  border: 1px solid var(--bs-primary-20) !important;
  border-left-width: 0 !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 4px !important;
  border-bottom-right-radius: 4px !important;
  color: var(--bs-white);
}
#navbar-search .btn.navbar-search__btn,
#search-api-page-block-form-search-results .btn.navbar-search__btn {
  border-color: var(--bs-primary-20) !important;
}
#navbar-search .btn.navbar-search__btn:hover, #navbar-search .btn.navbar-search__btn:focus,
#search-api-page-block-form-search-results .btn.navbar-search__btn:hover,
#search-api-page-block-form-search-results .btn.navbar-search__btn:focus {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary-20) !important;
}

#search-api-page-block-form-search-results {
  background-color: var(--bs-white) !important;
  border-radius: 4px;
  overflow: hidden;
}
#search-api-page-block-form-search-results .form-type-search {
  display: flex;
  flex: 1;
  justify-content: space-between;
}
#search-api-page-block-form-search-results .form-type-search label {
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
#search-api-page-block-form-search-results .form-search,
#search-api-page-block-form-search-results .form-actions .btn.btn-primary {
  border: 0 !important;
  border-radius: 0 !important;
}
#search-api-page-block-form-search-results .form-search {
  color: var(--bs-dark);
  font-weight: 700;
  line-height: 40px;
  min-height: auto;
  padding: 0 2px 0 12px;
}
#search-api-page-block-form-search-results .form-search::-moz-placeholder {
  color: var(--bs-dark);
}
#search-api-page-block-form-search-results .form-search::placeholder {
  color: var(--bs-dark);
}
#search-api-page-block-form-search-results .form-actions .btn {
  background-color: var(--bs-white) !important;
  border: 0 !important;
  color: var(--bs-dark);
  min-height: unset;
  padding: 0;
  text-align: center;
  width: 40px;
  height: 100%;
}
@media (min-width: 992px) {
  #search-api-page-block-form-search-results .form-actions .btn {
    display: none;
    pointer-events: none;
  }
}

input[type=search i]::-webkit-search-cancel-button,
#search-clear {
  display: none !important;
}

#search-block-form--2 + .navbar-search__btn {
  display: none !important;
}
#search-block-form--2 .form-type-search {
  flex: 1;
}
#search-block-form--2 .form-search {
  border: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  font-weight: 700;
  min-height: 40px;
  padding: 0 0 0 16px;
}
#search-block-form--2 .form-search::-moz-placeholder {
  color: var(--bs-dark);
}
#search-block-form--2 .form-search::placeholder {
  color: var(--bs-dark);
}
#search-block-form--2 .form-submit {
  background-color: var(--bs-white);
  border: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  min-height: 40px;
  position: relative;
  width: 40px;
  height: 40px;
  text-indent: -10000px;
  overflow: hidden;
}
#search-block-form--2 .form-submit::before {
  content: "search";
  font-family: "Material Icons";
  font-size: 1.5rem;
  width: 40px;
  height: 40px;
  display: block;
  position: absolute;
  line-height: 40px;
  text-indent: 0;
}

.sb-search-block {
  background-color: var(--bs-primary);
  max-width: 400px;
  padding: 20px;
}
