/* Импорт шрифта IBM Plex Sans */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap");

/* CSS-переменные из основного сайта */
:root {
  --bg-color--dark: #27282c;
  --bg-color--light: #fff;

  --text-color--dark: #fff;
  --text-color--light: #27282c;

  --link-color--dark: rgb(130 201 255);
  --link-color--light: hsl(206, 100%, 52%);

  --link-color-hover--dark: hsl(206, 100%, 52%);
  --link-color-hover--light: rgb(130 201 255);

  --link-color-visited--dark: rgb(180 130 255);
  --link-color-visited--light: hsl(270, 100%, 50%);

  --code-bg-color--dark: #353637;
  --code-bg-color--light: #f2f2f2;
}

/* Базовые стили */
body {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-color--light);
  background: var(--bg-color--light);
  margin: 0;
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

/* Заголовки */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 500;
  color: var(--text-color--light);
  margin-top: 2rem;
  margin-bottom: 1rem;
  line-height: 1.3;
}

h1 {
  font-size: 2rem;
  margin-top: 0;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  text-align: center;
  font-size: 1.25rem;
}

/* Параграфы */
p {
  margin: 0 0 1rem;
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
}

/* Списки определений */
dt {
  font-weight: 600;
  color: var(--text-color--light);
}

dd {
  font-style: italic;
}

/* Ссылки */
a {
  color: var(--link-color--light);
  text-decoration: none;
}

a:hover {
  color: var(--link-color-hover--light);
  text-decoration: underline;
}

a:visited {
  color: var(--link-color-visited--light);
}

/* Стили для внешних ссылок */
a.external {
  background-position: top right;
  background-repeat: no-repeat;
  background-size: 0.65rem;
  padding-right: 0.9rem;
  background-image: url('data:image/svg+xml,%3Csvg width="10px" height="10px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" %3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %2327282c; stroke-linecap: round; stroke-linejoin: bevel; stroke-width: 1.5px; %7D %3C/style%3E%3C/defs%3E%3Cg%3E%3Cpath class="cls-1" d="M22,14.55V20a2,2,0,0,1-2,2H4a2,2,0,0,1-2-2V4A2,2,0,0,1,4,2H9.53" %3E%3C/path%3E%3Cline class="cls-1" x1="21.39" y1="2.48" x2="9.26" y2="14.09"%3E%3C/line%3E%3Cpath class="cls-1" d="M17,1.9h3.09A1.83,1.83,0,0,1,22,3.62V6.9"%3E%3C/path%3E%3C/g%3E%3C/svg%3E');
}

.tip {
  color: #018c8c;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 0.688em;
}

.warning {
  color: #c67171;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.125em;
}

/* Код */
code {
  font-family: "JetBrains Mono", monospace;
  background-color: var(--code-bg-color--light);
  color: hsl(5, 74%, 59%);
  border-radius: 16px;
  padding: 0.1em 0.5em;
  text-decoration: none !important;
}

/* Убираем подчеркивание с кода внутри ссылок */
a code,
a:hover code,
a:visited code {
  text-decoration: none !important;
  text-decoration-line: none !important;
  text-decoration-style: none !important;
  text-decoration-color: transparent !important;
  text-decoration-skip-ink: none !important;
}

/* Убираем эффекты ссылок с изображений */
a img,
a:hover img,
a:visited img {
  text-decoration: none !important;
  text-decoration-line: none !important;
  text-decoration-style: none !important;
  text-decoration-color: transparent !important;
  text-decoration-skip-ink: none !important;
  border: none !important;
  outline: none !important;
}

pre {
  background: #f2f2f2;
  padding: 1rem;
  border-radius: 8px;
  overflow-x: auto;
  margin: 1rem 0;
}

pre code {
  background: none;
  padding: 0;
  color: #27282c;
}

