/* wgf-search-bar.css - the "prime" header search: THE most prominent control in the
   site nav (owner mandate 2026-08-06: it must read as the way to find ANY tool or ANY
   data on the site).

   Scope law: every rule here is anchored to .wgf-shell-search--prime (the modifier
   seo_kit.py puts on the shell search form) or to an ancestor via :has(...--prime),
   so this file is a pure no-op for any page without the modifier. It wins over
   assets/wgf-site-shell.css by cascade (loaded after) and by specificity - that
   file is NEVER edited from here.

   Skin law: the in-game AH 3-slice input texture (assets/wgf-search-ingame.css,
   lazy-loaded by wgf-search-suggest.js) still paints the input's background and
   border. This file deliberately sets NO background/border/border-image on the
   input - only geometry, type, and box-shadow glow - so the AH skin survives the
   higher specificity of these selectors.

   Palette law: existing tokens from /static/css/_tokens.css only
   (--wgf-gold-rgb, --wgf-gold, --wgf-gold-bright, --wgf-gold-muted, --wgf-focus).
   No new colors. */

/* -- The form: grow to dominate the bar ------------------------------------ */

.wgf-shell-search--prime {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 520px;
}

/* Desktop 3-zone grid header (seo_kit shell only): the right zone normally hugs
   the right edge at content width (justify-self: end). With the prime search
   aboard it stretches to fill column 3, so the search bar expands into all the
   space between the centred nav and the right edge, capped at a sane width.
   The region chips / realm button keep the far-right edge (flex-end). */
@media (min-width: 1261px) {
  .wgf-shell-topbar__inner:has(.wgf-shell-right) .wgf-shell-right:has(.wgf-shell-search--prime) {
    justify-self: stretch;
    justify-content: flex-end;
  }
}

/* -- The input: taller, louder, unmistakably the primary control ----------- */

.wgf-shell-search--prime .wgf-shell-search__input {
  min-height: 46px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding-right: 48px; /* room for the bigger submit button */
  /* Rest-state contrast: a faint gold ring + drop depth so it reads as THE
     control even before focus. box-shadow only - never border - so the AH
     3-slice texture keeps its own edges. */
  box-shadow:
    0 0 0 1px rgba(var(--wgf-gold-rgb), 0.32),
    0 2px 10px rgba(0, 0, 0, 0.45);
}

/* Placeholder carries the "search ANYTHING" promise - lift it from muted grey
   to the warm gold-muted tone so the copy is actually read. */
.wgf-shell-search--prime .wgf-shell-search__input::placeholder {
  color: var(--wgf-gold-muted);
  opacity: 1;
}

/* Focus: strong gold ring + subtle glow, same anatomy as the AH skin's focus
   (wgf-search-ingame.css) but stronger - this selector outweighs it, so restate
   the ring here with the same tokens. */
.wgf-shell-search--prime .wgf-shell-search__input:focus {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(var(--wgf-gold-rgb), 0.55),
    0 0 16px rgba(var(--wgf-gold-rgb), 0.30),
    0 2px 10px rgba(0, 0, 0, 0.45);
}

/* Keyboard focus-visible keeps a token ring for a11y parity with the site rule. */
.wgf-shell-search--prime .wgf-shell-search__input:focus-visible {
  outline: 2px solid var(--wgf-focus);
  outline-offset: 1px;
}

/* -- The submit button: bigger target, gold at rest ------------------------ */

.wgf-shell-search--prime .wgf-shell-search__btn {
  width: 38px;
  height: 38px;
  color: var(--wgf-gold);
}

.wgf-shell-search--prime .wgf-shell-search__btn:hover {
  color: var(--wgf-gold-bright);
}

.wgf-shell-search--prime .wgf-shell-search__btn svg {
  width: 20px;
  height: 20px;
}

/* -- Scope toggle (Items / Characters, injected by wgf-shell.js): keep its
      segments flush with the taller input ---------------------------------- */

.wgf-shell-search--prime .wgf-scope-btn {
  height: 46px;
}

/* -- Narrow screens: the shell already drops the whole right group to its own
      full-width row under the logo (wgf-site-shell.css <=1020px). The prime bar
      just uncaps its width there and eases the height one step so the topbar
      never crowds. ---------------------------------------------------------- */

@media (max-width: 1020px) {
  .wgf-shell-search--prime {
    max-width: none;
  }

  .wgf-shell-search--prime .wgf-shell-search__input {
    min-height: 44px;
    font-size: 16px; /* 16px floor also stops iOS focus-zoom */
  }

  .wgf-shell-search--prime .wgf-scope-btn {
    height: 44px;
  }
}