/* The colours of the logo: navy, and the green, amber and red of the bars */
:root {
  --torchio-navy: #0f172a;
  --torchio-green: #22c55e;
  --torchio-amber: #f59e0b;
  --torchio-red: #ef4444;
  --torchio-slate: #94a3b8;
  /* the table of contents is narrower than the 300px of mdBook; whoever drags it keeps their own width */
  --sidebar-target-width: 230px;
}

.light, .rust, .coal, .navy, .ayu {
  --links: #15803d;
}

.navy {
  --bg: var(--torchio-navy);
  --links: var(--torchio-green);
}

.menu-title {
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* the logo, before the title of the book */
.menu-title::before {
  content: "";
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  margin-right: 0.45em;
  vertical-align: -0.15em;
  background: url("../images/logo.svg") center / contain no-repeat;
}

/* the three bars of the logo under the title of the page */
.content main > h1:first-of-type::after {
  content: "";
  display: block;
  height: 4px;
  width: 6rem;
  margin-top: 0.4rem;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--torchio-green) 0 33%, var(--torchio-amber) 33% 66%, var(--torchio-red) 66% 100%);
}

/* wide tables scroll inside the page instead of being cut on a narrow screen */
.content table {
  display: block;
  overflow-x: auto;
}

/* the version, as a small label after the title; the workflow that publishes the site writes the real
   one in a rule at the end of this file, and a build on your machine says "dev" */
.menu-title::after {
  content: "dev";
  display: inline-block;
  margin-left: 0.7em;
  padding: 0.1em 0.55em;
  border: 1px solid var(--torchio-slate);
  border-radius: 999px;
  color: var(--torchio-slate);
  font-size: 0.4em;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.5;
  vertical-align: 0.45em;
}

.menu-title::after { content: "v4.6.2"; }