/* ============================================
   БАЗОВЫЕ НАСТРОЙКИ И ШРИФТЫ
   ============================================ */

@font-face {
  font-family: 'URWGothic Book';
  src: url('https://max40in.ru/api/notes/sNj4uIxZLEZ4/download') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Onest:wght@100..900&display=swap') format('woff');
  font-display: swap;
}


:root {
    /* Переменные для шрифтов */
    --font-primary: 'URWGothic Book', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-headers: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    
    --font-mono: 'Consolas', 'Monaco', 'Courier New', 'URWGothic Book', monospace;
    
    /* Размеры шрифтов */
    --font-size-base: 1rem;
    --font-size-sm: 0.875rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-code: 0.9rem;
    
    /* Отступы для заголовков */
    --heading-margin-top: 2rem;
    --heading-margin-bottom: 1rem;
    --heading-line-height: 1.2;
    
    /* Цвета */
    --color-text: #111;
    --color-heading: #333;
    --color-link: #357edd;
    --color-link-hover: #00449e;
    --color-code-bg: #f5f5f5;
    --color-code-text: #2d3748;
    --color-border: #e2e8f0;
    --color-pre-bg: #2d3748;
    --color-pre-text: #e2e8f0;
}

/* ============================================
   СБРОС И БАЗОВЫЕ СТИЛИ
   ============================================ */

#content,
.ck-content,
.type-text {
    font-family: var(--font-primary) !important;
    font-size: var(--font-size-base);
    line-height: 1.7;
    color: var(--color-text);
    font-weight: 500;
}

/* ============================================
   КОД И ПРЕФОРМАТИРОВАННЫЙ ТЕКСТ (ИСПРАВЛЕНО)
   ============================================ */

/* Инлайновый код */
#content code,
.ck-content code,
#content kbd,
.ck-content kbd {
    font-family: var(--font-mono) !important;
    font-size: var(--font-size-code);
    background-color: var(--color-code-bg);
    color: var(--color-code-text);
    padding: 0.2em 0.4em;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,0.1);
    white-space: nowrap;
    font-weight: 500;
}

/* Блоки кода pre */
#content pre,
.ck-content pre,
pre[class*="language-"] {
    font-family: var(--font-mono) !important;
    background-color: var(--color-pre-bg) !important;
    color: var(--color-pre-text) !important;
    padding: 1.5rem !important;
    border-radius: 6px;
    overflow-x: auto;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    line-height: 1.6;
    font-size: var(--font-size-code);
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Код внутри pre */
#content pre code,
.ck-content pre code,
pre code,
code[class*="language-"],
pre[class*="language-"] code {
    background: none !important;
    padding: 0 !important;
    border: none !important;
    font-size: var(--font-size-code) !important;
    color: inherit !important;
    white-space: pre !important;
    word-wrap: normal !important;
    word-break: normal !important;
    tab-size: 2;
    hyphens: none;
}

/* Специфичные блоки кода из Trilium */
#content .hljs,
.ck-content .hljs,
.hljs {
    background: var(--color-pre-bg) !important;
    color: var(--color-pre-text) !important;
    display: block;
    overflow-x: auto;
    padding: 1.5rem;
    border-radius: 6px;
}

/* Стили для syntax highlighting */
.hljs-comment,
.hljs-quote {
    color: #a0aec0 !important;
    font-style: italic;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-subst {
    color: #63b3ed !important;
    font-weight: bold;
}

.hljs-number,
.hljs-literal,
.hljs-variable,
.hljs-template-variable,
.hljs-tag .hljs-attr {
    color: #f687b3 !important;
}

.hljs-string,
.hljs-doctag {
    color: #68d391 !important;
}

.hljs-title,
.hljs-section,
.hljs-selector-id {
    color: #f6ad55 !important;
    font-weight: bold;
}

.hljs-tag,
.hljs-name,
.hljs-attribute {
    color: #4fd1c5 !important;
}

.hljs-regexp,
.hljs-link {
    color: #f687b3 !important;
}

.hljs-symbol,
.hljs-bullet {
    color: #f6ad55 !important;
}

.hljs-built_in,
.hljs-builtin-name {
    color: #63b3ed !important;
}

.hljs-meta {
    color: #a0aec0 !important;
    font-weight: bold;
}

.hljs-deletion {
    background: #fc8181;
}

.hljs-addition {
    background: #68d391;
}

/* ============================================
   ЗАГОЛОВКИ
   ============================================ */

#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6,
.ck-content h1,
.ck-content h2,
.ck-content h3,
.ck-content h4,
.ck-content h5,
.ck-content h6 {
    font-family: var(--font-headers) !important;
    font-weight: 700;
    line-height: var(--heading-line-height);
    color: var(--color-heading);
    margin-top: var(--heading-margin-top);
    margin-bottom: var(--heading-margin-bottom);
    scroll-margin-top: 2rem;
}

#content h1, .ck-content h1 {
    font-size: 2.25rem;
    margin-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-border);
}

