/* Vyges branding for the mdBook docs — palette + a gradient-highlight header
   (à la opentitan.org/book). Palette mirrors vyges_website vyges-styles.css. */
:root {
  --vyges-dark: #132534;   /* primary blue   */
  --vyges-light: #18A7C4;  /* cyan accent    */
  --vyges-purple: #7B6CB1;
  --vyges-pink: #E81A89;
  /* Brand gradient header highlight. Holds solid navy on the left so the
     (cyan+pink) Vyges logo stays high-contrast, then sweeps the brand colours. */
  --vyges-header: linear-gradient(90deg, #132534 0%, #132534 18%, #18A7C4 44%, #7B6CB1 72%, #E81A89 100%);
}

/* Accent colour: links + active sidebar entry in Vyges cyan. */
html.light,
html.rust {
  --links: var(--vyges-light);
  --sidebar-active: var(--vyges-light);
  --searchbar-border-color: var(--vyges-light);
  --search-mark-bg: var(--vyges-light);
}

/* Headings in Vyges dark; h1 gets a cyan underline. */
.content h1 {
  color: var(--vyges-dark);
  border-bottom: 3px solid var(--vyges-light);
  padding-bottom: 0.3rem;
}
.content h2,
.content h3 {
  color: var(--vyges-dark);
}
.chapter li.chapter-item a.active {
  color: var(--vyges-light);
  font-weight: 600;
}

/* ── Header: gradient-highlight menu bar with logo + nav (matches vyges.com) ── */
.menu-bar {
  background: var(--vyges-header);
  border-bottom: none;
  box-shadow: 0 1px 4px rgba(19, 37, 52, 0.25);
}
/* Everything on the bar is white for legibility across the gradient. */
.menu-bar .icon-button,
.menu-bar .icon-button i {
  color: #ffffff !important;
}
.menu-bar .menu-title {
  display: none; /* replaced by the injected logo + nav */
}
/* Vyges logo as a white strip at the top of the left sidebar (cyan+pink logo
   reads cleanly on white, in every theme). A real <a> (injected by
   vyges-chrome.js) so it links home to vyges.com; the image is a CSS background
   so its path resolves at every page depth. */
.sidebar .sidebar-scrollbox .vyges-sidebar-logo {
  display: block;
  height: 58px;
  margin: 0 0 0.5rem;
  background: #ffffff url("../images/vyges-logo.svg") no-repeat center;
  background-size: auto 30px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.vyges-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-left: 0.5rem;
  flex: 1;
}
.vyges-nav a {
  color: #ffffff;
  font-weight: 500;
  font-size: 0.9rem;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
  opacity: 0.95;
  transition: opacity 0.15s ease;
}
.vyges-nav a:hover {
  opacity: 1;
  text-decoration: underline;
}
.vyges-build-ip {
  background: #ffffff;
  color: var(--vyges-dark) !important;
  padding: 0.35rem 0.85rem;
  border-radius: 0.45rem;
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.vyges-build-ip:hover {
  background: rgba(255, 255, 255, 0.85);
}
/* Version badge: "v0.1.0" pill on the right of the bar. Gains an "update
   available" tail (in Vyges pink) when a newer release is published. */
.vyges-version {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0.5rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 0.45rem;
  color: #ffffff !important;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.vyges-version:hover {
  border-color: #ffffff;
}
.vyges-version.is-outdated {
  border-color: var(--vyges-pink);
}
.vyges-version-latest {
  background: var(--vyges-pink);
  color: #ffffff;
  padding: 0.05rem 0.4rem;
  border-radius: 0.35rem;
  font-size: 0.7rem;
  font-weight: 600;
}

/* Collapse the site nav on narrow screens; mdBook's own controls remain. */
@media (max-width: 900px) {
  .vyges-nav,
  .vyges-build-ip {
    display: none;
  }
}
@media (max-width: 700px) {
  .vyges-version-latest { display: none; }
}