/* ========================================
   响应式布局优化 - 适配 4K/2K/1920/手机
   ======================================== */

/* ── 超大屏幕 (4K, 2560px+) ── */
@media only screen and (min-width: 2000px) {
  :root {
    --max-layout-width: 1200px !important;
    --normal-layout-width: 800px !important;
  }
  .content {
    max-width: var(--max-layout-width) !important;
  }
  #image-container-home {
    max-width: 18rem !important;
  }
  #home-banner-header {
    font-size: 3.2rem !important;
  }
  .content p, .content li {
    font-size: 1.1rem !important;
  }
  .content h1 { font-size: 2.2rem !important; }
  .content h2 { font-size: 1.8rem !important; }
  .content h3 { font-size: 1.4rem !important; }
}

/* ── 大屏幕 (1920px-1999px) ── */
@media only screen and (min-width: 1600px) and (max-width: 1999px) {
  :root {
    --max-layout-width: 1100px !important;
  }
  .content {
    max-width: var(--max-layout-width) !important;
  }
}

/* ── 平板 (768px-999px) ── */
@media only screen and (max-width: 999px) {
  .content {
    padding-inline: 1.5rem !important;
  }
  #home-banner-header {
    font-size: 2.2rem !important;
  }
  #image-container-home {
    max-width: 10rem !important;
  }
}

/* ════════════════════════════════════
   手机端导航 — 汉堡菜单
   ════════════════════════════════════ */
@media only screen and (max-width: 768px) {
  /* 汉堡菜单按钮 — 最左侧 */
  .nav-toggle {
    display: block !important;
    position: static !important;
    cursor: pointer;
    background: none;
    border: none;
    padding: 4px 0;
    margin: 0;
    color: var(--text-color, #222);
    flex-shrink: 0;
  }
  .nav-toggle svg {
    width: 24px;
    height: 24px;
    display: block;
  }
  /* 导航标题与汉堡按钮靠左 */
  .navbar > div:first-child {
    gap: 0 !important;
  }

  /* 导航链接容器 — 默认隐藏 */
  #nav-navs {
    display: none !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--background-color, #fff);
    z-index: 1000;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    box-sizing: border-box;
  }
  #nav-navs.open {
    display: flex !important;
  }
  #nav-navs ul {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }
  #nav-navs .nav-links {
    font-size: 1.2rem !important;
    padding: 0.8rem 1.5rem !important;
    line-height: 1.5 !important;
  }

  /* 图标组（搜索/主题）移到右侧 */
  .navbar .menu-icons-group {
    margin-left: auto !important;
  }

  /* 已有navbar flex布局调整 — 保证按钮在左侧 */
  .navbar {
    position: relative;
    flex-direction: row !important;
    align-items: center !important;
    min-height: 3.5rem;
  }
}

/* 隐藏汉堡按钮的大屏样式 */
.nav-toggle {
  display: none;
}

/* ════════════════════════════════════
   表格 — 移动端横向滚动
   ════════════════════════════════════ */
@media only screen and (max-width: 768px) {
  .content table,
  article table,
  .post-content table {
    display: block;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .content table::-webkit-scrollbar,
  article table::-webkit-scrollbar {
    height: 4px;
  }
  .content table::-webkit-scrollbar-thumb,
  article table::-webkit-scrollbar-thumb {
    background: var(--meta-color, #999);
    border-radius: 2px;
  }
}

/* ════════════════════════════════════
   搜索弹窗 — 移动端优化
   ════════════════════════════════════ */
@media only screen and (max-width: 768px) {
  #searchModal {
    padding: 0 !important;
    align-items: flex-start !important;
    padding-top: 10vh !important;
  }
  #searchModal #modal-content {
    width: 94% !important;
    max-width: 94% !important;
    margin: 0 auto !important;
  }
  #searchModal #searchInput {
    font-size: 16px !important; /* 防 iOS 自动缩放 */
  }
}

/* ════════════════════════════════════
   手机 (600px以下)
   ════════════════════════════════════ */
@media only screen and (max-width: 600px) {
  .content {
    padding-inline: 1rem !important;
  }
  #home-banner-header {
    font-size: 1.6rem !important;
  }
  #home-banner-text {
    font-size: 1rem !important;
    line-height: 1.5rem !important;
  }
  #image-container-home {
    max-width: 8rem !important;
  }
  .navbar {
    padding-inline: 0.8rem !important;
  }
  .nav-title .home-title {
    font-size: 0.9rem !important;
  }
  .nav-links {
    font-size: 0.85rem !important;
  }
  .card {
    width: 100% !important;
  }
  #tag-cloud {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ── 手机端显示浮动按钮 ── */
@media (max-width: 700px) {
  #button-container {
    display: flex !important;
  }
}

/* 首页头像链接去掉下划线 */
#image-container-home a {
  text-decoration: none !important;
  border-bottom: none !important;
}

/* ════════════════════════════════════
   备案信息 — 手机端换行显示
   ════════════════════════════════════ */
@media only screen and (max-width: 600px) {
  .beian-sep { display: none !important; }
  .beian-br { display: block !important; }
}
@media only screen and (min-width: 601px) {
  .beian-sep { display: inline !important; }
  .beian-br { display: none !important; }
}

/* ── 小屏手机 (400px以下) ── */
@media only screen and (max-width: 400px) {
  #home-banner-header {
    font-size: 1.3rem !important;
  }
  .content {
    padding-inline: 0.6rem !important;
  }
  #tag-cloud {
    grid-template-columns: 1fr !important;
  }
  .nav-navs ul {
    gap: 0.3rem !important;
  }
  .nav-links {
    font-size: 0.8rem !important;
  }
}

/* ════════════════════════════════════
   代码块 — 小屏优化
   ════════════════════════════════════ */
@media only screen and (max-width: 600px) {
  pre {
    font-size: 0.7rem !important;
    padding-inline: 0.6rem !important;
  }
}