/*
 * EMPAIA theme for the docsify 5 core theme (docsify/themes/core.min.css).
 * Shared by all sections of the documentation site; only CSS custom properties
 * and a few small additions, see https://docsify.js.org/#/themes
 */
:root {
  --empaia-red : rgb(200, 65, 65); /* #c84141 */
  --empaia-blue: rgb(45, 45, 80);

  --theme-color    : var(--empaia-red);
  --link-color      : var(--empaia-blue);
  --link-color-hover: var(--empaia-red);

  --content-max-width: 75em;
  --sidebar-width    : 22rem;

  --sidebar-link-color       : var(--empaia-blue);
  --sidebar-link-color-active: var(--empaia-red);

  /* Plain white cover (the landing page) instead of docsify's random gradient. */
  --cover-bg        : var(--color-bg);
  --cover-bg-overlay: none;
  --button-bg       : var(--empaia-blue);

  /* docsify-tabs */
  --docsifytabs-border-color       : var(--color-mono-2);
  --docsifytabs-tab-highlight-color: var(--empaia-red);
}

/* Cover page buttons: EMPAIA blue, red on hover. */
.cover-main a.button.primary,
.cover-main a.button.secondary {
  background: var(--empaia-blue);
  border-color: var(--empaia-blue);
  color: #fff;
}

.cover-main a.button.primary:hover,
.cover-main a.button.secondary:hover {
  background: var(--empaia-red);
  border-color: var(--empaia-red);
  outline-color: transparent;
}

.cover-main img {
  max-width: min(420px, 80vw);
}

.cover-main p:last-of-type {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5em;
}

.cover-main p:last-of-type a.button + a.button {
  margin-left: 0;
}

/* Sidebar logo */
.sidebar a.app-name-link img {
  max-width: 200px;
  margin-inline: auto;
}

/* Front matter table rendered by the front-matter hook in docsify-config.js (EMPs). */
.markdown-section table.front-matter {
  display: table;
  width: auto;
  font-size: var(--font-size-s);
}

.markdown-section table.front-matter th {
  text-align: left;
  white-space: nowrap;
}