/* bar.css: the site's bar on the demo page.

   The demo keeps its own world below the bar (a broadcaster's player on a
   dark pitch), but the bar across the top is the same one every other page
   carries: a night strip with a hard gold rule, the page's name in a gold
   tab, and the same links in the same order. The demo's tokens use some
   of the same names for different colours, so the site's colours are set
   here on the bar itself rather than taken from :root. Its height stays
   --nav-h, which the demo's layout already counts on. */

.bar {
  --bar-night: #0D2111;
  --bar-night-rule: #2E4A30;
  --bar-cream: #F2E3BB;
  --bar-pale: #D6E6B8;
  --bar-deep: #003D01;
  --bar-gold: #C0B87A;
  --bar-orange: #FF6B00;
  --bar-display: Oswald, "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --bar-body: Inter, "Helvetica Neue", Arial, sans-serif;

  position: fixed;
  z-index: 100;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  padding-inline: clamp(16px, 4.4vw, 72px);
  background: var(--bar-night);
  border-bottom: 4px solid var(--bar-gold);
  color: var(--bar-cream);
  font-family: var(--bar-body);
}

.bar .wordmark {
  flex: none;
  font-family: var(--bar-display);
  font-weight: 700;
  font-size: 1.5625rem;
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--bar-cream);
}
.bar .wordmark__dot { color: var(--bar-orange); }

.bar__now {
  margin: 0 auto 0 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding-inline: 14px 18px;
  background: var(--bar-gold);
  font-family: var(--bar-display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--bar-deep);
}

.bar__pin { flex: none; position: relative; width: 12px; height: 20px; }
.bar__pin::before {
  content: "";
  position: absolute;
  left: 1px; top: 0;
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid var(--bar-orange);
}
.bar__pin::after {
  content: "";
  position: absolute;
  left: 5px; top: 10px;
  width: 2px; height: 8px;
  background: var(--bar-gold);
}

.bar__nav { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 28px); }
.bar__nav a {
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--bar-cream);
  padding-block: 6px;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}
.bar__nav a:hover { text-decoration: underline; text-decoration-color: var(--bar-orange); }
.bar__nav a[aria-current="page"] {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--bar-orange);
  text-decoration-thickness: 3px;
}
.bar__nav .bar__contact { padding: 8px 16px; background: var(--bar-cream); color: var(--bar-deep); }
.bar__nav .bar__contact:hover,
.bar__nav .bar__contact:active { background: var(--bar-pale); text-decoration: none; }
.bar a:focus-visible,
.bar button:focus-visible { outline: 3px solid var(--bar-cream); outline-offset: 3px; }

.bar__burger {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.bar__lines,
.bar__lines::before,
.bar__lines::after {
  display: block;
  width: 22px;
  height: 2px;
  margin-inline: auto;
  background: var(--bar-cream);
  transition: transform 160ms ease;
}
.bar__lines { position: relative; }
.bar__lines::before,
.bar__lines::after { content: ""; position: absolute; left: 0; }
.bar__lines::before { top: -7px; }
.bar__lines::after { top: 7px; }
.bar__burger[aria-expanded="true"] .bar__lines { background: transparent; }
.bar__burger[aria-expanded="true"] .bar__lines::before { transform: translateY(7px) rotate(45deg); }
.bar__burger[aria-expanded="true"] .bar__lines::after { transform: translateY(-7px) rotate(-45deg); }

.bar .sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 899.98px) {
  .bar { padding-inline: 16px 8px; gap: 12px; }
  .bar__now { font-size: 0.875rem; letter-spacing: 0.05em; padding-inline: 10px 12px; }
  .bar__burger { display: block; }
  .bar__nav {
    position: absolute;
    top: calc(var(--nav-h) - 4px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 16px 18px;
    background: var(--bar-night);
    border-top: 4px solid var(--bar-gold);
    border-bottom: 4px solid var(--bar-gold);
  }
  .bar__nav:not(.is-open) { display: none; }
  .bar__nav a { padding-block: 13px; font-size: 1.0625rem; border-bottom: 1px solid var(--bar-night-rule); }
  .bar__nav .bar__contact { margin-top: 14px; text-align: center; border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bar__lines, .bar__lines::before, .bar__lines::after { transition: none; }
}