/* Maximum VPN — гайд. Стиль «натянут» со страницы подписки:
   GitHub-dark палитра + cyan-акцент + шрифт Montserrat (как в subscription-page). */

/* ── Montserrat, self-hosted (офлайн, без Google Fonts) ── */
@font-face {
  font-family: "Montserrat"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/montserrat-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  --mx-cyan: #3bc9db;         /* яркий cyan */
  --mx-cyan-link: #66d9e8;    /* ссылки/интерактив (как кнопки на странице подписки) */
  --mx-cyan-strong: #15aabf;
  --mx-cyan-dark: #0c8599;    /* для контраста на белом (светлая тема) */
  --mx-grey: #8b949e;         /* приглушённый текст (как на странице) */
  --md-text-font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Светлая тема — cyan-акцент, тёмная шапка (на ней читается цветной collab-лого). */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #21262d;
  --md-accent-fg-color: var(--mx-cyan-dark);
  --md-typeset-a-color: var(--mx-cyan-dark);
}

/* Тёмная тема — ТОЧНО как страница подписки (GitHub-dark #161b22 + cyan). */
[data-md-color-scheme="slate"] {
  --md-hue: 213;
  --md-default-bg-color: #161b22;
  --md-default-bg-color--light:    rgba(201, 209, 217, .07);
  --md-default-bg-color--lighter:  rgba(201, 209, 217, .03);
  --md-default-bg-color--lightest: rgba(201, 209, 217, .02);
  --md-default-fg-color:         #c9d1d9;
  --md-default-fg-color--light:   #adbac7;
  --md-default-fg-color--lighter: #8b949e;
  --md-default-fg-color--lightest:#484f58;
  --md-primary-fg-color: #161b22;     /* шапка = фон, бесшовно (как mini-app) */
  --md-primary-bg-color: #c9d1d9;
  --md-primary-bg-color--light: #8b949e;
  --md-accent-fg-color:  var(--mx-cyan-link);
  --md-typeset-a-color:  var(--mx-cyan-link);
  --md-code-bg-color: #21262d;
  --md-code-fg-color: #c9d1d9;
  --md-footer-bg-color: #0d1117;
  --md-footer-bg-color--dark: #0d1117;
  --md-footer-fg-color: #c9d1d9;
  --md-footer-fg-color--light: #8b949e;
  --md-footer-fg-color--lighter: #6e7681;
  --md-typeset-mark-color: rgba(21, 170, 191, .35);
}

/* Шапка бесшовная в тёмной → тонкий разделитель снизу. */
.md-header { border-bottom: 1px solid rgba(201, 209, 217, .08); }

/* Логотип в шапке. */
.md-header__button.md-logo img { height: 1.6rem; width: auto; }

/* Заголовки — жирные (Montserrat). */
.md-typeset h1, .md-typeset h2, .md-typeset h3 { font-weight: 700; }
.md-typeset h4, .md-typeset h5, .md-typeset h6 { font-weight: 600; }

/* Названия разделов в боковом меню — жирные. */
.md-nav--primary .md-nav__item--nested > .md-nav__link,
.md-nav--primary .md-nav__item--nested > .md-nav__container > .md-nav__link {
  font-weight: 700;
}

/* Хиро-лого на главной. */
.mx-hero { text-align: center; margin: .2rem 0 1.6rem; }
.mx-hero img { height: 72px; width: auto; max-width: 100%; }

/* Скругления как на странице подписки: карточки 16px, кнопки 8px. */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid.cards > .card { border-radius: 16px; }
.md-typeset .md-button { border-radius: 8px; }

/* Вторичная кнопка — cyan-контур (в обеих темах; иначе в тёмной тёмный текст на тёмном). */
.md-typeset .md-button:not(.md-button--primary) {
  color: var(--md-accent-fg-color);
}

/* .mx-figure (скриншоты). */
.mx-figure { margin: 1.4em 0; }
.mx-figure svg, .mx-figure img { display: block; width: 100%; height: auto; border-radius: 8px; }
[data-md-color-scheme="default"] .mx-figure img { background: #fff; border: 1px solid var(--md-default-fg-color--lightest); }
[data-md-color-scheme="slate"] .mx-figure img { background: transparent; border: 1px solid #30363d; }
.mx-figure figcaption { color: var(--mx-grey); font-size: .78rem; text-align: center; margin-top: .5em; }

/* Защита: twemoji/эмодзи в меню и оглавлении не раздувать (Material сайзит .twemoji
   только в .md-typeset; без этого keycap/флаги в TOC рендерятся огромными). */
.md-nav img.twemoji { height: 1.05em; width: auto; vertical-align: -.125em; }

/* Все шрифты на шаг меньше — уменьшаем базовый размер html (тело 16px → ~15px,
   заголовки/меню/оглавление масштабируются пропорционально). */
html { font-size: 117%; }

/* Праймари-кнопка: у Material её фон = --md-primary-fg-color, а он у нас #161b22 (цвет шапки)
   → на тёмном фоне кнопка невидима. Красим в сплошной cyan (чётко читаемая, в тон бренду). */
.md-typeset .md-button--primary {
  background-color: var(--mx-cyan-strong);
  border-color: var(--mx-cyan-strong);
  color: #0d1117;
}
.md-typeset .md-button--primary:hover,
.md-typeset .md-button--primary:focus {
  background-color: var(--mx-cyan);
  border-color: var(--mx-cyan);
  color: #0d1117;
}

/* Вторичная кнопка при наведении (обе темы): заливка тем же cyan, что праймари, тёмный текст. */
.md-typeset .md-button:not(.md-button--primary):hover,
.md-typeset .md-button:not(.md-button--primary):focus {
  background-color: var(--mx-cyan);
  border-color: var(--mx-cyan);
  color: #0d1117;
}

/* Предупреждающие блоки (!!! warning) — красные вместо оранжевых. */
.md-typeset .admonition.warning,
.md-typeset details.warning {
  border-color: #f85149;
}
.md-typeset .warning > .admonition-title,
.md-typeset .warning > summary {
  background-color: rgba(248, 81, 73, .1);
  border-color: #f85149;
}
.md-typeset .warning > .admonition-title::before,
.md-typeset .warning > summary::before {
  background-color: #f85149;
}

/* Скриншоты Karing (портретные телефонные) — центр, ограниченная ширина, рамка. */
.md-typeset img.mx-shot {
  display: block; margin: 1em auto 1.4em; max-width: 400px; width: 100%;
  border-radius: 14px; border: 1px solid var(--md-default-fg-color--lightest);
}