/* =========================================================
   邹鲁网 · 视觉升级 v2（覆盖式样式表）
   原则：只覆盖与扩展，不改 style.css 任何一行；
        摘掉 index.html 里这一行 <link> 即可整体回滚。
   参考：城市联盟(ccoo)类地方门户 —— 厚重的头部与导航、
        分明的板块结构、有分量的标题、深色大气页脚。
   ========================================================= */

/* ============ 1. 设计变量覆盖 ============ */
:root {
  /* 主色加深：藏蓝 → 门户蓝，气质更沉稳大气 */
  --zl-primary-deep: #0a2c66;
  --zl-primary: #1257b8;
  --zl-primary-light: #3d7fe0;
  --zl-accent: #c23b22;           /* 点缀色改为朱砂红：邹鲁文化印记 */
  --zl-accent-light: #ffd9cf;
  --zl-dark: #0b1526;             /* 顶栏/页脚更深的墨蓝 */
  --zl-radius: 12px;
  --zl-radius-lg: 16px;
  --zl-shadow: 0 1px 2px rgba(11, 21, 38, .05), 0 4px 14px rgba(11, 21, 38, .07);
  --zl-shadow-hover: 0 14px 34px rgba(11, 21, 38, .16);
  --zl-nav-h: 54px;
}

