/* Hero search: the pill input and its suggestion dropdown.

   Shared by the home hero and the company directory, which is why this is
   a file rather than a <style> block on one page. Loaded alongside
   partials/hero-search.html and js/hero-search.js; the three only make
   sense together. */
.hero-search-wrap{ position:relative; max-width:640px; margin:28px auto 0; }
.hero-search{
  max-width:none; margin:0;
  background:#FCFCFB;
  border:1px solid rgba(0,0,0,0.09);
  border-radius:var(--r-full);
  padding:8px 8px 8px 22px;
  display:flex; gap:12px; align-items:center;
  text-align:left;
}
.hero-search__icon{ width:20px; height:20px; color:var(--ink-soft); flex:none; }
.hero-search input{
  flex:1; min-width:0; border:0; outline:0; background:transparent;
  font:inherit; font-size:1rem; color:var(--ink); padding:10px 0;
}
/* the input is borderless, so focus has to show on the pill around it.
   Border only, no halo: matches the app's search bar. */
.hero-search:focus-within{ border-color:var(--accent); }
.hero-search input::placeholder{ color:var(--ink-soft); }
.hero-search button{
  flex:none; width:44px; height:44px;
  background:var(--accent); color:#fff;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:background .18s ease, transform .18s ease;
}
.hero-search button:hover{ background:#4128E0; transform:translateY(-1px); }
.hero-search button svg{ width:18px; height:18px; }
.hero-search.is-wobble{ animation:wob .4s ease; }
/* suggestion dropdown */
.hero-suggest{
  position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:20;
  margin:0; padding:6px; text-align:left;
  background:#FCFCFB; border:1px solid rgba(0,0,0,0.09);
  border-radius:16px; box-shadow:0 20px 44px -14px rgba(0,0,0,0.3);
  max-height:min(52vh, 360px); overflow-y:auto;
}
.hero-suggest[hidden]{ display:none; }
.hero-suggest__item{
  display:flex; align-items:center; gap:12px;
  padding:9px 12px; border-radius:10px; cursor:pointer;
  text-decoration:none; color:inherit;
}
.hero-suggest__item:hover,
.hero-suggest__item[aria-selected="true"]{ background:var(--paper-2); }
.hero-suggest__logo{
  width:30px; height:30px; flex:none; border-radius:7px;
  object-fit:contain; background:#fff; border:1px solid rgba(0,0,0,0.07);
}
/* min-width:0 so the ellipsis can actually take effect inside the flex row */
.hero-suggest__text{ min-width:0; display:flex; flex-direction:column; }
.hero-suggest__name,
.hero-suggest__domain{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hero-suggest__name{ font-weight:600; color:var(--ink); font-size:.98rem; line-height:1.3; }
.hero-suggest__domain{ font-size:.8rem; color:var(--ink-mute); line-height:1.35; }
.hero-suggest__meta{ display:flex; align-items:baseline; gap:6px; min-width:0; }
/* --ink-soft, not --ink-mute: at .45 alpha the mute token lands near 3.4:1
   on this panel, short of AA for text this size. */
.hero-suggest__type{
  flex:none; font-size:.7rem; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-soft); line-height:1.35;
}
.hero-suggest__count{
  margin-left:auto; padding-left:10px; flex:none; white-space:nowrap;
  font-size:.8rem; color:var(--ink-soft); line-height:1.35;
}
@keyframes wob{ 25%{transform:translateX(-5px)} 50%{transform:translateX(4px)} 75%{transform:translateX(-2px)} }

@media (max-width:640px){
  .hero-search{ padding-left:16px; }
}