/* =========================================================================
 * site.css — 全站共享全局样式（首页 + 法律页面共用）
 * -------------------------------------------------------------------------
 * 说明：
 *   - 本文件由项目主页 index.html 的内联样式迁移而来（内容原样保留），
 *     供主页与根目录下的法律页面（terms-of-use / privacy-policy /
 *     copyright-notice）共同引用，保证全站风格与响应式规则一致。
 *   - 子应用 ezspelling / RC 仍使用各自独立的样式体系（1rem = 1rpx），
 *     共用页脚由 components/footer.js 自注入 px 样式，两套体系下均正常。
 * ========================================================================= */

:root {
  --ink: #1e2b4f;
  --ink-soft: #33415c;
  --muted: #7b8499;
  --blue: #3d7bff;
  --accent: #ff8a1e;
  --bg-card: #ffffff;
  --radius: 1.5rem;            /* 24px */
  --shadow: 0 .875rem 2.125rem rgba(30, 43, 79, .10);   /* 0 14px 34px */
  --shadow-hover: 0 1.375rem 2.875rem rgba(30, 43, 79, .16);  /* 0 22px 46px */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* 基准字号固定 16px（规则5）：
   全站尺寸用 rem 书写，大屏（>1200px）1rem=16px，与原来的 px 数值完全等价，原样不变；
   ≤1200px（笔记本 / iPad）根字号降为 12px（=16px×75%），
   整套容器、圆形卡片、边距间距、字体按比例整体缩至 75%，无需逐条手动改字体。
   字体以 max(rem, 14px) 保底：缩放后任何文字最小 14px（规则3），保证孩子可读。 */
html { font-size: 16px; }

body {
  min-height: 100vh;
  background:
    radial-gradient(1200px 520px at 85% -10%, rgba(61, 123, 255, .10), transparent 60%),
    radial-gradient(1000px 480px at 0% 110%, rgba(255, 138, 30, .10), transparent 55%),
    linear-gradient(165deg, #eef2ff 0%, #f8fafc 55%, #fff7ed 100%);
  font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei",
    sans-serif;
  color: var(--ink-soft);
  font-size: max(1rem, 14px);  /* 正文缩放后保底 14px */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3.5rem 1.25rem 2.5rem;   /* 56px 20px 40px */
  -webkit-font-smoothing: antialiased;
}

/* 法律页面覆盖：改为普通流式布局（顶部导航栏 sticky + 内容 + 页脚） */
body.page-legal {
  display: block;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
}

.wrap {
  width: 100%;
  max-width: 60rem;   /* 960px */
  text-align: center;
}

/* ---------- Brand logo ---------- */
.brand img {
  display: block;
  width: min(40rem, 88vw);   /* min(640px, 88vw) */
  height: auto;
  margin: 2.25rem auto 0;    /* 36px auto 0 */
}

.tagline {
  margin-top: .875rem;       /* 14px */
  font-size: max(clamp(.92rem, 2.6vw, 1.12rem), 14px);
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--muted);
}

/* ---------- Cards ---------- */
.cards {
  margin-top: 3.5rem;        /* 56px */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.625rem;             /* 26px */
  align-items: stretch;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.5rem 1.625rem 2.125rem;   /* 40px 26px 34px */
  background: var(--bg-card);
  border: 1px solid rgba(30, 43, 79, .06);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-height: 17.5rem;       /* 280px */
  text-decoration: none;
  color: inherit;
  transition: transform .25s ease, box-shadow .25s ease;
}

.card__icon {
  width: 4.625rem;           /* 74px */
  height: 4.625rem;
  border-radius: 1.375rem;   /* 22px */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(61, 123, 255, .12);
  color: var(--blue);
  margin-bottom: 1.25rem;    /* 20px */
  flex-shrink: 0;
}
.card__icon svg { width: 2.25rem; height: 2.25rem; }   /* 36px */

.card__title {
  font-size: max(1.45rem, 14px);
  font-weight: 800;
  color: var(--ink);
}
.card__desc {
  margin-top: .625rem;       /* 10px */
  font-size: max(.95rem, 14px);
  line-height: 1.55;
  color: var(--muted);
}

/* --- Active card (Easy Spelling) --- */
.card--active {
  background: linear-gradient(150deg, #3d7bff 0%, #6a5cff 100%);
  color: #fff;
  border: none;
  box-shadow: 0 1.125rem 2.5rem rgba(61, 95, 255, .32);   /* 0 18px 40px */
}
.card--active:hover {
  transform: translateY(-8px);
  box-shadow: 0 1.75rem 3.375rem rgba(61, 95, 255, .42);   /* 0 28px 54px */
}
.card--active .card__title { color: #fff; }
.card--active .card__desc { color: rgba(255, 255, 255, .85); }
.card--active .card__icon {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}
.card__cta {
  margin-top: auto;
  padding-top: 1.375rem;     /* 22px */
  display: inline-flex;
  align-items: center;
  gap: .5rem;                /* 8px */
  font-weight: 700;
  font-size: max(.95rem, 14px);
  color: #fff;
  background: rgba(255, 255, 255, .22);
  padding: .5625rem 1.25rem; /* 9px 20px */
  border-radius: 999px;
}
.card__cta svg { width: 1rem; height: 1rem; }   /* 16px */

/* --- Disabled cards (Coming Soon) --- */
.card--soon {
  background: #f2f4f8;
  border: 1px dashed rgba(30, 43, 79, .14);
  box-shadow: none;
  cursor: not-allowed;
  opacity: .62;
  filter: saturate(.35);
  user-select: none;
}
.card--soon .card__icon { background: #e2e6ee; color: #98a1b3; }
.card--soon .card__title { color: #6b7280; }
.card--soon .card__desc { color: #98a1b3; }
.card--soon:focus-visible { outline: 3px solid rgba(61, 123, 255, .55); outline-offset: 2px; }

/* 文字保底：最小 14px（面向孩子，禁止再小） */
.card__badge {
  margin-top: auto;
  padding-top: 1.375rem;     /* 22px */
  font-size: max(.875rem, 14px);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7b8499;
  background: #e7eaf2;
  padding: .4375rem 1rem;    /* 7px 16px */
  border-radius: 999px;
}

/* --- Tooltip for disabled cards --- */
.tooltip {
  position: absolute;
  bottom: calc(100% + .75rem);   /* +12px */
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: #2b3550;
  color: #fff;
  font-size: max(.875rem, 14px);
  font-weight: 600;
  padding: .5625rem .875rem;     /* 9px 14px */
  border-radius: 10px;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 5;
}
.tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: .375rem solid transparent;   /* 6px */
  border-top-color: #2b3550;
}
.card--soon:hover .tooltip,
.card--soon:focus .tooltip,
.card--soon:focus-visible .tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* ============================================================
   首页免责提示（仅首页展示；其它子页面不重复）
   ============================================================ */
.disclaimer {
  margin-top: 2.5rem;        /* 40px */
  font-size: max(.8rem, 14px);
  line-height: 1.8;
  color: var(--muted);
}
.disclaimer a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
  transition: color .2s ease;
}
.disclaimer a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* ============================================================
   法律页面外壳（terms-of-use / privacy-policy / copyright-notice）
   ============================================================ */

/* 顶部导航栏：与 ezspelling 的 sub-navbar 视觉一致
   （渐变紫背景 + 返回按钮 + 居中标题），仅在本文件用 rem 书写 */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 .25rem 1rem rgba(102, 126, 234, .25);   /* 0 4px 16px */
}
.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem;          /* 0 20px */
  height: 5.5rem;              /* 88px */
}
.site-nav__back {
  width: 4.5rem;               /* 72px */
  height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(2rem, 14px);  /* 32px */
  color: #fff;
  font-weight: bold;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  border-radius: .75rem;
}
.site-nav__back:hover { background: rgba(255, 255, 255, .15); }
.site-nav__title {
  font-size: max(1.6rem, 14px);  /* 26px */
  font-weight: bold;
  color: #fff;
  text-align: center;
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.site-nav__placeholder { width: 4.5rem; }

/* 法律页面内容容器 */
.page-legal__wrap {
  width: 100%;
  max-width: 60rem;           /* 960px */
  margin: 0 auto;
  padding: 3rem 1.25rem 3.5rem;   /* 48px 20px 56px */
}
.page-legal__header {
  text-align: center;
  margin-bottom: 2.25rem;     /* 36px */
}
.page-legal__icon { font-size: 2.25rem; }   /* 36px */
.page-legal__title {
  margin-top: .5rem;
  font-size: max(1.8rem, 14px);
  font-weight: 800;
  color: var(--ink);
}
.page-legal__sub {
  margin-top: .625rem;
  font-size: max(.95rem, 14px);
  line-height: 1.6;
  color: var(--muted);
}
.page-legal__body {
  background: var(--bg-card);
  border: 1px solid rgba(30, 43, 79, .06);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2.5rem;            /* 40px */
  min-height: 18rem;          /* 288px */
  color: var(--ink-soft);
  font-size: max(.95rem, 14px);
  line-height: 1.75;
  text-align: left;
}
/* 正文暂留白：此处仅占位提示，法律文本后续补充 */
.page-legal__placeholder {
  text-align: center;
  color: var(--muted);
  font-size: max(.9rem, 14px);
  padding: 3rem 0 1rem;
}
.page-legal__placeholder-mark {
  display: inline-block;
  margin-top: .75rem;
  font-size: max(.75rem, 14px);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #98a1b3;
  background: #eef0f5;
  border-radius: 999px;
  padding: .375rem .875rem;
}
/* 法律正文排版（terms-of-use / privacy-policy / copyright-notice） */
.page-legal__prose > p {
  margin: 0 0 1rem;            /* 16px */
}
.page-legal__prose > h2 {
  margin: 2.25rem 0 .875rem;   /* 36px 0 14px */
  font-size: max(1.15rem, 14px);
  font-weight: 800;
  color: var(--ink);
}
.page-legal__prose > h2:first-of-type { margin-top: .5rem; }
.page-legal__prose > p:last-child { margin-bottom: 0; }
@media (max-width: 480px) {
  .page-legal__body { padding: 1.5rem; }   /* 24px */
}

/* ============================================================
   Responsive：≤1200px（笔记本 / iPad）整体缩至 75%
   - >1200px 台式大屏：不命中此规则，根字号 16px，布局、卡片、
     字体完全保持原始大小，不作任何缩放。
   - ≤1200px：仅将根字号 16px → 12px（16×0.75=12），全部 rem 尺寸
     （整套容器、圆形卡片、边距间距、字体）按比例整体缩至 75%；
     字体由 max(rem,14px) 保底，缩放后最小 14px。
   - 内容本身很长的页面允许正常滚动，不强行挤压到一屏。
   ============================================================ */
@media (max-width: 1200px) {
  html { font-size: 12px; }   /* 整体缩至原始的 75% */
}