/* ==========================================================================
   frutalk 德乐果缘官网 —— 项目自定义样式（与 Tailwind 编译产物分离存放）
   本文件只放 Tailwind 工具类不擅长表达的部分：
   1) 品牌 CSS 变量    2) 中英文切换的显隐规则    3) 图片/遮罩等视觉细节
   4) 移动端菜单与滚动锁定                       5) 表单与列表的少量状态样式
   加载顺序：tailwind.css → main.css
   ========================================================================== */

:root {
  --brand-50: #eef6f2;
  --brand-100: #d8ece3;
  --brand-500: #2b8365;
  --brand-600: #1b6d4f;
  --brand-700: #15583f;
  --brand-900: #0d3828;
  --line: #e4e9e6;
  --ink: #16211c;
  --ink-muted: #6b7a73;
  --header-h: 64px;
}

/* --------------------------------- 文字与滚动 -------------------------------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 数字类内容（统计数字、规格参数）使用等宽数字，排列更整齐 */
.tabular {
  font-variant-numeric: tabular-nums;
}

/* -------------------------- 中英文切换的显隐控制 ----------------------------- */
/* 用法：<span data-lang-only="en">English only</span>
   语言切换由 assets/js/i18n.js 写入 <html lang="zh-CN" | "en"> */
html[lang^='zh'] [data-lang-only='en'],
html[lang='en'] [data-lang-only='zh'] {
  display: none !important;
}

/* 语言切换按钮 */
.lang-btn {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.65);
  transition: color 0.2s, background-color 0.2s;
  cursor: pointer;
  background: transparent;
  border: 0;
}

.lang-btn:hover {
  color: #fff;
}

.lang-btn[aria-pressed='true'] {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
}

.lang-btn--dark {
  color: var(--ink-muted);
}

.lang-btn--dark:hover {
  color: var(--brand-700);
}

.lang-btn--dark[aria-pressed='true'] {
  color: #fff;
  background: var(--brand-600);
}

/* --------------------------------- 图片处理 --------------------------------- */
.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 深色照片上的文字可读性遮罩 */
.overlay-dark {
  background: linear-gradient(
    180deg,
    rgba(13, 56, 40, 0.72) 0%,
    rgba(13, 56, 40, 0.58) 45%,
    rgba(13, 56, 40, 0.78) 100%
  );
}

.overlay-soft {
  background: linear-gradient(90deg, rgba(13, 56, 40, 0.82) 0%, rgba(13, 56, 40, 0.5) 55%, rgba(13, 56, 40, 0.18) 100%);
}

/* 图片悬停时的极轻微缩放（不使用夸张动效） */
.media-zoom {
  overflow: hidden;
}

.media-zoom img {
  transition: transform 0.5s ease;
}

.media-zoom:hover img {
  transform: scale(1.03);
}

/* --------------------------------- 头部导航 -------------------------------- */
#site-header {
  transition: box-shadow 0.25s ease;
}

#site-header.is-scrolled {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 8px 24px -18px rgba(13, 56, 40, 0.45);
}

/* 产品中心下拉（桌面端 hover / 键盘 focus-within 均可展开） */
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: -16px;
  min-width: 232px;
  padding: 8px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px -24px rgba(13, 56, 40, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown a {
  display: block;
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 13.5px;
  color: var(--ink);
  transition: background-color 0.18s, color 0.18s;
}

.nav-dropdown a:hover {
  background: var(--brand-50);
  color: var(--brand-700);
}

/* --------------------------------- 移动端菜单 ------------------------------- */
body.no-scroll {
  overflow: hidden;
}

#mobile-menu {
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}

#mobile-menu.is-open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

#mobile-menu a {
  display: block;
  padding: 14px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 15px;
  color: rgba(255, 255, 255, 0.86);
}

#mobile-menu a.is-active,
#mobile-menu a:hover {
  color: #fff;
}

/* --------------------------------- 数据列表 -------------------------------- */
/* 由 JS 渲染的卡片列表在渲染完成前保持隐藏，避免内容跳动 */
[data-render] {
  opacity: 0;
  transition: opacity 0.25s ease;
}

[data-render].is-ready {
  opacity: 1;
}

/* 筛选按钮 */
.filter-btn {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}

.filter-btn:hover {
  border-color: var(--brand-500);
  color: var(--brand-700);
}

.filter-btn[aria-pressed='true'] {
  background: var(--brand-600);
  border-color: var(--brand-600);
  color: #fff;
}

/* --------------------------------- 表格容器 -------------------------------- */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* --------------------------------- 表单状态 -------------------------------- */
.form-note {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-muted);
}

.form-success {
  border: 1px solid var(--brand-100);
  background: var(--brand-50);
  color: var(--brand-700);
}

.field-error {
  border-color: #c0392b !important;
}

/* ---------------------------- 产品矩阵表（旧站数据） ---------------------------- */
.th {
  padding: 12px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-muted);
  white-space: nowrap;
  background: #f6f8f7;
}

.td {
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  white-space: nowrap;
}

/* ------------------------------- 证书大图灯箱 ------------------------------- */
.cert-lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 30, 22, 0.88);
}

.cert-lightbox.is-open {
  display: flex;
}

.cert-lightbox img {
  width: auto;
  height: auto;
  max-width: min(880px, 100%);
  max-height: 88vh;
  border-radius: 6px;
  background: #fff;
}

.cert-lightbox-close {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.cert-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.16);
}

/* --------------------------------- 可访问性 ------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}