/* SkillPixel brand colours, matching the original guide. */
:root {
  --sp-brand: #2e79de;
  --sp-brand-dark: #1d60b9;
  --md-primary-fg-color: var(--sp-brand);
  --md-primary-fg-color--light: #5b96e6;
  --md-primary-fg-color--dark: var(--sp-brand-dark);
  --md-accent-fg-color: var(--sp-brand-dark);
  --md-typeset-a-color: var(--sp-brand);
  /* Header navy: dark enough that the brand-blue mark reads against it
     (3.4:1 vs #2e79de, 14:1 vs the white header text). */
  --sp-header: #0a2752;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #5b96e6;
  --md-accent-fg-color: #8ab6ee;
  --md-typeset-a-color: #8ab6ee;
}

/* Header only — the rest of the UI keeps brand blue as the primary colour. */
.md-header,
.md-tabs {
  background-color: var(--sp-header);
}

/* On slate the navy sits at almost the same lightness as the page body,
   so give the bar a defined edge. */
[data-md-color-scheme="slate"] :is(.md-header, .md-tabs) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* Material ships a 1.2rem logo; the mark reads too small at that size. */
.md-header__button.md-logo :is(img, svg),
.md-nav__title .md-logo :is(img, svg) {
  height: 1.9rem;
  width: 1.9rem;
}

.md-header__button.md-logo {
  padding: 0.2rem;
  margin-right: 0.1rem;
}

/* Screenshots: framed like the original guide so UI captures stay readable. */
.md-typeset img {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(20, 30, 50, 0.06);
}

/* The mark is a square; clip it to a circle in the header and drawer. */
.md-typeset .md-nav__title img,
.md-header__button.md-logo img {
  border: none;
  border-radius: 50%;
  box-shadow: none;
}

/* Steps carry a screenshot each; keep them from running together. */
.md-typeset ol > li {
  margin-bottom: 0.8em;
}