/* ─────────────────────────────────────────────────────────────────────────────
   Docs colours aligned with the plugin default theme (Core / Standard pack).
   Background  #14161c  |  Surface    #1e212a  |  Accent  #5aa0dc
───────────────────────────────────────────────────────────────────────────── */

/* Required for primary: custom — must be defined at root level */
:root {
  --md-primary-fg-color:        #5aa0dc;
  --md-primary-fg-color--light: #73b4f0;
  --md-primary-bg-color:        #14161c;
  --md-accent-fg-color:         #73b4f0;
}

[data-md-color-scheme="slate"] {
  --md-default-bg-color:             #14161c;
  --md-default-fg-color:             #e4e6ee;
  --md-default-fg-color--light:      rgba(228, 230, 238, 0.70);
  --md-default-fg-color--lighter:    rgba(228, 230, 238, 0.45);
  --md-default-fg-color--lightest:   rgba(228, 230, 238, 0.18);

  /* Primary / accent — plugin's #5aa0dc */
  --md-primary-fg-color:             #5aa0dc;
  --md-primary-fg-color--light:      #73b4f0;
  --md-primary-bg-color:             #14161c;
  --md-primary-bg-color--light:      #1e212a;
  --md-accent-fg-color:              #73b4f0;
  --md-accent-fg-color--transparent: rgba(90, 160, 220, 0.15);
  --md-typeset-a-color:              #5aa0dc;

  /* Code blocks */
  --md-code-bg-color:                #1e212a;
  --md-code-fg-color:                #c9d1e0;
  --md-code-hl-color:                rgba(90, 160, 220, 0.15);

  /* Header / nav */
  --md-header-bg-color:              #14161c;
  --md-nav-primary-bg-color:         #14161c;

  /* Top tabs: active tab text light so it's visible (theme default uses accent = dark blue) */
  --md-tabs-link-active-color:       #e4e6ee;
  --md-tabs-link-active-background:  transparent;
  --md-tabs-link-active-border:      #5aa0dc;

  /* Footer */
  --md-footer-bg-color:              #0f1014;
  --md-footer-bg-color--dark:        #0c0d11;
  --md-footer-fg-color:              rgba(228, 230, 238, 0.60);
  --md-footer-fg-color--light:       rgba(228, 230, 238, 0.45);
  --md-footer-fg-color--lighter:     rgba(228, 230, 238, 0.28);

  /* Admonitions recoloured to match */
  --md-admonition-bg-color:          #1e212a;
}

/* ── Global border-radius — matches plugin CornerRadius: 6px ──────────────── */
.md-content,
.md-typeset code,
.md-typeset pre > code,
.md-typeset .admonition,
.md-typeset details {
  border-radius: 6px;
}

.md-typeset .admonition,
.md-typeset details {
  border-radius: 6px;
  border-left-width: 3px;
}

.md-nav__link,
.md-search__form {
  border-radius: 6px;
}

/* ── Sidebar nav ─────────────────────────────────────────────────────────── */
.md-nav__item--active > .md-nav__link {
  color: #5aa0dc;
  font-weight: 600;
}

.md-nav__link:hover {
  color: #73b4f0;
}

/* ── Tables ──────────────────────────────────────────────────────────────── */
.md-typeset table:not([class]) {
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #343846;
}

.md-typeset table:not([class]) th {
  background-color: #232632;
  color: #e4e6ee;
}

.md-typeset table:not([class]) tr:nth-child(even) {
  background-color: #1a1d26;
}

/* ── Code block header ───────────────────────────────────────────────────── */
.md-typeset pre {
  border-radius: 6px;
  border: 1px solid #343846;
}

/* ── Search ──────────────────────────────────────────────────────────────── */
.md-search__form {
  background-color: #1e212a;
  border: 1px solid #343846;
}

/* Search input: light text so it's visible on dark background */
.md-search__input {
  color: #e4e6ee !important;
}

.md-search__input::placeholder {
  color: rgba(228, 230, 238, 0.55);
}

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.md-typeset .tabbed-labels > label {
  color: #8a8e9e;
}

.md-typeset .tabbed-labels > label:hover {
  color: #5aa0dc;
}

.md-typeset .tabbed-labels > label.tabbed-block {
  color: #5aa0dc;
  border-bottom-color: #5aa0dc;
}

/* ── Homepage hero cards ─────────────────────────────────────────────────── */
.tx-hero {
  margin: 2rem 0 3rem;
  text-align: center;
}

.tx-hero h1 {
  font-size: 2.2rem;
  font-weight: 700;
  color: #e4e6ee;
  margin-bottom: 0.5rem;
}

.tx-hero p {
  color: #8a8e9e;
  font-size: 1.1rem;
  margin-bottom: 2rem;
}

.tx-hero__cta {
  display: inline-block;
  background: #5aa0dc;
  color: #14161c !important;
  font-weight: 700;
  padding: 0.65rem 1.5rem;
  border-radius: 6px;
  text-decoration: none !important;
  margin: 0.25rem;
  transition: background 0.15s;
}

.tx-hero__cta:hover {
  background: #73b4f0;
}

.tx-hero__cta--outline {
  background: transparent;
  color: #5aa0dc !important;
  border: 1.5px solid #5aa0dc;
}

.tx-hero__cta--outline:hover {
  background: rgba(90, 160, 220, 0.10);
}

/* Discord — brand-aligned hero CTA (opens off-site) */
.tx-hero__cta--discord {
  background: #5865f2;
  color: #fff !important;
  border: 1.5px solid transparent;
}

