/* ============================================================
   Strux docs theme — clean & modern.
   Brand personality comes from the pixel ART (logo, mascots,
   icons) and the stress-ramp colors — NOT from a pixel font.
   Headings stay crisp and readable.
   ============================================================ */

:root {
  /* product-derived stress ramp */
  --strux-safe: #3ddc84;
  --strux-caution: #ffff00;
  --strux-danger: #ffa500;
  --strux-critical: #ff0000;
  --strux-stone: #3a3f44;
  --strux-stone-dark: #1c1e21;

  /* Material theming hooks */
  --md-primary-fg-color: #23262a;
  --md-primary-fg-color--light: #3a3f44;
  --md-primary-fg-color--dark: #16181b;
  --md-accent-fg-color: #ffa500;
}

/* Readable, modern headings — weight + spacing carry the brand */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-family: var(--md-text-font-family), system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.md-typeset h1 {
  font-size: 2rem;
  line-height: 1.2;
}
.md-typeset h2 {
  font-size: 1.4rem;
  margin-top: 2.4rem;
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}
/* small amber accent tick before each H2 */
.md-typeset h2::before {
  content: "";
  display: inline-block;
  width: .5rem;
  height: 1.05rem;
  background: var(--strux-danger);
  border-radius: 1px;
  margin-right: .55rem;
  vertical-align: -2px;
}
.md-typeset h3 {
  font-size: 1.12rem;
}

/* System icon shown inline beside a page title */
.md-typeset h1 img.title-icon {
  height: 1.05em;
  width: auto;
  vertical-align: -0.12em;
  margin-left: .5rem;
  image-rendering: pixelated;
}

/* Clean solid header — one crisp amber hairline, no busy texture */
.md-header {
  background-color: var(--strux-stone-dark);
  box-shadow: 0 0 .2rem rgba(0, 0, 0, .25), 0 2px 0 var(--strux-danger);
}
.md-tabs {
  background-color: var(--strux-stone-dark);
}
.md-header__button.md-logo img,
.md-logo img {
  image-rendering: pixelated;
  height: 1.8rem;
  width: auto;
}

/* Minimal modern separator — a hairline that fades at the ends */
.md-typeset hr {
  border: none;
  height: 2px;
  margin: 2.4rem 0;
  background: linear-gradient(90deg, transparent, var(--strux-stone) 18%, var(--strux-stone) 82%, transparent);
  opacity: .5;
}

/* ===== "Mason says…" callout =====  !!! mason "Mason says…" */
.md-typeset .admonition.mason,
.md-typeset details.mason {
  border: none;
  border-left: .3rem solid var(--strux-danger);
  border-radius: .3rem;
  background: var(--md-code-bg-color);
}
.md-typeset .mason > .admonition-title,
.md-typeset .mason > summary {
  font-weight: 700;
  background: transparent;
  padding: .7rem .8rem .7rem 3.7rem;
  min-height: 3rem;
}
.md-typeset .mason > .admonition-title::before,
.md-typeset .mason > summary::before {
  content: "";
  position: absolute;
  top: 50%;
  left: .6rem;
  transform: translateY(-50%);
  width: 2.7rem;
  height: 2.7rem;
  background: url("../img/mascot/pointing.png") center / contain no-repeat;
  background-color: transparent;
  -webkit-mask-image: none;
  mask-image: none;
  image-rendering: pixelated;
}

/* Headings & callouts always start on their own line — never wrapped beside the mascot */
.md-typeset h2,
.md-typeset h3,
.md-typeset .admonition,
.md-typeset details {
  clear: both;
}

/* Per-page aside — a tidy floated column: the Mason with the page's system
   icon stacked neatly beneath it, centered (add `left` to flip the side). */
.md-typeset .page-aside {
  float: right;
  width: 150px;
  margin: .2rem 0 1rem 1.5rem;
  text-align: center;
}
.md-typeset .page-aside.left {
  float: left;
  margin: .2rem 1.5rem 1rem 0;
}
.md-typeset .page-aside img {
  display: block;
  margin: 0 auto;
  image-rendering: pixelated;
}
.md-typeset .page-aside img.page-mascot {
  width: 150px;
}
.md-typeset .page-aside img.sys-badge {
  width: 54px;
  margin-top: .55rem;
  opacity: .92;
}