/* ─────────────────────────────────────────────────────────────────────────
   Shared page chrome for www.jnext.es — the site fonts and the JNEXT bar.

   Loaded by EVERY page on the site: the landing page, and every page of the
   user and developer guides. The guides are mkdocs-material builds that know
   nothing about this file, so it has to be self-contained — its own variables,
   its own @font-face — and it must not disturb the theme around it. All of its
   custom properties are --jb-* so they cannot collide with anything, and the
   only theme selectors it touches are the two that would otherwise sit
   underneath the bar.

   The markup this styles lives in ONE place: bar.html at the repo root.
   ───────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrainsmono-var-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --jb-h:      52px;        /* bar height — the theme offsets below depend on it */
  /* mkdocs-material's own header. In px on purpose: the theme sets the root
     font to 125%, so rem here would mean 60px on a guide page and 48px on the
     landing page, and the header is 48px on both. */
  --jb-theme-h: 48px;
  --jb-paper:  #0E0E14;
  --jb-ink:    #E6E7EF;
  --jb-dim:    #8B8DA0;
  --jb-rule:   #2A2B38;
  --jb-green:  #00FF00;
  --jb-red:    #FF0000;
  --jb-yellow: #FFFF00;
  --jb-cyan:   #00FFFF;
  --jb-max:    1216px;
}

/* Every length inside the bar is in px, never rem or em. mkdocs-material sets
   the root font to 125%, so rem here would silently render the bar a quarter
   larger on a guide page than on the landing page — the bar has to look the
   same on every page of the site, whatever the host page does to its root. */
.jbar {
  position: sticky;
  top: 0;
  z-index: 1000;           /* above mkdocs-material's header (z-index 4) */
  box-sizing: border-box;
  height: var(--jb-h);
  background: var(--jb-paper);
  border-bottom: 1px solid var(--jb-rule);
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  /* Not inherited: the guides' theme would otherwise pass its own near-black
     body colour down, so anything in the bar without an explicit colour would
     be black on a black bar. */
  color: var(--jb-ink);
}
.jbar *, .jbar *::before { box-sizing: border-box; }

/* The rainbow flash stripe. The only gradient the site uses, because it is the
   only one the hardware could produce. */
.jbar::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg,
    var(--jb-red)    0 25%,
    var(--jb-yellow) 25% 50%,
    var(--jb-green)  50% 75%,
    var(--jb-cyan)   75% 100%);
}

.jbar__in {
  max-width: var(--jb-max);
  height: 100%;
  margin: 0 auto;
  padding: 4px 16px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.jbar__mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--jb-ink);
  text-decoration: none;
  flex: none;
}
.jbar__icon { display: block; width: 30px; height: 30px; }
.jbar__name {
  font-weight: 800;
  font-stretch: 125%;
  font-size: 19px;
  letter-spacing: .04em;
  color: var(--jb-ink);
}

.jbar__nav {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
}
.jbar__nav a {
  color: var(--jb-dim);
  text-decoration: none;
  white-space: nowrap;
}
.jbar__nav a:hover, .jbar__nav a:focus-visible { color: var(--jb-ink); }

/* Qualified with .jbar__nav so these out-rank `.jbar__nav a:hover` above.
   Unqualified, that rule is more specific and repaints the hovered chip's
   text in --jb-ink, leaving near-white on bright green. */
.jbar__nav a.jbar__ver {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  padding: 4px 10px;
  border: 1px solid var(--jb-green);
  color: var(--jb-green);
  /* Space for a version string is reserved up front, so filling the chip in
     cannot move the nav around. 10ch covers "v0.99.110" and a digit's worth of
     growth; the placeholder is sized to fit the same box. Content-box width is
     10ch because .jbar sets border-box, hence the padding and border here. */
  display: inline-block;
  min-width: calc(10ch + 22px);
  text-align: center;
}
.jbar__nav a.jbar__ver:hover,
.jbar__nav a.jbar__ver:focus-visible {
  background: var(--jb-green);
  color: var(--jb-paper);
}

.jbar a:focus-visible { outline: 2px solid var(--jb-ink); outline-offset: 3px; }

/* ── Sitting on top of mkdocs-material ─────────────────────────────────────
   The .md-* selectors match only inside the guides; on the landing page they
   match nothing and cost nothing. Material's header and its sidebars are all
   sticky to the top of the viewport, so each is pushed down by the bar. */

.md-header { top: var(--jb-h); }

/* The theme sets .md-sidebar's top in several rules at once (2.4rem, then
   4.8rem, plus top: 0 on --primary), so this override is marked important
   rather than trying to out-rank each of them by specificity and order —
   without it the top of the nav sits behind the theme header and gets
   clipped. Scoped to the theme's desktop breakpoint (its media queries are em
   against the initial 16px, so this is ~1220px): below that the primary
   sidebar becomes a full-height drawer and must keep its own top: 0. */
@media screen and (min-width: 76.25em) {
  body[data-md-color-scheme] .md-sidebar {
    top: calc(var(--jb-h) + var(--jb-theme-h)) !important;
    height: calc(100vh - var(--jb-h) - var(--jb-theme-h)) !important;
  }
}

/* Deep links have to clear BOTH headers. This must be on the scrolling
   element: scroll-padding-top set on <body> is silently ignored, which is
   exactly how the first attempt failed — anchors landed 32px underneath the
   chrome. Material does not expose its header height as a custom property, so
   --jb-theme-h carries it; it is declared unconditionally, and the extra
   offset it adds on the landing page is invisible there because the only
   in-page anchor is the skip link. */
html { scroll-padding-top: calc(var(--jb-h) + var(--jb-theme-h) + 8px); }

@media (max-width: 620px) {
  :root { --jb-h: 48px; }
  .jbar__in { padding-left: 12px; padding-right: 12px; gap: 10px; }
  .jbar__nav { gap: 12px; font-size: 12.5px; overflow-x: auto; scrollbar-width: none; }
  .jbar__nav::-webkit-scrollbar { display: none; }
  .jbar__name { font-size: 17px; }
}