/*
Theme Name: Telegram 中文指南
Author: 第三方中文资讯站
Description: 极简 WordPress Classic Theme，用于制作中文 Telegram 使用指南与官方下载导航型信息站。本站为第三方独立平台，非 Telegram 官方网站，不托管任何安装包。
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: telegram-guide
Tags: classic-theme, minimal, blog
*/

/* ==========================================================================
   设计系统 —— Telegram 蓝白风格落地页
   纯手写、无外部字体、无 CSS 框架、无 jQuery
   ========================================================================== */

:root {
    --tg-blue: #2aabee;
    --tg-blue-dark: #229ed9;
    --tg-blue-deep: #1c93c9;
    --tg-blue-soft: #eaf6fd;
    --tg-blue-tint: #f5fafe;

    --color-bg: #ffffff;
    --color-section: #f5f9fc;
    --color-text: #16242f;
    --color-muted: #5c6b76;
    --color-border: #e4ebf1;
    --color-card-bg: #ffffff;

    --color-warn-bg: #fff8ec;
    --color-warn-border: #f3d28a;
    --color-warn-text: #8a5a00;

    --max-width: 1080px;
    --radius: 16px;
    --radius-sm: 10px;
    --gap: 1.25rem;
    --shadow: 0 6px 24px rgba(34, 158, 217, 0.10);
    --shadow-sm: 0 2px 10px rgba(22, 36, 47, 0.06);
    --grad: linear-gradient(135deg, #2aabee 0%, #229ed9 100%);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* 锚点跳转时为固定头部留出空间 */
    scroll-padding-top: 90px;
}

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.75;
    word-wrap: break-word;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--tg-blue-dark);
    text-decoration: none;
}

a:hover,
a:focus {
    color: var(--tg-blue-deep);
    text-decoration: underline;
}

.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* ---------- 可访问性 ---------- */
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link.screen-reader-text:focus {
    position: fixed !important;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 1100;
    width: auto;
    height: auto;
    padding: 0.6rem 1rem;
    margin: 0;
    clip: auto;
    background: var(--color-text);
    color: #fff;
    border-radius: var(--radius-sm);
}

:focus-visible {
    outline: 3px solid rgba(42, 171, 238, 0.55);
    outline-offset: 2px;
}

/* ---------- 站点头部（吸顶） ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--color-border);
}

.site-header .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}

.site-branding {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.brand-mark {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--grad);
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
}

.brand-mark svg {
    width: 20px;
    height: 20px;
    display: block;
}

.site-branding .site-title {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.1;
    font-weight: 700;
}

.site-branding .site-title a {
    color: var(--color-text);
}

.site-branding .site-title a:hover {
    text-decoration: none;
}

.site-branding .site-description {
    margin: 0.1rem 0 0;
    font-size: 0.78rem;
    color: var(--color-muted);
    /* 页眉副标题仅视觉隐藏；后台 Tagline 仍保留并用于首页 <title> 等 SEO 输出 */
    display: none;
}

.custom-logo {
    border-radius: 8px;
}

/* 主导航 */
.main-navigation ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem 0.35rem;
    margin: 0;
    padding: 0;
}

.main-navigation a {
    display: inline-block;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    color: var(--color-text);
    font-size: 0.92rem;
    font-weight: 500;
    white-space: nowrap;
}

.main-navigation a:hover,
.main-navigation a:focus {
    background: var(--tg-blue-soft);
    color: var(--tg-blue-deep);
    text-decoration: none;
}

.main-navigation .nav-cta a {
    background: var(--grad);
    color: #fff;
    box-shadow: var(--shadow-sm);
}

.main-navigation .nav-cta a:hover {
    background: var(--tg-blue-deep);
    color: #fff;
}

/* 顶级菜单项之间定位（供下拉子菜单使用） */
.main-navigation > ul > li {
    position: relative;
}

/* 有子菜单的父项加一个小箭头 */
.main-navigation .menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    width: 0.6em;
    height: 0.6em;
    margin-left: 0.3em;
    vertical-align: 0.05em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316242f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* 下拉子菜单 */
.main-navigation .sub-menu {
    display: none;
    position: absolute;
    top: calc(100% + 0.45rem);
    left: 0;
    z-index: 1000;
    min-width: 200px;
    margin: 0;
    padding: 0.4rem;
    flex-direction: column;
    gap: 0.1rem;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
}

