/* ============================================================
   China Advanced Medical (CAM) — 中國醫療門戶
   全站配色取自 LOGO 蓝色系：#4870C8 / #2850A0 / #D8E0F0
   ============================================================ */

/* ---------- 1. 设计变量 ---------- */
:root {
  /* 蓝色主色阶 —— 由 logo 主色 #4870C8 推导 */
  --blue-950: #0C1E3D;
  --blue-900: #12294F;
  --blue-800: #1B3A73;
  --blue-700: #2850A0;   /* logo 深蓝 */
  --blue-600: #3560B8;
  --blue-500: #4870C8;   /* logo 主蓝 */
  --blue-400: #6A8DD8;
  --blue-300: #98B0E0;
  --blue-200: #C0D0E8;
  --blue-100: #D8E0F0;   /* logo 浅蓝 */
  --blue-50:  #EDF2FB;
  --blue-25:  #F6F9FD;

  /* 医疗红 —— 仅用于 logo 十字与紧急联系 */
  --med-red: #E01B1B;
  --med-red-dark: #B91515;

  /* 中性色 */
  --ink-900: #16202E;
  --ink-700: #38455A;
  --ink-500: #5C6B80;
  --ink-400: #7C899B;
  --ink-300: #A8B3C2;
  --ink-200: #D9E0E9;
  --ink-100: #EDF1F6;
  --white: #FFFFFF;

  /* 语义色 */
  --bg-page: #F4F7FC;
  --bg-card: #FFFFFF;
  --border: #DDE5F0;
  --border-strong: #C4D2E6;

  /* 排版 */
  --font-sans: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB",
               "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Songti SC", "SimSun", Georgia, serif;

  /* 字号（可被字体缩放功能覆盖） */
  --fs-scale: 1;
  --fs-xs: calc(12px * var(--fs-scale));
  --fs-sm: calc(13px * var(--fs-scale));
  --fs-base: calc(15px * var(--fs-scale));
  --fs-md: calc(17px * var(--fs-scale));
  --fs-lg: calc(20px * var(--fs-scale));
  --fs-xl: calc(26px * var(--fs-scale));
  --fs-2xl: calc(34px * var(--fs-scale));
  --fs-3xl: calc(44px * var(--fs-scale));

  /* 间距 */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 88px;

  /* 圆角与阴影 */
  --r-sm: 4px;  --r-md: 8px;  --r-lg: 14px;  --r-xl: 20px;
  --sh-sm: 0 1px 3px rgba(27, 58, 115, .07);
  --sh-md: 0 4px 16px rgba(27, 58, 115, .09);
  --sh-lg: 0 12px 36px rgba(27, 58, 115, .14);
  --sh-blue: 0 8px 24px rgba(72, 112, 200, .22);

  /* 布局：设计稿横向比例 5 : 20 : 5 */
  --shell-max: 1560px;
  --rail-w: 12.5%;
  --topbar-h: 64px;
  --nav-h: 78px;
}

/* ---------- 2. 基础重置 ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topbar-h) + var(--nav-h) + 12px); }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--ink-700);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 { margin: 0; color: var(--ink-900); font-weight: 700; line-height: 1.3; }
p { margin: 0; }
a { color: var(--blue-600); text-decoration: none; transition: color .18s; }
a:hover { color: var(--blue-800); }
ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; border-radius: 2px; }

/* ---------- 3. LOGO ---------- */
.logo { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.logo__img { height: 56px; width: auto; max-width: 100%; flex-shrink: 0; object-fit: contain; }

/* ---------- 3.1 Logo 放大弹层（lightbox） ---------- */
.logo-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 18, 38, 0.82);
  padding: 24px; cursor: zoom-out;
}
.logo-lightbox[hidden] { display: none; }
.logo-lightbox__img {
  max-width: 92vw; max-height: 92vh; width: auto; height: auto;
  object-fit: contain; border-radius: 14px;
  background: #fff; padding: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.logo-lightbox__close {
  position: absolute; top: 18px; right: 22px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.15); color: #fff;
  font-size: 26px; line-height: 1; cursor: pointer;
  transition: background 0.2s;
}
.logo-lightbox__close:hover { background: rgba(255, 255, 255, 0.3); }

