/* The OMG Software theme (ADR-0223): the colours, type and shapes of the
   organisation's site, laid over Material for MkDocs. Both schemes keep the
   dark OMG header; the dark scheme is the one a first visit opens in. */

:root {
  --omg-orange: #ff8954;
  --omg-orange-hover: #ffa170;
  --omg-ink: #151616;
  --omg-paper: #efeee8;
  --omg-mono: Consolas, "Courier New", monospace;
  --omg-sans: Arial, Helvetica, sans-serif;
  --md-text-font: "Arial";
  --md-code-font: "Consolas";
}

[data-md-color-scheme="slate"] {
  --omg-panel: #1b1c1b;
  --omg-line: #343632;
  --md-hue: 80;
  --md-default-bg-color: #151616;
  --md-default-bg-color--light: #151616b3;
  --md-default-bg-color--lighter: #1516164d;
  --md-default-bg-color--lightest: #1516161f;
  --md-default-fg-color: #efeee8;
  --md-default-fg-color--light: #a6a8a0;
  --md-default-fg-color--lighter: #777c73;
  --md-default-fg-color--lightest: #343632;
  --md-primary-fg-color: #151616;
  --md-primary-fg-color--light: #1b1c1b;
  --md-primary-fg-color--dark: #101111;
  --md-primary-bg-color: #efeee8;
  --md-primary-bg-color--light: #a6a8a0;
  --md-accent-fg-color: #ff8954;
  --md-accent-fg-color--transparent: #ff89541a;
  --md-accent-bg-color: #191a17;
  --md-typeset-a-color: #ff8954;
  --md-typeset-color: #efeee8;
  --md-typeset-table-color: #343632;
  --md-typeset-table-color--light: #1b1c1b;
  --md-code-bg-color: #1b1c1b;
  --md-code-fg-color: #e0e0d6;
  --md-footer-bg-color: #151616;
  --md-footer-bg-color--dark: #101111;
  --md-footer-fg-color: #efeee8;
  --md-footer-fg-color--light: #a6a8a0;
  --md-footer-fg-color--lighter: #777c73;
}

[data-md-color-scheme="default"] {
  --omg-panel: #e9e8e1;
  --omg-line: #d6d5cc;
  --md-default-bg-color: #f4f3ee;
  --md-default-fg-color: #151616;
  --md-default-fg-color--light: #55574f;
  --md-default-fg-color--lighter: #8a8c83;
  --md-default-fg-color--lightest: #d6d5cc;
  --md-primary-fg-color: #151616;
  --md-primary-fg-color--light: #1b1c1b;
  --md-primary-fg-color--dark: #101111;
  --md-primary-bg-color: #efeee8;
  --md-primary-bg-color--light: #a6a8a0;
  --md-accent-fg-color: #8f3a15;
  --md-accent-fg-color--transparent: #8f3a151a;
  --md-accent-bg-color: #f4f3ee;
  --md-typeset-a-color: #a8461c;
  --md-typeset-color: #151616;
  --md-typeset-table-color: #d6d5cc;
  --md-code-bg-color: #e9e8e1;
  --md-code-fg-color: #2a2b28;
  --md-footer-bg-color: #151616;
  --md-footer-bg-color--dark: #101111;
  --md-footer-fg-color: #efeee8;
  --md-footer-fg-color--light: #a6a8a0;
  --md-footer-fg-color--lighter: #777c73;
}

::selection {
  background: var(--omg-orange);
  color: var(--omg-ink);
}

:focus-visible {
  outline: 2px solid var(--omg-orange);
  outline-offset: 3px;
}

/* Header and tabs: the OMG site's dark bar with a hairline rule. */

.md-header,
.md-tabs {
  background-color: var(--omg-ink);
  color: var(--omg-paper);
}

.md-header {
  box-shadow: none;
  border-bottom: 1px solid #343632;
}

.md-tabs {
  border-bottom: 1px solid #343632;
}

.md-header__topic:first-child {
  font-family: var(--omg-mono);
  font-weight: 700;
  letter-spacing: -.04em;
}

.md-tabs__link {
  font-size: .7rem;
  opacity: .75;
}

.md-tabs__link:hover,
.md-tabs__item--active .md-tabs__link {
  color: var(--omg-orange);
  opacity: 1;
}

.md-footer {
  border-top: 1px solid #343632;
}

/* Type: tight, light headings as on the OMG site. */

.md-typeset h1 {
  font-weight: 500;
  letter-spacing: -.03em;
  color: var(--md-default-fg-color);
}

.md-typeset h2 {
  font-weight: 400;
  letter-spacing: -.02em;
}

.md-typeset h3 {
  font-weight: 400;
  letter-spacing: -.01em;
}

.md-typeset hr {
  border-bottom-color: var(--omg-line);
}

/* Buttons: square-cornered, orange primary with dark text. */

.md-typeset .md-button {
  border-radius: 3px;
  border-color: var(--omg-line);
  color: var(--md-default-fg-color);
  font-size: .7rem;
  font-weight: 600;
  transition: background-color .15s, border-color .15s, color .15s, transform .15s;
}

.md-typeset .md-button:focus,
.md-typeset .md-button:hover {
  background-color: transparent;
  border-color: var(--md-accent-fg-color);
  color: var(--md-accent-fg-color);
  transform: translateY(-2px);
}

.md-typeset .md-button--primary {
  background-color: var(--omg-orange);
  border-color: var(--omg-orange);
  color: #191a17;
}

.md-typeset .md-button--primary:focus,
.md-typeset .md-button--primary:hover {
  background-color: var(--omg-orange-hover);
  border-color: var(--omg-orange-hover);
  color: #191a17;
}

/* Home page hero: the OMG eyebrow label above the strapline. */

.md-typeset .hero {
  padding: 2.5rem 0 1.5rem;
}

.md-typeset .hero h1 {
  margin-bottom: .25rem;
}

.md-typeset .hero h2 {
  margin-top: 0;
  max-width: 44rem;
  font-size: 1.9em;
  line-height: 1.15;
}

.md-typeset .omg-eyebrow {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 1.2rem;
  font-family: var(--omg-mono);
  font-size: .6rem;
  letter-spacing: .14em;
  color: var(--md-accent-fg-color);
}

.md-typeset .omg-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--omg-orange);
}

/* Cards: the OMG project panels. */

.md-typeset .grid.cards > ul > li,
.md-typeset .grid.cards > li {
  border: 1px solid var(--omg-line);
  border-radius: 4px;
  background: var(--omg-panel);
}

.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid.cards > li:hover {
  border-color: var(--md-accent-fg-color);
  box-shadow: none;
}

.md-typeset .grid.cards .twemoji {
  color: var(--omg-orange);
}

@media (prefers-reduced-motion: reduce) {
  .md-typeset .md-button {
    transition: none;
  }

  .md-typeset .md-button:hover,
  .md-typeset .md-button:focus {
    transform: none;
  }
}