:root {
  /**********************************************************
   * 1) Icon and background color variables
   **********************************************************/
  --icon-important: url('../img/Important.svg');
  --icon-action: url('../img/Action.svg');
  --icon-caution: url('../img/Caution.svg');
  --icon-example: url('../img/Example.svg');
  --icon-note: url('../img/Note.svg');
  --icon-reference: url('../img/Reference.svg');
  --icon-warning: url('../img/Warning.svg');
  --icon-tip: url('../img/Note.svg');
  --border-note: #08400e;
  --bg-note: #d1e5cf;
  --border-warning: #710b01;
  --bg-warning: #fad7d6;
  --border-caution: #b85300;
  --bg-caution: #f8dabb;
  --border-important: #053570;
  --bg-important: #c9e3f9;
  --border-step: #ad8905;
  --bg-step: #f7eb9e;

  counter-reset: step;
}

/**********************************************************
 * 2) General admonition block layout
 **********************************************************/

div.admonitionblock {
  position: relative;
  border-radius: 10px;
  margin-top: 1em;
  margin-bottom: 1em;
}

div.admonitionblock td.icon {
  display: none;
}

div.admonitionblock td.content {
  padding: 1rem;
  border-left: 0;
  border-radius: 10px;
}

div.admonitionblock .title {
  position: absolute;
  top: -28px;
  left: 3em;
  color: #fff;
  font-weight: bold;
  z-index: 2;
}

div.admonitionblock .title::after {
  content: '';
  position: absolute;
  top: 0;
  left: -2em;
  padding: 5px 10px;
  box-sizing: border-box;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  display: block;
  height: 25px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
  z-index: 1;
}

/**********************************************************
 * 3) Admonition block types and icons
 **********************************************************/

div.admonitionblock.note,
div.admonitionblock.tip {
  border-top: 30px solid var(--border-note);
  background-color: var(--bg-note);
}

div.admonitionblock.note td.content,
div.admonitionblock.tip td.content {
  background-color: var(--bg-note);
}

div.admonitionblock.note .title::after {
  background-image: var(--icon-note);
}

div.admonitionblock.tip .title::after {
  background-image: var(--icon-tip);
}

div.admonitionblock.warning {
  border-top: 30px solid var(--border-warning);
  background-color: var(--bg-warning);
}

div.admonitionblock.warning td.content {
  background-color: var(--bg-warning);
}

div.admonitionblock.warning .title::after {
  background-image: var(--icon-warning);
}

div.admonitionblock.caution {
  border-top: 30px solid var(--border-caution);
  background-color: var(--bg-caution);
}

div.admonitionblock.caution td.content {
  background-color: var(--bg-caution);
}

div.admonitionblock.caution .title::after {
  background-image: var(--icon-caution);
}

div.admonitionblock.important {
  border-top: 30px solid var(--border-important);
  background-color: var(--bg-important);
}

div.admonitionblock.important td.content {
  background-color: var(--bg-important);
}

div.admonitionblock.important .title::after {
  background-image: var(--icon-important);
}

/**********************************************************
 * 4) Admonition fallbacks (no .title block)
 **********************************************************/

div.admonitionblock:not(:has(.title))::before {
  position: absolute;
  top: -28px;
  left: 3em;
  color: #fff;
  font-weight: bold;
  z-index: 2;
}

div.admonitionblock:not(:has(.title))::after {
  content: '';
  position: absolute;
  left: 1em;
  top: -28px;
  padding: 5px 10px;
  height: 25px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
  z-index: 1;
}

div.admonitionblock.note:not(:has(.title))::before {
  content: 'NOTE';
}

div.admonitionblock.note:not(:has(.title))::after {
  background-image: var(--icon-note);
}

div.admonitionblock.tip:not(:has(.title))::before {
  content: 'TIP';
}

div.admonitionblock.tip:not(:has(.title))::after {
  background-image: var(--icon-tip);
}

div.admonitionblock.warning:not(:has(.title))::before {
  content: 'WARNING';
}

div.admonitionblock.warning:not(:has(.title))::after {
  background-image: var(--icon-warning);
}

div.admonitionblock.caution:not(:has(.title))::before {
  content: 'CAUTION';
}

div.admonitionblock.caution:not(:has(.title))::after {
  background-image: var(--icon-caution);
}

div.admonitionblock.important:not(:has(.title))::before {
  content: 'IMPORTANT';
}

div.admonitionblock.important:not(:has(.title))::after {
  background-image: var(--icon-important);
}

/**********************************************************
 * 5) STEP blocks
 **********************************************************/

div.openblock.step {
  position: relative;
  border-top: 30px solid var(--border-step);
  background: var(--bg-step);
  border-radius: 10px;
  margin-bottom: 1em;
  margin-top: 1em;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  counter-increment: step;
  font-size: calc(16 / var(--rem-base) * 1rem);
}

div.openblock.step::before {
  content: 'STEP ' counter(step);
  position: absolute;
  top: -28px;
  left: 3em;
  color: #fff;
  font-weight: bold;
  z-index: 2;
}

div.openblock.step::after {
  content: '';
  position: absolute;
  left: 1em;
  top: -28px;
  padding: 5px 10px;
  height: 25px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
  z-index: 1;
  background-image: var(--icon-important);
}

div.openblock.step > div.content > div.paragraph:first-child,
div.openblock.step > div.content > div.paragraph:first-child > p {
  margin-top: 0;
}

/**********************************************************
 * 6) Inline code and logo tweaks
 **********************************************************/

li.nav-item code,
.nav-list code,
.toc-menu code {
  color: #c00;
  background-color: transparent;
  font-weight: bold;
  padding: 0;
  border-radius: 0;
}

p code,
td:not(.listingblock td) code,
li:not(.nav-item) code,
div.paragraph code {
  color: #800020;
  border-radius: 3px;
  padding: 0 4px;
}

.navbar-brand .navbar-item.logo {
  align-self: center;
  padding: 0;
  margin-left: 1rem;
  height: calc(1 * var(--navbar-height));
  width: calc(1 * var(--navbar-height));
}

/**********************************************************
 * 7) Variable & Emphasise styling
 **********************************************************/

.variable {
  font-variant: small-caps !important;
  font-size: 1em !important;
  color: inherit !important;
}

.emphasise {
  font-variant: small-caps !important;
  font-style: italic !important;
  font-size: 1.1em !important;
  color: #a10202 !important;
}

.emphasise .variable {
  font-size: 1em !important;
  color: #a10202 !important;
  font-style: italic !important;
}

a.xref .variable,
a[href].variable,
a.variable {
  font-variant: normal !important;
  font-style: normal !important;
  font-size: inherit !important;
  color: inherit !important;
  text-decoration: inherit !important;
  cursor: inherit !important;
}