/**
 * 「下班后®」导航组件样式
 * 
 * 导航密度选项：
 * - light: Logo + 当前站点 + 返回首页
 * - medium: Logo + 站点切换 + 订阅按钮
 * - full: 完整导航 + 搜索 + 订阅
 */

.xia-nav {
  --nav-bg: var(--bg);
  --nav-border: var(--border);
  --nav-text: var(--text);
  --nav-text-secondary: var(--text-secondary);
  --nav-height: 60px;

  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
  height: var(--nav-height);
}

.xia-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: 100%;
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* ─────────────────────────────────────────────────────────────────
   Logo 区域
   ───────────────────────────────────────────────────────────────── */
.xia-nav-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--nav-text);
  flex-shrink: 0;
}

.xia-nav-brand:hover {
  text-decoration: none;
  color: var(--nav-text);
}

.xia-nav-brand-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--site-accent);
  color: white;
  border-radius: var(--radius-md);
  font-size: 18px;
  font-weight: 700;
}

.xia-nav-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.xia-nav-brand-name {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.xia-nav-brand-tagline {
  font-size: var(--text-xs);
  color: var(--nav-text-secondary);
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* ─────────────────────────────────────────────────────────────────
   站点切换器 (medium/full 密度)
   ───────────────────────────────────────────────────────────────── */
.xia-nav-sites {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 1;
  justify-content: center;
}

.xia-nav-site-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--nav-text-secondary);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) var(--ease-out);
}

.xia-nav-site-link:hover {
  color: var(--nav-text);
  background: var(--bg-muted);
  text-decoration: none;
}

.xia-nav-site-link.active {
  color: var(--site-accent);
  background: var(--site-accent-soft);
  font-weight: 600;
}

.xia-nav-site-link .site-icon {
  font-size: 14px;
}

/* ─────────────────────────────────────────────────────────────────
   右侧操作区
   ───────────────────────────────────────────────────────────────── */
.xia-nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.xia-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 36px;
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--nav-text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  text-decoration: none;
}

.xia-nav-btn:hover {
  color: var(--nav-text);
  background: var(--bg-muted);
  text-decoration: none;
}

.xia-nav-btn svg {
  width: 18px;
  height: 18px;
}

.xia-nav-btn-subscribe {
  background: var(--site-accent);
  color: white;
  padding: 0 var(--space-4);
  min-width: 120px;
  font-weight: 600;
}

.xia-nav-btn-subscribe:hover {
  background: var(--site-accent-dark);
  color: white;
}

/* ─────────────────────────────────────────────────────────────────
   面包屑 (可选)
   ───────────────────────────────────────────────────────────────── */
.xia-nav-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--nav-text-secondary);
}

.xia-nav-breadcrumb a {
  color: var(--nav-text-secondary);
  text-decoration: none;
}

.xia-nav-breadcrumb a:hover {
  color: var(--site-accent);
}

.xia-nav-breadcrumb-sep {
  color: var(--border-strong);
}

.xia-nav-breadcrumb-current {
  color: var(--nav-text);
  font-weight: 500;
}

/* ─────────────────────────────────────────────────────────────────
   移动端适配
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .xia-nav-inner {
    padding: 0 var(--space-4);
  }

  .xia-nav-brand-tagline,
  .xia-nav-sites,
  .xia-nav-btn-icon-only {
    display: none;
  }

  .xia-nav-site-link .site-name {
    display: none;
  }

  .xia-nav-site-link .site-icon {
    font-size: 18px;
  }

  .xia-nav-btn-text {
    display: none;
  }

  .xia-nav-btn-subscribe {
    padding: 0 var(--space-3);
    min-width: 108px;
    justify-content: center;
  }
}

/* ─────────────────────────────────────────────────────────────────
   紧凑模式 (用于工具页面)
   ───────────────────────────────────────────────────────────────── */
.xia-nav-compact {
  --nav-height: 52px;
}

.xia-nav-compact .xia-nav-brand-icon {
  width: 32px;
  height: 32px;
  font-size: 16px;
}

.xia-nav-compact .xia-nav-brand-name {
  font-size: var(--text-xs);
}

.xia-nav-compact .xia-nav-btn {
  height: 32px;
  font-size: var(--text-xs);
}

/* ─────────────────────────────────────────────────────────────────
   全宽模式 (用于首页)
   ───────────────────────────────────────────────────────────────── */
.xia-nav-wide {
  background: transparent;
  border-bottom: none;
}

.xia-nav-wide .xia-nav-inner {
  max-width: none;
}

/* ─────────────────────────────────────────────────────────────────
   导航密度隐藏控制
   ───────────────────────────────────────────────────────────────── */
[data-nav-density="light"] .xia-nav-sites,
[data-nav-density="light"] .xia-nav-btn-subscribe {
  display: none;
}

[data-nav-density="light"] .xia-nav-actions {
  gap: var(--space-1);
}

[data-nav-density="medium"] .xia-nav-btn-icon-only {
  display: none;
}

[data-nav-density="full"] .xia-nav-btn-icon-only {
  display: inline-flex;
}

/* ─────────────────────────────────────────────────────────────────
   过渡动画
   ───────────────────────────────────────────────────────────────── */
.xia-nav,
.xia-nav-brand,
.xia-nav-site-link,
.xia-nav-btn {
  transition: background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}