/* Базовые настройки и шрифты */
/* Подключаем современный премиальный шрифт Inter из Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* Применяем его ко всему сайту */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
}
body { background-color: #FAFAFA; color: #1F2937; }

.layout { display: flex; min-height: 100vh; }

/* --- ЛЕВОЕ МЕНЮ (Сайдбар) --- */
.sidebar { 
    width: 300px; 
    background-color: #FAFAFA; 
    border-right: 1px solid #E5E7EB; 
    display: flex; 
    flex-direction: column; 
    flex-shrink: 0; 
    /* Делаем меню залипающим, чтобы оно не уезжало при чтении длинных статей */
    position: sticky; 
    top: 0; 
    height: 100vh; 
}
.sidebar-header { padding: 25px 20px; }
.sidebar-header h2 { font-size: 16px; font-weight: 800; color: #1F2937; letter-spacing: 0.5px; }

/* Убрали растягивание, теперь кнопка будет сразу под статьями */
.menu { padding: 10px 0; overflow-y: auto; margin-bottom: 10px; } 

.menu-item { display: block; padding: 12px 20px; margin: 2px 10px; border-radius: 8px; color: #4B5563; text-decoration: none; font-size: 14px; transition: background 0.2s, color 0.2s; }
.menu-item:hover { background-color: #F3F4F6; color: #111827; }
.menu-item.active { background-color: #FFF7ED; color: #FF9800; font-weight: 600; }

.sidebar-footer { padding: 15px 20px; border-top: 1px solid #E5E7EB; }
.back-link { color: #6B7280; text-decoration: none; font-size: 14px; font-weight: 500; display: block; }
.back-link:hover { color: #FF9800; }

/* --- ПРАВАЯ ЧАСТЬ (Контент) --- */
.content { flex-grow: 1; padding: 50px 80px; max-width: 1000px; background: #FFFFFF; box-shadow: -5px 0 15px rgba(0,0,0,0.02); }
/* Шапка для мобильных телефонов (Закрепленная) */
.mobile-header { 
    display: none; 
    padding: 15px 20px; 
    /* Делаем фон слегка прозрачным и добавляем эффект матового стекла */
    background: rgba(255, 255, 255, 0.95); 
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid #E5E7EB; 
    align-items: center; 
    justify-content: space-between; 
    font-weight: bold; 
    
    /* Магия закрепления наверху */
    position: sticky;
    top: 0;
    z-index: 90; /* Чтобы шапка всегда была поверх текста статьи */
}
#menu-toggle { background: none; border: none; font-size: 20px; color: #4B5563; cursor: pointer; }

/* --- СТИЛИ ДЛЯ ТЕКСТА (Как статья будет выглядеть) --- */
.markdown-body h1 { font-size: 32px; font-weight: 800; margin-bottom: 25px; color: #111827; }
.markdown-body h2 { font-size: 24px; font-weight: 700; margin-top: 40px; margin-bottom: 15px; padding-bottom: 8px; border-bottom: 1px solid #E5E7EB; color: #111827; }
.markdown-body h3 { font-size: 18px; font-weight: 600; margin-top: 25px; margin-bottom: 10px; color: #1F2937; }
.markdown-body h4 { font-size: 16px; font-weight: 700; margin-top: 25px; margin-bottom: 10px; color: #374151; }
.markdown-body h5 { font-size: 14px; font-weight: 600; margin-top: 20px; margin-bottom: 10px; color: #6B7280; text-transform: uppercase; letter-spacing: 0.5px; }

.markdown-body p { font-size: 16px; line-height: 1.7; margin-bottom: 20px; color: #374151; }
.markdown-body ul, .markdown-body ol { margin-left: 25px; margin-bottom: 20px; font-size: 16px; line-height: 1.7; color: #374151; }
.markdown-body li { margin-bottom: 8px; }
.markdown-body strong { color: #111827; }
.markdown-body blockquote { border-left: 4px solid #FFC107; padding-left: 15px; color: #6B7280; font-style: italic; margin-bottom: 20px; background: #FFFBEB; padding: 15px; border-radius: 0 8px 8px 0; }

/* --- СТИЛИ ДЛЯ КАРТИНОК --- */
.markdown-body img {
    max-width: 100%;       /* Картинка никогда не будет шире экрана */
    height: auto;          /* Пропорции не исказятся */
    border-radius: 8px;    /* Слегка скругляем углы для Apple-стиля */
    display: block;        
    margin: 20px auto;     /* Добавляем отступы сверху/снизу и центрируем */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Добавляем легкую красивую тень */
}

/* Адаптивность для телефонов */
@media (max-width: 768px) {
    .sidebar { position: fixed; left: -300px; top: 0; bottom: 0; z-index: 100; transition: left 0.3s ease; box-shadow: none; }
    .sidebar.open { left: 0; box-shadow: 10px 0 25px rgba(0,0,0,0.15); }
    .content { padding: 0; background: #FAFAFA; }
    .mobile-header { display: flex; }
    .markdown-body { padding: 25px 20px; background: #FFFFFF; min-height: 100vh; }
}


/* === КНОПКА ВОЗВРАТА ДЛЯ КОМПЬЮТЕРА (В САЙДБАРЕ) === */
.sidebar-footer { 
    padding: 20px; 
    border-top: 1px solid #E5E7EB; /* Тонкая линия, отделяющая кнопку от меню */
    background-color: #FAFAFA;
    margin-top: auto; /* Эта магия всегда прижимает кнопку к самому низу экрана */
}

.desktop-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #FFC107, #FF9800); /* Фирменный цвет ТоП */
    color: #ffffff !important;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 12px; /* Современное легкое скругление */
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3); /* Красивая объемная тень */
    transition: transform 0.2s, box-shadow 0.2s;
    width: 100%;
}

.desktop-back-btn:hover {
    transform: translateY(-2px); /* Кнопка слегка приподнимается при наведении */
    box-shadow: 0 6px 16px rgba(255, 152, 0, 0.4);
}