/* Brand palette -----------------------------------------------------------
   Material's "custom" primary/accent read these variables. */
:root {
  --cc-brand: #2c9ccd;
  --cc-brand-dark: #1e85a8;
  --cc-brand-light: #5bb3d9;
  /* The brand blue only reaches 4.2:1 on white; links need 4.5:1. */
  --cc-link: #176b89;

  /* The hero sits on brand blue, so its button is white rather than branded. */
  --cc-hero-button-bg: #ffffff;

  --md-primary-fg-color: var(--cc-brand);
  --md-primary-fg-color--light: var(--cc-brand-light);
  --md-primary-fg-color--dark: var(--cc-brand-dark);
  --md-accent-fg-color: var(--cc-brand-dark);
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--cc-brand);
  --md-accent-fg-color: var(--cc-brand-light);
  --md-typeset-a-color: var(--cc-brand-light);
}

[data-md-color-scheme="default"] {
  --md-typeset-a-color: var(--cc-link);
}

/* Feature grid: uses Material's card grid, tightened up a little. */
.md-typeset .grid.cards > ul > li {
  border-radius: 0.4rem;
  transition: border-color 125ms, box-shadow 125ms;
}

.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--cc-brand);
  box-shadow: 0 0 0 1px var(--cc-brand);
}

.md-typeset .grid.cards > ul > li > hr {
  margin: 0.6rem 0;
}

/* Tables -------------------------------------------------------------------
   Cells align to the top so short values line up with a wrapped message. */
.md-typeset table:not([class]) td,
.md-typeset table:not([class]) th {
  vertical-align: top;
}

/* Sidebar section headings ("Getting started", "Reference", ...) */
.md-nav__item--section > .md-nav__link {
  font-weight: 700;
  color: var(--md-default-fg-color);
}