.nav-item {
  position: relative;
  align-self: stretch;
  display: flex;
  flex: 1;
  min-width: 0;
}

.nav-item > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 6px;
  font-size: 16px;
  white-space: nowrap;
}

.nav-item:hover > a,
.nav-item:focus-within > a {
  background: #079bea;
}

.site-search {
  position: relative;
  display: block;
  flex: 0 0 52px;
  width: 52px;
  margin-left: 8px;
}

.site-search .search-toggle {
  display: flex;
  width: 52px;
  height: 60px;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #fff;
}

.site-search .search-toggle:hover,
.site-search .search-toggle:focus {
  background: #079bea;
}

.search-icon {
  position: relative;
  width: 19px;
  height: 19px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.search-icon::after {
  position: absolute;
  right: -6px;
  bottom: -4px;
  width: 8px;
  height: 2px;
  content: "";
  transform: rotate(45deg);
  transform-origin: left center;
  background: currentColor;
}

.search-panel {
  position: absolute;
  z-index: 50;
  top: 60px;
  right: 0;
  display: flex;
  width: 370px;
  padding: 12px;
  background: #fff;
  border: 1px solid #d7dde4;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

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

.site-search .search-panel input {
  width: 280px;
  padding: 10px 12px;
  border: 1px solid #cfd6de;
}

.site-search .search-panel > button {
  width: 65px;
  border: 0;
  background: #168fe0;
  color: #fff;
}

.site-search .search-results {
  top: 58px;
  right: 12px;
  width: 346px;
}

@media (max-width: 760px) {
  .nav-inner { height: 52px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .nav-inner::-webkit-scrollbar { display: none; }
  .nav-item { flex: 0 0 auto; }
  .nav-item > a { min-width: 92px; padding: 0 14px; font-size: 14px; }
  .site-search { position: sticky; right: 0; flex-basis: 48px; width: 48px; margin-left: 0; background: #3368ad; }
  .site-search .search-toggle { width: 48px; height: 52px; }
  .search-panel { position: fixed; top: 134px; right: 12px; left: 12px; width: auto; }
  .site-search .search-panel input { width: calc(100% - 65px); }
  .site-search .search-results { right: 12px; left: 12px; width: auto; }
}