/*
  bmazzarol docs theme
  ====================
  Minimal, content-first styling on top of docfx's "modern" template.

  Design rules
  ------------
  1. The article is the product. Everything else is chrome and should be quiet.
  2. One column of prose at a comfortable measure (~70ch).
  3. Hierarchy comes from type and whitespace, not borders and colour.
  4. Dark/light follows the OS by default (docfx already does this).
  5. Never add decoration that does not help the reader decide or find.
*/

/*
  Self-hosted fonts (OFL licensed, see docs/theme/README.md):
    Inter            400-700 variable, latin subset, 37 KB
    JetBrains Mono   400-600 variable, latin subset, 30 KB
  Paths are relative to public/main.css, which is where docfx puts this file.
*/
@font-face {
  font-family: "Inter";
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  src: url("fonts/inter-latin.var.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  src: url("fonts/jetbrains-mono-latin.var.woff2") format("woff2");
}

:root {
  --bm-measure: 70ch;
  --bm-muted: var(--bs-secondary-color);
  --bm-rule: var(--bs-border-color);
  --bm-surface: var(--bs-tertiary-bg);
  /* half way to the tertiary background: code sits barely above the page */
  --bm-code-bg: color-mix(in srgb, var(--bs-tertiary-bg) 50%, var(--bs-body-bg));
  /* a hairline that is softer than the surrounding rules */
  --bm-code-rule: color-mix(in srgb, var(--bs-border-color) 55%, transparent);
  /* main.js samples the project icon and writes the site accent here; docfx's
     own blue is the fallback for a logo that cannot be sampled */
  --bm-accent-light: var(--bs-link-color);
  --bm-accent-dark: var(--bs-link-color);
  --bm-accent: var(--bm-accent-light);
  --bm-accent-soft: color-mix(in srgb, var(--bm-accent) 28%, transparent);
}

/* ------------------------------------------------------------------- accent */

/* every bmazzarol site carries the colour of its own icon through the links, 
   the focus rings and the text selection */
[data-bs-theme="dark"] {
  --bm-accent: var(--bm-accent-dark);
}

a {
  color: var(--bm-accent);
}

.search .form-control:focus {
  border-color: color-mix(in srgb, var(--bm-accent) 45%, var(--bs-border-color));
  box-shadow: 0 0 0 0.25rem var(--bm-accent-soft);
}

::selection {
  background: var(--bm-accent-soft);
}

/* the search results pagination is bootstrap's own, and .page-link sets its
   colour on a class, so the accent has to be stated explicitly */
.pagination {
  --bs-pagination-color: var(--bm-accent);
  --bs-pagination-hover-color: var(--bm-accent);
  --bs-pagination-focus-color: var(--bm-accent);
  --bs-pagination-active-bg: var(--bm-accent);
  --bs-pagination-active-color: var(--bs-body-bg);
  --bs-pagination-border-color: var(--bm-rule);
}

.page-link {
  color: var(--bm-accent);
}

.page-link:hover {
  color: var(--bm-accent);
  background: var(--bm-accent-soft);
}

.page-link.active,
.active > .page-link {
  background: var(--bm-accent);
  color: var(--bs-body-bg);
  border-color: color-mix(in srgb, var(--bm-accent) 60%, transparent);
}

/* --------------------------------------------------------------------- base */

body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
}

main.container-xxl {
  max-width: 1120px;
  margin: 0 auto;
  padding: 1.25rem 1.25rem 3rem;
}

/* ------------------------------------------------------------- top navigation */

header.bg-body {
  border-bottom: 1px solid var(--bm-rule);
}

.navbar {
  padding: 0.5rem 1rem;
}

.navbar-brand {
  font-weight: 600;
  letter-spacing: -0.01em;
}

#logo {
  height: 1.75rem;
  margin-right: 0.6rem;
}

form.search {
  max-width: 20rem;
}

/* --------------------------------------------------------- left side nav (toc) */

.toc {
  font-size: 0.875rem;
  line-height: 1.5;
}

.toc li {
  margin-bottom: 0.35rem;
}

/* docfx renders the toc as nested ul.nav.levelN; the top level carries the
   weight, everything below it is quieter */
.toc > ul > li > a {
  font-weight: 600;
  color: var(--bm-accent);
}

.toc ul ul a {
  color: var(--bm-muted);
}

/* ------------------------------------------------------------------- article */

.content {
  max-width: var(--bm-measure);
}

/* 1rem at a 70ch measure with 1.7 leading is the comfortable reading default */
article {
  font-size: 1rem;
  line-height: 1.7;
}

