/**
 * Navigator 全局样式
 * 从原型项目提炼的全局 CSS 变量、Tailwind 配置和通用样式
 */

/* ==================== CSS 变量定义 ==================== */
:root {
    /* 主色调 */
    --nav-primary: #003B79;
    --nav-secondary: #FF5A2B;
    --nav-accent: #FFD100;
    --nav-dark: #333333;
    --nav-light: #F5F5F5;
    --nav-muted: #666666;
    --nav-border: #E5E5E5;
    --nav-white: #FFFFFF;
    
    /* 字体 */
    --nav-font-family: 'Microsoft YaHei', Arial, sans-serif;
    
    /* 容器宽度 */
    --nav-container-max-width: 1368px;
    
    /* 过渡效果 */
    --nav-transition: all 0.3s ease;
    
    /* 阴影 */
    --nav-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --nav-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --nav-shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15);
    --nav-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* ==================== 全局字体设置 ==================== */

/* 应用微软雅黑到整个网站 */
body,
html,
* {
    font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif !important;
}

/* 确保所有文本元素使用微软雅黑 */
h1, h2, h3, h4, h5, h6,
p, span, div, a, li, td, th,
input, textarea, select, button,
.nav-container,
.nav-btn,
.nav-card {
    font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif !important;
}

/* 图标字体例外 - 使用 Font Awesome */
i,
.fa,
.fab,
.fas,
.far,
.fal,
[class^="fa-"],
[class*=" fa-"] {
    font-family: 'FontAwesome' !important;
}

/* ==================== Tailwind CSS 工具类支持 ==================== */

/* 背景颜色 */
.bg-light {
    background-color: var(--nav-light) !important;
}

.bg-primary {
    background-color: var(--nav-primary) !important;
}

.bg-secondary {
    background-color: var(--nav-secondary) !important;
}

/* 文本颜色 */
.text-primary {
    color: var(--nav-primary) !important;
}

.text-secondary {
    color: var(--nav-secondary) !important;
}

.text-muted {
    color: var(--nav-muted) !important;
}

.text-dark {
    color: var(--nav-dark) !important;
}

/* 字体大小 */
.text-sm {
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
}

.text-lg {
    font-size: 1.125rem !important;
    line-height: 1.75rem !important;
}

.text-4xl {
    font-size: 2.25rem !important;
    line-height: 2.5rem !important;
}

/* 间距 */
.py-3 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

.px-4 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.mx-2 {
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
}

.mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

.mb-4 {
    margin-bottom: 1rem !important;
}

/* 容器 */
.container {
    width: 100%;
    max-width: var(--nav-container-max-width);
    margin-left: auto;
    margin-right: auto;
}

/* Navigator 自定义页面: 强制所有 .container 与正文/ Banner 使用同一宽度
 * 这里提升选择器优先级, 覆盖 Tailwind 在 tailwind-output.css 里对 .container
 * 在大屏幕 (min-width: 1536px) 设置的 max-width: 1536px。
 */
body.navigator-custom-page .container {
    max-width: var(--nav-container-max-width) !important;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* 确保自定义页面的内容区域不会被 Astra 默认样式限制宽度 */
body.navigator-custom-page {
    overflow-x: hidden;
}

body.navigator-custom-page .site-content,
body.navigator-custom-page #content {
    max-width: none !important;
    padding: 0 !important;
}

/* Hover 效果 */
.hover\:text-secondary:hover {
    color: var(--nav-secondary) !important;
}

.hover\:text-primary:hover {
    color: var(--nav-primary) !important;
}

/* ==================== 隐藏 Astra 默认组件 ==================== */

/* 隐藏 Astra 默认的返回顶部按钮 */
#ast-scroll-top,
.ast-scroll-to-top-right,
.ast-scroll-to-top-left {
    display: none !important;
}

/* ==================== 面包屑导航样式 ==================== */

/* 面包屑容器 - 对应原型的 bg-light py-3 */
.nav-breadcrumb-wrapper {
    width: 100%;
    background-color: var(--nav-light);  /* #F5F5F5 */
    padding: 0.75rem 0;  /* py-3 = 12px */
    margin: 0;
    overflow-x: auto;  /* 如果内容太长,允许横向滚动 */
    overflow-y: hidden;
    border-bottom: 1px solid var(--nav-border);
}

