/**
 * 拾光主题 · 布局样式
 * 顶部导航 / 页脚 / 移动端底部导航 / 主内容区
 */

/* ============================================================
   顶部导航
   ============================================================ */

.sg-header{
  position: sticky;
  top: 0;
  z-index: var(--sg-z-nav);
}

.sg-header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sg-sp-6);
  height: var(--sg-nav-h);
}

.sg-logo{
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em;
  background: var(--sg-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-decoration: none;
  flex-shrink: 0;
}

.sg-nav-desktop{
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.sg-nav-links{
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sg-nav-links li{
  list-style: none;
}

.sg-nav-links a{
  display: block;
  padding: 8px 14px;
  font-size: var(--sg-fs-base);
  font-weight: 500;
  color: var(--sg-text-2);
  text-decoration: none;
  border-radius: 9px;
  transition: all var(--sg-dur-fast) var(--sg-ease);
}

.sg-nav-links a:hover{
  color: var(--sg-text);
  background: rgba(0, 0, 0, .035);
}

.sg-nav-links .current-menu-item > a,
.sg-nav-links .current_page_item > a,
.sg-nav-links .current-menu-ancestor > a{
  color: var(--sg-accent);
  background: var(--sg-accent-soft);
}

.sg-header-actions{
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.sg-icon-btn{
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: var(--sg-text-2);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--sg-dur-fast) var(--sg-ease);
}

.sg-icon-btn:hover{
  color: var(--sg-text);
  background: rgba(0, 0, 0, .04);
}

.sg-icon-btn:active{
  transform: scale(.94);
}

/* ============================================================
   主内容区
   ============================================================ */

.sg-main{
  position: relative;
  z-index: var(--sg-z-base);
  min-height: 60vh;
}

/* ============================================================
   页脚
   ============================================================ */

.sg-footer{
  margin-top: 60px;
  border-top: 1px solid var(--sg-line);
  background: rgba(255, 255, 255, .45);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  position: relative;
  z-index: var(--sg-z-base);
}

.sg-footer-inner{
  display: flex;
  flex-wrap: wrap;
  gap: var(--sg-sp-10);
  justify-content: space-between;
  padding-top: var(--sg-sp-12);
  padding-bottom: var(--sg-sp-8);
}

.sg-footer-brand{
  max-width: 280px;
}

.sg-footer-brand .sg-logo{
  display: inline-block;
  margin-bottom: 11px;
  font-size: 19px;
}

.sg-footer-desc{
  font-size: 13px;
  color: var(--sg-text-2);
  line-height: 1.62;
}

@media (max-width: 768px){

  .sg-footer-desc{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12.5px;
    line-height: 1.55;
  }
}

.sg-footer-cols{
  display: flex;
  gap: 56px;
  flex-wrap: wrap;
}

.sg-footer-col h4{
  font-size: 11.5px;
  font-weight: 700;
  color: var(--sg-text-3);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 14px;
}

.sg-footer-col ul{
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 0;
  margin: 0;
}

.sg-footer-col a{
  font-size: 13px;
  color: var(--sg-text-2);
  text-decoration: none;
  transition: color var(--sg-dur-fast) var(--sg-ease);
}

.sg-footer-col a:hover{
  color: var(--sg-accent);
}

.sg-footer-bottom{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: var(--sg-sp-5);
  padding-bottom: var(--sg-sp-8);
  border-top: 1px solid var(--sg-line);
  font-size: 12px;
  color: var(--sg-text-3);
}

/* ============================================================
   移动端底部导航
   桌面端隐藏，移动端显示
   ============================================================ */

.sg-bottom-nav{
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--sg-z-sticky);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.sg-bottom-nav-inner{
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 8px 8px;
  min-height: var(--sg-bottom-nav-h);
}

.sg-bottom-nav-item{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 0;
  color: var(--sg-text-3);
  text-decoration: none;
  font-size: 10px;
  font-weight: 500;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color var(--sg-dur-fast) var(--sg-ease);
  -webkit-tap-highlight-color: transparent;
}

.sg-bottom-nav-item.active{
  color: var(--sg-accent);
}

.sg-bottom-nav-item:active{
  transform: scale(.9);
}

/* ============================================================
   响应式
   ============================================================ */

@media (max-width: 768px){

  .sg-bottom-nav{
    display: block;
  }

  .sg-main{
    padding-bottom: calc(var(--sg-bottom-nav-h) + 20px);
  }

  .sg-nav-desktop{
    display: none;
  }

  .sg-footer{
    margin-top: 40px;
  }

  .sg-footer-inner{
    gap: var(--sg-sp-8);
    padding-top: var(--sg-sp-8);
  }

  .sg-footer-cols{
    gap: 32px;
  }
}

@media (max-width: 480px){

  .sg-header-inner{
    height: var(--sg-nav-h-mobile);
  }

  .sg-logo{
    font-size: 17px;
  }
}

/* ============================================================
   移动端底部导航 · 强化（避免和页脚视觉混淆）
   ============================================================ */

@media (max-width: 768px){

  .sg-bottom-nav{
    display: block;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, .06);
  }

  .sg-bottom-nav-inner{
    background: rgba(255, 255, 255, .85) !important;
    -webkit-backdrop-filter: saturate(180%) blur(24px) !important;
    backdrop-filter: saturate(180%) blur(24px) !important;
    border-top: 1px solid rgba(0, 0, 0, .06);
  }

  .sg-bottom-nav-item{
    color: var(--sg-text-3) !important;
  }

  .sg-bottom-nav-item.active{
    color: var(--sg-accent) !important;
  }

  .sg-bottom-nav-item svg{
    stroke: currentColor !important;
  }
}