@charset "utf-8";
/* 普拉瑞思官网 VI 视觉规范样式表 */

/* ============================================
   色彩规范
   ============================================ */

/* 主色系 */
:root {
  --primary: #19A1DD;           /* 主色 */
  --primary-dark: #1386B8;      /* 主色深色 (hover/强调) */
  --primary-light: #E0F4FB;     /* 主色浅色 (背景/标签) */

  /* 中性色体系 */
  --text-title: #3A4047;        /* 标题级文字 */
  --text-body: #5F6770;         /* 正文级文字 */
  --text-muted: #9098A3;        /* 辅助级文字 (日期/备注) */

  --bg-page: #FFFFFF;           /* 页面底色 */
  --bg-card: #F7F9FA;           /* 卡片/模块底色 */
  --border-color: #E4E8ED;      /* 边框/分割线 */

  /* 字体 */
  --font-family: 'Microsoft YaHei', 'Noto Sans SC', Arial, sans-serif;
}

/* ============================================
   Tailwind 自定义颜色类兼容
   ============================================ */

/* 文字颜色 */
.text-textBody { color: #5F6770; }
.text-textTitle { color: #3A4047; }
.text-textMuted { color: #9098A3; }
.text-primary { color: #19A1DD; }
.text-primaryDark { color: #1386B8; }

/* 悬停颜色 */
.hover\:text-primary:hover { color: #19A1DD; }
.hover\:text-primaryDark:hover { color: #1386B8; }

/* 背景颜色 */
.bg-bgCard { background-color: #F7F9FA; }
.bg-bgPage { background-color: #FFFFFF; }
.bg-primary { background-color: #19A1DD; }
.bg-primaryDark { background-color: #1386B8; }
.bg-primaryLight { background-color: #E0F4FB; }

/* 悬停背景 */
.hover\:bg-primary:hover { background-color: #19A1DD; }
.hover\:bg-primaryDark:hover { background-color: #1386B8; }
.hover\:bg-primaryLight:hover { background-color: #E0F4FB; }

/* 边框颜色 */
.border-borderColor { border-color: #E4E8ED; }
.border-primary { border-color: #19A1DD; }

/* 焦点样式 */
.focus\:ring-primary:focus { ring-color: #19A1DD; }
.focus\:border-primary:focus { border-color: #19A1DD; }

/* ============================================
   基础样式
   ============================================ */

body {
  font-family: var(--font-family);
  background-color: var(--bg-page);
  color: var(--text-body);
  line-height: 1.5;
}

/* ============================================
   导航栏样式
   ============================================ */

.header-nav {
  background: var(--bg-page);
  border-bottom: 1px solid var(--border-color);
}

.header-nav a {
  color: var(--text-body);
  font-size: 15px;
  font-weight: 500;
  transition: color 0.3s ease;
}

.header-nav a:hover,
.header-nav a.active,
.header-nav a.current {
  color: var(--primary);
}

.header-nav a.active::after,
.header-nav a.current::after {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background: var(--primary);
  margin-top: 4px;
}



/* Logo区域 */
.logoimg img {
  max-height: 40px;
}

/* 搜索框 */
.search-box {
  border: 1px solid var(--border-color);
  border-radius: 4px;
  height: 32px;
  padding: 8px 12px;
  font-size: 14px;
  transition: border-color 0.3s ease;
}

.search-box:focus {
  border-color: var(--primary);
  outline: none;
}

/* ============================================
   按钮规范
   ============================================ */

/* 主按钮 (下载/立即咨询/购买) */
.btn-primary {
  background: var(--primary);
  color: #FFFFFF;
  font-size: 14px;
  height: 32px;
  border-radius: 4px;
  padding: 0 16px;
  border: none;
  cursor: pointer;
  transition: background 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-primary:hover {
  background: var(--primary-dark);
}

/* 次按钮 (查看详情/相关产品) */
.btn-secondary {
  background: transparent;
  color: var(--primary);
  font-size: 14px;
  height: 32px;
  border-radius: 4px;
  padding: 0 16px;
  border: 1px solid var(--primary);
  cursor: pointer;
  transition: background 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-secondary:hover {
  background: var(--primary-light);
}

/* 标签 (可下载/新品) */
.tag {
  background: var(--primary-light);
  color: var(--primary);
  font-size: 12px;
  border-radius: 2px;
  padding: 2px 6px;
  display: inline-block;
}

/* ============================================
   卡片样式
   ============================================ */

.card {
  background: var(--bg-page);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 16px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(25, 161, 221, 0.08);
}

/* 卡片标题 */
.card-title {
  color: var(--text-title);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 8px;
}

/* 卡片正文 */
.card-content {
  color: var(--text-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

/* 卡片辅助信息 */
.card-meta {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 400;
}

/* ============================================
   文字层级
   ============================================ */

/* 页面大标题 */
.title-lg {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-title);
}

/* 文档/产品标题 */
.title-md {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-title);
}

/* 正文描述 */
.text-body {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-body);
  line-height: 1.5;
}

/* 辅助文字 */
.text-muted {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
}

/* 链接样式 */
a.link {
  color: var(--text-body);
  transition: color 0.3s ease;
}

a.link:hover {
  color: var(--primary);
}

/* ============================================
   间距规则
   ============================================ */

.section-gap {
  margin: 24px 0;
}

.card-padding {
  padding: 16px;
}

.title-gap {
  margin-bottom: 8px;
}

/* ============================================
   页脚样式
   ============================================ */

.footer-nav {
  background: var(--bg-card);
  padding: 48px 0 32px;
}

.footer-nav h4 {
  color: var(--text-title);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
}

.footer-nav a {
  color: var(--text-body);
  font-size: 14px;
  transition: color 0.3s ease;
}

.footer-nav a:hover {
  color: var(--primary);
}

.footer-bottom {
  background: #1a1a1a;
  color: var(--text-muted);
  padding: 24px 0;
}

.footer-bottom a {
  color: var(--text-muted);
}

.footer-bottom a:hover {
  color: var(--primary);
}

/* ============================================
   分割线
   ============================================ */

.divider {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: 16px 0;
}

/* ============================================
   文档列表样式
   ============================================ */

.doc-item {
  border-bottom: 1px solid var(--border-color);
  padding: 16px 0;
}

.doc-item:last-child {
  border-bottom: none;
}

.doc-title {
  color: var(--text-title);
  font-size: 16px;
  font-weight: 500;
}

.doc-meta {
  color: var(--text-muted);
  font-size: 12px;
}

/* ============================================
   内容区域样式（支持编辑器居中效果）
   ============================================ */

.content {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-body);
}

.content p {
  margin-bottom: 1rem;
  line-height: 1.8;
}

/* 图片默认样式 - 保留编辑器设置的宽高 */
.content img {
  max-width: 100%;
  height: auto;
}

/* 图片如果编辑器设置了固定宽高，则使用编辑器的值 */
.content img[width],
.content img[height] {
  max-width: none;
  height: auto;
}

/* 图片居中 - 父元素 text-align:center */
.content p[style*="text-align: center"],
.content p[style*="text-align:center"],
.content div[style*="text-align: center"],
.content div[style*="text-align:center"] {
  text-align: center !important;
}

/* 居中父元素里的图片用 inline-block 响应 text-align */
.content p[style*="center"] img,
.content div[style*="center"] img,
.solution-content p[style*="center"] img,
.solution-content p[style*="text-align"] img {
  display: inline-block !important;
  margin: 0 !important;
}

/* align 属性居中 */
.content p[align="center"],
.content div[align="center"] {
  text-align: center !important;
}

.content img[align="center"] {
  display: block !important;
  margin: 0 auto !important;
}

/* center 标签 */
.content center {
  display: block;
  text-align: center !important;
}

/* 表格样式 - 保留编辑器设置 */
.content table {
  width: auto;
  border-collapse: collapse;
  margin: 1rem 0;
}

/* 表格居中 - display:table 保持宽度自适应，margin:auto 才能生效 */
.content table[align="center"] {
  display: table !important;
  width: auto !important;
  margin: 1rem auto !important;
}

.content table[style*="text-align: center"],
.content table[style*="text-align:center"] {
  display: table !important;
  width: auto !important;
  margin: 1rem auto !important;
}

.content table th,
.content table td {
  padding: 8px 12px;
  border: 1px solid var(--border-color);
}

.content table th {
  background: var(--bg-card);
  font-weight: 500;
}

/* 段落对齐 */
.content p[style*="right"],
.content div[style*="right"] {
  text-align: right !important;
}

/* ============================================
   解决方案内容区域样式
   ============================================ */

/* 图片样式 - 保留编辑器设置 */
.solution-content img {
  max-width: 100%;
  height: auto;
}

/* 图片居中支持 */
.solution-content p[style*="center"],
.solution-content div[style*="center"] {
  text-align: center !important;
}

.solution-content p[align="center"],
.solution-content div[align="center"] {
  text-align: center !important;
}

.solution-content img[align="center"] {
  display: block;
  margin: 0 auto !important;
}

/* 表格居中支持 */
.solution-content table {
  width: auto;
  border-collapse: collapse;
  margin: 1rem 0;
}

.solution-content table[align="center"] {
  display: block !important;
  width: auto !important;
  margin: 1rem auto !important;
}

.solution-content table[style*="center"] {
  display: block !important;
  width: auto !important;
  margin: 1rem auto !important;
}

.solution-content table th,
.solution-content table td {
  padding: 8px 12px;
  border: 1px solid var(--border-color);
}

/* ============================================
   产品推荐样式
   ============================================ */

/* 段落右对齐 */
.content p[style*="right"],
.content div[style*="right"] {
  text-align: right !important;
}

.content p[style*="right"] img,
.content div[style*="right"] img {
  display: block !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}
.content center {
  display: block;
  text-align: center;
}

.content center img {
  display: inline-block;
}

/* 表格居中支持 */
.content table {
  width: auto;
  border-collapse: collapse;
  margin: 1rem 0;
}

.content table[style*="center"],
.content table[style*="auto"] {
  margin: 1rem auto;
}

.content table[align="center"] {
  margin: 1rem auto;
}

.content table th,
.content table td {
  padding: 8px 12px;
  border: 1px solid var(--border-color);
}

.content table th {
  background: var(--bg-card);
  font-weight: 500;
}

/* 段落居中 */
.content p[style*="center"],
.content div[style*="center"] {
  text-align: center;
}

.content p[style*="right"],
.content div[style*="right"] {
  text-align: right;
}

.content p[style*="left"],
.content div[style*="left"] {
  text-align: left;
}
.content div[style*="text-align:center"],
.content div[style*="text-align: center"] {
  text-align: center;
}

/* ============================================
   产品推荐样式
   ============================================ */

.product-card {
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 16px;
}

.product-name {
  color: var(--text-title);
  font-size: 16px;
  font-weight: 500;
}

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

.crumbs_nav {
  font-size: 14px;
  color: var(--text-muted);
}

.crumbs_nav a {
  color: var(--text-muted);
  transition: color 0.3s ease;
}

.crumbs_nav a:hover {
  color: var(--primary);
}

.crumbs_nav .on {
  color: var(--text-title);
}

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

.hamburger-line {
  height: 2px;
  width: 24px;
  background-color: var(--primary);
  margin: 4px 0;
  transition: 0.4s;
}

.hamburger.active .hamburger-line:nth-child(1) {
  transform: rotate(-45deg) translate(-5px, 6px);
}

.hamburger.active .hamburger-line:nth-child(2) {
  opacity: 0;
}

.hamburger.active .hamburger-line:nth-child(3) {
  transform: rotate(45deg) translate(-5px, -6px);
}

/* ============================================
   动画效果
   ============================================ */

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease-out;
}

.fade-in.appear {
  opacity: 1;
  transform: translateY(0);
}

/* Hero背景 */
.hero-bg {
  background: linear-gradient(135deg, var(--primary-light) 0%, #e0f2fe 100%);
}

/* ============================================
   响应式调整
   ============================================ */

@media (max-width: 768px) {
  .desktop-only { display: none; }
  .footer-nav { display: none; }

  .title-lg { font-size: 18px; }
  .title-md { font-size: 14px; }
  .text-body { font-size: 13px; }

  .section-gap { margin: 16px 0; }
  .card-padding { padding: 12px; }
}

@media (min-width: 769px) {
  .mobile-only { display: none; }
}

/* ============================================
   Tailwind 兼容覆盖
   ============================================ */

/* 覆盖 Tailwind 默认颜色 */
.text-primary { color: var(--primary); }
.bg-primary { background-color: var(--primary); }
.border-primary { border-color: var(--primary); }

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

.bg-card { background-color: var(--bg-card); }
.bg-page { background-color: var(--bg-page); }

.border-divider { border-color: var(--border-color); }

/* 悬停效果 */
.hover-primary:hover { color: var(--primary); }
.hover-bg-light:hover { background-color: var(--primary-light); }
.hover-bg-dark:hover { background-color: var(--primary-dark); }

/* 卡片悬停 */
.card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(25, 161, 221, 0.08);
}