/* ==========================================================================
   Synth Docs — extra.css
   Фирменный стиль: оранжевый акцент #c33b04, моноширинный базовый шрифт,
   тёплая тёмная тема. Переменные Material переопределяются точечно.
   ========================================================================== */

/* --- Палитра Synth (оранжевый акцент из лэндинга) --- */
:root,
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #c33b04;
  --md-primary-fg-color--light: #d8440a;
  --md-primary-fg-color--dark: #7a2a10;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.72);
  --md-accent-fg-color: #c33b04;
  --md-accent-fg-color--transparent: rgba(195, 59, 4, 0.1);
  --md-accent-bg-color: #ffffff;
  --md-typeset-a-color: #a83203;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #c33b04;
  --md-primary-fg-color--light: #d8440a;
  --md-primary-fg-color--dark: #7a2a10;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.72);
  --md-accent-fg-color: #e05a1e;
  --md-accent-fg-color--transparent: rgba(224, 90, 30, 0.12);
  --md-typeset-a-color: #e05a1e;

  /* Тёплый тёмный фон в духе лэндинга (#0a0a0a / #120c0a) */
  --md-default-bg-color: #0e0b0a;
  --md-default-bg-color--light: #15100d;
  --md-default-bg-color--lighter: #1c1512;
  --md-code-bg-color: #171210;
  --md-footer-bg-color: #0b0807;
  --md-footer-bg-color--dark: #080605;
}

/* --- Моноширинный базовый шрифт --- */
:root {
  --md-text-font-family: "JetBrains Mono", "Fira Code", "SFMono-Regular",
    Consolas, Menlo, "Liberation Mono", monospace;
  --md-code-font-family: "JetBrains Mono", "Fira Code", "SFMono-Regular",
    Consolas, Menlo, "Liberation Mono", monospace;
}

body,
input,
button,
.md-typeset {
  font-family: var(--md-text-font-family);
}

/* --- Выделение и скроллбар --- */
::selection {
  background: var(--md-primary-fg-color);
  color: #ffffff;
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(195, 59, 4, 0.5) transparent;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  background: rgba(195, 59, 4, 0.45);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(195, 59, 4, 0.7);
}

/* --- Шапка: бренд-бейдж --- */
.synth-header__badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--md-primary-fg-color);
  border-radius: 0.25rem;
  color: var(--md-primary-fg-color);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}

.md-header .synth-logo {
  border-radius: 0.15rem;
}

/* --- Навигация: акцент на активном пункте --- */
.md-nav__link--active,
.md-nav__item--active > .md-nav__link {
  color: var(--md-primary-fg-color);
}

/* Секции левого меню — моноширинный капс-заголовок, как в терминале */
.md-nav--primary .md-nav__title {
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* --- Кастомный футер --- */
.synth-footer {
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 0;
  font-size: 0.68rem;
  opacity: 0.85;
}

.synth-footer a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(195, 59, 4, 0.55);
}

.synth-footer a:hover {
  color: var(--md-accent-fg-color);
}

/* --- Карточки на обзорной странице --- */
.md-typeset .grid.cards > ul > li {
  border-color: rgba(195, 59, 4, 0.35);
}

.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--md-primary-fg-color);
  box-shadow: 0 0 0 0.05rem var(--md-primary-fg-color);
}

/* --- Подсветка кода: оранжевый акцент для строк с фокусом --- */
.md-typeset .highlight .hll {
  background-color: rgba(195, 59, 4, 0.18);
}

/* --- Кнопка «Редактировать страницу» — фирменный акцент --- */
.md-content__button .twemoji svg,
.md-content__button svg {
  fill: currentColor;
}

.md-content__button:hover {
  color: var(--md-primary-fg-color);
}