/* Zelax Search — inline expanding header search
   Palette follows the theme vars (--z-ink, --z-accent, --z-cream) with hard fallbacks. */

.zb-hd-in { position: relative; }

.zx-form {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  width: 0;
  opacity: 0;
  pointer-events: none;
  transition: width .28s cubic-bezier(.6, .2, .1, 1), opacity .18s ease;
  z-index: 80;
}
.zx-open .zx-form { width: min(440px, 94%); opacity: 1; pointer-events: auto; }

.zx-close {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--z-cream, #FFF9E8);
  border: 2px solid var(--z-ink, #111114);
  color: var(--z-ink, #111114);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 2px 2px 0 var(--z-ink, #111114);
  padding: 0;
}
.zx-close:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--z-ink, #111114); }

.zx-field { position: relative; flex: 1; min-width: 0; }

.zx-input {
  width: 100%;
  height: 46px;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--z-ink, #111114);
  border: 2px solid var(--z-ink, #111114);
  color: var(--z-cream, #FFF9E8);
  font-family: var(--z-font, inherit);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .01em;
  padding: 0 54px 0 22px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.zx-input:focus { border-color: var(--z-accent, #FFDE59); box-shadow: 3px 3px 0 var(--z-accent, #FFDE59); }

/* the light-yellow hint text */
.zx-input::placeholder { color: var(--z-cream, #FFF9E8); opacity: .62; font-weight: 700; }
.zx-input::-webkit-search-cancel-button { -webkit-appearance: none; }

.zx-submit {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 2px solid var(--z-ink, #111114);
  background: var(--z-accent, #FFDE59);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}
.zx-submit svg { width: 15px; height: 15px; display: block; }
.zx-submit:hover { transform: translateY(-50%) scale(1.06); }

.zx-tray {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  background: var(--z-cream, #FFF9E8);
  border: 2px solid var(--z-ink, #111114);
  border-radius: 14px;
  box-shadow: 6px 6px 0 var(--z-ink, #111114);
  padding: 12px 14px 14px;
  width: max-content;
  max-width: min(440px, 94vw);
  display: none;
}
.zx-open .zx-tray { display: block; }

.zx-tray-label {
  display: block;
  font-family: var(--z-font, inherit);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--z-ink-soft, #55555e);
  margin: 0 2px 10px;
}

.zx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }

.zx-chip {
  display: inline-block;
  background: var(--z-accent, #FFDE59);
  color: var(--z-ink, #111114);
  border: 2px solid var(--z-ink, #111114);
  border-radius: 999px;
  padding: 7px 14px;
  font-family: var(--z-font, inherit);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  box-shadow: 3px 3px 0 var(--z-ink, #111114);
  transition: transform .12s ease, box-shadow .12s ease;
}
.zx-chip:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--z-ink, #111114);
  color: var(--z-ink, #111114);
  text-decoration: none;
}

/* dim header links while search is open */
.zx-dim { opacity: .1 !important; pointer-events: none !important; transition: opacity .2s ease; }

@keyframes zx-shake {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  25% { transform: translateY(-50%) translateX(-5px); }
  75% { transform: translateY(-50%) translateX(5px); }
}
.zx-shake { animation: zx-shake .3s ease; }

@media (max-width: 760px) {
  .zx-open .zx-form { width: 94%; }
  .zx-tray { left: 0; right: auto; max-width: 94vw; }
}