/* basedpython documentation theme
 *
 * the theme this builds on is already close to what we want, so everything
 * here is either something the theme has no concept of (inlay hints, the
 * landing hero) or a place the reference's shape strains the default (a
 * ninety-page feature nav, cards used as link indexes)
 */

/* --- landing hero ------------------------------------------------------ */

.by-tagline {
  color: var(--md-default-fg-color--light);
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 1.5;
  margin: 0.6em 0 1.2em;
  max-width: 34em;
}

/* the hero buttons sit directly under the tagline, so they need to breathe
   without inheriting the paragraph's line height */
.by-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 2rem;
}

.by-actions .md-button {
  margin: 0;
}

/* --- cards ------------------------------------------------------------- */

/* the theme colours a card's leading icon like body text; an accent makes a
   grid of them scannable */
.md-typeset .grid.cards > ul > li > p:first-child .twemoji {
  color: var(--md-accent-fg-color);
}

/* a card's heading is usually also its link. underlining it makes a grid of
   cards read as a list of links rather than as a set of headings */
.md-typeset .grid.cards > ul > li > p:first-child > strong > a {
  color: var(--md-default-fg-color);
  text-decoration: none;
}

.md-typeset .grid.cards > ul > li:hover > p:first-child > strong > a {
  color: var(--md-accent-fg-color);
}

/* --- the feature index -------------------------------------------------- */

/* the reference has ninety pages in nine sections, two of which are nearly
 * thirty entries long. as one column that is a page of scrolling; columns keep
 * a section on screen at once, which is the whole point of an index */
.by-index ul {
  column-gap: 2.4rem;
  columns: 2;
}

.by-index li {
  break-inside: avoid;
}

@media screen and (max-width: 76.234375em) {
  .by-index ul {
    columns: 1;
  }
}

/* --- inlay hints -------------------------------------------------------- */

/* the docs write what an editor renders — an inferred specialization, an
 * injected argument — between angle brackets. the `by` lexer gives that its own
 * token so it can look like the hint it stands for, and not like source
 *
 * `.err` is here because the notation also appears in a `python` block, where
 * no lexer knows it. `scripts/check_by_lexer.py` enforces that this is the only
 * thing in the docs that lexes to an error token */
.md-typeset .highlight .cs,
.md-typeset .highlight .err {
  background-color: var(--md-default-fg-color--lightest);
  border-radius: 0.2rem;
  color: var(--md-default-fg-color--light);
  font-style: normal;
  padding: 0 0.2em;
}

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

/* the feature reference is deep and its titles are long. wrapping is better
   than truncation here, but the default line height makes a wrapped item hard
   to tell from two items */
.md-nav__link {
  line-height: 1.3;
}