/* wgf-masthead.css - the site header's visual layer: three full-width rows.

   Owner 2026-09-16: header parity with the big WoW database sites. Approved from a live
   before/after render the same day.

     row 1  GAME STRIP   home | WoW | Retail  WoW Forever  Classic Era  MoP Classic ... US.RETAIL chip
     row 2  MASTHEAD     coin + wordmark | LIVE build badge | full-width search | ENTER WORLD
     row 3  NAV          AUCTION HOUSE  DATABASE  ...  ...  |  CLASSES  MIDNIGHT  WOW FOREVER

   ONE HOME: loaded on every shell by wgf_site_theme.head_tag() (Flask pages) and
   wgf_site_theme.apply_to_html() (the baked statics), AFTER every other header sheet, so it
   wins by cascade and wgf-site-shell.css stays untouched. Rolling back = drop the two
   masthead tags from wgf_site_theme.head_tag() and re-bake.

   The markup is the existing shell (logo, nav, .wgf-shell-right, command band). The rows are
   a grid on the <header>; .wgf-shell-topbar__inner and .wgf-shell-right become
   display:contents so their children sit in the grid directly. Row heights are fixed here, so
   the layout is final at first paint: wgf-masthead.js only FILLS the strip, the badge cell and
   the topical links into space this sheet already reserved (no layout shift).

   !important is deliberate and scoped to this file: the older header rules are spread across
   wgf-site-shell.css at several breakpoints with high-specificity selectors, and this layer
   has to beat all of them without editing that sheet. */