#content h2, .ck-content h2 {
    font-size: 1.875rem;
}

#content h3, .ck-content h3 {
    font-size: 1.5rem;
}

#content h4, .ck-content h4 {
    font-size: 1.25rem;
}

#content h5, .ck-content h5 {
    font-size: var(--font-size-lg);
}

#content h6, .ck-content h6 {
    font-size: var(--font-size-base);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

#title {
    font-family: var(--font-primary) !important;
    font-size: 2.5rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 3px solid var(--color-border);
}

/* ============================================
   ПАРАГРАФЫ И ТЕКСТ
   ============================================ */

#content p,
.ck-content p {
    text-align: justify;
    hyphens: auto;
    /* margin-top: 0;
    margin-bottom: 1.25rem; выглядит криво */
}

/* ============================================
   ССЫЛКИ
   ============================================ */

#content a,
.ck-content a {
    color: var(--color-link);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.2s ease;
    font-family: var(--font-primary) !important;
}

#content a:hover,
.ck-content a:hover {
    color: var(--color-link-hover);
    border-bottom-color: var(--color-link-hover);
}

.toc-anchor {
    font-size: 0.75em;
    margin-left: 0.5rem;
    opacity: 0;
    transition: opacity 0.2s;
    text-decoration: none !important;
    border-bottom: none !important;
}

h1:hover .toc-anchor,
h2:hover .toc-anchor,
h3:hover .toc-anchor {
    opacity: 1;
}

/* ============================================
   СПИСКИ
   ============================================ */

#content ul,
#content ol,
.ck-content ul,
.ck-content ol {
    margin-top: 0;
    margin-bottom: 1.25rem;
    padding-left: 2rem;
    font-family: var(--font-primary) !important;
}

#content li,
.ck-content li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

#content ul li,
.ck-content ul li {
    list-style-type: disc;
}

#content ol li,
.ck-content ol li {
    list-style-type: decimal;
}

#content ul ul,
#content ol ol,
#content ul ol,
#content ol ul {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

/* ============================================
   ТАБЛИЦЫ
   ============================================ */

#content table,
.ck-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.25rem;
    font-family: var(--font-primary) !important;
    font-size: var(--font-size-sm);
}

#content th,
#content td,
.ck-content th,
.ck-content td {
    border: 1px solid var(--color-border);
    padding: 0.75rem;
    text-align: left;
}

#content th,
.ck-content th {
    background-color: var(--color-code-bg);
    font-weight: 600;
}

#content tr:nth-child(even),
.ck-content tr:nth-child(even) {
    background-color: rgba(0,0,0,0.02);
}

/* ============================================
   ЦИТАТЫ
   ============================================ */

#content blockquote,
.ck-content blockquote {
    margin: 0 0 1.25rem 0;
    padding: 1rem 1.5rem;
    border-left: 4px solid var(--color-link);
    background-color: var(--color-code-bg);
    color: var(--color-text);
    font-style: italic;
}

#content blockquote p:last-child,
.ck-content blockquote p:last-child {
    margin-bottom: 0;
}

/* ============================================
   ИЗОБРАЖЕНИЯ
   ============================================ */

#content img,
.ck-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.5rem auto;
    border-radius: 4px;
}

/* ============================================
   ГОРИЗОНТАЛЬНАЯ ЛИНИЯ
   ============================================ */

#content hr,
.ck-content hr {
    border: none;
    border-top: 2px solid var(--color-border);
    margin: 2.5rem 0;
}

/* ============================================
   ВЫДЕЛЕНИЕ ТЕКСТА
   ============================================ */

#content strong,
.ck-content strong {
    font-weight: 700;
    color: var(--color-heading);
}

#content em,
.ck-content em {
    font-style: italic;
}

#content mark,
.ck-content mark {
    background-color: #fef08a;
    padding: 0.1em 0.2em;
    border-radius: 2px;
}

/* ============================================
   АДАПТИВНОСТЬ
   ============================================ */

@media (max-width: 768px) {
    :root {
        --font-size-base: 15px;
        --heading-margin-top: 1.5rem;
    }
    
    #content h1, .ck-content h1 {
        font-size: 1.875rem;
    }
    
    #content h2, .ck-content h2 {
        font-size: 1.5rem;
    }
    
    #content h3, .ck-content h3 {
        font-size: 1.25rem;
    }
    
    #content pre,
    .ck-content pre {
        padding: 1rem !important;
        font-size: 0.8rem;
    }
}

/* ============================================
   ТЁМНАЯ ТЕМА
   ============================================ */

