/**
 *Copyright (C), 2025, GOSUN CL
 *file: header.css
 *brief: 视评图说主题
 *Theme URI: https://faq7777.com
 *author: 视评图说
 *date: 2025年7月7日
 *version: 7.7.0
 */
/* Header模块样式 - 全局重置样式已移至base.css */

/* header module: top, topbar, header, search, top buttons */

body{position:relative;}
body::before{content:'';display:block;width:100%;height:100%;background:url("../images/bg.jpg") no-repeat top center;background-size:cover;position:fixed;left:0;top:0;filter:brightness(0.7);z-index:-1;}
#top{position:relative;padding-bottom:80px;}
#topbar{color:#ffffff;position:relative;z-index:2;}
#topbar .inner{overflow:hidden;display:flex;justify-content:space-between;align-items:center;}
#top-logo{flex-shrink:0;}
#top-logo img{height:33px;}
#topbar a{color:#ffffff;text-decoration:none;transition:color 0.3s ease;}
#welcome{flex:1;}
#welcome,#pagelist{line-height:2em;font-size:14px;padding:8px 0;color:#ffffff;}
#pagelist{flex:2;margin-left:20px;}
#pagelist ul{display:flex;gap:15px;}
#pagelist li{position:relative;padding-left:15px;}
#pagelist li::after{width:1px;height:10px;background-color:rgba(255, 255, 255, 0.3);content:'';display:block;position:absolute;left:0;top:50%;margin-top:-5px;}
#pagelist li:first-child::after{display:none;}
#pagelist li:first-child{padding-left:0;}
#topauth{flex:1;text-align:right;padding-right:20px;}
#topauth a{position:relative;padding-left:15px;font-size:14px;}
#topauth a.btn{background: transparent; color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.3);}
#topauth a.btn:hover{background: rgba(255, 255, 255, 0.1);}
#topauth a:not(:first-child)::before{content:'';display:block;width:1px;height:10px;background-color:rgba(255, 255, 255, 0.3);position:absolute;left:7px;top:50%;margin-top:-5px;}
#header{position:relative;z-index:2;padding:120px 0 45.5px;background: transparent;}
#header .inner{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;margin:0 auto;width:100%;max-width:1400px;gap:80px;}
#topGG{flex-shrink:0;order:1;margin-right:20px;}
#search{flex:1;max-width:none;order:2;align-self:center;width:50%;}
#logo{position:relative;}
#logo a{display:block;position:relative;}
#topGG a{display:block;}
#topGG img{display:block;width:468px;height:96px;object-fit:contain;border-radius:8px;}
#search{padding-left:20px;padding-right:20px;}


/* 面包屑导航样式 */
.breadcrumb {
        font-size: 14px;
        line-height: 1.5em;
        margin-bottom: 20px;
        padding: 10px 15px;
        background-color: #f9f9f9;
        border-radius: 3px;
}

.breadcrumb a {
        color: #006abe;
}

.breadcrumb a:hover {
        color: #004a8f;
}

.breadcrumb a::after {
        content: '»';
        margin: 0 8px;
        color: #888;
}

.breadcrumb a:last-child::after {
        display: none;
}

#breadcrumb {
        font-size: 14px;
        line-height: 1.5em;
        color: #999;
        float: right;
}

#breadcrumb a {
        color: #999;
        padding-right: 0;
        font-size: 14px;
}

#breadcrumb a::after {
        display: none;
}

#breadcrumb .home {
        background: url("../images/icon_home.png") no-repeat left;
        background-size: auto 14px;
        padding-left: 20px;
}

#breadcrumb i {
        font-style: normal;
        font-family: Simsun;
        margin: 0 5px 0 3px;
        color: #999;
}
/* 搜索框样式已移至 #header #search 部分 */

/* 主导航 */
#nav{margin-top:-27.5px;position:relative;z-index:2;background: transparent;border: none;}

/* 主菜单容器：大气现代风格 */
#nav .inner{
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  padding: 0;
  width: 100%;
  max-width: 100%;
}

/* 导航项：现代简约风格 */
#nav ul{display:flex; flex-wrap:nowrap; gap: 15px; justify-content: center;}
#nav li{line-height:40px; position:relative; font-size:14px; font-weight: 500; width: auto; padding: 0 18px; transition: all 0.3s ease; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 20px; margin: 10px 0;}
#nav li a{color:#ffffff; display:block; position:relative; text-decoration: none; transition: all 0.3s ease;}