.tx-hero__cta--discord:hover {
  background: #7289da;
  color: #fff !important;
}

/* ── API quick-ref card ──────────────────────────────────────────────────── */
.api-card {
  background: #1e212a;
  border: 1px solid #343846;
  border-left: 3px solid #5aa0dc;
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin: 1rem 0;
}

.api-card code {
  background: #14161c;
  color: #5aa0dc;
  border-radius: 4px;
  padding: 0.1em 0.4em;
  font-size: 0.9em;
}

/* ── Minimal layout — cleaner spacing, no heavy borders ─────────────────── */

/* Slimmer left nav — less visual weight */
.md-nav__title {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: #343846;
  padding: 0.4rem 0.6rem;
}

.md-nav__item {
  padding: 0;
}

.md-nav__link {
  padding: 0.3rem 0.7rem;
  font-size: 0.78rem;
  color: #8a8e9e;
  border-radius: 5px;
  transition: background 0.12s, color 0.12s;
}

.md-nav__link:hover,
.md-nav__link--active {
  background: #1e212a;
  color: #e4e6ee;
}

.md-nav__link--active {
  color: #5aa0dc !important;
}

/* Hide the right-side TOC title "Table of contents" label */
.md-nav--secondary .md-nav__title {
  display: none;
}

/* Tighten up the content area max-width */
.md-grid {
  max-width: 1100px;
}

/* Header — slightly taller with a bottom border */
.md-header {
  background-color: #14161c;
  border-bottom: 1px solid #343846;
  box-shadow: none;
}

/*
  Material sets header bar text to `color: var(--md-primary-bg-color)`.
  Our slate theme uses --md-primary-bg-color: #14161c (same as the bar), so the site
  name and repo label were effectively invisible. Force readable light greys.
*/
[data-md-color-scheme="slate"] .md-header {
  color: #e4e6ee !important;
}

[data-md-color-scheme="slate"] .md-header__title,
[data-md-color-scheme="slate"] .md-header__title .md-ellipsis,
[data-md-color-scheme="slate"] .md-header__topic,
[data-md-color-scheme="slate"] .md-header__topic .md-ellipsis {
  color: #e4e6ee !important;
}

[data-md-color-scheme="slate"] .md-header__button {
  color: #e4e6ee !important;
}

[data-md-color-scheme="slate"] .md-header__button:hover,
[data-md-color-scheme="slate"] .md-header__button:focus {
  color: #ffffff !important;
  opacity: 0.95;
}

[data-md-color-scheme="slate"] .md-header__button.md-logo svg,
[data-md-color-scheme="slate"] .md-header__button.md-icon svg {
  fill: currentColor !important;
}

/* PNG / raster logo — app-icon style mark, tuned for the square logo.png asset */
.md-header__button.md-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  overflow: hidden;
  border-radius: 0.55rem;
}

.xocoatl-header-logo {
  display: block;
  width: 2.25rem;
  height: 2.25rem;
  max-width: none;
  object-fit: cover;
  transform: scale(1.18);
  transform-origin: center;
}

[data-md-color-scheme="slate"] .md-source {
  color: #e4e6ee !important;
}

[data-md-color-scheme="slate"] .md-source:hover {
  color: #ffffff !important;
  opacity: 0.95;
}

[data-md-color-scheme="slate"] .md-source__repository {
  color: #e4e6ee !important;
}

[data-md-color-scheme="slate"] .md-source .md-icon svg {
  fill: currentColor !important;
}

/* Ko-fi: styles in stylesheets/kofi-link.css (loaded after this file). */

/* Tabs bar — override Material's dark primary-bg color used for tab text */
.md-tabs {
  background-color: #1e212a !important;
  border-bottom: 1px solid #343846;
}

/* Tab links: explicit light colors, high specificity to beat Material */
[data-md-color-scheme="slate"] .md-tabs__link {
  color: rgba(228, 230, 238, 0.65) !important;
  opacity: 1 !important;
  font-size: 0.8rem;
}

[data-md-color-scheme="slate"] .md-tabs__link:hover,
[data-md-color-scheme="slate"] .md-tabs__link:focus {
  color: #e4e6ee !important;
  opacity: 1 !important;
}

[data-md-color-scheme="slate"] .md-tabs__link--active {
  color: #e4e6ee !important;
  opacity: 1 !important;
  font-weight: 600;
}

.md-tabs__indicator {
  background-color: #5aa0dc;
}

/* Content — breathing room */
.md-content__inner {
  padding-top: 1.5rem;
}

/* Horizontal rule */
.md-typeset hr {
  border-color: #343846;
  opacity: 0.5;
}

/* Admonition titles more subtle */
.md-typeset .admonition-title,
.md-typeset summary {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* Footer minimal */
.md-footer {
  background-color: #0f1014;
  border-top: 1px solid #1e212a;
}

.md-footer-meta {
  background-color: #0f1014;
}

/* ── Changelog section — visually separated “release card” per page ─────────── */
.md-typeset .changelog-release {
  background: linear-gradient(
    165deg,
    rgba(90, 160, 220, 0.07) 0%,
    transparent 42%
  );
  border: 1px solid #343846;
  border-radius: 8px;
  padding: 1.25rem 1.35rem 1.5rem;
  margin: -0.25rem 0 2rem;
}

.md-typeset .changelog-release hr {
  margin: 1.25rem 0;
}

.md-typeset .changelog-release > h1:first-child {
  margin-top: 0;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid #343846;
}