<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="google-site-verification" content="VTDXX0ynO2pR8Q27XRQFRY4tY_Q76Dt5TIYkvlaw_CI" />
    <title><?php bloginfo('name'); ?></title>
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
    <?php wp_head(); ?>

<!-- 引入字体与图标 -->
    <link href="https://fonts.loli.net/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
    <link href="https://fonts.loli.net" rel="preconnect"/>
    <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
    <link href="https://fonts.loli.net/css2?family=Space+Grotesk:wght@300;400;500;700;900&family=Liu+Jian+Mao+Cao:wght@400;700&family=Montserrat:wght@400;500;700;800;900&family=Inter:wght@400;500;700;800;900&family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet"/>

    <!-- 引入 Swiper 与 AOS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.css" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.2/vanilla-tilt.min.js"></script>

    <!-- Tailwind & Config -->
    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
    <script id="tailwind-config">
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        "primary": "#10b981",
                        "primary-dark": "#047857",
                        "primary-light": "#d1fae5",
                        "accent": "#f97316",
                        "accent-light": "#ffedd5",
                        "surface": "#ffffff",
                        "background": "#f8fafc",
                        "slate-text": "#334155",
                        "slate-heading": "#0f172a"
                    },
                    fontFamily: {
                        "display": ['PingFang SC', "Montserrat",  'Microsoft YaHei',"sans-serif"],
                        "sans": [ 'PingFang SC', "Montserrat",  'Microsoft YaHei', "sans-serif"],
                    },
                    boxShadow: {
                        'soft': '0 20px 40px -15px rgba(0,0,0,0.05)',
                        'float': '0 30px 60px -20px rgba(16, 185, 129, 0.15), 0 0 0 1px rgba(16, 185, 129, 0.05)',
                    },
                    keyframes: {
                        textShimmer: { '0%': { backgroundPosition: '0% 50%' }, '100%': { backgroundPosition: '100% 50%' } },
                        scroll: { '0%': { transform: 'translateX(0)' }, '100%': { transform: 'translateX(-50%)' } },
                        scrollLeft: { '0%': { transform: 'translateX(0)' }, '100%': { transform: 'translateX(-50%)' } },
                        scrollRight: { '0%': { transform: 'translateX(-50%)' }, '100%': { transform: 'translateX(0)' } },
                        flowMove: {
                                '0%': { transform: 'translateX(-100%)' },
                                '100%': { transform: 'translateX(600%)' }
                            }
                    },
                    animation: {
                        'text-shimmer': 'textShimmer 3s ease-out infinite alternate',
                        'scroll-fast': 'scroll 35s linear infinite',
                        'scroll-slow': 'scroll 50s linear infinite',
                        'scroll-reverse': 'scroll-reverse 45s linear infinite',
                        'scroll-left': 'scrollLeft 40s linear infinite',
                        'scroll-right': 'scrollRight 45s linear infinite',

                    }
                },
            },
        }
    </script>
     <style type="text/tailwindcss">

        @layer utilities {
             /* 隐藏滚动条 */
            .no-scrollbar::-webkit-scrollbar {
                display: none;
            }
            .no-scrollbar {
                -ms-overflow-style: none;  /* IE and Edge */
                scrollbar-width: none;  /* Firefox */
            }
            [data-aos] {
                transition-property: all !important;
            }


        }
          @layer base {
            /* ==========================================
                1. Firefox 浏览器的滚动条支持 (极简模式)
                ========================================== */
            html {
                scrollbar-width: thin; /* 细滚动条 */
                /* 滑块颜色(半透明灰) | 轨道颜色(全透明) */
                scrollbar-color: rgba(148, 163, 184, 0.5) transparent;
            }

            /* ==========================================
                2. WebKit 浏览器 (Chrome, Edge, Safari) 悬浮感设计
                ========================================== */
            /* 整体宽度缩小，显得更精致 */
            ::-webkit-scrollbar {
                width: 5px;
                height: 6px;
            }

            /* 轨道 (Track) - 设置为全透明，彻底消除突兀的边界感 */
            ::-webkit-scrollbar-track {
                background: transparent;
            }

            /* 滑块 (Thumb) - 默认状态 */
            ::-webkit-scrollbar-thumb {
                background: rgba(148, 163, 184, 0.4); /* Slate-400 加 40% 透明度，低调且不刺眼 */
                border-radius: 8px; /* 圆润的胶囊形 */
            }

            /* 滑块悬停状态 (Hover) - 鼠标放上去时，平滑过渡到您的主题绿 */
            ::-webkit-scrollbar-thumb:hover {
                background: rgba(16, 185, 129, 0.8); /* Primary Color (#10b981) 带有轻微透明度 */
            }

            /* 滑块按下/拖动状态 (Active) - 颜色加深 */
            ::-webkit-scrollbar-thumb:active {
                background: rgba(5, 150, 105, 1); /* Darker Green (#059669) 实色 */
            }
            }
    </style>