/* Prism.js стили для подсветки кода - точная копия из global.css */
code[class*="language-"],
pre[class*="language-"] {
  color: #27282c;
  font-family: "JetBrains Mono", monospace;
  font-weight: 400;
  direction: ltr;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  line-height: 1.5;
  -moz-tab-size: 2;
  -o-tab-size: 2;
  tab-size: 2;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

/* Code blocks */
pre[class*="language-"] {
  padding: 1em;
  margin: 0.5em 0;
  overflow: auto;
  border-radius: 0.3em;
  background: #f2f2f2;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
  padding: 0.2em 0.3em;
  border-radius: 0.3em;
  white-space: normal;
  background: #f2f2f2;
}

/* Стили для токенов Prism.js - светлая тема */
.token.comment,
.token.prolog,
.token.cdata {
  color: hsl(230, 4%, 64%);
}

.token.doctype,
.token.punctuation,
.token.entity {
  color: #27282c;
}

.token.attr-name,
.token.class-name,
.token.boolean,
.token.constant,
.token.number,
.token.atrule {
  color: #ffab70;
}

.token.keyword {
  color: hsl(301, 63%, 40%);
}

.token.property,
.token.tag,
.token.symbol,
.token.deleted,
.token.important {
  color: hsl(5, 74%, 59%);
}

.token.selector,
.token.string,
.token.char,
.token.builtin,
.token.inserted,
.token.regex,
.token.attr-value,
.token.attr-value > .token.punctuation {
  color: hsl(119, 34%, 47%);
}

.token.variable,
.token.operator,
.token.function {
  color: hsl(221, 87%, 60%);
}

.token.url {
  color: hsl(198, 99%, 37%);
}

/* HTML overrides */
.token.attr-value > .token.punctuation.attr-equals,
.token.special-attr > .token.attr-value > .token.value.css {
  color: #27282c;
}

/* CSS overrides */
.language-css .token.selector {
  color: hsl(5, 74%, 59%);
}

.language-css .token.property {
  color: #27282c;
}

.language-css .token.function,
.language-css .token.url > .token.function {
  color: hsl(198, 99%, 37%);
}

.language-css .token.url > .token.string.url {
  color: hsl(119, 34%, 47%);
}

.language-css .token.important,
.language-css .token.atrule .token.rule {
  color: hsl(301, 63%, 40%);
}

/* JS overrides */
.language-javascript .token.operator {
  color: hsl(301, 63%, 40%);
}

.language-javascript
  .token.template-string
  > .token.interpolation
  > .token.interpolation-punctuation.punctuation {
  color: hsl(344, 84%, 43%);
}

/* JSON overrides */
.language-json .token.operator {
  color: #27282c;
}

.language-json .token.null.keyword {
  color: #ffab70;
}

/* General */
.token.bold {
  font-weight: bold;
}

.token.comment,
.token.italic {
  font-style: italic;
}

.token.entity {
  cursor: help;
}

.token.namespace {
  opacity: 0.8;
}

/* Списки */
ol,
ul {
  padding-left: 1.5rem;
  margin: 1rem 0;
}

li {
  margin: 0.5rem 0;
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
}

/* Изображения */
img {
  max-width: 100%;
  max-height: 60vh;
  width: auto;
  height: auto;
  border-radius: 16px;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
  margin: 1rem 0;
}

/* Стили для figure и figcaption как в блоге */
figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 1rem auto;
  max-width: 100%;
}

figure img {
  margin: 0;
  display: block;
  max-width: 100%;
}

figcaption {
  font-size: 0.8rem;
  margin-top: 0.5rem;
  text-align: center;
  color: var(--text-color--light);
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 400;
  line-height: 1.4;
  max-width: 100%;
}

@media screen and (min-width: 700px) {
  figure {
    margin: 2rem auto;
  }

  figcaption {
    font-size: 0.9rem;
  }
}

.navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0;
}

.navigation.top {
  border-bottom: 1px solid #e0e0e0;
  justify-content: flex-start;
  padding-bottom: 20px;
}

.navigation.bottom {
  border-top: 1px solid #e0e0e0;
  padding-top: 20px;
}

.back-link {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 1rem;
}

.back-link:nth-child(1) {
  justify-content: flex-start;
}

.back-link:nth-child(2) {
  text-align: right;
  justify-content: flex-end;
}

.back-link a {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--link-color--light);
  text-decoration: none;
}

.back-link a:hover {
  color: var(--link-color-hover--light);
  text-decoration: underline;
}

.nav-arrow {
  margin: 0 6px;
  font-size: 14px;
  opacity: 0.7;
}

.nav-link:hover .nav-arrow {
  opacity: 1;
}

/* Стили для стрелки в back-link */
.back-link .nav-arrow {
  margin: 0;
  font-size: inherit;
  opacity: 1;
}

/* Убираем фон при наведении для ссылок в back-link */
.back-link a:hover {
  background: none !important;
}

/* Стили для ссылок в нижней навигации */
.navigation.bottom a {
  display: flex;
  align-items: center;
  color: var(--link-color--light);
  text-decoration: none;
}

.navigation.bottom a:hover {
  color: var(--link-color-hover--light);
  text-decoration: underline;
  background: none !important;
}