.nav-breadcrumb-wrapper .container {
    display: flex;  /* 使用 flex 布局 */
    align-items: center;  /* 垂直居中 */
}

/* 面包屑导航 - 对应原型的 text-sm */
.nav-breadcrumb,
.nav-breadcrumb nav {
    font-size: 0.875rem;  /* text-sm = 14px */
    line-height: 1.25rem;
    white-space: nowrap;  /* 防止换行 */
    overflow-x: auto;     /* 如果太长,允许横向滚动 */
    overflow-y: hidden;
}

/* 面包屑链接 - 对应原型的 text-primary hover:text-secondary */
.nav-breadcrumb a {
    color: var(--nav-primary);  /* #003B79 */
    text-decoration: none;
    transition: color 0.3s ease;
    display: inline;  /* 确保内联显示 */
    white-space: nowrap;  /* 链接文字不换行 */
}

.nav-breadcrumb a:hover {
    color: var(--nav-secondary);  /* #FF5A2B */
}

/* 面包屑分隔符 - 对应原型的 mx-2 text-muted */
.nav-breadcrumb .mx-2,
.nav-breadcrumb span.separator {
    margin-left: 0.5rem;   /* mx-2 = 8px */
    margin-right: 0.5rem;
    color: var(--nav-muted);  /* #666666 */
    display: inline;  /* 确保内联显示 */
}

/* 当前页面 - 对应原型的 text-muted */
.nav-breadcrumb .text-muted,
.nav-breadcrumb span.current {
    color: var(--nav-muted);  /* #666666 */
    display: inline;  /* 确保内联显示 */
    white-space: nowrap;  /* 当前页文字不换行 */
}

