/* wgf-home-hero.css - the homepage hero search (home conversion pass 2026-10-06, lane B2).

   ONE dominant search box, a "Trending" chip row under it (baked by home_trending.py),
   then one red primary CTA and two quiet text links. The dropdown is the sitewide
   /api/search-suggest box (assets/wgf-search-suggest.js + wgf-search-suggest.css),
   attached because the form carries data-wgf-suggest.

   Tokens only (static/css/_tokens.css); no green chrome - --wgf-up / --wgf-down appear
   only as the market-direction marks on the chips, which is the palette's allowed use. */

.hm-hero .hm-hero__sub{
  max-width:56ch;
  margin:0 auto var(--space-4);
  color:var(--wgf-muted);
  font-size:clamp(1rem, .95rem + .3vw, 1.15rem);
}

.hm-hero__search{
  max-width:780px;
  margin:0 auto;
  text-align:left;
}

/* The box: the in-game AH input slices (same art as the old hero box) at hero scale. */
.hm-hero__form{
  position:relative;
  display:flex;
  align-items:center;
  gap:var(--space-2);
  min-height:66px;
  /* The inputfield slices (66px) draw their well on rows 9-47 and leave rows 56-65 transparent,
     so content is centred on the WELL (row ~28), not the box: 9px top, 17px bottom, 18px right bevel. */
  padding:9px 18px 17px 3.4rem;
  background:
    url(/assets/ui/auctionhouse-ui-inputfield-left.png) left center / auto 100% no-repeat,
    url(/assets/ui/auctionhouse-ui-inputfield-right.png) right center / auto 100% no-repeat,
    url(/assets/ui/auctionhouse-ui-inputfield-middle.png) left center / auto 100% repeat-x,
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.6)), var(--wgf-bg-2);
  border:0;
  border-radius:var(--radius-control);
  box-shadow:0 14px 40px rgba(0,0,0,.55);
  transition:box-shadow .15s ease;
}
.hm-hero__form:focus-within{
  box-shadow:0 14px 40px rgba(0,0,0,.55), 0 0 0 2px rgba(var(--wgf-gold-rgb), .55);
}

/* Visually hidden, still read by screen readers and still the input's accessible name. */
.hm-hero__label{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.hm-hero__icon{
  position:absolute;left:1.15rem;top:43%;transform:translateY(-50%);
  width:22px;height:22px;color:var(--wgf-gold-muted);pointer-events:none;
}

.hm-hero__input{
  flex:1 1 auto;
  min-width:0;
  height:36px;
  padding:0;
  font-family:var(--font-ui);
  font-size:clamp(1.1rem, 1rem + .5vw, 1.35rem);
  color:#fff;
  background:transparent;
  border:0;
  outline:none;
  -webkit-appearance:none;
  appearance:none;
}
.hm-hero__input::placeholder{color:var(--wgf-muted);opacity:1}
.hm-hero__input::-webkit-search-cancel-button{filter:grayscale(1) brightness(1.6)}

.hm-hero__go{
  /* The client red action button (.wgf-btn-red--lg, wgf-chrome.css) - owner: a WoW button, not yellow. */
  flex:0 0 auto;
  align-self:center;
  margin:0;
  min-width:128px;
}
.hm-hero__go:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* The sitewide dropdown, sized to the hero box (it is appended inside the form). */
.hm-hero__form .wgf-suggest{top:calc(100% + 6px);text-align:left}

/* ── Trending chips ── */
.hm-trend{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--space-2);
  margin:var(--space-3) 0 0;
}
.hm-trend__label{
  font-family:var(--font-game-display, serif);
  font-size:15px;
  color:var(--wgf-gold-muted);
  white-space:nowrap;
}
/* Desktop: the label and the chips wrap as ONE centred run (the list box steps aside). */
.hm-trend__list{
  display:contents;
  margin:0;
  padding:0;
  list-style:none;
}
/* Each chip is a tooltip-ish item badge: quality-bordered icon, the name in its quality
   colour, then (only when the item is on the shelf in a scan <= 7 days old) a price pill
   with client coins, and on trending chips the measured move. Markup: home_trending.py. */
