/*
 * Toronto Hub - 导航头部样式 v4.0
 * 符合品牌视觉规范（圆角、颜色、字体）
 */

/* ============================================
   导航容器
   ============================================ */

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background-color: var(--color-white);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-normal);
}

.nav-container {
    width: 100%;
    max-width: var(--container-2xl);
    margin: 0 auto;
    padding: 0 var(--space-8);
    height: 80px;
}

.nav-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);  /* 减少为 16px 以适应更多元素 */
}

/* ============================================
   Logo 样式 - 品牌标识（纯文字）
   ============================================ */

.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    font-family: var(--font-heading);
    font-size: var(--font-h3);  /* 32px - 视觉优化：从 24px 增大到 32px (+33%) */
    font-weight: var(--weight-extrabold);  /* 字体优化：700 → 800，更醒目 +15% */
    letter-spacing: -0.03em;  /* 字体优化：-0.02em → -0.03em，更紧凑现代 */
    transition: opacity var(--transition-fast);
}

.logo-link:hover {
    opacity: 0.85;
}

.logo-link:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 4px;
    border-radius: var(--radius-sm);
}

.logo-toronto {
    color: var(--color-primary); /* #1E3A8A - Design System Token */
}

.logo-hub {
    color: var(--color-accent); /* #F59E0B - Design System Token */
}

/* 响应式 LOGO */
@media (max-width: 768px) {
    .logo-link {
        font-size: var(--font-h4);  /* 24px - 平板保持适中尺寸 */
    }
}

@media (max-width: 480px) {
    .logo-link {
        font-size: var(--font-h5);  /* 20px - 手机适度减小 */
    }
}

/* ============================================
   桌面导航菜单
   ============================================ */

.nav-menu {
    display: flex;
    align-items: center;
    gap: var(--space-1);  /* 减少为 8px 以适应更多菜单项 */
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;  /* 符合最小间距规范（Design System Radius SM 同值）*/
    padding: var(--space-2);  /* 减少 padding 以节省空间 */
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.nav-text-en {
    font-family: var(--font-heading);
    font-size: var(--font-body);  /* 16px - 视觉优化：从 14px 增大到 16px (+14%) */
    font-weight: var(--weight-bold);  /* 字体优化：600 → 700，更清晰 +20% */
    letter-spacing: -0.01em;  /* 字体优化：添加轻微紧凑字距 */
    color: var(--color-gray-700);
    line-height: var(--line-height-tight);
    display: block; /* 默认显示英文 */
}

.nav-text-zh {
    font-family: var(--font-chinese);
    font-size: var(--font-body);  /* 16px - 中文字体优化：与英文对等 (+14%) ⭐ */
    font-weight: var(--weight-semibold);  /* 中文字体优化：400 → 600，中文需要更粗 (+50%) ⭐ */
    color: var(--color-gray-700);  /* 中文字体优化：与英文颜色一致 ⭐ */
    line-height: var(--line-height-tight);
    display: none; /* 默认隐藏中文 */
}

.nav-link:hover {
    background-color: var(--color-gray-100);
    text-decoration: none;
}

.nav-link:hover .nav-text-en {
    color: var(--color-primary);
}

.nav-link:hover .nav-text-zh {
    color: var(--color-primary-light);
}

/* 当前页面高亮 */
.nav-link.active {
    background-color: var(--color-primary);
}

.nav-link.active .nav-text-en,
.nav-link.active .nav-text-zh {
    color: var(--color-white);
}

/* ============================================
   CTA 按钮区域
   ============================================ */

.nav-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);  /* 16px 间距 */
    flex-shrink: 0;
}

.nav-actions .btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);  /* 24px 48px - 视觉优化：增大 50% */
    font-size: var(--font-body);  /* 16px - 增大 14% */
    font-weight: var(--weight-extrabold);  /* 字体优化：700 → 800，更突出 +25% */
    letter-spacing: 0.02em;  /* 字体优化：展开字距，增强可读性 */
    text-transform: uppercase;  /* 字体优化：大写，更专业醒目 */
    white-space: nowrap;
}

.nav-actions .btn i {
    font-size: var(--font-body);  /* 16px - Design System Token */
}

/* ============================================
   语言切换器
   ============================================ */

