/* Risenoow Help Center: the brand on top of Material for MkDocs.
 * Colours follow assets/css/brand.css (light values on the light scheme,
 * dark values on slate). */
:root,
[data-md-color-scheme="default"] {
  --rn-primary: #037c88;
  --rn-primary-hover: #046877;
  --rn-accent: #0f8f83;
  --rn-secondary: #4257c9;
  --md-primary-fg-color: #046877;
  --md-primary-fg-color--light: #037c88;
  --md-primary-fg-color--dark: #03515c;
  --md-primary-bg-color: #ffffff;
  --md-accent-fg-color: #0f8f83;
  --md-typeset-a-color: #037c88;
  --rn-shot-border: #dbe5e6;
  --rn-card-bg: #f6fafa;
}

[data-md-color-scheme="slate"] {
  --rn-primary: #00c3ab;
  --rn-primary-hover: #2fd3be;
  --rn-accent: #72dfcd;
  --rn-secondary: #7892ff;
  --md-hue: 200;
  --md-default-bg-color: #0b1418;
  --md-primary-fg-color: #0b1f24;
  --md-primary-fg-color--light: #12323a;
  --md-primary-fg-color--dark: #071013;
  --md-primary-bg-color: #e8f7f5;
  --md-accent-fg-color: #2fd3be;
  --md-typeset-a-color: #2fd3be;
  --rn-shot-border: #1f3238;
  --rn-card-bg: #102026;
}

/* Header: the logo mark sits beside the name. */
.md-header__button.md-logo img,
.md-header__button.md-logo svg { height: 1.7rem; width: auto; }
.md-tabs { background-color: var(--md-primary-fg-color--dark); }

/* Screenshots: framed, rounded, and clickable to zoom (glightbox). */
.md-typeset img.shot,
.md-typeset figure img {
  border: 1px solid var(--rn-shot-border);
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(4, 40, 46, 0.08);
}
.md-typeset figure { margin: 1.4em auto; }
.md-typeset figure figcaption {
  font-size: 0.72rem;
  color: var(--md-default-fg-color--light);
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
}

/* Grid cards on the section landing pages. */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  border-radius: 12px;
  background: var(--rn-card-bg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid > .card:hover {
  border-color: var(--rn-primary);
  box-shadow: 0 6px 18px rgba(3, 124, 136, 0.14);
}
.md-typeset .grid.cards .lg { font-size: 1.6em; color: var(--rn-primary); }

/* Numbered steps: an ordered list given the .steps class. */
.md-typeset ol.steps,
.md-typeset .steps > ol { counter-reset: step; list-style: none; padding-left: 0; margin-left: 0; }
.md-typeset ol.steps > li,
.md-typeset .steps > ol > li {
  counter-increment: step;
  position: relative;
  padding-left: 2.6em;
  margin-bottom: 1em;
}
.md-typeset ol.steps > li::before,
.md-typeset .steps > ol > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -0.05em;
  width: 1.8em;
  height: 1.8em;
  border-radius: 50%;
  background: var(--rn-primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.85em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* A small "at a glance" box at the top of a page. */
.md-typeset .glance {
  border: 1px solid var(--rn-shot-border);
  background: var(--rn-card-bg);
  border-radius: 12px;
  padding: 0.8em 1.2em;
}
.md-typeset .glance p { margin: 0.35em 0; }

/* Icons inline with text. */
.md-typeset .twemoji.rn, .md-typeset .rn .twemoji { color: var(--rn-primary); }

/* Landing hero on the home page. */
.rn-hero { text-align: center; padding: 1.2rem 0 0.6rem; }
.rn-hero h1 { font-weight: 800; margin-bottom: 0.3em; }
.rn-hero p { font-size: 0.95rem; color: var(--md-default-fg-color--light); max-width: 40rem; margin: 0 auto 1rem; }
.rn-hero .md-button { margin: 0.25rem; }

/* Headings: firmer than the theme's light default. */
.md-typeset h1 { font-weight: 750; color: var(--md-default-fg-color); letter-spacing: -0.01em; }
.md-typeset h2 { font-weight: 700; }
.md-typeset h3 { font-weight: 650; }