/* 透明"桥接"区：补上父项与卡片之间的空隙，鼠标穿过时不丢失悬停 */
.main-navigation .sub-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -0.55rem;
    height: 0.55rem;
}

/* 悬停或键盘聚焦时展开（focus-within 保证可用键盘访问，无需 JS） */
.main-navigation .menu-item-has-children:hover > .sub-menu,
.main-navigation .menu-item-has-children:focus-within > .sub-menu {
    display: flex;
}

.main-navigation .sub-menu a {
    display: block;
    white-space: normal;
    border-radius: var(--radius-sm);
}

/* 移动端汉堡按钮（桌面隐藏） */
.menu-toggle {
    display: none;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

.menu-toggle-bar {
    position: relative;
}

.menu-toggle-bar,
.menu-toggle-bar::before,
.menu-toggle-bar::after {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--color-text);
    border-radius: 2px;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.menu-toggle-bar::before,
.menu-toggle-bar::after {
    content: "";
    position: absolute;
    left: 0;
}

.menu-toggle-bar::before {
    top: -6px;
}

.menu-toggle-bar::after {
    top: 6px;
}

/* 打开时变 X */
.menu-toggle[aria-expanded="true"] .menu-toggle-bar {
    background: transparent;
}

.menu-toggle[aria-expanded="true"] .menu-toggle-bar::before {
    transform: translateY(6px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle-bar::after {
    transform: translateY(-6px) rotate(-45deg);
}

/* ---------- 主内容 ---------- */
.site-main {
    padding-bottom: 3rem;
}

section {
    margin: 0;
}

h1 {
    font-size: clamp(1.7rem, 4vw, 2.4rem);
    line-height: 1.2;
    margin: 0 0 1rem;
    letter-spacing: -0.01em;
}

h2 {
    font-size: clamp(1.35rem, 2.6vw, 1.7rem);
    line-height: 1.3;
    margin: 0 0 0.6rem;
    letter-spacing: -0.01em;
}

h3 {
    font-size: 1.12rem;
    margin: 0 0 0.5rem;
}

/* 区块通用 */
.section {
    padding: 3rem 0;
}

.section--tint {
    background: var(--color-section);
}

.section-head {
    max-width: 720px;
    margin-bottom: 1.75rem;
}

.section-intro {
    color: var(--color-muted);
    margin: 0;
    font-size: 1.02rem;
}

.eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tg-blue-dark);
    background: var(--tg-blue-soft);
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    margin-bottom: 0.75rem;
}

/* 面包屑 / 更新时间 */
.breadcrumbs {
    font-size: 0.83rem;
    color: var(--color-muted);
    padding-top: 1rem;
}

.last-updated {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: var(--color-muted);
    background: var(--color-section);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
    margin-bottom: 1rem;
}

/* ---------- Hero ---------- */
.hero {
    padding: 2.5rem 0 3rem;
    background:
        radial-gradient(60% 120% at 90% 0%, rgba(42, 171, 238, 0.10) 0%, rgba(42, 171, 238, 0) 60%),
        var(--color-bg);
}

/* 居中设备下载版式 */
.hero-centered {
    background:
        radial-gradient(80% 60% at 50% 0%, rgba(42, 171, 238, 0.10) 0%, rgba(42, 171, 238, 0) 60%),
        var(--color-bg);
    text-align: center;
}

.hero-centered .hero-head {
    max-width: 760px;
    margin: 0 auto 2.75rem;
}

.hero-logo {
    width: 76px;
    height: 76px;
    margin: 0 auto 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--grad);
    border-radius: 50%;
    box-shadow: var(--shadow);
}

.hero-logo svg {
    width: 40px;
    height: 40px;
}

.hero-centered h1 {
    max-width: 18em;
    margin-left: auto;
    margin-right: auto;
    text-wrap: balance; /* 让标题两行长度更均衡，减少奇怪折行 */
}

.hero-centered .lead {
    max-width: 600px;
    margin: 0 auto 1.5rem;
    font-size: 1.1rem;
    color: var(--color-muted);
    text-wrap: pretty;
}

.cta-center {
    justify-content: center;
}

.hero-devices {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end; /* 设备底部对齐，像放在同一桌面上 */
    gap: 2rem 2.5rem;
}

.dev {
    margin: 0;
    text-align: center;
}

.dev img {
    display: block;
    margin: 0 auto;
    height: auto;
}

.dev-laptop img {
    width: 100%;
    max-width: 520px;
}

