/* components.css
   the [search] box, the socials row, and the crypto address blocks.
   pulled in after shared.css everywhere so the vars are already set. */

/* ---- nav search ---- */
.site-search{position:relative;display:inline-flex;align-items:center;gap:.35rem;font-family:var(--mono)}
.ss-bracket{color:var(--dim);font-size:.9rem;line-height:1;transition:color .2s}
.site-search:focus-within .ss-bracket{color:var(--sig)}

.ss-input{
  width:84px;          /* expands to 150 on focus, rule's just below */
  background:none;border:none;outline:none;color:var(--bright);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:lowercase;
  transition:width .25s ease;padding:.2rem 0}
.ss-input::placeholder{color:var(--dim);letter-spacing:.12em}
.site-search:focus-within .ss-input{width:150px}

/* results popup.
   note: this used to be a hardcoded near-black bg (rgba(7,9,8,.98)) which
   looked fine in dark but stayed black on the light theme. now it just uses
   --card so it flips with everything else. dropped the shadow opacity too,
   .6 was way too heavy on a light bg. */
.ss-results{
  position:absolute;top:calc(100% + .65rem);right:0;
  width:min(420px,82vw);max-height:60vh;overflow-y:auto;
  background:var(--card);
  border:1px solid var(--line);
  backdrop-filter:blur(12px);
  display:none;z-index:600;
  box-shadow:0 14px 40px rgba(0,0,0,.22)}
.ss-results.open{display:block}

.ss-item{display:block;padding:.7rem .9rem;border-bottom:1px solid var(--line);color:var(--txt);transition:background .15s}
.ss-item:last-child{border-bottom:none}
.ss-item:hover,.ss-item.active{background:var(--panel2)}
.ss-item .ss-t{font-size:.85rem;color:var(--bright);margin-bottom:.15rem}
.ss-item.active .ss-t{color:var(--sig)}
.ss-meta{font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.ss-meta b{color:var(--tor);font-weight:400}
.ss-empty{padding:.9rem;font-size:.62rem;color:var(--dim);letter-spacing:.08em}
.ss-hint{padding:.5rem .9rem;font-size:.52rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);border-top:1px solid var(--line);background:var(--panel2)}
.ss-mark{color:var(--sig);background:none}

/* drawer version (phones) — full width, skip the width animation */
.drawer-search{width:100%}
.drawer-search .site-search{width:100%;border:1px solid var(--line);padding:.6rem .8rem}
.drawer-search .ss-input{width:100%;flex:1;font-size:.9rem}
.drawer-search .ss-results{width:100%}

/* socials / channels. barely use these atm but leaving them in */
.socials{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap}
.soc{display:inline-flex;align-items:center;gap:.4rem;color:var(--dim);transition:color .2s;
  font-size:.58rem;letter-spacing:.12em;text-transform:uppercase}
.soc svg{display:block}
.soc:hover{color:var(--sig)}

/* crypto address blocks — donate page + the footer both reuse this */
.addr{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.4rem}
.addr-label{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tor)}
.addr-row{display:flex;gap:.5rem;align-items:stretch}
.addr-val{flex:1;font-size:.68rem;color:var(--txt);background:var(--panel2);border:1px solid var(--line);
  padding:.55rem .7rem;word-break:break-all;line-height:1.5}
.addr-copy{font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
  border:1px solid var(--line);padding:0 .8rem;transition:color .2s,border-color .2s}
.addr-copy:hover{color:var(--sig);border-color:var(--sig)}
.addr-copy.done{color:var(--sig);border-color:var(--sig)}

/* kill the inline nav search on small screens, drawer one covers it */
@media(max-width:640px){.site-search:not(.ss-drawer){display:none}}