/**
 * 前台顶栏（layout/default 导航区域）站点级样式
 * 依赖：frontend.css（Bootstrap 导航基础）
 * 说明：后续全站换色、导航结构统一时优先改本文件与 frontend-layout-footer.css
 */

/* HTML hidden 属性：覆盖下方 nav-tag-item 的 display:flex，否则仍会显示 */
.navbar-white .navbar-nav.navbar-cycling-tabs > li.nav-tag-item[hidden] {
  display: none !important;
}

:root {
  --layout-header-nav-tag-radius: 6px;
  --layout-header-nav-tag-text: #555;
  --layout-header-nav-tag-active-bg: #4caf50;
  --layout-header-nav-tag-active-text: #fff;
  --layout-header-nav-tag-hover-bg: #f7f7f7;
  --layout-header-nav-tag-hover-text: #007bff;
  --layout-header-bar-inner-height: 60px;
}

/* 顶栏标签导航：首页 / 骑行日记等统一胶囊高度，在顶栏行内垂直居中 */
@media (min-width: 768px) {
  .navbar-white .navbar-nav.navbar-cycling-tabs {
    margin: 0 0 0 12px;
    float: left;
  }
  .navbar-white .navbar-nav.navbar-cycling-tabs > li.nav-tag-item {
    float: left;
    display: flex;
    align-items: center;
    height: var(--layout-header-bar-inner-height);
  }
  .navbar-white .navbar-nav > li.nav-tag-item > a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: auto !important;
    min-height: 0;
    line-height: 1.35 !important;
    padding: 7px 14px !important;
    margin: 0;
    color: var(--layout-header-nav-tag-text);
    border-radius: var(--layout-header-nav-tag-radius);
    box-sizing: border-box;
    white-space: nowrap;
  }
  .navbar-white .navbar-nav > li.nav-tag-item > a .fa {
    line-height: 1;
  }
  .navbar-white .navbar-nav > li.nav-tag-item.active > a,
  .navbar-white .navbar-nav > li.nav-tag-item.active > a:hover,
  .navbar-white .navbar-nav > li.nav-tag-item.active > a:focus {
    background-color: var(--layout-header-nav-tag-active-bg) !important;
    color: var(--layout-header-nav-tag-active-text) !important;
  }
  .navbar-white .navbar-nav > li.nav-tag-item:not(.active) > a:hover,
  .navbar-white .navbar-nav > li.nav-tag-item:not(.active) > a:focus {
    background-color: var(--layout-header-nav-tag-hover-bg) !important;
    color: var(--layout-header-nav-tag-hover-text) !important;
  }
}

@media (max-width: 767px) {
  .navbar-white .navbar-nav.navbar-cycling-tabs {
    margin: 0;
  }
  .navbar-white .navbar-nav > li.nav-tag-item > a {
    display: flex !important;
    align-items: center;
    gap: 8px;
    height: auto !important;
    line-height: 1.42857143 !important;
    padding: 12px 15px !important;
    color: var(--layout-header-nav-tag-text);
    border-radius: 0;
  }
  .navbar-white .navbar-nav > li.nav-tag-item.active > a {
    background-color: var(--layout-header-nav-tag-active-bg) !important;
    color: var(--layout-header-nav-tag-active-text) !important;
  }
}