/* 覆盖 Astra 默认面包屑样式 */
.ast-breadcrumbs-wrapper {
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

.ast-breadcrumbs-inner {
    max-width: var(--nav-container-max-width);
    margin: 0 auto;
    padding: 0 !important;
}

/* 面包屑导航容器 */
.ast-breadcrumbs,
.ast-breadcrumbs nav,
.breadcrumb-trail,
.breadcrumbs {
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
    white-space: nowrap !important;  /* 防止换行 */
    overflow-x: auto !important;     /* 如果太长,允许横向滚动 */
    overflow-y: hidden !important;
}

/* 面包屑列表 - 关键修复! */
.breadcrumb-trail ul,
.breadcrumbs ul,
.trail-items {
    display: inline !important;  /* 列表内联显示 */
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

/* 面包屑列表项 - 关键修复! */
.breadcrumb-trail li,
.breadcrumbs li,
.trail-item {
    display: inline !important;  /* 列表项内联显示 */
    margin: 0 !important;
    padding: 0 !important;
}

/* 面包屑链接 */
.ast-breadcrumbs a,
.breadcrumb-trail a,
.breadcrumbs a {
    color: var(--nav-primary) !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
    display: inline !important;  /* 确保内联显示 */
    white-space: nowrap !important;  /* 链接文字不换行 */
}

.ast-breadcrumbs a:hover,
.breadcrumb-trail a:hover,
.breadcrumbs a:hover {
    color: var(--nav-secondary) !important;
}

/* 面包屑分隔符 - 使用 ::after 伪元素 */
.breadcrumb-trail li:not(:last-child)::after,
.breadcrumbs li:not(:last-child)::after,
.trail-item:not(.trail-end)::after,
.trail-items li:not(:last-child)::after,
.nav-breadcrumb li:not(:last-child)::after {
    content: "/" !important;
    color: var(--nav-muted) !important;
    margin: 0 0.5rem !important;
    display: inline !important;
    padding: 0 !important;
}

/* 当前页面 */
.ast-breadcrumbs span,
.breadcrumb-trail span,
.breadcrumbs span {
    color: var(--nav-muted) !important;
    display: inline !important;  /* 确保内联显示 */
}

/* 隐藏 Astra 默认的分隔符 (如果有) */
.ast-breadcrumbs .separator {
    display: none !important;
}

/* 确保面包屑容器不会导致换行 */
.nav-breadcrumb-wrapper .ast-breadcrumbs-wrapper,
.nav-breadcrumb-wrapper .ast-breadcrumbs-inner {
    display: inline-block !important;
    width: 100% !important;
}

/* 面包屑的 trail-begin 和 trail-end */
.trail-begin,
.trail-end {
    display: inline !important;
}

/* 面包屑链接的 span */
.breadcrumb-trail a span,
.breadcrumbs a span {
    display: inline !important;
    color: inherit !important;
}

/* Navigator 自定义页面: 让正文容器与 Banner 对齐
 * 这里只负责控制最大宽度和居中, 不再加额外左右 padding,
 * 这样内部使用 .container.mx-auto.px-4 的内容, 就能和 Banner 文本左边缘完全对齐。
 */
body.navigator-custom-page .entry-content {
    width: 100%;
    max-width: var(--nav-container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
}

/* ==================== Page Banner 样式 ==================== */

.nav-page-banner {
    position: relative;
    width: 100%;
    height: 20rem; /* h-80 = 320px */
    overflow: hidden;
    margin: 0;
}

.nav-breadcrumb-wrapper + .nav-page-banner {
    margin-top: 0 !important;
}

.nav-page-banner .bg-cover {
    background-size: cover;
}

.nav-page-banner .bg-center {
    background-position: center;
}

.nav-page-banner .bg-primary {
    background-color: var(--nav-color-primary);
}

.nav-page-banner .bg-opacity-50 {
    opacity: 0.5;
}

.nav-page-banner h1 {
    font-size: 2.5rem; /* 40px */
    font-weight: 700;
    margin-bottom: 1rem;
    color: white;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.nav-page-banner p {
    font-size: 1.25rem; /* 20px */
    opacity: 0.95;
    color: white;
    max-width: 800px;
    line-height: 1.6;
}

body.post-type-archive-success_case .nav-page-banner,
body.single-success_case .nav-page-banner {
    height: 24rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .nav-page-banner {
        height: 15rem; /* 移动端降低高度 */
    }

    body.post-type-archive-success_case .nav-page-banner,
    body.single-success_case .nav-page-banner {
        height: 16rem;
    }

    .nav-page-banner h1 {
        font-size: 1.875rem; /* text-3xl */
    }

    .nav-page-banner p {
        font-size: 1rem;
    }

    .nav-breadcrumb {
        font-size: 0.75rem;
    }

    /* 移动端面包屑优化 */
    .nav-breadcrumb-wrapper {
        overflow-x: auto;  /* 允许横向滚动 */
        -webkit-overflow-scrolling: touch;  /* iOS 平滑滚动 */
    }

    .nav-breadcrumb-wrapper::-webkit-scrollbar {
        height: 3px;  /* 滚动条高度 */
    }

    .nav-breadcrumb-wrapper::-webkit-scrollbar-thumb {
        background-color: var(--nav-muted);
        border-radius: 3px;
    }
}

@media (max-width: 480px) {
    .nav-page-banner {
        height: 12rem;
    }

    body.post-type-archive-success_case .nav-page-banner,
    body.single-success_case .nav-page-banner {
        height: 13rem;
    }

    .nav-page-banner h1 {
        font-size: 1.5rem; /* text-2xl */
    }

    .nav-page-banner p {
        font-size: 0.875rem;
    }
}

/* ==================== Tailwind 风格工具类 ==================== */

/* 文本阴影 */
.nav-text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* 过渡效果 */
.nav-transition-custom {
    transition: var(--nav-transition);
}

/* 滚动条隐藏 */
.nav-scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.nav-scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* 滚动动画 */
.nav-animate-scroll,
.animate-scroll {
    animation: navScrollUp 20s linear infinite;
}

@keyframes navScrollUp {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}

.nav-animate-scroll:hover,
.animate-scroll:hover {
    animation-play-state: paused;
}

/* 状态标签 */
.nav-status-granted {
    background-color: #D1FAE5;
    color: #065F46;
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
}

.case-status.status-granted {
    background-color: #D1FAE5;
    color: #065F46;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    font-weight: 600;
}

/* 标题前缀 */
.nav-title-prefix {
    color: var(--nav-secondary);
    margin-right: 0.5rem;
}

/* 故事标签 */
.nav-story-tag {
    font-size: 0.6875rem;
    background-color: var(--nav-light);
    color: var(--nav-primary);
    padding: 0.125rem 0.625rem;
    border-radius: 9999px;
    font-weight: 500;
}

/* 案例图片 */
.nav-case-image {
    position: relative;
    width: 4rem;
    height: 4rem;
}

.case-image {
    position: relative;
    width: 4rem;
    height: 4rem;
}

.case-image .case-thumb {
    width: 4rem;
    height: 4rem;
    object-fit: cover;
    border-radius: 0.375rem;
    display: block;
}

.case-image .case-icon {
    display: flex;
    height: 3.2rem;
    width: 2.5rem;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    color: var(--nav-primary);
    transform: rotate(-8deg);
    transform-origin: top left;
}

.case-excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.nav-case-icon {
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--nav-primary);
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--nav-primary);
    font-size: 0.75rem;
    background-color: white;
    background-color: rgba(255, 255, 255, 0.9);
}

.nav-case-item.highlight .nav-case-icon {
    background-color: var(--nav-primary);
    color: white;
    opacity: 1;
}

.nav-case-item.highlight .nav-case-title {
    color: var(--nav-secondary);
}

/* ==================== 容器 ==================== */
.nav-container {
    width: 100%;
    max-width: var(--nav-container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* ==================== 按钮样式 ==================== */
.nav-btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    font-weight: 500;
    text-align: center;
    transition: var(--nav-transition);
    cursor: pointer;
    border: none;
    text-decoration: none;
}

.nav-btn-primary {
    background-color: var(--nav-primary);
    color: white;
}

.nav-btn-primary:hover {
    background-color: #002a5a;
}

.nav-btn-secondary {
    background-color: var(--nav-secondary);
    color: white;
}

.nav-btn-secondary:hover {
    opacity: 0.9;
}

.nav-btn-outline {
    background-color: transparent;
    color: var(--nav-primary);
    border: 1px solid var(--nav-primary);
}

.nav-btn-outline:hover {
    background-color: var(--nav-primary);
    color: white;
}

/* ==================== 卡片样式 ==================== */
.nav-card {
    background-color: white;
    border-radius: 0.5rem;
    padding: 1.5rem;
    box-shadow: var(--nav-shadow-md);
    transition: var(--nav-transition);
}

.nav-card:hover {
    box-shadow: var(--nav-shadow-lg);
    transform: translateY(-2px);
}

/* ==================== 响应式设计 ==================== */

/* 平板设备 */
@media (max-width: 768px) {
    .nav-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .nav-btn {
        padding: 0.625rem 1.25rem;
        font-size: 0.875rem;
    }
}

/* 手机设备 */
@media (max-width: 480px) {
    .nav-container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .nav-btn {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }

    .nav-card {
        padding: 1rem;
    }
}

/* 极小屏幕 */
@media (max-width: 320px) {
    .nav-container {
        padding-left: 0.625rem;
        padding-right: 0.625rem;
    }

    .nav-btn {
        padding: 0.5rem 1rem;
        font-size: 0.8125rem;
    }

    .nav-card {
        padding: 0.75rem;
    }
}

/* ==================== 通用工具类 ==================== */

/* 隐藏类 */
.nav-hidden {
    display: none !important;
}

.nav-invisible {
    visibility: hidden;
    opacity: 0;
}

.nav-visible {
    visibility: visible;
    opacity: 1;
}

/* Flexbox 工具 */
.nav-flex {
    display: flex;
}

.nav-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 文本对齐 */
.nav-text-center {
    text-align: center;
}

.nav-text-left {
    text-align: left;
}

.nav-text-right {
    text-align: right;
}

/* 颜色类 */
.nav-text-primary {
    color: var(--nav-primary);
}

.nav-text-secondary {
    color: var(--nav-secondary);
}

.nav-text-muted {
    color: var(--nav-muted);
}

.nav-bg-primary {
    background-color: var(--nav-primary);
}

.nav-bg-secondary {
    background-color: var(--nav-secondary);
}

.nav-bg-light {
    background-color: var(--nav-light);
}