/* Small visual polish on top of mkdocs-material.
   Everything here uses Material's own CSS variables (or the locked teal primary)
   so it adapts to both the light and dark schemes automatically. */

/* ---- Lead blockquotes -------------------------------------------------------
   Turn the bare left-rule blockquote into a soft tinted panel, so the home-page
   lead quote and each option page's outcome blurb read as a real callout. */
.md-typeset blockquote {
  border-left: 0.2rem solid var(--md-primary-fg-color);
  border-radius: 0 0.4rem 0.4rem 0;
  background-color: color-mix(in srgb, var(--md-primary-fg-color) 6%, transparent);
  padding: 0.7rem 1rem;
  color: var(--md-default-fg-color);
}

/* ---- Content tables ---------------------------------------------------------
   Softer borders, a tinted header row, and zebra striping so the wide decision
   table on the home page scans cleanly. */
.md-typeset table:not([class]) {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.5rem;
  overflow: hidden;
}

.md-typeset table:not([class]) th {
  background-color: color-mix(in srgb, var(--md-primary-fg-color) 12%, transparent);
  font-weight: 700;
  border: none;
}

.md-typeset table:not([class]) td {
  border: none;
}

.md-typeset table:not([class]) tbody tr {
  border-top: 1px solid var(--md-default-fg-color--lightest);
  transition: background-color 0.12s ease;
}

.md-typeset table:not([class]) tbody tr:nth-child(even) {
  background-color: var(--md-default-fg-color--lightest);
}

.md-typeset table:not([class]) tbody tr:hover {
  background-color: color-mix(in srgb, var(--md-primary-fg-color) 8%, transparent);
}

/* ---- Tighter lead on the home page -----------------------------------------
   Trim the vertical rhythm at the top so the decision table ("Which one should
   I pick?") sits higher and is reachable above the fold on a laptop screen. */
.md-typeset h1 {
  margin-bottom: 0.4em;
}

.md-typeset hr {
  margin-top: 1em;
  margin-bottom: 1em;
}

/* Slightly tighter list spacing for the three lead bullets. */
.md-typeset ul li {
  margin-bottom: 0.3em;
}

/* ---- Top navigation tabs ----------------------------------------------------
   A touch more weight on the active tab so the section you're in is obvious. */
.md-tabs__link--active {
  font-weight: 700;
}