header.wgf-shell-topbar {
  --mh-strip: #07080b;
  --mh-nav: #16171c;
  --mh-line: #25272e;
  --mh-ink: #ddd6c6;
  --mh-dim: #9d978a;
  --mh-gold: var(--wgf-gold, #ffd100);
  --mh-sans: "Segoe UI", "Helvetica Neue", Roboto, Arial, sans-serif;
}

/* ---- strip pieces (all widths) ------------------------------------------------------- */
.wgf-mh-games {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  font: 700 12px/1 var(--mh-sans);
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
}
.wgf-mh-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 0 8px 0 -8px;
  color: var(--mh-dim);
  border-right: 1px solid var(--mh-line);
}
.wgf-mh-home:hover,
.wgf-mh-home:focus-visible { color: #fff; }
.wgf-mh-games__game { color: var(--mh-gold); padding: 0 10px 0 2px; }
.wgf-mh-game {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 22px;
  padding: 0 10px 0 5px;
  color: var(--mh-dim);
  text-decoration: none;
  border-radius: 2px;
}
.wgf-mh-game i {
  width: 13px;
  height: 13px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid var(--acc, #d4ad3d);
  background: radial-gradient(circle, var(--acc, #d4ad3d) 0 2px, transparent 2.5px);
}
.wgf-mh-game:hover,
.wgf-mh-game:focus-visible { color: #fff; background: rgba(255, 255, 255, .05); }
.wgf-mh-game.is-active {
  color: #1a1200;
  background: linear-gradient(#ffd84a, #e8b923);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);
}
.wgf-mh-game.is-active i {
  border-color: #1a1200;
  background: radial-gradient(circle, #1a1200 0 2px, transparent 2.5px);
}
.wgf-mh-game.is-empty { opacity: .45; }
.wgf-mh-game em {
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: .06em;
  color: var(--mh-gold);
  background: #2a2418;
  border: 1px solid #6e5a2a;
  padding: 2px 4px;
  border-radius: 2px;
}

.wgf-mh-build {
  width: 44px;
  height: 44px;
  box-sizing: border-box;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: 2px solid #c8202a;
  background: radial-gradient(circle at 50% 35%, #3a0d10, #150506);
  box-shadow: 0 0 0 2px #000, 0 0 10px rgba(200, 32, 42, .35);
  font-family: var(--mh-sans);
  color: #fff;
  text-transform: uppercase;
}
.wgf-mh-build b { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; line-height: 1; }
.wgf-mh-build span { font-size: 8.5px; font-weight: 700; color: #f0c8c8; line-height: 1; }

/* ---- DESKTOP + MID (>= 900): the three-row grid ---------------------------------------- */
@media (min-width: 900px) {
  html body header.wgf-shell-topbar {
    display: grid !important;
    grid-template-columns: auto 44px minmax(0, 1fr) auto;
    grid-template-rows: 30px 64px 48px;
    column-gap: 18px;
    align-items: center;
    padding: 0 max(18px, calc((100% - 1640px) / 2)) !important;
    border-bottom: 1px solid #000 !important;
    background:
      linear-gradient(rgba(12, 13, 17, .90), rgba(12, 13, 17, .93)),
      url(/assets/ui/classhall-stone-tile.png) left top / 256px 256px repeat,
      #111217 !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .55) !important;
  }
  html body header.wgf-shell-topbar > .wgf-shell-topbar__inner,
  html body header.wgf-shell-topbar .wgf-shell-right { display: contents !important; }
  html body header.wgf-shell-topbar .wgf-shell-nav-toggle { display: none !important; }

  /* row 1 - the strip bleeds its fill to the viewport edges without clipping anything */
  header.wgf-shell-topbar .wgf-mh-games {
    grid-row: 1;
    grid-column: 1 / -1;
    align-self: stretch;
    border-image: linear-gradient(to top, var(--mh-line) 0 1px, var(--mh-strip) 1px) fill 0 / 0 / 0 100vmax;
  }
  html body header.wgf-shell-topbar .wgf-sel { grid-row: 1; grid-column: 4; justify-self: end; z-index: 2; }
  html body header.wgf-shell-topbar .wgf-sel__chip {
    height: 22px !important;
    min-height: 0 !important;
    padding: 0 8px !important;
    font: 700 11.5px/1 var(--mh-sans) !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    background: none !important;
    border: 1px solid var(--mh-line) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    color: var(--mh-dim) !important;
  }
  html body header.wgf-shell-topbar .wgf-sel__chip > * { font: inherit !important; color: inherit !important; letter-spacing: inherit !important; }
  html body header.wgf-shell-topbar .wgf-sel__chip:hover { color: #fff !important; }

  /* row 2 */
  html body header.wgf-shell-topbar .wgf-shell-logo {
    grid-row: 2;
    grid-column: 1;
    gap: 10px !important;
    font-family: var(--font-game, serif) !important;
    font-size: 30px !important;
    font-weight: 400 !important;
    letter-spacing: .01em !important;
    text-transform: none !important;
    color: var(--mh-gold) !important;
    text-shadow: 0 2px 0 #000, 0 0 14px rgba(0, 0, 0, .9);
  }
  html body header.wgf-shell-topbar .wgf-logo-coin {
    width: 38px !important;
    height: 38px !important;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .8));
  }
  header.wgf-shell-topbar .wgf-mh-build { grid-row: 2; grid-column: 2; }

  html body header.wgf-shell-topbar .wgf-shell-searchband {
    grid-row: 2;
    grid-column: 3;
    display: block !important;
    min-width: 0;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  html body header.wgf-shell-topbar .wgf-shell-searchband::before,
  html body header.wgf-shell-topbar .wgf-shell-searchband::after,
  html body header.wgf-shell-topbar .wgf-shell-search::before,
  html body header.wgf-shell-topbar .wgf-shell-search::after { display: none !important; }
  /* The home page hides the command band's form (wgf-home.css); in the masthead search is on
     every page, so it is shown here. */
  html body header.wgf-shell-topbar .wgf-shell-search {
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-image: none !important;
    outline: 0 !important;
    background: none !important;
    box-shadow: none !important;
  }
  html body header.wgf-shell-topbar .wgf-shell-search__input {
    height: 38px !important;
    min-height: 38px !important;
    box-sizing: border-box;
    padding: 0 40px !important;
    border: 1px solid #2c2e36 !important;
    border-image: none !important;
    border-radius: 3px !important;
    outline: 0 !important;
    background: #0a0b0e !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6) !important;
    font: 600 14.5px var(--mh-sans) !important;
    color: #ebe6d8 !important;
  }
  html body header.wgf-shell-topbar .wgf-shell-search__input::placeholder { color: #8a8478 !important; }
  html body header.wgf-shell-topbar .wgf-shell-search__input:focus { border-color: #8a7440 !important; }
  html body header.wgf-shell-topbar .wgf-shell-search__btn {
    left: 6px !important;
    right: auto !important;
    color: #d4ad3d !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html body header.wgf-shell-topbar .wgf-realm-btn {
    grid-row: 2;
    grid-column: 4;
    justify-self: end;
    height: auto !important;
    min-height: 0 !important;
    padding: 8px 2px !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font: 700 14px var(--mh-sans) !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
    color: #ebe6d8 !important;
  }
  html body header.wgf-shell-topbar .wgf-realm-btn::after {
    content: "";
    display: inline-block;
    margin-left: 8px;
    vertical-align: 2px;
    border: 4px solid transparent;
    border-top: 5px solid currentColor;
    border-bottom: 0;
  }
  html body header.wgf-shell-topbar .wgf-realm-btn:hover { color: var(--mh-gold) !important; }

  /* The Classic/MoP version spine (site_shell.render_version_spine) gets its own row. */
  html body header.wgf-shell-topbar [class*="spine"]:not([class*="spine__"]) {
    grid-row: 4;
    grid-column: 1 / -1;
    justify-self: start;
    margin: 0 0 10px !important;
  }

  /* row 3 - the nav, full width, uppercase pillars with a gold underline on hover/active */
  html body header.wgf-shell-topbar .wgf-shell-nav {
    grid-row: 3;
    grid-column: 1 / -1;
    justify-self: stretch !important;
    align-self: stretch;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    border-image: linear-gradient(to bottom, var(--mh-line) 0 1px, var(--mh-nav) 1px) fill 0 / 0 / 0 100vmax;
  }
  html body header.wgf-shell-topbar .wgf-shell-nav > .wgf-nav-group { align-items: stretch !important; }
  /* The nav owns its whole row now, so the mid-width tier folds are not needed. */
  html body header.wgf-shell-topbar .wgf-shell-nav > .wgf-nav-group[data-nav-tier] { display: flex !important; }
  html body header.wgf-shell-topbar .wgf-shell-nav > .wgf-nav-link[data-nav-tier] { display: inline-flex !important; }
  html body header.wgf-shell-topbar .wgf-shell-nav > .wgf-nav-group > .wgf-nav-trigger,
  html body header.wgf-shell-topbar .wgf-shell-nav > a,
  html body header.wgf-shell-topbar .wgf-mh-topical > a {
    position: relative;
    display: inline-flex !important;
    align-items: center !important;
    box-sizing: border-box;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 15px !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font: 700 13px/1 var(--mh-sans) !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
    text-decoration: none !important;
    color: var(--mh-ink) !important;
    white-space: nowrap;
  }
  html body header.wgf-shell-topbar .wgf-shell-nav > .wgf-nav-group:first-child > .wgf-nav-trigger { padding-left: 0 !important; }
  html body header.wgf-shell-topbar .wgf-shell-nav .wgf-nav-caret,
  html body header.wgf-shell-topbar .wgf-shell-nav > a > .wgf-nav-icon { display: none !important; }
  html body header.wgf-shell-topbar .wgf-shell-nav > .wgf-nav-group > .wgf-nav-trigger::after,
  html body header.wgf-shell-topbar .wgf-shell-nav > a::after,
  html body header.wgf-shell-topbar .wgf-mh-topical > a::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: auto !important;
    bottom: 0 !important;
    left: 15px !important;
    right: 15px !important;
    width: auto !important;
    height: 2px !important;
    border-radius: 0 !important;
    background: var(--mh-gold) !important;
    transform: scaleX(0);
    transition: transform .15s ease;
  }
  html body header.wgf-shell-topbar .wgf-shell-nav > .wgf-nav-group:first-child > .wgf-nav-trigger::after { left: 0 !important; }
  html body header.wgf-shell-topbar .wgf-shell-nav > .wgf-nav-group:hover > .wgf-nav-trigger,
  html body header.wgf-shell-topbar .wgf-shell-nav > .wgf-nav-group:focus-within > .wgf-nav-trigger,
  html body header.wgf-shell-topbar .wgf-shell-nav > a:hover,
  html body header.wgf-shell-topbar .wgf-mh-topical > a:hover { color: #fff !important; }
  html body header.wgf-shell-topbar .wgf-shell-nav > .wgf-nav-group:hover > .wgf-nav-trigger::after,
  html body header.wgf-shell-topbar .wgf-shell-nav > .wgf-nav-group:focus-within > .wgf-nav-trigger::after,
  html body header.wgf-shell-topbar .wgf-shell-nav > a:hover::after,
  html body header.wgf-shell-topbar .wgf-mh-topical > a:hover::after,
  html body header.wgf-shell-topbar .wgf-shell-nav .is-active::after { transform: scaleX(1); }
  html body header.wgf-shell-topbar .wgf-shell-nav > .wgf-nav-group > .wgf-nav-trigger.is-active,
  html body header.wgf-shell-topbar .wgf-shell-nav > a.is-active { color: var(--mh-gold) !important; }
  /* "Menu" (the whole-site directory) reads as a more-button. The label stays in the DOM. */
  html body header.wgf-shell-topbar .wgf-shell-nav > .wgf-nav-group.wgf-nav-group--directory > .wgf-nav-trigger {
    font-size: 0 !important;
    letter-spacing: 0 !important;
  }
  html body header.wgf-shell-topbar .wgf-shell-nav > .wgf-nav-group.wgf-nav-group--directory > .wgf-nav-trigger::before {
    content: "\2022\2022\2022";
    font: 700 13px/1 var(--mh-sans);
    letter-spacing: .12em;
  }
  html body header.wgf-shell-topbar .wgf-shell-nav .wgf-nav-menu { top: 100% !important; margin-top: 0 !important; }

  header.wgf-shell-topbar .wgf-mh-topical {
    display: flex;
    align-items: center;
    margin: 10px 0 10px 8px;
    padding-left: 8px;
    border-left: 1px solid var(--mh-line);
  }
  html body header.wgf-shell-topbar .wgf-mh-topical > a { height: 28px !important; }
  html body header.wgf-shell-topbar .wgf-mh-topical > a::after { bottom: -10px !important; }
}

@media (min-width: 900px) and (max-width: 1099px) {
  header.wgf-shell-topbar .wgf-mh-topical { display: none; }
}

/* ---- PHONE (< 900): the strip rides on top in space reserved by padding; the existing
   phone rows (brand | right cluster | hamburger, then the band) keep their layout. ----- */
@media (max-width: 899.98px) {
  html body header.wgf-shell-topbar {
    padding-top: 32px !important;
    background: #111217 !important;
  }
  header.wgf-shell-topbar .wgf-mh-games {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 32px;
    padding: 0 12px;
    overflow-x: auto;
    scrollbar-width: none;
    background: var(--mh-strip);
    border-bottom: 1px solid var(--mh-line);
    font-size: 11.5px;
  }
  header.wgf-shell-topbar .wgf-mh-games::-webkit-scrollbar { display: none; }
  .wgf-mh-home { margin: 0 4px 0 -6px; }
  .wgf-mh-games__game { padding: 0 6px; }
  header.wgf-shell-topbar .wgf-mh-build,
  header.wgf-shell-topbar .wgf-mh-topical { display: none; }
  html body header.wgf-shell-topbar .wgf-realm-btn {
    background: none !important;
    border: 1px solid var(--mh-line) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    padding: 0 7px !important;
    font: 700 11px var(--mh-sans) !important;
    letter-spacing: .02em !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
    color: #ebe6d8 !important;
  }
  html body header.wgf-shell-topbar .wgf-sel__chip {
    background: none !important;
    border: 1px solid var(--mh-line) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    padding: 0 7px !important;
    font: 700 11px var(--mh-sans) !important;
    letter-spacing: .02em !important;
    text-transform: uppercase !important;
    color: var(--mh-dim) !important;
  }
  html body header.wgf-shell-topbar .wgf-sel__chip > * { font: inherit !important; color: inherit !important; }
  html body header.wgf-shell-topbar .wgf-shell-search__input {
    border: 1px solid #2c2e36 !important;
    border-image: none !important;
    border-radius: 3px !important;
    background: #0a0b0e !important;
    box-shadow: none !important;
    font: 600 15px var(--mh-sans) !important;
  }
  html body header.wgf-shell-topbar .wgf-shell-search::before,
  html body header.wgf-shell-topbar .wgf-shell-search::after,
  html body header.wgf-shell-topbar .wgf-shell-searchband::before,
  html body header.wgf-shell-topbar .wgf-shell-searchband::after { display: none !important; }
}