/* Palette sourced from centurion-infra docs theme (dark/slate):
 *   Background: #232629   Accent: #8B652B   Text: #ADB1BC
 *   Surfaces:   #2a2e32 / #32363a   Code/Footer: #1a1d20 / #15181a
 */
:root {
  --ctn-background: #232629;
  --ctn-surface: #2a2e32;
  --ctn-surface-light: #32363a;
  --ctn-footer-bg: #1a1d20;
  --ctn-body: #ADB1BC;
  --ctn-heading: #8B652B;
  --ctn-subtitle: #8b909b;
  --ctn-code-bg: #0e2a35;
  --ctn-code-border: #32363a;
  --ctn-code-fg: #4689cc;
  --ctn-code-muted: #7f848e;
  --ctn-accent: #8B652B;
  --ctn-accent-soft: rgb(139 101 43 / 0.15);
  --ctn-accent-border: rgb(139 101 43 / 0.55);
  --ctn-link: #8B652B;

  --md-primary-fg-color: var(--ctn-background);
  --md-primary-fg-color--light: var(--ctn-background);
  --md-primary-fg-color--dark: var(--ctn-background);
  --md-primary-bg-color: var(--ctn-heading);
  --md-primary-bg-color--light: var(--ctn-body);
  --md-accent-fg-color: var(--ctn-accent);
  --md-accent-fg-color--transparent: var(--ctn-accent-soft);
  --md-accent-bg-color: var(--ctn-heading);
  --md-accent-bg-color--light: var(--ctn-body);
  --md-default-bg-color: var(--ctn-background);
  --md-default-fg-color: var(--ctn-body);
  --md-default-fg-color--light: var(--ctn-subtitle);
  --md-default-fg-color--lighter: var(--ctn-subtitle);
  --md-default-fg-color--lightest: rgb(95 95 95);
  --md-typeset-color: var(--ctn-body);
  --md-typeset-a-color: var(--ctn-link);
  --md-typeset-mark-color: var(--ctn-accent-soft);
  --md-code-bg-color: var(--ctn-code-bg);
  --md-code-fg-color: var(--ctn-code-fg);
  --md-footer-bg-color: var(--ctn-footer-bg);
  --md-footer-bg-color--dark: #15181a;
}

[data-md-color-scheme] {
  --md-accent-fg-color: var(--ctn-accent);
  --md-accent-fg-color--transparent: var(--ctn-accent-soft);
  --md-typeset-a-color: var(--ctn-link);
}

.md-typeset .admonition,
.md-typeset details {
  background: var(--ctn-accent-soft);
  border: none;
}

.md-typeset .admonition-title,
.md-typeset summary {
  background: var(--ctn-accent-soft);
  border-color: var(--ctn-accent-border);
}

.md-typeset .admonition-title::before,
.md-typeset summary::before {
  background-color: var(--ctn-accent);
}

.md-typeset .grid.cards > :is(ul, ol) > li,
.md-typeset .grid > .card {
  border-color: var(--ctn-accent-border);
}

.md-typeset .grid.cards > :is(ul, ol) > li:hover,
.md-typeset .grid > .card:hover {
  border-color: var(--ctn-accent);
  box-shadow: 0 0 0 1px var(--ctn-accent);
}

.md-typeset a,
.md-typeset a:link,
.md-typeset a:visited {
  color: var(--ctn-link);
}

.md-typeset a:hover,
.md-typeset a:focus {
  color: var(--ctn-link);
  text-decoration: underline;
}

html,
body,
.md-container,
.md-main,
.md-content,
.md-content__inner {
  background: var(--ctn-background);
  color: var(--ctn-body);
}

.md-header,
.md-tabs {
  background: var(--ctn-background);
  color: var(--ctn-heading);
}

.md-header[data-md-state="shadow"] {
  box-shadow: 0 1px 0 var(--ctn-surface-light);
}

.md-search__form {
  background: var(--ctn-surface);
  color: var(--ctn-body);
}

.md-search__input,
.md-search__input::placeholder,
.md-search__icon {
  color: var(--ctn-subtitle);
}