.dev-phones img {
    width: 100%;
    max-width: 290px;
}

/* 每台设备下方的下载链接（设备底部对齐 → 链接落在同一基线） */
.dev-laptop .dev-dl {
    margin-top: 1.1rem;
}

.dev-dl-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.5rem;
    margin-top: 1.1rem;
}

.dev-dl {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--tg-blue-deep);
    text-decoration: none;
}

.dev-dl:hover,
.dev-dl:focus {
    color: var(--tg-blue);
    text-decoration: underline;
}

.dev-dl img {
    width: 22px;
    height: 22px;
    margin: 0;
}

/* CTA 按钮 */
.cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.75rem 1.4rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.97rem;
    border: 1px solid transparent;
    cursor: pointer;
    line-height: 1.2;
    text-align: center;
    /* 中文不从词中间断行（避免“下/载”“入/口”这类拆字折行） */
    word-break: keep-all;
    transition: transform 0.12s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover,
.btn:focus {
    text-decoration: none;
    transform: translateY(-1px);
}

.btn-primary {
    background: var(--grad);
    color: #fff;
    box-shadow: var(--shadow);
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--tg-blue-deep);
    color: #fff;
}

.btn-secondary {
    background: #fff;
    color: var(--tg-blue-deep);
    border-color: var(--tg-blue);
}

.btn-secondary:hover,
.btn-secondary:focus {
    background: var(--tg-blue-soft);
    color: var(--tg-blue-deep);
}

.btn-block {
    width: 100%;
}

/* Hero 视觉卡片（纯 CSS/SVG，无外部图片） */
.hero-visual {
    position: relative;
    display: flex;
    justify-content: center;
}

.device-card {
    width: 100%;
    max-width: 320px;
    background: var(--grad);
    border-radius: 28px;
    padding: 1.5rem;
    box-shadow: var(--shadow);
    color: #fff;
}

.device-screen {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 18px;
    padding: 1.25rem;
    backdrop-filter: blur(2px);
}

.device-plane {
    width: 86px;
    height: 86px;
    margin: 0.5rem auto 1rem;
    display: block;
}

.device-bubble {
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-text);
    border-radius: 14px 14px 14px 4px;
    padding: 0.6rem 0.85rem;
    font-size: 0.85rem;
    margin-bottom: 0.6rem;
    max-width: 80%;
    box-shadow: var(--shadow-sm);
}

.device-bubble.me {
    margin-left: auto;
    border-radius: 14px 14px 4px 14px;
    background: #fff;
}

.device-meta {
    text-align: center;
    font-size: 0.78rem;
    opacity: 0.92;
    margin-top: 0.5rem;
}

/* Hero 主插画（内置 SVG，本地加载） */
.hero-media {
    display: flex;
    justify-content: center;
}

.hero-media img {
    width: 100%;
    max-width: 520px;
    height: auto;
}

.hero-note {
    margin: 1.1rem 0 0;
    font-size: 0.85rem;
    color: var(--color-muted);
}

/* ---------- 价值条 ---------- */
.feature-strip {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--color-border);
}

.feature-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

.feature {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
}

.feature-ic {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--tg-blue-soft);
    color: var(--tg-blue-deep);
}

.feature-ic svg {
    width: 22px;
    height: 22px;
}

.feature strong {
    display: block;
    font-size: 0.98rem;
}

.feature p {
    margin: 0.15rem 0 0;
    font-size: 0.85rem;
    color: var(--color-muted);
}

/* ---------- 图文交替区 ---------- */
.media-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: center;
}

.media-figure img {
    width: 100%;
    max-width: 440px;
    height: auto;
    margin: 0 auto;
    display: block;
}

.check-list {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
}

.check-list li {
    position: relative;
    padding-left: 1.9rem;
    margin: 0.7rem 0;
    color: var(--color-muted);
}

.check-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.1rem;
    width: 1.3rem;
    height: 1.3rem;
    background: var(--tg-blue-soft);
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23229ed9' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.8rem;
}

.check-list strong {
    color: var(--color-text);
}

/* 最新文章「查看更多」 */
.articles-more {
    text-align: center;
    margin-top: 1.75rem;
}

/* ---------- 结尾 CTA 带 ---------- */
.cta-band {
    background: var(--grad);
    color: #fff;
    text-align: center;
    padding: 3rem 0;
}

/* 当页面以结尾 CTA 收尾时，去掉主区底部留白，让 CTA 直接贴住页脚 */
.site-main:has(> .cta-band:last-child) {
    padding-bottom: 0;
}