/* 悬停效果 */
#nav li:hover{
  background-color: rgba(255, 255, 255, 0.1);
}



#nav li.current-menu-item,
#nav li.current-menu-parent,
#nav li.current_page_item{
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

#nav li.current-menu-item > a,
#nav li.current-menu-parent > a,
#nav li.current_page_item > a{
  color: #ffffff;
  font-weight: 500;
  background: none;
}

/* 下拉菜单：现代风格 */
#nav li ul{
  position:absolute;
  left:0;
  top:100%;
  width:200px;
  background: rgba(26, 54, 93, 0.95);
  border: none;
  border-radius: 0 0 8px 8px;
  box-shadow:0 8px 16px rgba(0, 0, 0, 0.15);
  padding:8px 0;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px);
  z-index: 1000;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

#nav li:hover > ul{
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

/* 确保所有内容显示在背景图上方 */
#wrapper{
  position:relative;
  z-index:2;
  background: transparent;
  min-height: 100vh;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

#footer{
  position:relative;
  z-index:2;
  background: rgba(26, 54, 93, 0.7);
  color: #ffffff;
}

#nav li li{text-align:left;display:block;font-weight:normal;width:auto;line-height:45px; padding: 0 16px;}

#nav li li:hover{
  background-color: rgba(66, 153, 225, 0.2);
}

#nav li li a{
  font-size:14px;
  font-weight: 400;
}

#nav li li a::after{
  display: none;
}

#nav li li:hover a{
  color: #4299e1;
}

/* 导航下拉箭头 */
#nav li.hasSub > a::after{
  content:'';
  width:5px;
  height:5px;
  border-right:1px solid #fff;
  border-bottom:1px solid #fff;
  transform:rotate(45deg);
  transition:all .3s;
  display:inline-block;
  vertical-align:middle;
  margin:-5px 0 0 5px;
}
#nav li:hover > a::after{
  transform:rotate(225deg);
}

/* UI 改进：玻璃搜索和玻璃导航 */
#header #search{padding-left:20px;padding-right:20px;}

#header #search form{
  width: 100%;
  max-width: none;
  margin: 0 auto;
  border-radius: 20px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  align-items: center;
  height: 40px;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

#header #search form:focus-within{
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  border-color: #1e88e5;
}

#header #search .text{
  flex: 1;
  width: 100%;
  padding: 0 15px;
  height: 100%;
  line-height: 40px;
  font-size: 14px;
  background: transparent;
  color: #fff;
  text-indent: 0;
  margin: 0;
  display: block;
  border: none;
  outline: none;
}

#header #search .text::placeholder{
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

#header #search .submit{
  width:50px;
  height:40px;
  background: #1e88e5;
  border-radius: 0 20px 20px 0;
  transition: background-color 0.3s ease, transform 0.1s ease;
}

#header #search .submit:hover{
  background-color: #1976d2;
  transform: scale(1.02);
}

#header #search .submit:active{
  transform: scale(0.98);
}

/* 响应式设计 - 1280px */
@media (max-width: 1280px) {
  #header{padding:3.9% 0 45.5px;}
  #logo{width:214px;}
  #search form{width:53.33%;}
  #search .text{height:40px;line-height:40px;}
  #search .submit{width:56px;height:44px;}
  #search .input{margin-right:0;}
  #nav li{line-height:50px;}
  /* 导航项过多：横向滚动避免压缩 */
  #nav .inner { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #nav ul { flex-wrap: nowrap; }
  #nav li { width: auto; flex: 0 0 auto; }
}

/* 更窄桌面区间改为折行（1025-1200） */
@media (max-width: 1200px) and (min-width: 1025px) {
  #nav .inner { overflow-x: visible; }
  #nav ul { flex-wrap: wrap; }
}

/* 桌面端搜索框宽度缩小约 1/3（统一至 ~53.33%） */
@media (min-width: 1025px) {
  #header #search form,
  #search form {
    width: 100%;
  }
  /* 增加 Logo 与搜索框的间距，以及搜索框与广告间距 */
  #header #search {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* 全屏自适应设置 */
  #topbar .inner,
  #header .inner,
  #nav .inner {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }
}

