/* The Tatreez site bar (TEST MODE banner + header and nav) injected above the game pages' own header.
   Everything is scoped to .games-site-bar so it neither uses nor overrides the games' own tokens and boards
   (public/css/*.css). Loaded after games/site-nav.css, so these rules win where both style the bar.
   Token values match static/site.css; see docs/THEME.md. */

.games-site-bar {
  --gs-bg: #FBF5EA;
  --gs-line: #DCCBAE;
  --gs-ink: #2A2118;
  --gs-muted: #5E4F3F;
  --gs-terra: #A4482A;
  --gs-primary: #3B4A1C;
  --gs-primary-hover: #2E3A15;
  --gs-on-primary: #FFFDF8;
  --gs-focus: #A4482A;
  --gs-banner-bg: #2A2118;
  --gs-banner-ink: #F6D78A;
  --st-red: #8C1C24;
  --st-terra: #B5532E;
  --st-olive: #55672C;
  --st-gold: #B8862E;
  --gs-gutter: 1rem;
  font-family: "Source Sans 3", "Source Sans Pro", "Segoe UI", system-ui, -apple-system, "Noto Sans", "Noto Sans Arabic", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--gs-ink);
}
@media (min-width: 48rem) { .games-site-bar { --gs-gutter: 2rem; } }

@media (prefers-color-scheme: dark) {
  .games-site-bar {
    --gs-bg: #111827;
    --gs-line: #2E3A55;
    --gs-ink: #F4ECDD;
    --gs-muted: #C9BEAA;
    --gs-terra: #EE9A74;
    --gs-primary: #B4C77A;
    --gs-primary-hover: #C8D893;
    --gs-on-primary: #111827;
    --gs-focus: #E7C477;
    --gs-banner-bg: #F6D78A;
    --gs-banner-ink: #1A1408;
    --st-red: #E0626A;
    --st-terra: #EE9A74;
    --st-olive: #A9BC6E;
    --st-gold: #E7C477;
  }
}

.games-site-bar .motif-defs { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
/* The stitches render inside <use> shadow trees, where selectors scoped to .games-site-bar do not match; the thread
   classes are therefore unscoped (only the sprite uses them), and fill and stroke width are inherited from the svg. */
.s-r { stroke: var(--st-red); }
.s-t { stroke: var(--st-terra); }
.s-o { stroke: var(--st-olive); }
.s-g { stroke: var(--st-gold); }
.games-site-bar svg.stitched { fill: none; stroke-width: .3; stroke-linecap: round; }

/* The banner scrolls with the bar here: the game pages own their body padding, so it is not fixed. */
.games-site-bar .test-banner {
  position: static;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  min-block-size: 2.25rem;
  padding: 0 var(--gs-gutter);
  background: var(--gs-banner-bg); color: var(--gs-banner-ink);
  font-size: .875rem; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-align: center;
  border-block-end: 3px dashed var(--gs-banner-ink);
}
.games-site-bar .test-banner strong { font-weight: 800; letter-spacing: .06em; flex: none; }
.games-site-bar .test-banner a { color: inherit; font-weight: 700; text-decoration: underline; }
.games-site-bar .test-banner .more { display: none; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 60rem) { .games-site-bar .test-banner .more { display: inline; } }
.games-site-bar .test-banner a:focus-visible { outline-color: var(--gs-banner-ink); outline-offset: 1px; }

.games-site-bar .site-header { background: var(--gs-bg); border-block-end: 1px solid var(--gs-line); }
.games-site-bar .wrap {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem;
  inline-size: 100%; max-inline-size: 72rem; margin-inline: auto;
  padding: .75rem var(--gs-gutter);
}
.games-site-bar .brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--gs-ink); text-decoration: none; margin-inline-end: auto; }
.games-site-bar .brand svg { inline-size: 2.4rem; block-size: 2.4rem; }
.games-site-bar .brand-name { font-family: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, ui-serif, serif; font-weight: 700; font-size: 1.3rem; line-height: 1; letter-spacing: -.01em; }
.games-site-bar .brand-note { display: block; font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gs-muted); margin-block-start: .2rem; }
.games-site-bar .site-nav { order: 3; inline-size: 100%; }
.games-site-bar .site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; }
.games-site-bar .site-nav a { color: var(--gs-ink); text-decoration: none; font-weight: 600; padding-block: .2rem; display: inline-block; border-block-end: 2px solid transparent; }
.games-site-bar .site-nav a:hover, .games-site-bar .site-nav a[aria-current="page"] { border-block-end-color: var(--gs-terra); }
@media (min-width: 60rem) { .games-site-bar .site-nav { order: 0; inline-size: auto; } }

/* The games define their own .btn / .btn-primary; these rules fully restyle the bar's Give button. */
.games-site-bar .header-give {
  order: 2;
  display: inline-flex; align-items: center; justify-content: center;
  min-block-size: 2.5rem; padding: 0 1rem; border-radius: 999px; border: 2px solid transparent;
  background: var(--gs-primary); color: var(--gs-on-primary);
  font: inherit; font-weight: 700; font-size: .95rem; line-height: 1.2; text-decoration: none; filter: none;
}
.games-site-bar .header-give:hover { background: var(--gs-primary-hover); filter: none; }

.games-site-bar a:focus-visible { outline: 3px solid var(--gs-focus); outline-offset: 3px; border-radius: 4px; }