.cta-band h2 {
    color: #fff;
}

.cta-band p {
    margin: 0 0 1.5rem;
    opacity: 0.95;
}

.btn-light {
    background: #fff;
    color: var(--tg-blue-deep);
}

.btn-light:hover,
.btn-light:focus {
    background: var(--tg-blue-soft);
    color: var(--tg-blue-deep);
}

/* ---------- 下载入口区 ---------- */
.card-grid {
    display: grid;
    /* 5 个平台在桌面排成一行；窄屏自动换行 */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--gap);
}

.card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: var(--tg-blue);
}

.platform-badge {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--tg-blue-soft);
    color: var(--tg-blue-deep);
    margin-bottom: 0.85rem;
}

.platform-badge svg {
    width: 26px;
    height: 26px;
}

.platform-badge img {
    width: 28px;
    height: 28px;
    display: block;
}

.card h3 {
    margin: 0 0 0.15rem;
}

.card .card-meta {
    font-size: 0.84rem;
    color: var(--color-muted);
    margin: 0 0 0.6rem;
}

.card .card-note {
    font-size: 0.86rem;
    margin: 0 0 1.1rem;
    color: var(--color-text);
}

.card .btn {
    margin-top: auto;
    /* 卡片较窄，收紧左右内边距给文字让位 */
    padding-left: 0.9rem;
    padding-right: 0.9rem;
    font-size: 0.92rem;
    min-height: 2.9rem;
}

.card-guide-link {
    display: inline-block;
    margin-top: 0.6rem;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--tg-blue-deep);
    text-decoration: none;
    word-break: keep-all;
}

.card-guide-link:hover,
.card-guide-link:focus {
    text-decoration: underline;
}

/* ---------- 为什么选择 九宫格 ---------- */
.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
}

.why-card {
    text-align: center;
    padding: 1.75rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-card-bg);
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.why-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

.why-img {
    width: 104px;
    height: 104px;
    margin: 0 auto 0.85rem;
    display: block;
    object-fit: contain;
}

.why-card h3 {
    color: var(--tg-blue-deep);
    font-size: 1.15rem;
    margin: 0 0 0.45rem;
}

.why-card p {
    color: var(--color-muted);
    font-size: 0.92rem;
    margin: 0;
}

/* ---------- 安全提示条 ---------- */
.safety {
    background: var(--grad);
    color: #fff;
    border-radius: var(--radius);
    padding: 1.75rem;
    box-shadow: var(--shadow);
}

.safety h2 {
    color: #fff;
}

.safety-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
}

.safety-item {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius-sm);
    padding: 1rem 1.1rem;
}

.safety-item strong {
    display: block;
    margin-bottom: 0.25rem;
}

.safety-item p {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.95;
}

/* ---------- 步骤卡 ---------- */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--gap);
    counter-reset: step;
}

.step-card {
    position: relative;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.4rem;
    box-shadow: var(--shadow-sm);
}

.step-num {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--grad);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 0.7rem;
}

.step-card h3 {
    font-size: 1.05rem;
}

.step-card p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-muted);
}

/* ---------- 信息卡（排查 / 隐私） ---------- */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--gap);
}

.info-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--tg-blue);
    border-radius: var(--radius-sm);
    padding: 1.25rem 1.35rem;
    box-shadow: var(--shadow-sm);
}

.info-card h3 {
    font-size: 1.02rem;
}

.info-card p {
    margin: 0;
    font-size: 0.92rem;
    color: var(--color-muted);
}

/* ---------- 提示框 ---------- */
.notice {
    background: var(--color-warn-bg);
    border: 1px solid var(--color-warn-border);
    color: var(--color-warn-text);
    border-radius: var(--radius-sm);
    padding: 0.9rem 1.1rem;
    font-size: 0.92rem;
    margin-top: 1.5rem;
}

/* ---------- FAQ ---------- */
.faq-list {
    display: grid;
    gap: 0.75rem;
}

.faq-item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-card-bg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.faq-item summary {
    cursor: pointer;
    padding: 1rem 1.2rem;
    font-weight: 600;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: "";
    width: 1.1rem;
    height: 1.1rem;
    flex: 0 0 auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23229ed9' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.2s ease;
}

.faq-item[open] summary::after {
    transform: rotate(180deg);
}

.faq-item .faq-answer {
    padding: 0 1.2rem 1.1rem;
    color: var(--color-muted);
}

