/* ================================= 响应式设计优化 ================================= */
/* 颜色通过 variables.css 的 CSS 变量控制，Mermaid 样式在 mermaid.css 中 */

/* 基础样式优化 */
* {
    box-sizing: border-box;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ================================= 窄屏核心修复 ================================= */

/* 公告横幅：移动端隐藏，节省首屏空间 */
@media (max-width: 768px) {
    .bd-header-announcement {
        display: none !important;
    }
}

/* Badge 徽章：窄屏下紧凑排列 */
@media (max-width: 768px) {
    /* README.md 中 shields.io badge 图片容器 */
    main img[src*="img.shields.io"] {
        height: 18px !important;
        margin: 2px 1px !important;
    }
    /* badge 所在的段落允许换行 */
    main p:has(img[src*="img.shields.io"]) {
        display: flex;
        flex-wrap: wrap;
        gap: 2px 4px;
        line-height: 1;
        margin-bottom: 0.75rem;
    }
}

/* 精简窄屏工具栏按钮 */
@media (max-width: 480px) {
    /* 隐藏下载、全屏按钮（小屏低频操作） */
    .bd-header-article .bi-download,
    button:has(.bi-download),
    .bd-header-article .bi-arrows-fullscreen,
    button:has(.bi-arrows-fullscreen) {
        display: none !important;
    }
    /* 隐藏源码/编辑按钮 */
    .bi-github + span,
    a:has(.bi-github):not([aria-label*="repository"]) {
        /* 保留仓库链接，隐藏源码查看 */
    }
}

/* 窄屏下侧边栏切换按钮增强可见性 */
@media (max-width: 768px) {
    .bd-sidebar-toggle {
        opacity: 1 !important;
        background: var(--color-accent) !important;
        color: #fff !important;
        border-radius: 50% !important;
        width: 40px !important;
        height: 40px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
    }
    /* 主侧边栏滑出时添加阴影 */
    .bd-sidebar-primary.show,
    .bd-sidebar-primary:not([style*="visibility: hidden"]) {
        box-shadow: 2px 0 12px rgba(0,0,0,0.15) !important;
    }
}

/* 移动设备通用样式 */
@media (max-width: 768px) {

    /* 优化字体大小和行间距 */
    body {
        font-size: 16px;
        line-height: 1.8;
        color: var(--color-text);
    }

    /* 优化标题样式 */
    h1 {
        font-size: 2rem;
        line-height: 1.3;
        margin: 1.5rem 0 1rem;
        font-weight: 700;
    }

    h2 {
        font-size: 1.75rem;
        line-height: 1.4;
        margin: 1.25rem 0 0.875rem;
        font-weight: 600;
    }

    h3 {
        font-size: 1.5rem;
        line-height: 1.5;
        margin: 1.125rem 0 0.75rem;
        font-weight: 600;
    }

    h4 {
        font-size: 1.25rem;
        margin: 1rem 0 0.625rem;
        font-weight: 600;
    }

    h5 {
        font-size: 1.1rem;
        margin: 0.875rem 0 0.5rem;
        font-weight: 600;
    }

    h6 {
        font-size: 1rem;
        margin: 0.75rem 0 0.375rem;
        font-weight: 600;
    }

    /* 优化段落样式 */
    p {
        margin: 0 0 1rem;
        font-size: 1rem;
        line-height: 1.8;
    }

    /* 优化内容容器宽度 */
    .bd-content {
        padding: 0 1rem;
        max-width: 100%;
    }

    /* 优化侧边栏行为 */
    .bd-sidebar-primary {
        max-width: 100%;
        padding: 0 1rem;
    }

    /* 增大点击区域 */
    a,
    button,
    .btn {
        min-height: 44px;
        min-width: 44px;
        padding: 0.5rem 1rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0.125rem;
        border-radius: 4px;
        font-size: 1rem;
        font-weight: 500;
    }

    /* 优化链接样式 */
    a {
        color: var(--color-link);
        text-decoration: none;
        position: relative;
    }

    a:hover,
    a:focus {
        text-decoration: underline;
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
    }

    /* 优化代码块显示 */
    pre {
        font-size: 0.9rem;
        line-height: 1.6;
        overflow-x: auto;
        padding: 1rem;
        margin: 1rem 0;
        border-radius: 4px;
        background-color: var(--color-code-bg);
        border: 1px solid var(--color-border);
    }

    code {
        font-size: 0.9rem;
        padding: 0.125rem 0.25rem;
        background-color: var(--color-code-bg);
        border-radius: 3px;
        font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    }

    /* 优化表格显示 */
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        max-width: 100%;
        margin: 1rem 0;
        border-collapse: collapse;
        font-size: 0.9rem;
    }

    th,
    td {
        padding: 0.75rem;
        text-align: left;
        border: 1px solid var(--color-border);
        min-width: 80px;
    }

    th {
        background-color: var(--color-bg-secondary);
        font-weight: 600;
    }

    /* 优化列表样式 */
    ul,
    ol {
        padding-left: 1.5rem;
        margin: 1rem 0;
    }

    li {
        margin-bottom: 0.5rem;
        line-height: 1.7;
    }

    /* 优化引用样式 */
    blockquote {
        margin: 1rem 0;
        padding: 0.75rem 1rem 0.75rem 1.5rem;
        border-left: 4px solid var(--color-quote-border);
        background-color: var(--color-quote-bg);
        font-style: italic;
        line-height: 1.7;
    }

    /* 优化 admonition 样式 */
    .admonition {
        margin: 1rem 0;
        padding: 1rem;
        border-radius: 4px;
        border: 1px solid var(--color-border);
    }

    /* 优化图片显示 */
    img {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 1rem 0;
        border-radius: 4px;
    }

    /* 优化导航元素 */
    .navbar-nav {
        font-size: 1rem;
    }

    .navbar-nav>li {
        margin: 0.25rem 0;
    }

    /* 优化搜索框 */
    .search-button {
        min-height: 44px;
        min-width: 44px;
    }

    .search-input {
        min-height: 44px;
        padding: 0.5rem 1rem;
        font-size: 1rem;
        width: 100%;
        border: 1px solid var(--color-border-input);
        border-radius: 4px;
    }

    /* 优化页脚样式 */
    .bd-footer {
        padding: 1rem;
        margin-top: 2rem;
        border-top: 1px solid var(--color-border);
        text-align: center;
    }

    /* 优化表单元素 */
    input,
    select,
    textarea {
        min-height: 44px;
        padding: 0.5rem 1rem;
        font-size: 1rem;
        width: 100%;
        border: 1px solid var(--color-border-input);
        border-radius: 4px;
        margin-bottom: 1rem;
        background-color: var(--color-bg);
        color: var(--color-text);
    }

    /* 优化按钮 */
    button,
    .btn {
        background-color: var(--color-btn-bg);
        color: var(--color-btn-text);
        border: none;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

    button:hover,
    button:focus,
    .btn:hover,
    .btn:focus {
        background-color: var(--color-btn-hover);
        outline: 2px solid var(--color-btn-hover);
        outline-offset: 2px;
    }

    /* 优化代码复制按钮 */
    .copybtn {
        min-height: 44px;
        min-width: 44px;
        padding: 0.5rem;
        margin: 0.25rem;
        background-color: var(--color-bg-secondary);
        color: var(--color-text);
        border: 1px solid var(--color-border);
    }

    /* 优化图片容器 */
    .figure {
        margin: 1.5rem 0;
    }

    /* 优化 figcaption 样式 */
    figcaption {
        font-size: 0.9rem;
        line-height: 1.6;
        margin-top: 0.5rem;
        color: var(--color-text-secondary);
        text-align: center;
    }

    /* 优化响应式图片 */
    .responsive-img {
        max-width: 100%;
        height: auto;
    }

    /* 优化视频容器 */
    .video-container {
        position: relative;
        padding-bottom: 56.25%;
        height: 0;
        overflow: hidden;
        max-width: 100%;
        margin: 1rem 0;
        border-radius: 4px;
    }

    /* 优化表格单元格内容换行 */
    td {
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal;
        max-width: 200px;
    }

    /* 优化列表项间距 */
    li>ul,
    li>ol {
        margin: 0.5rem 0 0;
    }

    /* 优化分隔线 */
    hr {
        margin: 1.5rem 0;
        border: none;
        border-top: 1px solid var(--color-border);
    }

    /* 优化工具提示 */
    .tooltip {
        font-size: 0.875rem;
        padding: 0.5rem;
        max-width: 250px;
    }

    /* 优化标签 */
    .badge {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
        margin: 0.125rem;
    }
}

/* 平板设备样式 */
@media (min-width: 769px) and (max-width: 1024px) {
    body {
        font-size: 17px;
        line-height: 1.7;
    }

    .bd-content {
        padding: 0 1.5rem;
        max-width: 100%;
    }

    pre {
        font-size: 0.95rem;
    }

    table {
        font-size: 0.95rem;
    }
}

/* 小屏幕手机样式 */
@media (max-width: 480px) {
    body {
        font-size: 16px;
        line-height: 1.9;
    }

    h1 {
        font-size: 1.75rem;
        margin: 1.25rem 0 0.875rem;
    }

    h2 {
        font-size: 1.5rem;
        margin: 1.125rem 0 0.75rem;
    }

    h3 {
        font-size: 1.3rem;
        margin: 1rem 0 0.625rem;
    }

    .bd-content {
        padding: 0 0.75rem;
    }

    pre {
        font-size: 0.85rem;
        padding: 0.75rem;
        margin: 0.75rem 0;
    }

    table {
        font-size: 0.85rem;
        margin: 0.75rem 0;
    }

    th,
    td {
        padding: 0.5rem;
        min-width: 70px;
    }

    p {
        margin: 0 0 0.875rem;
        font-size: 1rem;
    }

    ul,
    ol {
        margin: 0.875rem 0;
    }

    blockquote {
        margin: 0.875rem 0;
        padding: 0.5rem 0.75rem 0.5rem 1.25rem;
    }

    img {
        margin: 0.875rem 0;
    }

    a,
    button,
    .btn {
        padding: 0.4375rem 0.875rem;
        margin: 0.0625rem;
    }
}

/* 超小屏幕手机样式 */
@media (max-width: 360px) {
    body {
        font-size: 15px;
    }

    h1 {
        font-size: 1.6rem;
    }

    h2 {
        font-size: 1.4rem;
    }

    h3 {
        font-size: 1.2rem;
    }

    pre {
        font-size: 0.8rem;
        padding: 0.625rem;
    }

    code {
        font-size: 0.8rem;
    }
}

/* 横屏适配 */
@media (max-height: 500px) and (orientation: landscape) {

    h1,
    h2,
    h3 {
        margin-top: 0.5rem;
        margin-bottom: 0.25rem;
    }

    .bd-content {
        padding: 0 1rem;
    }

    pre {
        max-height: 60vh;
    }
}

/* 优化代码块滚动 */
.highlight {
    overflow-x: auto;
    margin: 1rem 0;
    border-radius: 4px;
}

/* 优化长文本换行 */
p,
li,
dd,
td,
th {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* 优化焦点样式 */
:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* 优化触摸反馈 */
button,
a,
.btn,
input,
select,
textarea {
    -webkit-tap-highlight-color: var(--color-tap-highlight);
}

/* 优化滚动条 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--color-scrollbar-thumb);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-scrollbar-thumb-hover);
}

/* 优化打印样式 */
@media print {
    body {
        font-size: 12pt;
        line-height: 1.5;
    }

    pre,
    code {
        font-size: 10pt;
    }
}

/* ================================= 窄屏导航与排版增强 ================================= */

/* 前后页导航在移动端更紧凑 */
@media (max-width: 576px) {
    .bd-footer-article {
        flex-direction: column;
        gap: 0.75rem;
        padding: 0.75rem 0;
    }
    .bd-footer-article .footer-article-button {
        font-size: 0.875rem;
        padding: 0.5rem 0.75rem;
    }
}

/* 移动端文章标题区域优化 */
@media (max-width: 768px) {
    article h1:first-of-type {
        font-size: 1.65rem;
        line-height: 1.35;
        margin-top: 0;
        margin-bottom: 0.75rem;
    }
    /* 代码块在窄屏下减小字号 */
    div.highlight pre {
        font-size: 0.85rem;
        line-height: 1.5;
        padding: 0.75rem;
    }
}

/* 通知横幅可关闭提示 */
@media (max-width: 768px) {
    .bd-header-announcement .bd-header-announcement__content {
        font-size: 0.8rem;
        padding: 4px 8px;
    }
}



/* ================================= 移动端 offcanvas 侧边栏背景修复 ================================= */
/* PyData 主题在移动端将导航栏移入 offcanvas，默认透明背景导致文字不可读 */
@media (max-width: 768px) {
    .offcanvas,
    .offcanvas-start,
    .offcanvas-end,
    .navbar-expand .offcanvas,
    .bd-sidebar-primary[class*="offcanvas"] {
        background-color: var(--color-bg) !important;
        color: var(--color-text) !important;
    }
    .offcanvas-header {
        background-color: var(--color-bg-secondary) !important;
        border-bottom: 1px solid var(--color-border) !important;
    }
    .offcanvas-header .navbar-brand,
    .offcanvas-header .offcanvas-title {
        color: var(--color-text) !important;
        visibility: visible !important;
    }
    .offcanvas .nav-link,
    .offcanvas .navbar-nav .nav-link,
    .offcanvas .sidebar-nav-item a {
        color: var(--color-text) !important;
    }
    .offcanvas .nav-link:hover,
    .offcanvas .sidebar-nav-item a:hover {
        background-color: var(--color-bg-secondary) !important;
        color: var(--color-accent) !important;
    }
}

/* offcanvas 遮罩层半透明 */
.offcanvas-backdrop {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

/* 工具栏按钮对比度修复 */
.bd-header-article .btn:not(.bd-sidebar-toggle),
.bd-header-article__inner .btn:not(.bd-sidebar-toggle) {
    color: #fff !important;
}

/* 超窄屏代码块折行 */
@media (max-width: 480px) {
    div.highlight pre,
    pre.literal-block {
        white-space: pre-wrap !important;
        word-break: break-word !important;
    }
}

/* 减少动画偏好支持 */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* 暗色模式：非颜色相关覆盖（颜色通过 CSS 变量自动切换） */
@media (prefers-color-scheme: dark) {
    body {
        color: var(--color-text);
        background-color: var(--color-bg);
    }

    pre {
        background-color: var(--color-code-bg);
        border-color: var(--color-border);
    }

    code {
        background-color: var(--color-code-bg);
        color: var(--color-text);
    }

    table {
        color: var(--color-text);
    }

    th {
        background-color: var(--color-bg-secondary);
        border-color: var(--color-border);
    }

    td {
        border-color: var(--color-border);
    }

    blockquote {
        background-color: var(--color-quote-bg);
        border-left-color: var(--color-quote-border);
        color: var(--color-text);
    }

    .admonition {
        background-color: var(--color-bg-secondary);
        border-color: var(--color-border);
        color: var(--color-text);
    }

    a {
        color: var(--color-accent);
    }

    hr {
        border-top-color: var(--color-border);
    }
}