/* ==========================================================================
   site-bar.css - the header bar, shared by index.html and game.html.
   ==========================================================================

   Its own file rather than a copy in each stylesheet: it is the one piece of
   chrome both pages show, and two copies would drift.

   It started out matching gamingarts.com exactly - #23272E, 80px tall, logo
   left - and that read as a second site's header bolted on top of this one. It
   keeps the brand colour and gives up the rest: half the opacity, which lets
   the page's own background carry through, and the logo reduced to a corner
   mark rather than the start of someone else's navigation.

   Three columns, so the wordmark is centred on the BAR and not on whatever
   space is left beside its neighbours. The left one is empty on the menu, and
   at narrow widths the right one empties out too.
   ========================================================================== */

.site-bar {
  /* The height every mark in this bar is cut to. One token because they are
     meant to be the same height - matching them by eye in two places is how
     they end up a few pixels apart after the next tweak. A game page overrides
     it further down. */
  --mark-height: clamp(3.2rem, 11vmin, 5.5rem);

  flex: 0 0 auto;
  display: grid;
  /* minmax(0, 1fr), not 1fr: a plain fr track has an `auto` minimum, so a long
     location name grew its own column instead of ellipsing and ran straight
     over the wordmark. */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  /* A floor, not a height: the bar is sized by the mark where there is one,
     and this is what keeps it from collapsing onto the back link alone once
     the media query below drops the mark on a narrow game page. */
  min-height: 44px;
  padding: 0.35rem 1rem;
  background: rgba(35, 39, 46, 0.5);     /* gamingarts.com #23272E, halved */
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

/* ---- left: where you are, and the way back ------------------------------- */

/* Stretches across its track rather than shrink-wrapping, so the overflow has
   somewhere to be clipped and .game-where can ellipsis. */
.site-bar-lead {
  grid-column: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.back-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #1c2333;
  font-size: 0.82rem;
  text-decoration: none;
  white-space: nowrap;
}
.back-link:hover { background: #fff; }
.back-link span { font-size: 1.05rem; line-height: 1; }

.game-where {
  margin: 0;
  min-width: 0;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.9);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- centre: the wordmark ------------------------------------------------
   An <h1> on the menu and a link on a game page, where the game's own name is
   the h1 - so this styles both. Both hold the logo image; the <h1> keeps its
   alt text as the menu's heading.
   ------------------------------------------------------------------------ */

.site-bar-mark {
  grid-column: 2;
  margin: 0;
  display: flex;                 /* kills the inline-image baseline gap */
  align-items: center;
  line-height: 0;
}
.site-bar-mark img {
  display: block;
  height: var(--mark-height);
  width: auto;
}

a.site-bar-mark:focus-visible {
  outline: 3px solid #ffc24d;
  outline-offset: 4px;
  border-radius: 0.25rem;
}

/* ---- right: whose games these are ---------------------------------------- */

/* Player view only. The signage modes never reach this rule - applyChrome()
   removes the whole #siteBar before av builds its own. */
.site-bar-logo {
  grid-column: 3;
  justify-self: end;
  display: flex;                 /* kills the inline-image baseline gap */
  align-items: center;
}
/* Cut to the wordmark's height, so the pair of them set the bar between them
   and it has no slack above or below either one. A fixed height here would
   outgrow the bar somewhere above the breakpoint; the shared token scales. */
.site-bar-logo img {
  display: block;
  height: var(--mark-height);
  width: auto;
}
.site-bar-logo:focus-visible {
  outline: 3px solid #ffc24d;
  outline-offset: 3px;
  border-radius: 0.25rem;
}

/* ---- and smaller on a game page ------------------------------------------
   `.site-bar-lead ~` is how this file says "on a game page": the lead column
   exists nowhere else. That bar carries the back link and the location too,
   and it sits on top of artwork rather than being the top of the page, so both
   marks come down to something a strip can hold. 46px because the wordmark is
   a 1.75:1 stacked lockup, not a wordmark that shrinks gracefully - below
   about 40 its lower word turns to mush and it reads as a coloured blob.
   ------------------------------------------------------------------------ */
.site-bar-lead ~ .site-bar-mark,
.site-bar-lead ~ .site-bar-logo {
  --mark-height: 46px;
}

/* Below roughly this width the columns stop fitting on one line. Things drop in
   order of how much work they do:

   The corner logo goes first - it is a link off this site.

   Then, on a game page only, the wordmark. What is left is the back link and
   the location, which are the only navigation and the only statement of which
   property's jackpot this is. The menu keeps its wordmark, because there it is
   the page's <h1> and nothing else names the site. */
@media (max-width: 560px) {
  .site-bar-logo { display: none; }
  .site-bar-lead ~ .site-bar-mark { display: none; }
}