/* ============ 2. 顶部通栏：更厚重 ============ */
.zl-topbar {
  background: linear-gradient(90deg, #060d1a, var(--zl-dark) 40%, #12233f);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.zl-topbar a:hover { color: #fff; }
.zl-topbar .hot { color: #ffb199; }

/* ============ 3. 站点头部：更大气 ============ */
.zl-header { padding: 22px 0 18px; border-bottom: 0; }
.zl-header .container { align-items: center; }

.zl-logo .mark {
  font-size: 46px;
  letter-spacing: 4px;
  background: linear-gradient(135deg, var(--zl-primary-deep), var(--zl-primary) 60%, var(--zl-primary-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.zl-logo .sub { border-left: 2px solid var(--zl-primary); padding-left: 14px; }
.zl-logo .sub b { font-size: 15px; letter-spacing: 1px; }

.zl-search .el-input__wrapper { border-radius: 8px 0 0 8px; }
.zl-search .el-input-group__append {
  border-radius: 0 8px 8px 0;
  background: linear-gradient(135deg, var(--zl-primary), var(--zl-primary-deep));
}

.zl-header .hotline {
  background: var(--zl-primary-soft);
  border: 1px solid #d8e6fb;
  border-radius: var(--zl-radius);
  padding: 8px 16px 8px 44px;
  position: relative;
}
.zl-header .hotline::before {
  content: '☎';
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-size: 20px; color: var(--zl-primary);
}
.zl-header .hotline .lbl { color: var(--zl-text-sub); }
.zl-header .hotline .num { color: var(--zl-primary-deep); font-size: 21px; }

/* ============ 4. 主导航：藏蓝渐变 + 更大字 ============ */
.zl-nav {
  background: linear-gradient(90deg, #081f4d, var(--zl-primary-deep) 30%, var(--zl-primary) 85%);
  box-shadow: 0 3px 14px rgba(8, 31, 77, .35);
}
.zl-nav .item { font-size: 16.5px; letter-spacing: 1px; padding: 0 22px; }
.zl-nav .item:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .04)); }
.zl-nav .item.active::after { border-bottom-color: var(--zl-accent-light); }
.zl-nav .sf a {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 99px;
  padding: 4px 14px;
  transition: background .2s ease;
}
.zl-nav .sf a:hover { background: var(--zl-accent); border-color: var(--zl-accent); color: #fff; }

.zl-nav .dropdown .sub { border-top: 2px solid var(--zl-primary); }

/* ============ 5. 栏目快捷链接条（新增，城市联盟经典形式） ============ */
.zl-channellinks {
  background: var(--zl-white);
  border-bottom: 1px solid var(--zl-border);
  box-shadow: 0 1px 0 rgba(11, 21, 38, .02);
}
.zl-channellinks .container {
  display: flex; align-items: center; flex-wrap: wrap;
  min-height: 40px; padding-top: 6px; padding-bottom: 6px;
  font-size: 13px; line-height: 28px;
}
.zl-channellinks .lbl {
  color: #fff; background: linear-gradient(135deg, var(--zl-primary), var(--zl-primary-deep));
  border-radius: 4px; padding: 0 10px; margin-right: 14px;
  font-weight: 600; letter-spacing: 2px; flex-shrink: 0;
}
.zl-channellinks a {
  color: var(--zl-text-sub); padding: 0 10px;
  position: relative; white-space: nowrap; transition: color .2s ease;
}
.zl-channellinks a + a::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 12px; background: var(--zl-border-strong);
}
.zl-channellinks a:hover { color: var(--zl-accent); font-weight: 600; }
.zl-channellinks .em { color: var(--zl-accent); font-weight: 600; }

/* ============ 6. 焦点区：更有分量 ============ */
.zl-focus { padding: 18px; border-radius: var(--zl-radius-lg); }
.zl-focus .slider .slide-cap {
  font-size: 17px; font-weight: 600;
  padding: 44px 20px 16px;
  background: linear-gradient(transparent, rgba(6, 13, 26, .82));
}
.zl-focus .headlines .hl-title {
  font-size: 23px; color: var(--zl-primary-deep);
}
.zl-focus .headlines .hl-list .tag {
  color: var(--zl-accent); font-weight: 600;
}

/* 轮播图未上传图片时的品牌渐变兜底：绝不出现白块 */
.zl-focus .slider .slide-item.noimg {
  background:
    radial-gradient(560px 280px at 85% -10%, rgba(77, 148, 240, .55), transparent 62%),
    radial-gradient(420px 240px at 6% 118%, rgba(194, 59, 34, .30), transparent 55%),
    linear-gradient(120deg, #081f4d, #0a2c66 45%, #1257b8);
}
.zl-focus .slider .slide-item.noimg::before {
  content: '邹';
  position: absolute; right: -16px; bottom: -64px;
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: 230px; line-height: 1;
  color: rgba(255, 255, 255, .07);
  pointer-events: none;
}
.zl-focus .slider .slide-item.noimg .slide-cap {
  padding: 70px 22px 18px; font-size: 21px; letter-spacing: 2px;
  background: none;
  text-shadow: 0 2px 12px rgba(4, 10, 24, .65);
}

/* ============ 7. 快捷宫格：更精致 ============ */
.zl-quick .q-item .ico {
  width: 46px; height: 46px; font-size: 19px;
  background: linear-gradient(135deg, var(--zl-primary-light), var(--zl-primary-deep));
  box-shadow: 0 4px 10px rgba(18, 87, 184, .28);
}
.zl-quick .q-item:hover .txt { color: var(--zl-primary-deep); font-weight: 600; }

/* ============ 8. 板块标题：大编号感 + 渐隐延展线 ============ */
.zl-block { border-radius: var(--zl-radius-lg); }
.zl-block .bd-hd {
  padding: 16px 20px;
  border-bottom: 0;
  background: linear-gradient(180deg, #fbfcfe, #f6f8fc);
  position: relative;
}
.zl-block .bd-hd::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--zl-primary) 0, var(--zl-primary) 120px, rgba(18, 87, 184, .12) 320px, transparent 70%);
}
.zl-block .bd-hd h3 { font-size: 20px; letter-spacing: 1px; padding-left: 14px; }
.zl-block .bd-hd h3::before {
  width: 5px; height: 20px;
  background: linear-gradient(180deg, var(--zl-primary-light), var(--zl-primary-deep));
  border-radius: 3px;
}
.zl-block .bd-bd { padding: 18px 20px; }

/* 侧栏小标题同步加重 */
.zl-widget { border-radius: var(--zl-radius-lg); }
.zl-widget .wd-hd h4 { font-size: 17px; }

/* ============ 9. 列表 / 排行榜：朱砂点缀 ============ */
.zl-list.rank li:nth-child(1) .no { background: var(--zl-accent); }
.zl-list.rank li:nth-child(2) .no { background: #e06a4e; }
.zl-list.rank li:nth-child(3) .no { background: #f0a08a; }

/* ============ 10. 卡片：更大气 ============ */
.zl-card { border-radius: var(--zl-radius-lg); }
.zl-card:hover { border-color: #b9d2f7; }
.zl-card .pic { height: 168px; }
.zl-card .pic .badge { background: rgba(194, 59, 34, .92); }
.zl-card .body h4 { font-size: 15.5px; }
.zl-card .body h4:hover { color: var(--zl-primary); }

/* ============ 11. 内页与详情 ============ */
.zl-page .page-hd { border-radius: var(--zl-radius-lg); padding: 18px 22px; }
.zl-page .page-hd h2 { font-size: 24px; letter-spacing: 1px; padding-left: 14px; }
.zl-page .page-hd h2::before {
  width: 5px; height: 24px;
  background: linear-gradient(180deg, var(--zl-primary-light), var(--zl-primary-deep));
}
.zl-page .page-bd { border-radius: var(--zl-radius-lg); padding: 26px; }

.zl-detail .content { border-radius: var(--zl-radius-lg); padding: 36px 40px; }
.zl-detail .content h1 { font-size: 29px; color: var(--zl-dark); }

/* 频道 Tab 选中态加重 */
.zl-channels .ch.on {
  background: linear-gradient(135deg, var(--zl-primary), var(--zl-primary-deep));
  box-shadow: 0 4px 12px rgba(18, 87, 184, .30);
}

/* ============ 12. 页脚：深色大气 + 渐隐顶线 ============ */
.zl-footer {
  background: linear-gradient(180deg, var(--zl-dark), #060d1a);
  border-top: 3px solid var(--zl-primary);
  margin-top: 44px; padding-top: 48px;
}
.zl-footer h5 { color: #fff; font-size: 16px; letter-spacing: 1px; }
.zl-footer .f-cols a:hover { color: #7fb3f5; }
.zl-footer .links { border-top: 1px solid rgba(255, 255, 255, .08); }
.zl-footer .copyright { background: #040910; border-top: 1px solid rgba(255, 255, 255, .05); }

/* ============ 13. 公告条轻微升级 ============ */
.zl-block .bd-hd .tabs span.on { border-bottom-width: 2px; }

/* ============ 14. 首页通栏板块（旅游/商业/友情链接） ============ */
.zl-life .lc-hd { border-bottom-color: var(--zl-primary); }
.zl-life .lc-hd b { color: var(--zl-primary-deep); }
.zl-friend .bd-bd a { background: #fff; }

/* =========================================================
   响应式（本文件自带，覆盖层不依赖 style.css 的媒体查询）
   ========================================================= */
@media (max-width: 1200px) {
  .zl-logo .mark { font-size: 40px; }
  .zl-nav .item { padding: 0 16px; font-size: 15.5px; letter-spacing: 0; }
}

@media (max-width: 992px) {
  .zl-channellinks .container {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; line-height: 30px;
  }
  .zl-channellinks::-webkit-scrollbar { display: none; }
  .zl-channellinks .lbl { flex-shrink: 0; }
  .zl-channellinks a { flex-shrink: 0; }
  .zl-header .hotline { padding: 6px 12px 6px 40px; }
  .zl-header .hotline .num { font-size: 18px; }
}

@media (max-width: 768px) {
  .zl-channellinks { display: none; }   /* 手机端由抽屉导航与宫格承担 */
  .zl-logo .mark { font-size: 30px; letter-spacing: 2px; }
  .zl-focus .headlines .hl-title { font-size: 19px; }
  .zl-block .bd-hd { padding: 13px 14px; }
  .zl-block .bd-hd h3 { font-size: 17px; }
  .zl-block .bd-bd { padding: 13px 14px; }
  .zl-page .page-hd h2 { font-size: 19px; }
  .zl-page .page-bd { padding: 14px; }
  .zl-detail .content { padding: 20px 16px; }
  .zl-detail .content h1 { font-size: 21px; }
  .zl-footer { margin-top: 28px; padding-top: 32px; }
}

@media (max-width: 576px) {
  .zl-logo .mark { font-size: 26px; }
  .zl-card .pic { height: 120px; }
}

@media (max-width: 400px) {
  .zl-logo .mark { font-size: 23px; }
}