.faq-item .faq-answer p {
    margin: 0;
}

/* ---------- 页脚 ---------- */
.site-footer {
    background: var(--color-text);
    color: #c7d2da;
    padding: 2.5rem 0 1.75rem;
    font-size: 0.9rem;
}

.site-footer a {
    color: #fff;
}

.footer-top {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 2rem 2.5rem;
    margin-bottom: 1.75rem;
}

.footer-brand {
    max-width: 360px;
}

.footer-brand .footer-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    margin: 0 0 0.6rem;
}

.footer-mark {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--grad);
    border-radius: 50%;
}

.footer-mark svg {
    width: 16px;
    height: 16px;
}

.footer-desc {
    margin: 0;
    color: #9fb0bc;
    line-height: 1.7;
}

.footer-heading {
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 0.85rem;
}

.footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-col li {
    margin: 0.45rem 0;
}

.footer-col a {
    color: #c7d2da;
    text-decoration: none;
}

.footer-col a:hover,
.footer-col a:focus {
    color: #fff;
    text-decoration: underline;
}

.site-footer .disclaimer {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-sm);
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
    line-height: 1.7;
}

.site-footer .footer-copy {
    margin: 0;
    opacity: 0.8;
    font-size: 0.85rem;
}

/* ---------- 内容页（index/single/page/archive/search） ---------- */
.page-header {
    padding: 2.25rem 0 0.5rem;
    margin-bottom: 1.5rem;
}

.page-title {
    margin: 0 0 0.5rem;
}

.archive-description {
    color: var(--color-muted);
    font-size: 0.95rem;
}

.entry-list {
    display: grid;
    /* auto-fill：文章很少时也保持单列宽度，不会被拉满整行 */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--gap);
}

/* 杂志式文章卡：顶部大图齐边 + 标题 + 摘要，整卡可点击 */
.entry-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-card-bg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.entry-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

.entry-card-media {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--color-section);
    overflow: hidden;
}

.entry-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
}

/* 悬停时图片轻微放大 */
.entry-card:hover .entry-card-media img {
    transform: scale(1.06);
}

/* 分类角标（叠在图片左上角，可独立点击） */
.entry-cat {
    position: absolute;
    z-index: 2;
    top: 0.7rem;
    left: 0.7rem;
    padding: 0.2rem 0.65rem;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.6;
    color: #fff;
    background: rgba(22, 36, 47, 0.72);
    backdrop-filter: blur(4px);
    border-radius: 999px;
    text-decoration: none;
}

.entry-cat:hover,
.entry-cat:focus {
    background: var(--tg-blue-dark);
    color: #fff;
    text-decoration: none;
}

.entry-card-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--grad);
}

.entry-card-ph svg {
    width: 54px;
    height: 54px;
    opacity: 0.92;
}

.entry-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 1.05rem 1.25rem 1.4rem;
}

.entry-card .entry-title {
    margin: 0;
    font-size: 1.12rem;
    line-height: 1.45;
}

.entry-card .entry-title a {
    color: var(--color-text);
    text-decoration: none;
}

/* stretched link：让整张卡片可点击 */
.entry-card .entry-title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.entry-card:hover .entry-title a {
    color: var(--tg-blue-deep);
}

.entry-card .entry-summary {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-muted);
    /* 摘要最多两行，保持卡片整齐 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 单篇 meta（作者 / 时间 / 阅读时长 / 分类） */
.entry-single .entry-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.5rem;
}

.entry-single .entry-meta .sep {
    opacity: 0.45;
}

/* 相关文章 */
.related-posts {
    margin: 3rem auto 0;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border);
}

.related-posts > h2 {
    margin-bottom: 1.25rem;
}

/* 单篇 / 页面 */
.entry-single,
.entry-page {
    max-width: 760px;
    margin: 0 auto;
    padding-top: 1.5rem;
}

.entry-single .entry-title,
.entry-page .entry-title {
    font-size: clamp(1.6rem, 3.5vw, 2.1rem);
}

/* ====== 文章正文排版（后台编辑器写的内容都会套用此排版） ====== */
.entry-content {
    margin-top: 1.5rem;
    font-size: 1.04rem;
    line-height: 1.85;
}

.entry-content > * {
    margin-top: 0;
    margin-bottom: 1.15rem;
}

.entry-content p {
    margin: 0 0 1.15rem;
}

