/* 
 * 教程宽布局样式
 * 这个文件用于为教程页面提供更宽的布局
 * 参考廖雪峰网站的布局
 */

/* 覆盖基本容器宽度 */
.container {
    max-width: 1100px !important;
    padding: 0 20px !important;
    margin: 0 auto !important;
}

/* 覆盖内容区域宽度 */
.content, 
.content.wide-content {
    max-width: 1100px !important;
    padding: 0 20px !important;
    margin: 0 auto !important;
}

/* 移除内容边距 */
.three-column-container {
    padding: 0 20px !important;
    margin: 0 auto !important;
    max-width: 1100px !important;
}

/* 确保tutorial-container统一宽度 */
.tutorial-container {
    width: 100% !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

/* 代码块样式优化 */
pre {
    max-width: 100%;
    overflow-x: auto;
    background-color: #282c34 !important;
    font-family: "Fira Code", "Cascadia Code", Consolas, "Liberation Mono", Menlo, Courier, monospace !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    padding: 20px !important;
    border: none !important;
    border-radius: 5px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
}

code {
    font-family: "Fira Code", "Cascadia Code", Consolas, "Liberation Mono", Menlo, Courier, monospace !important;
    font-size: 16px !important;
    background-color: #f0f7ff !important;
    padding: 3px 6px !important;
    border-radius: 3px !important;
    color: #0066cc !important;
    letter-spacing: 0.4px !important;
}

pre code {
    padding: 0 !important;
    background-color: transparent !important;
    color: #f8f8f2 !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    text-shadow: none !important;
}

/* 语法高亮增强 */
.hljs-keyword {
    color: #ff79c6 !important;
    font-weight: bold !important;
}

.hljs-string {
    color: #f1fa8c !important;
}

.hljs-number {
    color: #bd93f9 !important;
}

.hljs-comment {
    color: #6272a4 !important;
    font-style: italic !important;
}

.hljs-function {
    color: #50fa7b !important;
}

/* 表格样式优化 */
table {
    max-width: 100%;
    display: block;
    overflow-x: auto;
}

/* 图片最大宽度 - 仅限于文章内容内的图片 */
.article-content-section img {
    max-width: 100%;
    height: auto;
}

/* 章节标题等元素宽度 */
h1, h2, h3, h4, h5, h6,
p, ul, ol, dl, 
.article-header, 
.article-meta, 
.article-content-section {
    max-width: 100%;
}

/* 专门为教程页添加的样式 */
body.python-tutorial .content,
body.mysql-tutorial .content, 
body.git-tutorial .content,
body.html-tutorial .content {
    max-width: 1100px !important;
    width: 100%;
    padding: 0 20px !important;
    margin: 0 auto !important;
}

/* 强制使文章容器占满更多空间 */
.article-page-container {
    max-width: 1100px !important;
    width: 100%;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

.article-main-content {
    flex: 1;
    max-width: 1100px !important;
}

/* 减小边栏大小 */
.article-sidebar-nav,
.article-category-nav {
    width: 180px;
}

/* 新设计的教程侧边栏 - 廖雪峰风格 */
.tutorial-sidebar {
    background-color: #fff !important;
    border-right: 1px solid #e6e6e6 !important;
    border-radius: 0 !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1) !important;
    width: 180px !important;
    position: sticky !important;
    top: 100px !important;
    height: calc(100vh - 100px) !important;
    overflow-y: auto !important;
    padding: 0 !important;
    z-index: 10 !important;
}

.tutorial-sidebar::-webkit-scrollbar {
    width: 5px !important;
}

.tutorial-sidebar::-webkit-scrollbar-track {
    background: #f7f9fc !important;
}

.tutorial-sidebar::-webkit-scrollbar-thumb {
    background: #c1d1e8 !important;
    border-radius: 10px !important;
}

.tutorial-sidebar::-webkit-scrollbar-thumb:hover {
    background: #8ba3c7 !important;
}

.tutorial-sidebar-header {
    padding: 16px 20px !important;
    background-color: #f8f8f8 !important;
    border-bottom: 1px solid #e6e6e6 !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    color: #333 !important;
    background-image: none !important;
}

.tutorial-sidebar-header::after {
    display: none !important;
    content: none !important;
}

.tutorial-sidebar-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    color: #333 !important;
    position: static !important;
    z-index: 1 !important;
}