.md-typeset,
.md-typeset p,
.md-typeset li,
.md-typeset td,
.md-typeset th {
  color: var(--ctn-body);
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6,
.md-header__title,
.md-tabs__link,
.md-nav__title {
  color: var(--ctn-heading);
}

.md-typeset h1 + p,
.md-typeset .subtitle,
.md-typeset .lead,
.md-typeset figcaption,
.md-typeset caption,
.md-nav__link,
.md-nav__link:link,
.md-nav__link:visited,
.md-sidebar,
.md-footer,
.md-source,
.md-search-result__article {
  color: var(--ctn-subtitle);
}

.md-nav__link--active,
.md-nav__link--active:link,
.md-nav__link--active:visited,
.md-nav__link:hover,
.md-tabs__link--active,
.md-tabs__link:hover {
  color: var(--ctn-heading);
}

.md-typeset code {
  background-color: var(--ctn-code-bg);
  border-radius: 0.12rem;
  color: var(--ctn-code-fg);
  padding: 0.12em 0.35em;
}

.md-typeset pre,
.md-typeset div.highlight,
.md-typeset .highlighttable {
  background: var(--ctn-code-bg);
  border: 1px solid var(--ctn-code-border);
  border-radius: 0.1rem;
  box-shadow: none;
}

.md-typeset pre.highlight,
.md-typeset div.highlight {
  margin: 1rem 0 1.2rem;
}

.md-typeset div.highlight pre {
  margin: 0;
}

.md-typeset pre > code,
.md-typeset div.highlight pre code {
  background: transparent;
  color: var(--ctn-code-fg);
  display: block;
  font-size: 0.7rem;
  /* Tight line-height so Unicode box-drawing art (│ ┌ └ ├) connects
     vertically; at looser spacing the ASCII diagrams look broken. */
  line-height: 1.2;
  padding: 1rem 1.2rem;
  overflow-x: auto;
  white-space: pre;
  /* Prevent the browser/Material from breaking the box-drawing glyphs. */
  font-variant-ligatures: none;
  tab-size: 4;
}

.md-grid {
  max-width: 90rem;
}

/* Docs layout spacing — matched to centurion-website docs section.
   Content max-width 900px centered with 32px padding at all sizes (mirrors
   the website's mobile padding too). */
.md-content {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}

.md-content__inner {
  margin: 0;
  padding: 32px 32px;
}

.md-content__inner::before {
  display: none;
}

/* Fixed 268px sidebar/TOC rails only on desktop. Below this breakpoint the
   primary nav collapses into Material's hamburger drawer and the TOC folds
   inline — mirroring centurion-website's mobile docs behaviour. */
@media screen and (min-width: 76.25em) {
  .md-sidebar {
    width: 268px;
  }
}

/* Docs typography — matched to centurion-website docs section.
   Body Inter 16px / 1.75 / 400; headings 36/28/22/18px at weight 700/700/600/600
   with the website's heading spacing and rules. Colors keep the handbook theme. */
.md-typeset {
  font-size: 16px;
  line-height: 1.75;
  font-weight: 400;
  font-optical-sizing: auto;
}

.md-typeset p,
.md-typeset li {
  font-size: 16px;
  line-height: 1.75;
  font-weight: 400;
}

.md-typeset h1 {
  font-size: 36px;
  line-height: 44px;
  font-weight: 500;
  margin: 0 0 16px;
  letter-spacing: normal;
}

.md-typeset h2 {
  font-size: 28px;
  line-height: 36px;
  font-weight: 500;
  margin: 40px 0 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ctn-code-border);
}

.md-typeset h3 {
  font-size: 22px;
  line-height: 30px;
  font-weight: 400;
  margin: 32px 0 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ctn-code-border);
}

.md-typeset h4 {
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
  margin: 24px 0 0;
}

.md-header__title,
.md-header__topic,
.md-header__topic .md-ellipsis {
  font-weight: 400;
}

.md-typeset .highlight .md-clipboard {
  color: var(--ctn-code-muted);
  top: 0.6rem;
}

.md-typeset .highlight .md-clipboard:hover {
  color: var(--ctn-heading);
}

/* Previous / Next footer — mirrored from centurion-website's docs nav cards.
   Two bordered cards in a 2-column grid, constrained to the 900px content
   width instead of MkDocs' full-width bar. */
.md-footer__inner.md-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 1080px;
  margin: 48px auto 0;
  padding: 0 32px;
  box-sizing: border-box;
  overflow: visible;
}

/* Solo "Next" (e.g. landing pages) sits in the right column. */
.md-footer__link--next:first-child {
  grid-column: 2;
}

/* Stack to a single column on mobile, mirroring the website. */
@media screen and (max-width: 767px) {
  .md-footer__inner.md-grid {
    grid-template-columns: 1fr;
  }

  .md-footer__link--next:first-child {
    grid-column: 1;
  }
}

.md-footer__link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: auto;
  max-width: none;
  min-width: 0;
  flex: none;
  margin: 0 !important;
  padding: 16px 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background-color: var(--ctn-footer-bg);
  opacity: 1;
  transition: border-color 0.25s ease, transform 0.25s ease, background-color 0.25s ease;
}

.md-footer__link:hover {
  border-color: var(--ctn-accent-border);
  background-color: var(--ctn-surface);
  transform: translateY(-2px);
}

.md-footer__link--next {
  align-items: flex-end;
  text-align: right;
}

/* Drop the large arrow buttons; arrows go inline in the meta label. */
.md-footer__button {
  display: none;
}

.md-footer__title {
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: 100%;
  white-space: normal;
}

/* Material hides the "Previous" title below ~45em. Our cards show the label
   inline and hide the default arrow button, so without this the prev card
   renders completely empty on mobile. Keep it (and its parts) visible at
   every width; !important defeats Material's media-query rule regardless of
   source order. */
.md-footer__link--prev .md-footer__title,
.md-footer__link--prev .md-footer__direction,
.md-footer__link--prev .md-ellipsis {
  display: block !important;
}

.md-footer__direction {
  position: static;
  opacity: 1;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  color: var(--ctn-code-muted);
}

.md-footer__link--prev .md-footer__direction::before {
  content: "← ";
}

.md-footer__link--next .md-footer__direction::after {
  content: " →";
}

.md-footer__title > .md-ellipsis {
  margin-top: 4px;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  color: var(--ctn-body);
}