</head>
<body <?php body_class('no-js'); ?>>
    <nav class="main-nav">
        <div class="nav-container">
            <div class="nav-logo flex">
                <a href="<?php echo home_url(); ?>">
                    <?php
                    $logo = get_theme_option('site_logo');
                    if ($logo): ?>
                        <img src="<?php echo esc_url($logo); ?>" alt="<?php bloginfo('name'); ?>">
                    <?php else: ?>
                        <img src="<?php bloginfo('template_url'); ?>/assets/images/logo-1.svg" alt="logo">
                    <?php endif; ?>
                </a>
                <a href="https://nenghui.com" class="ml-[2rem]  text-[#295ca8] cursor-pointer relative group">
                    国际版
                    <div class="absolute bottom-0 left-0 w-0 h-[2px] bg-[#295ca8] transition-all duration-300 group-hover:w-full"></"></div>
                </a>
            </div>
            <button class="menu-toggle" aria-label="菜单">
                <span></span>
                <span></span>
                <span></span>
            </button>

            <div class="nav-right">
                <div class="nav-menu">
                    <?php
                    wp_nav_menu(array(
                        'theme_location' => 'primary-menu',
                        'container' => false,
                        'menu_class' => 'menu-items',
                        'walker' => new Custom_Walker_Nav_Menu(),
                        'fallback_cb' => function() {
                            echo '<ul class="menu-items"><li><a href="' . admin_url('nav-menus.php') . '">添加菜单</a></li></ul>';
                        }
                    ));
                    ?>
                </div>

                <!-- 搜索按钮 -->
                <div class="nav-search">
                <button class="search-toggle" aria-label="搜索" id="searchToggle">
                    <svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <circle cx="11" cy="11" r="8"></circle>
                        <path d="m21 21-4.35-4.35"></path>
                    </svg>
                </button>
                </div>
            </div>
        </div>
    </nav>

    <!-- 搜索框弹出层 -->
    <div class="search-overlay" id="searchOverlay">
        <div class="search-container">
            <div class="search-box">
                <form role="search" method="get" action="<?php echo home_url('/'); ?>" class="search-form">
                    <div class="search-input-wrapper">
                        <svg class="search-input-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="11" cy="11" r="8"></circle>
                            <path d="m21 21-4.35-4.35"></path>
                        </svg>
                        <input type="search" name="s" placeholder="搜索内容..." class="search-input" id="searchInput" autocomplete="off">
                        <button type="button" class="search-close" id="searchClose" aria-label="关闭搜索">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <line x1="18" y1="6" x2="6" y2="18"></line>
                                <line x1="6" y1="6" x2="18" y2="18"></line>
                            </svg>
                        </button>
                    </div>
                    <button type="submit" class="search-submit">搜索</button>
                </form>
            </div>
        </div>
    </div>