article h1 {
  font-size: 2rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 1.1rem;
  text-wrap: balance;
}

article h2 {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.3;
  margin: 2.25rem 0 1.1rem;
  text-wrap: balance;
}

article h3 {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 1.6rem 0 0.8rem;
}

article h4,
article h5 {
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 1.2rem 0 0.55rem;
}

article p {
  margin: 0 0 1rem;
}

article li {
  margin-bottom: 0.45rem;
  line-height: 1.6;
}

article ul,
article ol {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

article a {
  text-decoration: none;
  border-bottom: 1px solid var(--bm-accent-soft);
}

article a:hover {
  border-bottom-color: var(--bm-accent);
}

article a:focus-visible {
  outline: 2px solid var(--bm-accent);
  outline-offset: 2px;
}

article img {
  max-width: 100%;
}

/* prose that carries weight but never shouts */
article blockquote {
  border-left: 3px solid var(--bm-rule);
  padding: 0.5rem 0.9rem;
  margin: 0.75rem 0;
  color: var(--bm-muted);
}

/* -------------------------------------------------------------- code and tables */

/* code is the most common element on a page, so it is deliberately quiet: a
   tint half way to the tertiary background, a soft rule top and bottom only,
   the sides faded out, and generous space above and below */

pre,
code,
kbd {
  font-family: "JetBrains Mono", ui-monospace, "Cascadia Mono", SFMono-Regular,
    Consolas, monospace;
  font-size: 0.875rem;
}

pre {
  background: linear-gradient(
    90deg,
    transparent 0,
    var(--bm-code-bg) 14%,
    var(--bm-code-bg) 86%,
    transparent 100%
  );
  border: 0;
  border-top: 1px solid var(--bm-code-rule);
  border-bottom: 1px solid var(--bm-code-rule);
  margin: 1.5rem 0 1.75rem;
  padding: 0.9rem 1.1rem;
  line-height: 1.6;
  overflow-x: auto;
}

/* docfx's highlighter paints its own box inside ours - one box is enough */
pre code,
pre code.hljs,
[data-bs-theme="dark"] pre code.hljs {
  background: none;
  padding: 0;
}

code {
  background: color-mix(in srgb, var(--bm-code-bg) 70%, transparent);
  padding: 0.15em 0.4em;
  border-radius: 4px;
}

table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.75rem 0;
}

th,
td {
  border-bottom: 1px solid var(--bm-rule);
  padding: 0.45rem 0.6rem;
  text-align: left;
}

th {
  font-weight: 600;
  color: var(--bm-muted);
  font-size: 0.85rem;
}

/* ------------------------------------------------------------ secondary chrome */

/* breadcrumbs are turned off by the shared docfx metadata */

.actionbar {
  margin-bottom: 0.75rem;
}

#affix {
  font-size: 0.8rem;
  color: var(--bm-muted);
}

#affix h5 {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--bm-muted);
}

#affix a {
  text-decoration: none;
}

#nextArticle {
  display: flex;
  gap: 1.5rem;
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: var(--bm-muted);
}

#nextArticle a {
  color: var(--bm-accent);
  text-decoration: none;
}

#nextArticle a:hover {
  text-decoration: underline;
}

/* docfx puts an "Edit this page" link under the article. It is useful - it
   points at the markdown a reader should fix - so it stays, but it reads as
   quietly as the footer */
.contribution {
  margin-top: 1.5rem;
  font-size: 0.8rem;
  color: var(--bm-muted);
}

.contribution a {
  color: var(--bm-accent);
  text-decoration: none;
}

.contribution a:hover {
  text-decoration: underline;
}

footer {
  background: var(--bm-surface);
  border-top: 1px solid var(--bm-rule);
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
}

/* -------------------------------------------------------------- masthead logo */

/* the logo floats beside the intro copy instead of stranded on its own line */
article > p:first-of-type {
  margin: 0;
}

article > p:first-of-type img {
  float: left;
  width: 44px;
  height: 44px;
  margin: 0 1rem 0.75rem 0;
}

/* ------------------------------------------------- project list (profile site) */

article li img {
  width: 28px;
  height: 28px;
  vertical-align: middle;
}

article li > strong,
article li > b {
  font-size: 0.95rem;
}

/* ------------------------------------------------------------ small screens */

@media (max-width: 768px) {
  main.container-xxl {
    padding: 1rem 0.75rem 2rem;
  }

  .content {
    max-width: none;
  }

  article h1 {
    font-size: 1.65rem;
  }

  article h2 {
    font-size: 1.2rem;
    margin-top: 1.6rem;
  }
}