/* 段落首字稍大的引导段（可在编辑器给段落加 class="lead"） */
.entry-content p.lead {
    font-size: 1.12rem;
    color: var(--color-muted);
}

.entry-content h2 {
    font-size: 1.5rem;
    margin: 2.3rem 0 0.8rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--color-border);
    scroll-margin-top: 90px; /* 锚点跳转避开吸顶头部 */
}

.entry-content h3 {
    font-size: 1.22rem;
    margin: 1.9rem 0 0.6rem;
    scroll-margin-top: 90px;
}

.entry-content h4 {
    font-size: 1.06rem;
    margin: 1.5rem 0 0.5rem;
}

.entry-content ul,
.entry-content ol {
    margin: 0 0 1.15rem;
    padding-left: 1.4rem;
}

.entry-content li {
    margin: 0.4rem 0;
}

.entry-content li::marker {
    color: var(--tg-blue-dark);
}

.entry-content blockquote {
    margin: 1.6rem 0;
    padding: 0.6rem 1.1rem;
    border-left: 4px solid var(--tg-blue);
    color: var(--color-muted);
    background: var(--color-section);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.entry-content blockquote p:last-child {
    margin-bottom: 0;
}

.entry-content figure {
    margin: 1.6rem 0;
}

.entry-content img {
    border-radius: var(--radius-sm);
    height: auto;
}

.entry-content figcaption,
.entry-content .wp-caption-text {
    font-size: 0.86rem;
    color: var(--color-muted);
    text-align: center;
    margin-top: 0.45rem;
}

.entry-content hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: 2.2rem 0;
}

/* 表格 */
.entry-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.4rem 0;
    font-size: 0.96rem;
    display: block;
    overflow-x: auto; /* 窄屏可横向滚动，不撑破布局 */
}

.entry-content th,
.entry-content td {
    border: 1px solid var(--color-border);
    padding: 0.6rem 0.75rem;
    text-align: left;
    vertical-align: top;
}

.entry-content thead th {
    background: var(--color-section);
}

.entry-content pre {
    overflow: auto;
    padding: 1rem;
    background: #16242f;
    color: #f5f7fa;
    border-radius: var(--radius-sm);
}

.entry-content code {
    background: var(--color-section);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
}

.entry-content pre code {
    background: transparent;
    padding: 0;
}

/* ====== 正文链接：醒目，并自动区分「内链」与「外链」 ======
   说明：
   - 普通正文链接（站内/内链）= Telegram 蓝、加粗、下划线。
   - 在编辑器勾选「在新标签页打开」的链接（target="_blank"）= 青绿 + ↗。
   - 不依赖本站域名硬编码，纯靠 target 区分。
   - 用 :not() 排除所有 TOC 容器：目录内的链接完全不套用以下样式，
     交由目录插件自行渲染，确保与插件原生外观（编号 / 层级 / 折叠）完全一致。 */