/* ---------- 4. 顶部工具条（设计稿高度比例 2.5） ---------- */
.topbar {
  background: linear-gradient(90deg, var(--blue-800) 0%, var(--blue-700) 55%, var(--blue-600) 100%);
  color: var(--blue-100);
  font-size: var(--fs-xs);
  height: var(--topbar-h);
  position: relative;
  z-index: 60;
}
.topbar__inner {
  max-width: var(--shell-max);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.topbar__slogan {
  display: flex; align-items: center; gap: 22px;
  min-width: 0;
  font-size: var(--fs-xs); line-height: 1.4;
}
.topbar__slogan-col {
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0;
}
.topbar__slogan-col strong {
  color: var(--white); font-weight: 700; letter-spacing: .04em;
  font-size: calc(var(--fs-xs) + 1px);
}
.topbar__slogan-col ul {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 1px;
}
.topbar__slogan-col li {
  color: var(--blue-100);
  display: flex; align-items: baseline; gap: 5px;
}
.topbar__slogan-col li::before {
  content: "•"; color: var(--white); font-weight: 700; flex-shrink: 0;
}

.topbar__tools { display: flex; align-items: center; gap: 0; flex-shrink: 0; }
.tool {
  display: flex; align-items: center; gap: 5px;
  padding: 0 12px; height: var(--topbar-h);
  color: var(--blue-100); font-size: var(--fs-xs);
  position: relative; transition: background .18s, color .18s;
}
.tool:hover { background: rgba(255,255,255,.12); color: var(--white); }
.tool + .tool::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 13px; background: rgba(255,255,255,.24);
}
.tool svg { width: 13px; height: 13px; flex-shrink: 0; }
.tool--emergency { color: #FFD9D9; cursor: pointer; }
.tool--emergency:hover { background: var(--med-red); color: var(--white); }
.tool--emergency .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--med-red); box-shadow: 0 0 0 0 rgba(224,27,27,.7);
  animation: pulse 2s infinite;
}
.tool__tel {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--white);
  line-height: 1.2;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(224,27,27,.65); }
  70%  { box-shadow: 0 0 0 7px rgba(224,27,27,0); }
  100% { box-shadow: 0 0 0 0 rgba(224,27,27,0); }
}

/* 字号切换按钮组 */
.fs-group { display: flex; align-items: center; gap: 3px; padding: 0 10px; }
.fs-btn {
  color: var(--blue-100); border-radius: 3px; line-height: 1;
  padding: 3px 6px; transition: background .16s, color .16s;
}
.fs-btn:hover { background: rgba(255,255,255,.16); color: var(--white); }
.fs-btn.is-active { background: var(--white); color: var(--blue-700); font-weight: 700; }
.fs-btn--s { font-size: 11px; }
.fs-btn--m { font-size: 13px; }
.fs-btn--l { font-size: 15px; }

/* 语言下拉 */
.lang { position: relative; }
.lang__menu {
  position: absolute; top: 100%; right: 0;
  background: var(--white); border-radius: var(--r-md);
  box-shadow: var(--sh-lg); border: 1px solid var(--border);
  min-width: 132px; padding: 6px; z-index: 80;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s, transform .18s, visibility .18s;
}
.lang:hover .lang__menu, .lang:focus-within .lang__menu, .lang.is-open .lang__menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.lang__menu a {
  display: block; padding: 7px 12px; border-radius: var(--r-sm);
  color: var(--ink-700); font-size: var(--fs-sm);
}
.lang__menu a:hover { background: var(--blue-50); color: var(--blue-700); }
.lang__menu a.is-active { background: var(--blue-500); color: var(--white); font-weight: 600; }

