/*
  The styles of the user manual (docs/index.html). The colours and sizes come from Web Awesome's
  tokens and from ../css/site.css, so the manual follows the light and dark modes by itself.
*/


/* ---------- The two columns ---------- */

/* On a phone there is one column: the menu strip, then the text. */
.docs-layout {
  display: block;
}

/* The width of a column of text that is comfortable to read. */
.docs-content {
  min-width: 0;   /* lets wide code blocks scroll inside the column, and not widen the page */
  max-width: 48rem;
  padding-bottom: var(--wa-space-4xl);
}

@media (min-width: 56rem) {
  .docs-layout {
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: var(--wa-space-2xl);
  }
}


/* ---------- The side menu ---------- */

/*
  On a phone: a strip across the top of the screen that stays in view. It scrolls sideways by
  itself when the links do not fit. The page itself never gets wider than the screen.
*/
.docs-menu {
  position: sticky;
  z-index: 5;
  top: 0;
  margin-inline: calc(-1 * var(--wa-space-m));
  padding-inline: var(--wa-space-m);
  overflow-x: auto;
  scrollbar-width: none;   /* the strip still scrolls with a finger, and a scroll bar would only take space */
  border-bottom: 1px solid var(--wa-color-surface-border);
  background: var(--wa-color-surface-default);
}

.docs-menu ul {
  display: flex;
  gap: var(--wa-space-xs);
  width: max-content;
  margin: 0;
  padding: var(--wa-space-xs) 0;
  list-style: none;
}

.docs-menu li {
  margin: 0;
}

.docs-menu a {
  display: block;
  padding: var(--wa-space-2xs) var(--wa-space-s);
  border-radius: var(--wa-border-radius-m);
  color: var(--wa-color-text-quiet);
  font-size: var(--wa-font-size-s);
  text-decoration: none;
  white-space: nowrap;
}

.docs-menu a:hover {
  background: var(--wa-color-surface-lowered);
  color: var(--wa-color-text-normal);
}

/* The section being read. docs.js sets aria-current on its link. */
.docs-menu a[aria-current="true"] {
  background: var(--wa-color-brand-fill-quiet);
  color: var(--wa-color-brand-on-quiet);
  font-weight: 600;
}

/* From 48rem, .page-width has wider side padding. The strip must still reach the page's edges. */
@media (min-width: 48rem) {
  .docs-menu {
    margin-inline: calc(-1 * var(--wa-space-xl));
    padding-inline: var(--wa-space-xl);
  }
}

/* On a wide screen: a list in its own column, which stays in view while the text scrolls. */
@media (min-width: 56rem) {
  .docs-menu {
    top: var(--wa-space-m);
    align-self: start;
    margin-inline: 0;
    padding-inline: 0;
    border-bottom: none;
    overflow-x: visible;
  }

  .docs-menu ul {
    flex-direction: column;
    width: auto;
  }

  .docs-menu a {
    white-space: normal;
  }
}


/* ---------- The text ---------- */

.docs-content h1 {
  margin: var(--wa-space-xl) 0 var(--wa-space-s);
  font-size: clamp(2.25rem, 1.5rem + 3vw, 3rem);
  letter-spacing: -0.03em;
}

.docs-lead {
  margin: 0;
  font-size: var(--wa-font-size-l);
  line-height: 1.55;
  color: var(--wa-color-text-quiet);
}

/* A link to a section leaves the heading in view, below the phone's menu strip. */
.docs-content section,
.docs-content h3,
.docs-content h4 {
  scroll-margin-top: 4rem;
}

.docs-content section {
  margin-top: var(--wa-space-3xl);
  padding-top: var(--wa-space-2xl);
  border-top: 1px solid var(--wa-color-surface-border);
}

.docs-content h3 {
  margin: var(--wa-space-2xl) 0 var(--wa-space-s);
  font-size: var(--wa-font-size-l);
}

.docs-content h4 {
  margin: var(--wa-space-xl) 0 var(--wa-space-xs);
  font-size: var(--wa-font-size-m);
}

.docs-content h2 + p,
.docs-content h3 + p {
  margin-top: var(--wa-space-s);
}

.docs-content p,
.docs-content li {
  line-height: 1.65;
}

/* Words in the text that are code: a field's name, for example. */
.docs-content :not(pre) > code {
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: var(--wa-color-surface-lowered);
  font-size: 0.875em;
  overflow-wrap: break-word;   /* a long value can break in a sentence, so it does not widen the page */
}

/* A block of code. A long line scrolls inside the block, and does not widen the page. */
.docs-content pre {
  margin: var(--wa-space-s) 0 var(--wa-space-m);
  padding: var(--wa-space-m);
  overflow-x: auto;
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-surface-lowered);
  font-size: 0.8125rem;
  line-height: 1.55;
}

/* A box that says something the reader must know first. */
.docs-notice {
  padding: var(--wa-space-s) var(--wa-space-m);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-brand-fill-quiet);
  color: var(--wa-color-brand-on-quiet);
}

/* Smaller text, for a detail that few readers need. */
.fine-print {
  font-size: var(--wa-font-size-s);
  color: var(--wa-color-text-quiet);
}


/* ---------- Tables ---------- */

/* A wide table scrolls inside this box on a phone, and does not widen the page. */
.table-wrap {
  margin: var(--wa-space-s) 0 var(--wa-space-m);
  overflow-x: auto;
}

.table-wrap table {
  width: 100%;
  margin: 0;
  font-size: 0.875rem;
}

.table-wrap td,
.table-wrap th {
  vertical-align: top;
}

/* A field's name stays on one line. On a phone, a table that gets too wide scrolls inside its box. */
.table-wrap td:first-child code {
  white-space: nowrap;
}

/* The codes are all the same short width. */
.failure-codes td:first-child {
  white-space: nowrap;
}