/* Header search pill (built by js/search.js), to the right of the logo.
   Phones: logo at the left, the pill beside it. */
.hp-search { position: relative; display: flex; align-items: center; gap: 8px; margin-left: 24px; margin-right: auto;
  width: 240px; height: 38px; padding: 0 12px; border-radius: 999px;
  background: rgba(234,227,201,0.06); border: 1px solid rgba(234,227,201,0.25); transition: width 0.2s, border-color 0.2s; }
.hp-search.focus { width: 320px; border-color: rgb(220,75,46); }
.hp-search svg { width: 16px; height: 16px; fill: rgba(234,227,201,0.7); display: block; }
.hp-search-icon { display: flex; }
.hp-search-input { flex: 1; min-width: 0; height: 100%; font: 14px Arial, sans-serif; color: rgb(234,227,201); background: transparent; border: 0; outline: none; }
.hp-search-input::placeholder { color: rgba(234,227,201,0.5); }
.hp-search-input::-webkit-search-cancel-button { filter: invert(0.85); cursor: pointer; }
.hp-search-open, .hp-search-close { display: none; background: none; border: 0; padding: 0; cursor: pointer; color: rgb(234,227,201); }
.hp-search-close { font-size: 28px; line-height: 1; opacity: 0.7; }

.hp-search-results { position: absolute; top: calc(100% + 8px); left: 0; width: 440px; max-width: calc(100vw - 32px); max-height: 70vh; overflow-y: auto;
  padding: 6px; border-radius: 10px; background: rgb(33,29,29); border: 1px solid rgba(234,227,201,0.18);
  box-shadow: 0 18px 48px rgba(0,0,0,0.5); z-index: 1000; }
.hp-search-result { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 6px; color: rgb(234,227,201); text-decoration: none; }
.hp-search-result.on, .hp-search-result:hover { background: rgba(234,227,201,0.08); }
.hp-search-thumb { flex: none; width: 60px; height: 45px; border-radius: 4px; overflow: hidden; background: #111; }
.hp-search-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-search-thumb[style] img { object-fit: contain; }  /* logos on a colored tile */
.hp-search-words { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hp-search-title { font: bold 14px/1.3 Arial, sans-serif; }
.hp-search-kind { margin-left: 8px; font: 10px/1 Arial, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(234,227,201,0.55); border: 1px solid rgba(234,227,201,0.3); border-radius: 999px; padding: 2px 6px; vertical-align: 2px; }
.hp-search-sub { font: 12px/1.4 Arial, sans-serif; color: rgba(234,227,201,0.6); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hp-search mark { background: none; color: rgb(220,75,46); }
.hp-search-empty { padding: 14px 10px; font: 13px Arial, sans-serif; color: rgba(234,227,201,0.6); }

@media (max-width: 768px) {
  /* Logo at the left, the pill filling the space up to the menu button. */
  body header { justify-content: flex-start; padding-left: 16px; padding-right: 16px; }
  body .hamburger { right: 16px; }
  .hp-search { position: static; flex: 1; min-width: 0; width: auto; margin: 0 42px 0 12px; }
  .hp-search.focus { width: auto; }
  .hp-search-input { font-size: 16px; }  /* 16px keeps iPhones from zooming in */
  .hp-search-results { position: absolute; top: calc(100% - 4px); left: 16px; right: 16px; width: auto; max-width: none; }
}
@media (max-width: 360px) {
  body .logo a img { height: 40px; }  /* leaves the pill room for "Search" */
}