/* 搜狗输入法官网 - 主样式文件 */

/* 隐藏元素（用于SEO和可访问性） */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* 下载按钮样式 */
.pcgetDown {
    cursor: pointer;
    text-decoration: none !important;
}

.pcgetDown:hover {
    text-decoration: none !important;
}

/* 下载按钮相关链接样式 */
a[href*="下载"],
a[href*="download"] {
    text-decoration: none !important;
}

/* React应用中的下载按钮 */
#index a[href*="下载"],
#index a[href*="download"],
#index .pcgetDown {
    text-decoration: none !important;
}

/* 确保正文文字颜色正常，不是蓝色 */
body {
    color: #333 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 确保所有元素使用border-box */
*, *::before, *::after {
    box-sizing: border-box;
}

/* 全局去除所有下划线 */
*, *::before, *::after,
a, a:hover, a:visited, a:active, a:focus,
u, ins {
    text-decoration: none !important;
}

/* 防止页脚元素在hover时改变opacity导致文字变白 */
footer *:hover,
.footer *:hover,
[class*="footer"] *:hover,
[id*="footer"] *:hover,
#index footer *:hover,
#index [class*="footer"] *:hover {
    /* 不设置opacity，保持原有颜色 */
    opacity: inherit !important;
}

/* 确保页脚文字颜色不变 */
footer,
.footer,
[class*="footer"],
[id*="footer"],
#index footer,
#index [class*="footer"] {
    opacity: 1 !important;
}

footer *,
.footer *,
[class*="footer"] *,
[id*="footer"] *,
#index footer *,
#index [class*="footer"] * {
    opacity: 1 !important;
}

/* 确保所有文本元素颜色正常，但不影响布局 */
p, span, li, td, th {
    color: #333 !important;
}

/* div 不强制设置颜色，避免影响布局和背景 */
div {
    /* 不设置color，让React应用自己控制 */
}

/* 只有链接才使用蓝色，但页脚链接除外 */
a {
    color: #1e88e5 !important;
    text-decoration: none !important;
    transition: color 0.3s ease;
}

a:visited {
    color: #1e88e5 !important;
    text-decoration: none !important;
}

/* 导航链接和普通链接的hover效果 */
a:hover {
    text-decoration: none !important;
    color: #1976d2 !important;
    /* 不改变opacity，避免文字变白 */
}

/* 顶部导航链接hover效果 - 橙色 */
nav a:hover,
.nav a:hover,
header a:hover,
[class*="nav"] a:hover,
[class*="Nav"] a:hover,
[class*="header"] a:hover,
[class*="Header"] a:hover,
header nav a:hover,
header .nav a:hover {
    color: #ff6600 !important;
    /* 搜狗输入法标准橙色 */
    text-decoration: none !important;
}

/* 特定导航链接hover效果 - 橙色（通过href属性匹配） */
a[href*="更多"]:hover,
a[href*="合作"]:hover,
a[href*="帮助"]:hover,
a[href*="企业"]:hover,
a[href*="专题"]:hover {
    color: #ff6600 !important;
    text-decoration: none !important;
}

/* 普通导航链接（非header中的）hover效果 */
nav a:not(header nav a):hover,
.nav a:not(header .nav a):hover {
    color: #1976d2 !important;
    /* 不改变opacity，避免文字变白 */
    text-decoration: none !important;
}

/* 页脚区域的链接保持和文字一样的颜色，不变色，看起来像普通文字 */
footer a,
.footer a,
[class*="footer"] a,
[id*="footer"] a,
[class*="Footer"] a,
[id*="Footer"] a,
footer * a,
.footer * a {
    color: inherit !important;
    text-decoration: none !important;
    cursor: pointer;
}

footer *,
.footer * {
    text-decoration: none !important;
}

footer a:hover,
.footer a:hover,
[class*="footer"] a:hover,
[id*="footer"] a:hover,
[class*="Footer"] a:hover,
[id*="Footer"] a:hover,
footer * a:hover,
.footer * a:hover,
footer *:hover,
.footer *:hover {
    color: inherit !important;
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-style: none !important;
    text-decoration-color: transparent !important;
    /* 不改变opacity，保持原有颜色 */
}

