/* ============================================================================
   康宁护理 · Kang Ning Senior Care Services
   品牌样式基线 (master stylesheet)
   ----------------------------------------------------------------------------
   所有颜色都是从客户提供的 logo 原图里取样出来的，不是"看着差不多"配的：
     手/深青   #227485      叶/黄绿   #A5BC4F
     中间过渡  #448F81 #669D7B       浅薄荷  #C5DECA
     文字      #1B4B5E      原图底色  #F6F9FE
   渐变方向照抄 logo：左下深青 → 右上黄绿。

   这份文件是整站唯一的样式来源。新页面只 link 这一个文件，
   不要在页面里自己起一套颜色或字号 —— 那是漂移的开始。
   ============================================================================ */

/* ── 1. 令牌 ─────────────────────────────────────────────────────────────── */
:root {
  /* 品牌色阶：从 logo 渐变的深端走到浅端 */
  --brand-deep:  #16495C;   /* 最深，标题与深色块 */
  --brand-teal:  #1F7488;   /* 主色。按钮、链接、强调 */
  --brand-teal-2:#2A8B96;   /* 主色的亮一档，用于 hover/渐变 */
  --brand-sea:   #3C8A7C;   /* 渐变中段 */
  --brand-sage:  #6A9E7C;
  --brand-leaf:  #6F9944;
  --brand-lime:  #A5BC4F;   /* 渐变浅端。装饰专用 */
  --brand-mint:  #C5DECA;   /* 柔和填充 */

  /* ⚠️ 承载文字的颜色只有这五个（都 ≥4.5:1，实测过）：
       --ink / --ink-2 / --muted / --brand-deep / --brand-teal
     --brand-sea 3.9 · --brand-leaf 3.2 · --brand-lime 2.0
       → 只能做图形、边框、大号装饰字，永远不要拿来写正文。
     白字只能压在 --brand-teal(5.4) 和 --brand-deep(9.8) 上，
       压在 sea/leaf/lime 上都不合格。 */

  /* 中性色：带一点青味，跟 logo 同一个温度，不是灰 */
  --paper:    #F7FAFB;      /* 页面底 */
  --paper-2:  #EDF4F3;      /* 次级块底 */
  --surface:  #FFFFFF;      /* 卡片 */
  --ink:      #12333C;      /* 正文 */
  --ink-2:    #0B252C;      /* 标题 */
  --muted:    #456068;      /* 次要文字，仍然合格 */
  --line:     #DDE9E8;      /* 分隔线 */
  --line-2:   #C9DCDA;      /* 输入框等需要更明确边界的地方 */

  --grad: linear-gradient(45deg, var(--brand-teal) 0%, var(--brand-sea) 48%, var(--brand-lime) 100%);
  --grad-soft: linear-gradient(45deg, rgba(31,116,136,.10), rgba(165,188,79,.14));

  /* 字。拉丁文用 Poppins（贴近 logo 的英文字标），
     中文标题用 Noto Serif SC（贴近 logo 的中文字标），正文用 Noto Sans SC。
     一个字体栈里混排即可，浏览器会按字符各取所需。 */
  --font-display: 'Poppins', 'Noto Serif SC', "Songti SC", "Source Han Serif SC", Georgia, serif;
  --font-body:    'Poppins', 'Noto Sans SC', "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, sans-serif;

  /* 字号：老人优先。正文 19px 起，比一般网站大一档，且行距给到 2.0。
     这不是"大方"，是可读性——目标读者 65+ 与 45-60 岁的儿女。 */
  --fs-xs:  14px;
  --fs-sm:  16px;
  --fs-base:19px;
  --fs-lg:  21px;
  --fs-xl:  clamp(23px, 3.2vw, 27px);
  --fs-2xl: clamp(27px, 4.6vw, 34px);
  --fs-3xl: clamp(31px, 6.4vw, 42px);
  --lh-tight: 1.5;
  --lh-body:  2.0;

  /* 间距、圆角、阴影：logo 是圆形+圆润的，整站跟着圆润，不出现锐角 */
  --sp-1: 6px;  --sp-2: 12px; --sp-3: 18px; --sp-4: 26px;
  --sp-5: 36px; --sp-6: 52px; --sp-7: 72px;
  --r-sm: 12px; --r-md: 18px; --r-lg: 24px; --r-full: 999px;
  --shadow-sm: 0 2px 10px -4px rgba(18,51,60,.14);
  --shadow-md: 0 12px 32px -18px rgba(18,51,60,.28);

  --tap: 52px;              /* 最小可点尺寸。手抖的人也要按得中 */
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ── 2. 基础 ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

/* 键盘用户必须看得见焦点在哪。老人常用键盘/放大镜。 */
:focus-visible {
  outline: 3px solid var(--brand-teal);
  outline-offset: 3px;
  border-radius: 4px;
}

img, svg { display: block; max-width: 100%; height: auto; }

/* ── 3. 排版 ─────────────────────────────────────────────────────────────── */
.kn-h1, .kn-h2, .kn-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink-2);
  line-height: var(--lh-tight);
  letter-spacing: .02em;
  text-wrap: balance;
}
.kn-h1 { font-size: var(--fs-3xl); line-height: 1.58; }
.kn-h2 { font-size: var(--fs-2xl); }
.kn-h3 { font-size: var(--fs-xl); }

.kn-lede  { font-size: var(--fs-lg); color: var(--muted); line-height: 1.95; }
.kn-muted { color: var(--muted); font-size: var(--fs-sm); line-height: 1.85; }
.kn-eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--brand-teal);
}

