/* ==========================================================
   白话 · 自定义样式
   ----------------------------------------------------------
   引入   由插件 CustomCSS 在 <head> 加载
   维护   只改这个文件，刷新即生效
   ========================================================== */

:root {
  /* 二级菜单宽度：想调整只改这一个值，居中位置会自动跟着算 */
  --dropdown-w: 11em;
}

@media screen and (min-width: 992px) {

  /* ---------- 1. 顶部导航左对齐 ---------- */
  header > .container {
    justify-content: flex-start;
  }
  header > .container > .left {
    margin-right: 2.5em;
  }
  header > .container > .right {
    flex: 1;
    justify-content: space-between;
  }

  /* ---------- 2. 二级菜单宽度与居中 ---------- */
  .nav-items > .item .nav-child-box {
    width: var(--dropdown-w);
    left: calc(50% - var(--dropdown-w) / 2);
  }

  /* ---------- 3. 二级菜单文字左对齐 ---------- */
  /* 选择器必须写到 .item a，否则会被主题的同名规则覆盖 */
  .nav-child-box .nav-child-items > .item a {
    text-align: left;
    white-space: nowrap;
    padding: 8px 12px;
    border-radius: 6px;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  }

  /* ---------- 4. 下拉面板圆角，与站点卡片统一 ---------- */
  .nav-child-box .nav-child-items {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }

}