.lang-switch {
    display: flex;
    align-items: center;
    gap: var(--space-1);  /* 8px - 视觉优化：增加间距 */
    padding: var(--space-1) var(--space-2);  /* 8px 16px - 增加 padding 提升可点击性 */
    background-color: var(--color-gray-100);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.lang-switch button {
    background: transparent;
    border: none;
    padding: var(--space-1) var(--space-2);  /* 8px 16px - 视觉优化：增大可点击区域 */
    font-family: var(--font-body);
    font-size: var(--font-small);  /* 14px - 增大 17% */
    font-weight: var(--weight-bold);  /* 字体优化：600 → 700，更清晰 */
    color: var(--color-gray-600);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.lang-switch button:hover {
    color: var(--color-primary);
    background-color: var(--color-white);
}

.lang-switch button.active {
    color: var(--color-primary);
    background-color: var(--color-white);
    font-weight: var(--weight-bold);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.lang-switch button:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.lang-divider {
    color: var(--color-gray-400);
    font-size: var(--font-small);  /* 14px - 与按钮字体一致 */
    user-select: none;
}

/* ============================================
   移动端汉堡菜单按钮
   ============================================ */

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 32px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: var(--z-fixed);
}

.hamburger-line {
    width: 100%;
    height: 3px;
    background-color: var(--color-primary);
    border-radius: var(--radius-sm);
    transition: all var(--transition-normal);
}

/* 汉堡菜单动画（打开状态） */
.mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
    transform: translateY(10.5px) rotate(45deg);
}

.mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
    transform: translateY(-10.5px) rotate(-45deg);
}

/* ============================================
   移动端导航菜单
   ============================================ */

.mobile-nav {
    display: none;
    position: fixed;
    top: 73px; /* header 高度 */
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-white);
    z-index: var(--z-dropdown);
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
    transform: translateX(-100%);
    transition: transform var(--transition-normal);
}

.mobile-nav[aria-hidden="false"] {
    transform: translateX(0);
}

.mobile-menu {
    list-style: none;
    margin: 0;
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.mobile-nav-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    text-decoration: none;
    color: var(--color-gray-700);
    background-color: var(--color-gray-50);
    border-radius: var(--radius-lg);
    font-family: var(--font-body);
    font-size: var(--font-body);  /* 16px - Design System Token */
    font-weight: var(--weight-semibold);  /* 字体优化：500 → 600，移动端更清晰 */
    transition: all var(--transition-fast);
}

.mobile-nav-link i {
    font-size: var(--font-h5);  /* 20px - Design System Token */
    color: var(--color-primary);
    width: 24px;  /* Design System Icon Standard */
    text-align: center;
}

.mobile-nav-link:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
    text-decoration: none;
}

.mobile-nav-link:hover i {
    color: var(--color-white);
}

/* 移动端 CTA 链接 */
.mobile-cta .cta-link {
    background-color: var(--color-accent);
    color: var(--color-white);
    font-weight: var(--weight-semibold);
}

.mobile-cta .cta-link i {
    color: var(--color-white);
}

.mobile-cta .cta-link:hover {
    background-color: var(--color-accent-dark);
}

/* ============================================
   响应式断点
   ============================================ */

/* 平板及以下：隐藏桌面菜单，显示汉堡菜单 */
@media (max-width: 1024px) {
    .desktop-menu,
    .nav-actions {
        display: none;
    }

    .mobile-menu-toggle,
    .mobile-nav {
        display: flex;
    }

    .logo-title {
        font-size: var(--font-h6);  /* 18px */
    }

    .logo-subtitle {
        font-size: 0.6875rem;  /* 11px - 特殊尺寸保留 */
    }
}

/* 手机端：进一步优化 */
@media (max-width: 640px) {
    .nav-container {
        padding: var(--space-2) var(--space-3);
    }

    .logo-icon {
        font-size: var(--font-h4);  /* 24px */
    }

    .logo-title {
        font-size: var(--font-body);  /* 16px */
    }

    .logo-subtitle {
        font-size: 0.625rem;  /* 10px - 特殊尺寸保留 */
    }

    .mobile-nav {
        top: 65px; /* 调整后的 header 高度 */
    }

    .mobile-menu {
        padding: var(--space-3);
    }

    .mobile-nav-link {
        padding: var(--space-2) var(--space-3);
        font-size: var(--font-small);  /* 14px - 接近 0.9375rem */
    }
}

/* ============================================
   滚动时的导航样式变化
   ============================================ */

.site-header.scrolled {
    box-shadow: var(--shadow-lg);
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
}

/* ============================================
   无障碍：跳过导航链接
   ============================================ */

.skip-to-content {
    position: absolute;
    top: -100px;
    left: 0;
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: var(--space-2) var(--space-4);
    text-decoration: none;
    font-weight: var(--weight-semibold);
    border-radius: 0 0 var(--radius-md) 0;
    z-index: var(--z-modal);
    transition: top var(--transition-fast);
}

.skip-to-content:focus {
    top: 0;
}