/* ---------- 5. 导航栏（设计稿高度比例 1，横向 5 : 15） ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(27,58,115,.04);
}
.nav.is-stuck { box-shadow: var(--sh-md); }
.nav__inner {
  max-width: var(--shell-max);
  margin: 0 auto; padding: 0 var(--sp-5);
  height: var(--nav-h);
  display: grid;
  grid-template-columns: 25% 1fr;   /* 设计稿 5 : 15 */
  align-items: center; gap: var(--sp-4);
}
.nav__menu {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 2px; height: 100%;
}
.nav__item { position: relative; height: 100%; display: flex; align-items: center; }
.nav__link {
  display: flex; align-items: center; gap: 5px;
  padding: 0 15px; height: 100%;
  font-size: var(--fs-base); font-weight: 600; color: var(--ink-700);
  position: relative; white-space: nowrap; transition: color .18s;
}
.nav__link::after {
  content: ""; position: absolute; left: 15px; right: 15px; bottom: 0;
  height: 3px; background: var(--blue-500); border-radius: 3px 3px 0 0;
  transform: scaleX(0); transform-origin: center; transition: transform .22s;
}
.nav__item:hover .nav__link,
.nav__link.is-active { color: var(--blue-700); }
.nav__item:hover .nav__link::after,
.nav__link.is-active::after { transform: scaleX(1); }
.nav__caret { width: 9px; height: 9px; opacity: .5; transition: transform .2s; }
.nav__item:hover .nav__caret { transform: rotate(180deg); opacity: .9; }

/* 下拉一级子菜单 —— 设计稿：鼠标停留位置显示下拉一级子菜单 */
.dropdown {
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, -8px);
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--sh-lg);
  padding: var(--sp-3); min-width: 250px; z-index: 70;
  opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s;
}
.nav__item:hover .dropdown, .nav__item:focus-within .dropdown {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
.dropdown--wide { min-width: 560px; }
.dropdown__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2) var(--sp-4); }
.dropdown__group-title {
  font-size: var(--fs-xs); font-weight: 700; color: var(--blue-700);
  letter-spacing: .06em; padding: 6px 12px 4px;
  border-bottom: 1px solid var(--blue-100); margin-bottom: 3px;
}
.dropdown a {
  display: flex; align-items: baseline; gap: 8px;
  padding: 7px 12px; border-radius: var(--r-sm);
  color: var(--ink-700); font-size: var(--fs-sm); line-height: 1.45;
  transition: background .16s, color .16s, padding-left .16s;
}
.dropdown a:hover { background: var(--blue-50); color: var(--blue-700); padding-left: 16px; }

/* 移动端汉堡 */
.nav__burger { display: none; width: 42px; height: 42px; border-radius: var(--r-md); }
.nav__burger span {
  display: block; width: 20px; height: 2px; margin: 4px auto;
  background: var(--blue-700); border-radius: 2px; transition: transform .25s, opacity .25s;
}
.nav__burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* AI 索引结果面板（main.js 动态插入） */
.ai-result { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--blue-100);
  border-radius: var(--r-lg); background: var(--blue-25); font-size: var(--fs-sm);
  color: var(--ink-700); line-height: 1.65; animation: aiPop .25s ease; }
.ai-result strong { color: var(--blue-700); }
.ai-result a { color: var(--blue-600); font-weight: 600; }
.ai-result a:hover { text-decoration: underline; }
.ai-result__note { display: block; margin-top: 6px; color: var(--ink-500, #6b7280); font-size: var(--fs-xs); }
@keyframes aiPop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ai-result { animation: none; } }

/* AI 索引结果面板（main.js 动态插入） */
.ai-result { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--blue-100);
  border-radius: var(--r-lg); background: var(--blue-25); font-size: var(--fs-sm);
  color: var(--ink-700); line-height: 1.65; animation: aiPop .25s ease; }
.ai-result strong { color: var(--blue-700); }
.ai-result a { color: var(--blue-600); font-weight: 600; }
.ai-result a:hover { text-decoration: underline; }
.ai-result__note { display: block; margin-top: 6px; color: var(--ink-500, #6b7280); font-size: var(--fs-xs); }
@keyframes aiPop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ai-result { animation: none; } }