/* The site's colors: the logo's navy as the ground and its orange as the one
   accent, on the active page in the navigation and the table of contents, the
   path above the title, the underline of a link and what the pointer is on.
   The logo's own orange (#EB6834) is 3.2:1 on white, too little for text:
   light takes a darker one (5.2:1), dark a brighter one on the navy black.
   The introduction's card icons and primary button take it too. */

:root,
[data-md-color-scheme="default"] {
  --ls-navy: #13263f;
  --ls-accent: #c2410c;
  --md-hue: 214deg;
  --md-default-fg-color: #13263fe6;
  --md-default-fg-color--light: #13263f99;
  --md-typeset-color: var(--ls-navy);
}

[data-md-color-scheme="slate"] {
  --ls-accent: #ff8a4c;
  --md-hue: 214deg;
  --md-default-bg-color: hsla(214deg, 40%, 6%, 1);
  --md-default-bg-color--light: hsla(214deg, 40%, 6%, 0.54);
  --md-default-bg-color--lighter: hsla(214deg, 40%, 6%, 0.26);
  --md-default-bg-color--lightest: hsla(214deg, 40%, 6%, 0.07);
}

[data-md-color-scheme] {
  --md-primary-fg-color: var(--ls-accent);
  --md-primary-fg-color--light: var(--ls-accent);
  --md-primary-fg-color--dark: var(--ls-accent);
  --md-accent-fg-color: var(--ls-accent);
  --md-accent-fg-color--transparent: color-mix(in srgb, var(--ls-accent) 12%, transparent);
  --md-typeset-a-color: var(--md-typeset-color, var(--md-default-fg-color));
}

/* A link keeps the text's color; its underline carries the accent. */
.md-typeset a:not(.headerlink):not(.md-button) {
  text-decoration-color: var(--ls-accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
}

.md-nav__link--active,
.md-path__link {
  color: var(--ls-accent);
}

.md-nav--primary .md-nav__item .md-nav__link--active {
  box-shadow: inset 2px 0 0 var(--ls-accent);
}

/* The primary button's text: white on the light scheme's orange, the navy
   black on the dark scheme's brighter one (white there is 2.3:1). */
[data-md-color-scheme="slate"] {
  --md-primary-bg-color: hsla(214deg, 40%, 6%, 1);
}

/* The introduction as a landing page: the logo, the question and the two ways
   in, centered over the Overview's verdict and its path, then cards. */

.md-typeset .ls-hero {
  max-width: 34rem;
  margin: 1rem auto 2rem;
  text-align: center;
}

.md-typeset .ls-hero__logo {
  width: 5rem;
}

.md-typeset .ls-hero h1 {
  margin: 0.6rem 0 0.2rem;
  font-size: 2.6em;
  font-weight: 700;
}

.md-typeset .ls-hero__lead {
  margin: 0 0 0.6rem;
  font-size: 1.35em;
  font-weight: 600;
}

.md-typeset .ls-hero .md-button {
  margin: 0.3rem 0.2rem 0;
}

.md-typeset figure.ls-shot {
  width: 100%;
  max-width: 53rem;
  margin: 0 auto 2.5rem;
}

.md-typeset .ls-shot img {
  width: 100%;
  border: 0.05rem solid var(--md-default-fg-color--lightest);
  border-radius: 0.6rem;
}

.md-typeset:has(.ls-hero) > h2 {
  text-align: center;
}

.md-typeset:has(.ls-hero) > p {
  max-width: 40rem;
  margin-inline: auto;
}

.md-typeset:has(.ls-hero) > p.ls-more {
  text-align: center;
}

.md-typeset:has(.ls-hero) .grid.cards .twemoji {
  color: var(--ls-accent);
}