/* 广告位中等屏幕适配 */
@media (max-width: 1024px) {
  #topGG {
    width: 100%;
    max-width: 468px;
  }
  #topGG img {
    width: 100%;
    height: auto;
  }
}

/* 顶部按钮样式 */
#topBtn {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  z-index: 3;
}

#schBtn {
  display: none;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: #fff;
  font-size: 16px;
  transition: all 0.3s ease;
  text-decoration: none;
}

#schBtn:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

/* 搜索按钮图标 */
#schBtn::before {
  content: "🔍";
  font-size: 18px;
}

/* 响应式设计 - 1024px 以下 */
@media (max-width: 1024px) {
  #schBtn {
    display: block;
  }
  
  /* 导航菜单适配 */
  #nav ul {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }
  
  #nav li {
    flex: 0 0 calc(25% - 7.5px);
    max-width: calc(25% - 7.5px);
    margin: 8px 0;
  }
}

/* 响应式设计 - 768px 以下 */
@media (max-width: 768px) {
  /* 页面宽度限制 */
  #top,
  #topbar,
  #header,
  #nav {
    width: 100%;
    overflow-x: hidden;
  }

  #topbar .inner,
  #header .inner,
  #nav .inner {
    width: 100%;
    max-width: 100%;
  }

  #topBtn {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
  }

  #schBtn {
    display: block;
  }

  /* 顶部栏 */
  #topbar .inner {
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 5px 15px;
  }

  #welcome,
  #pagelist,
  #topauth {
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 2px 0;
  }

  #pagelist ul {
    justify-content: center;
    gap: 10px;
  }

  #pagelist li {
    padding-left: 10px;
  }

  /* 头部 */
  #header {
    padding: 15px 0 18px;
    position: relative;
  }

  #header .inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 0 15px;
  }

  #search {
    display: block;
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    background-color: transparent;
    padding: 0 15px;
    z-index: 2;
  }

  #search form {
    width: 100%;
  }

  #logo {
    width: auto;
  }

  #logo img {
    height: 30px;
    width: auto;
  }

  #search .text {
    font-size: 14px;
  }

  #topGG {
    display: block;
    width: 100%;
    text-align: center;
    margin: 0 auto;
  }

  #topGG img {
    width: 100%;
    height: auto;
    max-width: 150px;
  }


  /* 导航 */
  #nav {
    margin-top: 0;
  }

  #nav .inner {
    padding: 0;
  }

  #nav ul {
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
    gap: 8px;
  }

  #nav li {
    line-height: 30px;
    font-size: 13px;
    font-weight: 500;
    padding: 0 12px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    margin: 5px 0;
    white-space: nowrap;
    flex: 0 0 calc(25% - 6px);
    max-width: calc(25% - 6px);
  }

  #nav li a {
    background: transparent;
    color: #ffffff;
    display: block;
    text-decoration: none;
    transition: all 0.3s ease;
    text-align: center;
    height: 100%;
    line-height: 30px;
    padding: 0 2px;
  }

  #nav li a:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  /* 下拉菜单移动端适配 */
  #nav li ul {
    width: auto;
    min-width: 150px;
    max-width: 90vw;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
  }

  #nav li:hover > ul {
    transform: translateX(-50%) translateY(0);
  }

  /* 面包屑导航 */
  #breadcrumb {
    line-height: 22px;
  }

  #breadcrumb a {
    font-size: 12px;
  }

  #breadcrumb .home {
    background-size: auto 12px;
    padding-left: 18px;
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  /* 图标显色增强 */
  #header #search .submit{ opacity: 0.95; filter: brightness(1.05) contrast(1.1); }

  /* 顶部按钮在暗色下边框/对比增强 */
  #topauth a.btn{ border-color: rgba(255, 255, 255, 0.25); }
  #topauth a.btn.btn-primary{ box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35); }
  #topauth a.btn.btn-ghost:hover{ background: rgba(255, 255, 255, 0.08); }

  /* 顶栏/导航在深色下降低亮度以保证文字对比 */
  #topbar{ background: rgba(26, 54, 93, 0.8); }
  #nav .inner{
    background: transparent;
    border-color: rgba(255, 255, 255, 0.18);
  }
}