/* ZaazCRM brand palette — pulled from zaazcrm-child/style.css (--zb-* tokens).
 *
 * Light mode: Material's built-in `primary: white` paints the header white;
 * we override accent + link colors with the brand navy and teal.
 *
 * Dark mode: Material's `slate` scheme + `primary: custom` lets us paint
 * the header with the brand navy so the logo still pops.
 */
:root {
  --md-accent-fg-color:              #14b8a6;
  --md-accent-fg-color--transparent: rgba(20, 184, 166, 0.1);
  --md-accent-bg-color:              #ffffff;
  --md-accent-bg-color--light:       #ffffffb3;

  --md-typeset-a-color:              #1f4b99;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        #1f4b99;
  --md-primary-fg-color--light: #2c63bf;
  --md-primary-fg-color--dark:  #14225a;
  --md-primary-bg-color:        #ffffff;
  --md-primary-bg-color--light: #ffffffb3;

  --md-accent-fg-color:         #2dd4bf;
  --md-typeset-a-color:         #93c5fd;
}

/* Make the logo big enough to read in the header. */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.6rem;
  width: auto;
}

/* Tighten heading rhythm to match a manual-style read */
.md-typeset h1 {
  font-weight: 700;
  letter-spacing: -0.02em;
}
.md-typeset h2 {
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-top: 2em;
}

.md-typeset h2:first-of-type {
  margin-top: 1em;
}

/* Soft accent on inline code so it doesn't fight the primary navy */
.md-typeset code {
  background-color: rgba(31, 75, 153, 0.08);
  border-radius: 3px;
  padding: 0.1em 0.35em;
}
[data-md-color-scheme="slate"] .md-typeset code {
  background-color: rgba(147, 197, 253, 0.18);
}

/* Cards on landing pages */
.md-typeset .grid.cards > ol > li,
.md-typeset .grid.cards > ul > li {
  border-left: 3px solid var(--md-primary-fg-color);
}

/* Hide placeholder screenshot references until real images are added.
 * Style guide uses `![Screenshot: caption](TBD.png)` everywhere; once a
 * chapter swaps `TBD.png` for a real filename this rule stops matching
 * and the image appears normally. `:has()` collapses the wrapping <p>
 * so there's no blank gap between paragraphs. */
.md-typeset img[src$="TBD.png"] {
  display: none;
}
.md-typeset p:has(> img[src$="TBD.png"]:only-child) {
  display: none;
}