/* A little more room for the wide comparison tables that many guides use. */
:root {
  --md-content-max-width: 62rem;
}

/* Slightly denser code, since guides run long and code blocks are frequent. */
.md-typeset pre > code {
  font-size: 0.78rem;
}

/* Homepage category cards: a subtle lift on hover so the grid feels clickable. */
.md-typeset .grid.cards > ul > li {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.md-typeset .grid.cards > ul > li:hover {
  transform: translateY(-2px);
  box-shadow: var(--md-shadow-z2);
}

/* `abbr` tooltips (SCD, CDC, ACID...) get a dotted underline instead of the
   browser's plain default, so readers notice they're hoverable. */
.md-typeset abbr {
  text-decoration: underline dotted;
  cursor: help;
}

/* Right-hand "On this page" panel: only H2 sections are listed (see mkdocs.yml's
   toc_depth), so this is now a short, flat list. A little breathing room and a
   clearer active-item marker make it easy to scan at a glance. */
.md-sidebar--secondary .md-nav__link {
  padding: 0.2rem 0;
  transition: color 0.1s ease;
}

.md-sidebar--secondary .md-nav__link--active {
  font-weight: 700;
  border-left: 2px solid var(--md-accent-fg-color);
  padding-left: 0.6rem;
  margin-left: -0.6rem;
}

/* "Last reviewed" line under each guide's summary (hooks/freshness.py). */
.md-typeset .page-freshness {
  margin: 0.4rem 0 1.2rem;
  font-size: 0.72rem;
  color: var(--md-default-fg-color--light);
}

.md-typeset .page-freshness--stale {
  color: var(--md-code-hl-number-color, #d9480f);
}

/* The button next to a guide's Cheat Sheet heading (docs/javascripts/print-cheatsheet.js). */
.md-typeset .print-cheatsheet {
  margin-left: 1rem;
  padding: 0.15rem 0.7rem;
  font: inherit;
  font-size: 0.65rem;
  vertical-align: middle;
  color: var(--md-primary-fg-color);
  background: none;
  border: 1px solid var(--md-primary-fg-color);
  border-radius: 0.2rem;
  cursor: pointer;
}

.md-typeset .print-cheatsheet:hover {
  color: var(--md-primary-bg-color);
  background: var(--md-primary-fg-color);
}

/* Printing. Material already hides the navigation, search and footer; this makes the content itself print
   well: code wraps instead of being cut off, tables use the page width and keep their rows together,
   headings stay with what follows them, and external links show where they lead. */
@media print {
  .md-typeset {
    font-size: 10pt;
  }

  .md-typeset pre,
  .md-typeset pre > code {
    white-space: pre-wrap;
    word-break: break-word;
    overflow: visible;
  }

  .md-typeset__scrollwrap {
    overflow: visible;
  }

  .md-typeset table:not([class]) {
    display: table;
    width: 100%;
    font-size: 8.5pt;
    word-break: break-word;
  }

  .md-typeset table:not([class]) thead {
    display: table-header-group;         /* repeat the header row on every page */
  }

  .md-typeset table:not([class]) tr,
  .md-typeset .admonition,
  .md-typeset details,
  .md-typeset .mermaid,
  .md-typeset blockquote {
    break-inside: avoid;
  }

  .md-typeset h1,
  .md-typeset h2,
  .md-typeset h3,
  .md-typeset h4 {
    break-after: avoid;
  }

  .md-typeset p,
  .md-typeset li {
    orphans: 3;
    widows: 3;
  }

  /* External links print their address, since a printed page cannot be clicked. */
  .md-typeset a[href^="http"]:not(.headerlink)::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #555;
    word-break: break-all;
  }

  .md-typeset .print-cheatsheet,
  .md-typeset .pdf-link,
  .md-typeset .headerlink {
    display: none;
  }

  /* "Print this cheat sheet": show only the marked title and section */
  body.print-cheatsheet-only .md-content__inner > *:not(.cheatsheet-section) {
    display: none !important;
  }
}