.entry-content a:not(:is(.wp-block-table-of-contents, .wp-block-simpletoc-toc, .wp-block-rank-math-toc-block, .ez-toc-container, #toc_container, .lwptoc) *) {
    color: var(--tg-blue-deep);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(34, 158, 217, 0.5);
    border-radius: 3px;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.entry-content a:not(:is(.wp-block-table-of-contents, .wp-block-simpletoc-toc, .wp-block-rank-math-toc-block, .ez-toc-container, #toc_container, .lwptoc) *):hover,
.entry-content a:not(:is(.wp-block-table-of-contents, .wp-block-simpletoc-toc, .wp-block-rank-math-toc-block, .ez-toc-container, #toc_container, .lwptoc) *):focus {
    color: #fff;
    background: var(--tg-blue-dark);
    text-decoration-color: transparent;
}

/* 已访问的内链：稍作区分但仍清晰 */
.entry-content a:not(:is(.wp-block-table-of-contents, .wp-block-simpletoc-toc, .wp-block-rank-math-toc-block, .ez-toc-container, #toc_container, .lwptoc) *):visited {
    color: #1b6ea8;
}

/* 外链（在新标签打开）：换强调色 + 箭头图标 */
.entry-content a[target="_blank"]:not(:is(.wp-block-table-of-contents, .wp-block-simpletoc-toc, .wp-block-rank-math-toc-block, .ez-toc-container, #toc_container, .lwptoc) *) {
    color: #0b7d63;
    text-decoration-color: rgba(11, 125, 99, 0.5);
}

.entry-content a[target="_blank"]:not(:is(.wp-block-table-of-contents, .wp-block-simpletoc-toc, .wp-block-rank-math-toc-block, .ez-toc-container, #toc_container, .lwptoc) *):visited {
    color: #0b7d63;
}

.entry-content a[target="_blank"]:not(:is(.wp-block-table-of-contents, .wp-block-simpletoc-toc, .wp-block-rank-math-toc-block, .ez-toc-container, #toc_container, .lwptoc) *):hover,
.entry-content a[target="_blank"]:not(:is(.wp-block-table-of-contents, .wp-block-simpletoc-toc, .wp-block-rank-math-toc-block, .ez-toc-container, #toc_container, .lwptoc) *):focus {
    color: #fff;
    background: #0b7d63;
    text-decoration-color: transparent;
}

.entry-content a[target="_blank"]:not(:is(.wp-block-table-of-contents, .wp-block-simpletoc-toc, .wp-block-rank-math-toc-block, .ez-toc-container, #toc_container, .lwptoc) *)::after {
    content: "";
    display: inline-block;
    width: 0.7em;
    height: 0.7em;
    margin-left: 0.22em;
    vertical-align: -0.02em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b7d63' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='7' y1='17' x2='17' y2='7'/%3E%3Cpolyline points='8 7 17 7 17 16'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* 悬停时箭头转白，跟随高亮 */
.entry-content a[target="_blank"]:not(:is(.wp-block-table-of-contents, .wp-block-simpletoc-toc, .wp-block-rank-math-toc-block, .ez-toc-container, #toc_container, .lwptoc) *):hover::after,
.entry-content a[target="_blank"]:not(:is(.wp-block-table-of-contents, .wp-block-simpletoc-toc, .wp-block-rank-math-toc-block, .ez-toc-container, #toc_container, .lwptoc) *):focus::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='7' y1='17' x2='17' y2='7'/%3E%3Cpolyline points='8 7 17 7 17 16'/%3E%3C/svg%3E");
}

/* 图片型链接不加下划线与箭头 */
.entry-content a:has(> img),
.entry-content a:has(> img)::after {
    text-decoration: none;
    background: none;
    content: normal;
}

/* ====== 目录(TOC)插件兼容 ======
   兼容 Easy Table of Contents / Table of Contents Plus / LuckyWP /
   SimpleTOC / Rank Math 目录 / WordPress 原生「目录」区块。
   目录容器内的链接样式由插件自行控制（上方已用 :not 排除主题样式）。
   主题只负责：① 锚点跳转避开吸顶头部；② 给样式很素的原生区块一个清爽外观。 */

/* 任意标题或带 id 的锚点，跳转时避开吸顶头部 */
.entry-content :where(h1, h2, h3, h4, h5, h6, [id]) {
    scroll-margin-top: 90px;
}

/* 原生「目录」区块本身样式很少，给个清爽默认外观（插件自带样式会覆盖此处） */
.entry-content .wp-block-table-of-contents,
.entry-content .wp-block-simpletoc-toc {
    background: var(--color-section);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 1rem 1.25rem 1rem 1.6rem;
}

.entry-tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0;
    margin: 1.5rem 0 0;
}

.entry-tags li a {
    display: inline-block;
    font-size: 0.82rem;
    padding: 0.2rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
}

/* 分页 / 文章导航 */
.pagination,
.post-navigation,
.comments-pagination {
    margin: 2.5rem auto;
    max-width: 760px;
}

.pagination .nav-links,
.post-navigation .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pagination .page-numbers,
.post-navigation a {
    display: inline-block;
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
}

.pagination .page-numbers:hover,
.post-navigation a:hover {
    background: var(--tg-blue-soft);
    text-decoration: none;
}

.pagination .page-numbers.current {
    background: var(--grad);
    color: #fff;
    border-color: transparent;
}

.post-navigation .nav-subtitle {
    display: block;
    font-size: 0.75rem;
    color: var(--color-muted);
}

/* 评论 */
.comments-area {
    max-width: 760px;
    margin: 3rem auto 0;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border);
}

.comment-list {
    list-style: none;
    padding: 0;
}

.comment-list ol.children {
    list-style: none;
    padding-left: 1.25rem;
}

.comment-body {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 1rem;
    margin-bottom: 1rem;
    background: var(--color-section);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea,
.search-form input[type="search"] {
    width: 100%;
    max-width: 480px;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font: inherit;
}

.comment-form textarea {
    max-width: 100%;
}

.comment-form input[type="submit"],
.search-form input[type="submit"] {
    display: inline-block;
    padding: 0.65rem 1.3rem;
    border-radius: 999px;
    border: 0;
    background: var(--grad);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

/* 无结果 */
.no-results {
    background: var(--color-section);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.75rem;
    max-width: 760px;
}

/* ---------- 404 ---------- */
.error-404 {
    text-align: center;
    padding: 4rem 0;
}

.error-404 .err-code {
    font-size: clamp(3rem, 12vw, 6rem);
    font-weight: 800;
    line-height: 1;
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 0.5rem;
}

.error-404-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem 1.2rem;
    margin-top: 1.5rem;
}

.error-404-links a {
    font-weight: 600;
    color: var(--tg-blue-deep);
}

/* ---------- 单篇文章正文标题样式（仅作用于 .single 文章正文，不影响首页/落地页/指南页/导航） ---------- */
.single .entry-content h2 {
    /* 文字保持深色（不变蓝，避免被误认成链接），左侧加蓝色竖条 */
    padding-left: 0.7em;
    border-left: 4px solid var(--tg-blue, #1f8ceb);
}

.single .entry-content h3 {
    position: relative;
    padding-left: 0.95em;
}

.single .entry-content h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.52em;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--tg-blue, #1f8ceb);
}

/* ---------- 意图指南页 ---------- */
.guide .last-updated {
    margin-top: 0.5rem;
}

.guide > .lead {
    font-size: 1.08rem;
    color: var(--color-muted);
    margin-top: 0.75rem;
}

/* 指南页官方下载按钮区 */
.guide-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 0.9rem;
    margin: 1.5rem 0 0.5rem;
}

.guide-cta-note {
    font-size: 0.82rem;
    color: var(--color-muted);
}

.guide .entry-content section {
    margin-bottom: 1.25rem;
}

.related-links {
    background: var(--color-section);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.25rem 1.4rem;
    margin-top: 2.5rem;
}

.related-links h2 {
    font-size: 1.15rem;
    margin: 0 0 0.5rem;
}

.related-links ul {
    margin: 0;
    padding-left: 1.2rem;
}

.related-links li {
    margin: 0.3rem 0;
}

.guide-faq {
    margin-top: 2.5rem;
}

.guide-faq h2 {
    margin-bottom: 1rem;
}

/* ---------- 响应式 ---------- */
@media (max-width: 880px) {
    /* 移动端：显示汉堡按钮，主导航默认收起、点击展开 */
    .menu-toggle {
        display: inline-flex;
    }

    .main-navigation {
        display: none;
        order: 3;
        width: 100%;
        margin-top: 0.6rem;
    }

    .main-navigation.is-open {
        display: block;
    }

    .main-navigation > ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0.1rem;
    }

    .main-navigation a {
        display: block;
        padding: 0.65rem 0.8rem;
        border-radius: 8px;
        white-space: normal;
    }

    /* 子菜单在移动端平铺、缩进显示 */
    .main-navigation .sub-menu {
        position: static;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        min-width: 0;
        margin: 0;
        padding: 0 0 0 1rem;
        border: 0;
        box-shadow: none;
        background: transparent;
    }

    .main-navigation .menu-item-has-children > a::after {
        display: none;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .hero-visual,
    .hero-media {
        order: -1;
    }

    .hero-media img {
        max-width: 380px;
    }

    .device-card {
        max-width: 280px;
    }

    .feature-grid,
    .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 设备图在窄屏改为竖向堆叠 */
    .hero-devices {
        flex-direction: column;
        align-items: center;
    }

    .dev {
        width: 100%;
    }

    .media-section {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .media-figure {
        order: -1;
    }

    .media-figure img {
        max-width: 320px;
    }
}

@media (max-width: 600px) {
    .section {
        padding: 2.25rem 0;
    }

    .hero {
        padding: 1.75rem 0 2.25rem;
    }

    .cta-group .btn {
        width: 100%;
    }

    .card-grid,
    .steps-grid,
    .safety-grid,
    .info-grid,
    .entry-list,
    .feature-grid,
    .why-grid {
        grid-template-columns: 1fr;
    }

    .footer-top {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .btn,
    .card,
    .entry-card,
    .entry-card-media img,
    .faq-item summary::after {
        transition: none;
    }

    .entry-card:hover .entry-card-media img {
        transform: none;
    }
}