/* Small refinements on top of the default mdBook theme. */

:root {
    --babysoarus-accent: #4f9dde;
}

.content h1,
.content h2 {
    letter-spacing: -0.01em;
}

/* Comparison and benchmark tables are the backbone of these docs, so give
   them room to breathe and make numeric columns easy to scan. */
.content table {
    width: 100%;
    margin: 1.2em 0;
}

.content table th {
    text-align: left;
    font-weight: 600;
}

.content table td:not(:first-child) {
    font-variant-numeric: tabular-nums;
}

/* Callouts, written as blockquotes beginning with a bolded label. */
.content blockquote {
    border-inline-start: 3px solid var(--babysoarus-accent);
    background: rgba(79, 157, 222, 0.08);
}

.content img {
    max-width: 100%;
    border-radius: 6px;
    border: 1px solid rgba(127, 127, 127, 0.35);
    margin: 0.8em 0;
}

/* Screenshot captions. */
.content img + em {
    display: block;
    font-size: 0.9em;
    opacity: 0.75;
    margin-top: -0.4em;
}

/* --- Sidebar section toggles ------------------------------------------
   `theme/extras.js` builds these as <button> rather than mdBook's hrefless
   <a>, so that a keyboard user can actually open a section. mdBook's own
   rules are written against `a.toggle` and so no longer match; these
   restate them for the button, plus the reset a <button> needs to stop
   looking like a form control, and a visible focus ring -- which the
   anchor never had either, because it was never focusable. */
.chapter li > button.toggle {
  cursor: pointer;
  display: block;
  margin-inline-start: auto;
  padding: 0 10px;
  user-select: none;
  opacity: 0.68;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  line-height: inherit;
}

.chapter li > button.toggle div {
  transition: transform 0.5s;
}

.chapter li.expanded > button.toggle div {
  transform: rotate(90deg);
}

.chapter li > button.toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
  opacity: 1;
}

/* WCAG 1.4.1: a link in prose must not be distinguishable by colour alone.
   Scoped to the page body, so the sidebar and the menu bar -- where links
   are distinguishable by position -- are left as they are. */
#content main a:not(.header):not(.mobile-nav-chapters):not(.nav-chapters) {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Text present for a screen reader and not for the eye. Used to give
   mdBook's sidebar toggle an accessible name from its own content, which
   is where a <label> is meant to take one from. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}