footer a:active,
.footer a:active,
footer a:focus,
.footer a:focus,
footer a:visited,
.footer a:visited {
    color: inherit !important;
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-style: none !important;
    text-decoration-color: transparent !important;
}

/* 针对React应用渲染的页脚内容 */
#index footer a,
#index [class*="footer"] a,
#index [id*="footer"] a,
#index [class*="Footer"] a,
#index [id*="Footer"] a,
#index footer * a,
#index [class*="footer"] * a {
    color: inherit !important;
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-style: none !important;
    text-decoration-color: transparent !important;
    cursor: pointer;
}

#index footer *,
#index [class*="footer"] * {
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-style: none !important;
    text-decoration-color: transparent !important;
}

#index footer a:hover,
#index [class*="footer"] a:hover,
#index [id*="footer"] a:hover,
#index [class*="Footer"] a:hover,
#index [id*="Footer"] a:hover,
#index footer * a:hover,
#index [class*="footer"] * a:hover,
#index footer *:hover,
#index [class*="footer"] *:hover {
    color: inherit !important;
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-style: none !important;
    text-decoration-color: transparent !important;
    /* 不改变opacity，保持原有颜色 */
}

#index footer a:active,
#index footer a:focus,
#index footer a:visited,
#index [class*="footer"] a:active,
#index [class*="footer"] a:focus,
#index [class*="footer"] a:visited {
    color: inherit !important;
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-style: none !important;
    text-decoration-color: transparent !important;
}

/* 标题可以使用蓝色，但正文不行 */
h1, h2, h3, h4, h5, h6 {
    color: #1e88e5 !important;
}

/* 确保React应用渲染的内容文字颜色正常，但不影响布局 */
#index {
    /* 不设置color，让React应用自己控制布局 */
    position: relative;
    width: 100%;
    min-height: 100vh;
}

#index p, #index span, #index li {
    color: #333 !important;
}

/* div 不强制设置，避免影响React应用的布局 */
#index div {
    /* 不设置color，让React应用自己控制 */
}

#index a {
    color: #1e88e5 !important;
    text-decoration: none !important;
    transition: color 0.3s ease;
}

#index a:hover {
    text-decoration: none !important;
    color: #1976d2 !important;
    /* 不改变opacity，避免文字变白 */
}

/* React应用中的导航链接hover效果 - 橙色 */
#index nav a:hover,
#index .nav a:hover,
#index header a:hover,
#index header nav a:hover,
#index header .nav a:hover,
#index [class*="nav"] a:hover,
#index [class*="Nav"] a:hover,
#index [class*="header"] a:hover,
#index [class*="Header"] a:hover {
    color: #ff6600 !important;
    /* 搜狗输入法标准橙色 */
    text-decoration: none !important;
}

/* React应用中特定导航链接hover效果 - 橙色 */
#index a[href*="更多"]:hover,
#index a[href*="合作"]:hover,
#index a[href*="帮助"]:hover,
#index a[href*="企业"]:hover,
#index a[href*="专题"]:hover {
    color: #ff6600 !important;
    text-decoration: none !important;
}

/* React应用中普通导航链接（非header中的）hover效果 */
#index nav a:not(#index header nav a):hover,
#index .nav a:not(#index header .nav a):hover {
    color: #1976d2 !important;
    /* 不改变opacity，避免文字变白 */
    text-decoration: none !important;
}

#index h1, #index h2, #index h3, #index h4, #index h5, #index h6 {
    color: #1e88e5 !important;
}

/* ==================== 防止底部横向滚动条 ==================== */

/* 只在body层面隐藏横向滚动，不影响内部布局 */
body {
    overflow-x: hidden;
}

/* 确保React应用容器不会超出视口宽度 */
#index {
    max-width: 100vw;
    overflow-x: hidden;
}

/* ==================== 滚动性能优化 ==================== */

/* 优化特定元素的滚动性能 - 使用轻量级优化 */
.HHN1Ar7KJQ07GXnkaUj9 {
    /* 优化滚动性能（仅移动端） */
    -webkit-overflow-scrolling: touch;
}

/* 优化整个页面的滚动性能 */
html {
    /* 启用平滑滚动（如果浏览器支持） */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

body {
    /* 优化页面滚动 */
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}

/* 确保React应用的容器不会错位 */
#index.container {
    margin: 0 auto;
    padding: 0;
    max-width: 100%;
}