html.theme-dark {
    --color-text: #e2e8f0;
    --color-heading: #f7fafc;
    --color-link: #63b3ed;
    --color-link-hover: #90cdf4;
    --color-code-bg: #4a5568;
    --color-code-text: #e2e8f0;
    --color-border: #4a5568;
    --color-pre-bg: #1a202c;
    --color-pre-text: #e2e8f0;
}

html.theme-dark #content pre,
html.theme-dark .ck-content pre {
    background-color: #1a202c !important;
}

html.theme-dark #content blockquote,
html.theme-dark .ck-content blockquote {
    background-color: #4a5568;
}

/* ============================================
   ПРАВАЯ ПАНЕЛЬ (TOC)
   ============================================ */

#toc-pane {
    width: 25%;
    min-width: 150px;
    padding: 1rem;
}

#toc-pane a,
#toc-pane span {
    line-height: 2rem;
}

/* ===== Глобальные переменные для темы ===== */
#header-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  
  /* Спойлер: градиент по умолчанию */
  background: linear-gradient(135deg, #1e293b, #475569);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  
  /* Плавные переходы только для transform и filter */
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              filter 0.4s ease;
}

.theme-dark #header-logo {
  background: linear-gradient(135deg, #f1f5f9, #cbd5e1);
  -webkit-background-clip: text;
  background-clip: text;
}

#header-logo img {
  width: 32px;
  height: 32px;
  transition: transform 0.4s ease, filter 0.4s ease;
}

/* === НАВЕДЕНИЕ: СВЕЧЕНИЕ ПО КОНТУРУ === */
#header-logo:hover {
  transform: translateY(-2px) scale(1.02) rotate(7deg);
  background: linear-gradient(90deg, #222 0%, #222 40%, #ffd700 50%, #222 60%, #222 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientFlow 3s linear infinite;
  filter: drop-shadow(0 0 12px rgba(0, 0, 0, 0.2));
}

.theme-dark #header-logo:hover {
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.8));
}

/* Картинка: добавляем синхронизированную пульсацию */
#header-logo:hover img {
  /* Длительность совпадает с градиентом для точной синхронизации */
  animation: logoImgPulse 3s linear infinite;
  transform-origin: center center;
}

@keyframes logoImgPulse {
  /* Базовое состояние при наведении (между импульсами) */
  0%, 14%, 34%, 100% {
    transform: translateY(4px) scale(1.15) rotate(-14deg);
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.2));
  }
  
  /* Момент пульсации: подстройте % под вашу вёрстку */
  35% {
    transform: translateY(4px) scale(1.4) rotate(-14deg);
    /* Цвет свечения меняется на яркий желтый */
    filter: 
      drop-shadow(0 0 6px rgba(255, 245, 100, 1))    /* Яркое ядро */
      drop-shadow(0 0 14px rgba(255, 215, 0, 0.9))   /* Основной жёлтый ореол */
      drop-shadow(0 0 24px rgba(255, 180, 0, 0.5));  /* Мягкое внешнее рассеивание */
  }
}

@keyframes gradientFlow {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

@media (max-width: 768px) {
  #header-logo {
    font-size: 1rem;
    gap: 8px;
    padding: 6px 12px;
  }
  #header-logo img { width: 28px; height: 28px; }
}


/* 1. Сетка для списка */
#childLinks.grid ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
    background: transparent !important; /* Убираем фон у списка */
}

/* 2. Контейнер элемента (LI) - делаем невидимым */
#childLinks.grid li {
    margin: 0;
    padding: 0;
    background: transparent !important; /* Убираем серый фон, который был виден */
    border: none !important;
}

/* 3. Сама карточка-ссылка (A) */
#childLinks.grid a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 60px; /* Минимальная высота карточки */
    padding: 1.5rem !important;
    box-sizing: border-box;
    
    /* Стиль карточки */
    background: #ffffff !important; /* Белый фон карточки */
    border: 2px solid #ccc;
    border-radius: 16px; /* Закругленные углы */
    
    /* Текст */
    text-decoration: none;
    color: var(--main-text-color, #333);
    font-size: 1.1rem;
    font-weight: 500;
    text-align: center;
    
    /* Анимация */
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

/* 4. Эффект при наведении */
#childLinks.grid a:hover {
    border-color: var(--accented-color, #007bff);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08); /* Мягкая тень */
    transform: translateY(-3px);
    background: #f8f9fa !important; /* Чуть темнее при наведении, но не темно-серый */
}

.navigation a {
    border: 2px solid #ccc !important;
    padding: 10px 20px !important;
    text-decoration: none !important;
    color: inherit !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
}

/* Стили при наведении курсора */
.navigation a:hover {
    background-color: #333 !important;
    color: white !important;
    border-color: #333 !important;
}