.hm-chip{
  /* position:relative contains the coin markup's absolutely positioned .wgf-vh text, which
     otherwise escapes the 375px swipe row's overflow and widens the whole page. */
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  height:34px;
  padding:0 6px 0 4px;
  font-family:var(--font-game, var(--font-ui));
  font-size:14px;
  line-height:1;
  color:var(--wgf-text);
  text-decoration:none;
  white-space:nowrap;
  background:linear-gradient(180deg, rgba(16,14,24,.96), rgba(6,6,10,.96));
  border:1px solid var(--wgf-gold-accent);
  border-radius:var(--radius-control);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.5);
  transition:border-color .15s ease, background .15s ease;
}
.hm-chip:hover{border-color:var(--wgf-gold-bright);background:linear-gradient(180deg, rgba(26,22,36,.98), rgba(10,9,14,.98))}
.hm-chip:hover .hm-chip__name{text-decoration:underline;text-underline-offset:3px}
.hm-chip:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.hm-chip__icon{
  flex:0 0 auto;
  display:inline-block;
  width:24px;height:24px;
  border:1px solid var(--q-common);
  border-radius:3px;
  overflow:hidden;
  background:#000;
}
.hm-chip__icon img{display:block;width:22px;height:22px}
.hm-chip__icon--poor{border-color:var(--q-poor)}
.hm-chip__icon--uncommon{border-color:var(--q-uncommon)}
.hm-chip__icon--rare{border-color:var(--q-rare)}
.hm-chip__icon--epic{border-color:var(--q-epic)}
.hm-chip__icon--legendary{border-color:var(--q-legendary)}
.hm-chip__name{color:var(--q-common);padding-top:1px}
.hm-chip__name--poor{color:var(--q-poor)}
.hm-chip__name--uncommon{color:var(--q-uncommon)}
.hm-chip__name--rare{color:#3a9bff}
.hm-chip__name--epic{color:var(--q-epic)}
.hm-chip__name--legendary{color:var(--q-legendary)}
.hm-chip__price{
  display:inline-flex;
  align-items:center;
  height:22px;
  padding:0 7px;
  font-family:var(--font-ui);
  font-size:13px;
  color:var(--wgf-text);
  background:rgba(0,0,0,.6);
  border:1px solid var(--wgf-gold-dark);
  border-radius:999px;
}
.hm-chip__price .wgf-price{white-space:nowrap}
.hm-chip__move{font-family:var(--font-ui);font-size:12px;font-weight:700}
.hm-chip__move--up{color:var(--wgf-up)}
.hm-chip__move--down{color:var(--wgf-down)}

/* ── One primary CTA + quiet links ── */
.hm-hero__next{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:var(--space-2) var(--space-4);
  margin:var(--space-4) 0 var(--space-5);
}
.hm-hero__links{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2) var(--space-4)}
.hm-hero__links a{
  color:var(--wgf-gold-link);
  font-size:var(--text-md);
  text-decoration:underline;
  text-decoration-color:rgba(var(--wgf-gold-rgb), .35);
  text-underline-offset:3px;
}
.hm-hero__links a:hover{text-decoration-color:currentColor}

/* ── Phone ── */
@media (max-width:600px){
  .hm-hero .hm-hero__sub{margin-bottom:var(--space-3)}
  .hm-hero__search{padding:0 2px}
  .hm-hero__form{min-height:62px;padding:8px 16px 16px 2.7rem}
  .hm-hero__icon{left:.85rem;width:19px;height:19px}
  .hm-hero__input{height:34px}
  .hm-hero__go{min-width:96px}
  /* One swipeable row instead of four wrapped ones; it scrolls inside itself, never the page. */
  .hm-trend{flex-wrap:nowrap;justify-content:flex-start}
  .hm-trend__list{
    display:flex;
    gap:var(--space-2);
    flex-wrap:nowrap;
    justify-content:flex-start;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    min-width:0;
    padding-bottom:2px;
    -webkit-mask-image:linear-gradient(90deg, #000 85%, transparent);
    mask-image:linear-gradient(90deg, #000 85%, transparent);
  }
  .hm-trend__list::-webkit-scrollbar{display:none}
  .hm-hero__next{flex-direction:column;gap:var(--space-3)}
  .hm-hero__cta{width:100%;max-width:340px;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  .hm-hero__form, .hm-chip{transition:none}
}