a { color: var(--brand-teal); text-underline-offset: 3px; }
a:hover { color: var(--brand-deep); }

/* ── 4. 版心 ─────────────────────────────────────────────────────────────── */
.kn-wrap { max-width: 680px; margin: 0 auto; padding: 0 24px var(--sp-7); position: relative; z-index: 1; }
.kn-center { text-align: center; }
.kn-stack > * + * { margin-top: var(--sp-3); }

/* ── 5. 标志 ─────────────────────────────────────────────────────────────── */
/* 字标用真文字排，不用图：任何尺寸都清晰，能被搜索引擎读到，也能跟着主题变色。
   只有那枚圆形徽标是图片。 */
/* ⚠️ 必须是 flex 不是 inline-flex，而且要有 max-width。
   inline-flex 的容器按 max-content 撑开，长字标会顶破视口 ——
   一处溢出会把整页的居中内容一起挤偏（在 390px 手机上实测踩到过）。 */
.kn-logo { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
           width: 100%; max-width: 100%; }
.kn-logo__mark { width: 132px; height: 132px; }
.kn-logo__en {
  font-family: var(--font-display); font-weight: 700;
  /* 下限跟着视口走，390px 的手机上也放得下；放不下就自然折成两行 */
  font-size: clamp(16px, 4.7vw, 25px); letter-spacing: -.005em;
  color: var(--brand-deep); line-height: 1.35; text-wrap: balance;
  max-width: 100%;
}
.kn-logo__cn {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(18px, 4.6vw, 26px); letter-spacing: .3em; text-indent: .3em;
  max-width: 100%; flex-wrap: wrap;
  color: var(--brand-leaf); line-height: 1.4;
}
/* 字标两侧那两片叶子，照 logo 的样子 */
.kn-logo__leaf { flex: none; width: 22px; height: 14px; color: var(--brand-sage); }
.kn-logo__leaf--r { transform: scaleX(-1); }

/* ── 6. 组件 ─────────────────────────────────────────────────────────────── */
.kn-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  box-shadow: var(--shadow-sm);
}
.kn-card--tint { background: var(--paper-2); border-color: var(--brand-mint); box-shadow: none; }

.kn-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: var(--tap);
  padding: 16px 26px;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-lg); letter-spacing: .06em;
  color: #fff; background: var(--brand-teal);
  border: 0; border-radius: var(--r-md); cursor: pointer;
  transition: background .18s var(--ease), transform .18s var(--ease);
}
.kn-btn:hover { background: var(--brand-deep); }
.kn-btn:active { transform: translateY(1px); }
.kn-btn:disabled { opacity: .5; cursor: default; transform: none; }
/* 电话按钮：老人第一眼要看到的东西，用最深的品牌色 + 最大的字 */
.kn-btn--tel {
  background: var(--brand-deep);
  font-size: clamp(23px, 4.4vw, 28px); letter-spacing: .08em; text-decoration: none;
}
.kn-btn--tel:hover { background: #0F3B4B; }

.kn-field { display: block; }
.kn-field__label {
  display: block; margin-bottom: var(--sp-1);
  font-weight: 500; font-size: var(--fs-lg); color: var(--ink);
}
.kn-field__req { color: var(--brand-teal); font-weight: 700; }
.kn-input, .kn-textarea {
  width: 100%; min-height: var(--tap);
  padding: 14px 16px;
  /* ≥16px 才不会在 iPhone 上一点就自动放大 */
  font: inherit; font-size: 18px; line-height: 1.7;
  color: var(--ink); background: var(--surface);
  border: 2px solid var(--line-2); border-radius: var(--r-sm);
}
.kn-textarea { min-height: 92px; resize: vertical; }
.kn-input::placeholder, .kn-textarea::placeholder { color: #90A7AC; }
.kn-input:focus, .kn-textarea:focus { outline: none; border-color: var(--brand-teal); }

.kn-note {
  border: 1px solid var(--brand-mint); background: var(--paper-2);
  border-radius: var(--r-lg); padding: var(--sp-4);
}
.kn-note__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-xl); color: var(--brand-deep); margin-bottom: var(--sp-1);
}
.kn-note--ok { border-color: #BEDCC6; background: #EFF7F1; }
.kn-note--ok .kn-note__title { color: var(--brand-leaf); }

.kn-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
@media (max-width: 580px) { .kn-grid-3 { grid-template-columns: 1fr; } }

.kn-tile { text-align: center; padding: var(--sp-4) var(--sp-3); }
.kn-tile__ic { width: 40px; height: 40px; margin: 0 auto var(--sp-2); color: var(--brand-teal); }
.kn-tile__t  { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); color: var(--ink-2); letter-spacing: .04em; }
.kn-tile__d  { margin-top: 4px; font-size: var(--fs-sm); color: var(--muted); line-height: 1.8; }

.kn-rule { border: 0; border-top: 1px solid var(--line); margin: var(--sp-6) 0 0; }

.kn-footer { margin-top: var(--sp-6); text-align: center; color: var(--muted); font-size: var(--fs-sm); line-height: 1.9; }
.kn-footer__brand { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); color: var(--brand-deep); letter-spacing: .14em; text-indent: .14em; }

/* ── 7. 动效 ─────────────────────────────────────────────────────────────── */
/* 系统里关掉动效的人，一律静止。晕动症是真实存在的，长者尤其。 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ── 8. 工具 ─────────────────────────────────────────────────────────────── */
.kn-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }