/* Header brand: the modern template does not size #logo. A PNG, ICO or an SVG that has only a
   viewBox is drawn at its own size (90 to 157 px measured) and spills out of the 3.5 rem
   header, pushing the site name over the menu. Sizing it here works for any icon file.
   Found by measuring the live pages in a browser, 18 October 2026. */
.navbar .navbar-brand #logo {
  height: 2rem;
  width: auto;
  margin-right: 0.5rem;
}

/* Keep the site name from being squeezed, and a menu entry from breaking over two lines. */
.navbar .navbar-brand {
  flex-shrink: 0;
}

.navbar .nav-link {
  white-space: nowrap;
}

/* Between 768 and 992 px the menu and the search box compete for the bar. Keep the menu at its
   natural width and let the search box give way. */
.navbar .navbar-nav {
  flex-shrink: 0;
}

.navbar form#search {
  min-width: 0;
  flex: 1 1 8rem;
}

/* The template puts a wbr inside camel-case words, and Chromium breaks there even under
   nowrap, so "GitHub" is drawn "Git" / "Hub" when the menu is squeezed. Remove the break
   point and keep each entry at its natural width. */
.navbar .navbar-nav .nav-item {
  flex-shrink: 0;
}

.navbar .navbar-nav .nav-link wbr {
  display: none;
}

/* Dark colour scheme: the template's secondary grey (#6c757d) on its dark background (#212529) is 3.3:1, under the
   4.5:1 that text needs. It is the footer, the "Namespace" and "Assembly" lines, and every link in the "In this
   article" outline - 40 to 65 pieces of text on a page. Bootstrap builds those colours from --bs-secondary-rgb. */
[data-bs-theme="dark"] {
  --bs-secondary-rgb: 173, 181, 189;
}

/* Light colour scheme: two colours of the code highlighter are too pale on the code block's grey (#f5f5f5):
   the cyan of symbols is 2.3:1 and the red of attribute names 3.7:1. Darker shades of the same hues. */
[data-bs-theme="light"] .hljs-symbol {
  color: #0b5f87;
}

[data-bs-theme="light"] .hljs-attr {
  color: #b3001b;
}

/* Found by tools/check-contrast.js on the X25.Monitor README (a bracketed text read as a selector): the blue of
   attribute selectors is 3.3:1 on #f5f5f5. Same darker blue as the symbols above. */
[data-bs-theme="light"] .hljs-selector-attr {
  color: #0b5f87;
}

/* Dark scheme: Mermaid draws the text on an arrow (for example "not supported", "ACK") as #ccc on a grey
   box, 4.4:1 and just under the 4.5:1 target (found by tools/check-contrast.js on the Econet README).
   Mermaid writes its own colours into each SVG with an id selector, so only !important wins here. */
[data-bs-theme="dark"] pre.mermaid .edgeLabel,
[data-bs-theme="dark"] pre.mermaid .edgeLabel p {
  color: #f1f3f5 !important;
}

/* The GitHub entry (the last menu entry) goes to the far right of the header, after the search
   box and the theme switch, with the GitHub logo in front of the text. The menu list is
   flattened so its last entry can be ordered after the other header items. */
.navbar .navbar-nav {
  display: contents;
}

.navbar .navbar-nav .nav-item:last-child {
  order: 100;
  margin-left: 0.5rem;
}

.navbar .nav-link[href^="https://github.com/"]::before {
  font-family: bootstrap-icons;
  content: "\f3ed";
  font-size: 1.25rem;
  vertical-align: -0.15rem;
  margin-right: 0.4rem;
}

/* The RetroCore Labs entry: the organisation's profile picture, linking back to the front page
   of retrocorelabs.github.io. It is the menu entry before GitHub, and goes to the right with it. */
.navbar .navbar-nav .nav-item:has(> .nav-link[href="https://retrocorelabs.github.io/"]) {
  order: 99;
}

.navbar .nav-link[href="https://retrocorelabs.github.io/"]::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.4rem;
  vertical-align: -0.4rem;
  border-radius: 4px;
  background: url("RetroCoreLabs.png") center / contain no-repeat;
}

/* The logo is a black square: on the dark header it is a 1.2:1 outline. A light backing in the dark
   scheme (the picture sits inside a little padding) makes it show; the light scheme is unchanged. */
[data-bs-theme="dark"] .navbar .nav-link[href="https://retrocorelabs.github.io/"]::before {
  box-sizing: content-box;
  padding: 0.15rem;
  background-color: #dee2e6;
  background-origin: content-box;
  border-radius: 6px;
  vertical-align: -0.55rem;
}

/* Between 768 and 1100 px the header has no room for the words as well: the GitHub and RetroCore
   Labs entries show only their logos (the text stays in the page for screen readers). */
@media (min-width: 768px) and (max-width: 1100px) {
  .navbar .nav-link[href^="https://github.com/"],
  .navbar .nav-link[href="https://retrocorelabs.github.io/"] {
    font-size: 0;
    padding-left: 0.3rem;
    padding-right: 0.3rem;
  }

  .navbar .nav-link[href^="https://github.com/"]::before,
  .navbar .nav-link[href="https://retrocorelabs.github.io/"]::before {
    margin-right: 0;
  }
}