.tutorial-subcategory {
    margin: 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

.tutorial-subcategory-title {
    background-color: #f8f8f8 !important;
    padding: 8px 20px !important;
    font-weight: 600 !important;
    color: #333 !important;
    font-size: 14px !important;
    display: block !important;
    position: relative !important;
    padding-right: 30px !important;
    margin: 0 !important;
}

.tutorial-subcategory-title:hover {
    background-color: #f0f7ff !important;
}

.tutorial-subcategory-title:before {
    display: none !important;
    content: none !important;
}

.tutorial-subcategory-title::after {
    content: ">" !important;
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 14px !important;
    color: #999 !important;
    display: block !important;
    transition: transform 0.2s, color 0.2s !important;
    font-family: monospace !important;
}

.tutorial-subcategory.expanded .tutorial-subcategory-title::after {
    transform: translateY(-50%) rotate(90deg) !important;
    font-weight: bold !important;
    color: #0066cc !important;
}

.tutorial-subcategory-title:hover::after {
    color: #0066cc !important;
}

.tutorial-article-item {
    margin: 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

.tutorial-article-link {
    display: block !important;
    padding: 6px 20px !important;
    color: #555 !important;
    position: relative !important;
    border-bottom: none !important;
    text-decoration: none !important;
    transition: all 0.1s !important;
    font-size: 14px !important;
    background-image: none !important;
    border-left: none !important;
    box-shadow: none !important;
    line-height: 1.3 !important;
}

.tutorial-article-link:before {
    display: none !important;
    content: none !important;
}

.tutorial-article-link:hover {
    background-color: #f5f7fa !important;
    color: #0066cc !important;
}

.tutorial-article-link.active {
    background-color: #f0f7ff !important;
    box-shadow: inset 3px 0 0 #0066cc !important;
    color: #0066cc !important;
    font-weight: 500 !important;
}

/* JS教程侧边栏样式 */
.tutorial-nav-list > li > a {
    display: block !important;
    padding: 8px 20px !important;
    color: #333 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    font-size: 14px !important;
    background-image: none !important;
    box-shadow: none !important;
    position: relative !important;
    padding-right: 30px !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}

.tutorial-nav-list > li > ul > li {
    border-bottom: 1px solid #f0f0f0 !important;
}

.tutorial-nav-list > li > ul > li:last-child {
    border-bottom: none !important;
}

.tutorial-nav-list > li > ul > li > a {
    display: block !important;
    padding: 6px 20px 6px 36px !important;
    color: #555 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    transition: all 0.1s !important;
    background-image: none !important;
    box-shadow: none !important;
    border-left: none !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}

.tutorial-nav-list > li > ul > li > a:hover {
    color: #0066cc !important;
    background-color: #f5f7fa !important;
}

.tutorial-nav-list > li > ul > li > a.active {
    color: #0066cc !important;
    font-weight: 500 !important;
    background-color: #f0f7ff !important;
    box-shadow: inset 3px 0 0 #0066cc !important;
}

.tutorial-nav-list > li > a::before,
.tutorial-nav-list > li > ul > li > a::before {
    display: none !important;
    content: none !important;
}

.tutorial-nav-list > li > a::after {
    content: ">" !important;
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 14px !important;
    color: #999 !important;
    display: block !important;
    transition: transform 0.2s, color 0.2s !important;
    font-family: monospace !important;
}

.tutorial-nav-list > li.expanded > a::after {
    transform: translateY(-50%) rotate(90deg) !important;
    font-weight: bold !important;
    color: #0066cc !important;
}

.tutorial-nav-list > li > a:hover::after {
    color: #0066cc !important;
}

/* 返回按钮 */
.tutorial-return-btn {
    display: block !important;
    text-align: center !important;
    padding: 10px 20px !important;
    background-color: #f8f8f8 !important;
    color: #555 !important;
    text-decoration: none !important;
    transition: all 0.1s !important;
    font-size: 14px !important;
    border-top: 1px solid #e6e6e6 !important;
}

.tutorial-return-btn:hover {
    background-color: #f0f7ff !important;
    color: #0066cc !important;
}

/* 强制覆盖页面框架限制 */
@media (min-width: 768px) {
    .container, 
    .container-md, 
    .container-sm {
        max-width: 1100px !important;
        padding: 0 20px !important;
        margin: 0 auto !important;
    }
}

@media (min-width: 992px) {
    .container, 
    .container-lg, 
    .container-md, 
    .container-sm {
        max-width: 1100px !important;
        padding: 0 20px !important;
        margin: 0 auto !important;
    }
}

@media (min-width: 1200px) {
    .container, 
    .container-lg, 
    .container-md, 
    .container-sm, 
    .container-xl {
        max-width: 1100px !important;
        padding: 0 20px !important;
        margin: 0 auto !important;
    }
}

/* 移除Bootstrap容器边距 */
.container-fluid, 
.container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 移除页脚顶部空白 */
footer {
    margin-top: 0 !important;
}

/* 代码块内容 - 强制样式 */
.tutorial-article-body pre, 
.tutorial-article-body code {
    font-family: "Fira Code", "Cascadia Code", Consolas, "Liberation Mono", Menlo, Courier, monospace !important;
    letter-spacing: 0.4px !important;
}

/* 确保不影响首页教程卡片图片 */
.tutorial-fixed-image img,
.tutorial-image img {
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: cover; /* 保持图片比例覆盖容器 */
}

/* 复制按钮样式增强 */
.copy-button {
    background: #8be9fd !important;
    color: #282a36 !important;
    font-weight: bold !important;
    padding: 6px 12px !important;
    border-radius: 3px !important;
}

/* 代码块包装器增强 */
.code-block-wrapper {
    margin-bottom: 25px !important;
    position: relative !important;
}

/* 增强代码行可读性 */
.tutorial-article-body pre code {
    display: block !important;
    padding: 0 !important;
    white-space: pre !important;
    tab-size: 4 !important;
}

/* 教程导航按钮优化 */
.tutorial-navigation a {
    color: #2b80ff !important;
    border-color: #e6edf7 !important;
    transition: all 0.3s ease !important;
}

.tutorial-navigation a:hover {
    background-color: #e6f3ff !important;
    border-color: #2b80ff !important;
    transform: translateY(-2px) !important;
}

/* 移动端响应式样式 */
@media (max-width: 768px) {
    .container,
    .content,
    .content.wide-content,
    .three-column-container,
    .tutorial-container,
    .article-page-container,
    body.python-tutorial .content,
    body.mysql-tutorial .content,
    body.git-tutorial .content,
    body.html-tutorial .content {
        max-width: 100% !important;
        padding: 0 10px !important;
    }
    
    .container-md,
    .container-sm,
    .container-lg,
    .container-xl {
        max-width: 100% !important;
        padding: 0 10px !important;
    }
}