/* =========================================================================
   童画镇公开站点样式（Django 模板直出，不含前端构建链）

   这是 admin/src/index.css 里 .site 那一套暖色主题的等价实现：底 40 60% 98%、
   字 25 26% 15%、主色 #FF9500 系，**固定浅色**——公开页面向家长与 App Store 审核，
   是营销与政策文档站，浅底更适合长时间阅读。

   版式来源是原 admin 公开页（React 版）；admin/ 已于 2026-09-17 移除，本工程现为唯一的
   公开站点实现。这份 CSS 只服务本工程模板，类名不复用 Tailwind。
   ========================================================================= */

/* ---------- 设计变量：与 admin 的 .site 逐项对应 ---------- */
.site {
  --background: hsl(40 60% 98%);
  --foreground: hsl(25 26% 15%);
  --card: #ffffff;
  --primary: hsl(25 100% 50%);
  --primary-soft: hsl(25 100% 50% / 0.1);
  --primary-line: hsl(25 100% 50% / 0.25);
  --secondary: hsl(36 46% 94%);
  --muted: hsl(36 40% 95%);
  --muted-foreground: hsl(25 13% 42%);
  --border: hsl(30 26% 89%);

  --site-warm: hsl(25 100% 50%);
  --site-sky: hsl(199 85% 45%);
  --site-mint: hsl(152 52% 36%);

  --radius: 14px;
  --radius-card: 16px;

  --gradient-primary: linear-gradient(135deg, hsl(25 100% 55%), hsl(14 94% 58%));
  --gradient-glow: radial-gradient(120% 80% at 50% 0%, rgb(255 149 0 / 0.13), transparent 70%);
  --shadow-card: 0 1px 2px rgb(60 40 20 / 0.05), 0 4px 16px rgb(60 40 20 / 0.05);
  --shadow-glow: 0 0 0 1px rgb(255 149 0 / 0.16), 0 8px 28px rgb(255 149 0 / 0.22);
  --shadow-elevated: 0 16px 40px rgb(60 40 20 / 0.12), 0 2px 8px rgb(60 40 20 / 0.06);

  --font-sans: ui-sans-serif, system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- 基础 ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body.site {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.site a {
  color: inherit;
  text-decoration: none;
}

.site img {
  max-width: 100%;
  display: block;
}

/* 下面这几条是全站兜底，一律用 :where() 把特异性压到 (0,1,0)。
   写成 `.site p` 会得到 (0,1,1)，比后文任何单类规则都高，
   会让 .hero-body / .step-grid / .entry-options 这类单类选择器里的 margin、padding
   静默失效——症状是标题与正文贴住、卡片组贴住副标题，且改类名怎么调都不动。 */
.site :where(h1, h2, h3) {
  margin: 0;
  letter-spacing: -0.01em;
}

.site :where(h2) {
  font-size: 1.5rem;
  line-height: 1.25;
}

.site :where(h3) {
  font-size: 1rem;
  font-weight: 600;
}

.site :where(p) {
  margin: 0;
}

.site :where(ul, ol) {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-main {
  flex: 1;
}

.container {
  width: 100%;
  max-width: 1152px;
  margin: 0 auto;
  padding: 0 24px;
}

/* 内联图标：尺寸随字号上下文，颜色随文字 */
.icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.icon-sm {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.icon-xs {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* ---------- 顶栏 ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--border);
  background-color: hsl(40 60% 98% / 0.85);
  backdrop-filter: blur(16px);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  min-height: 64px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.05);
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.brand-latin {
  margin-top: 4px;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted-foreground);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 13px;
}

.nav-link {
  position: relative;
  padding: 8px;
  border-radius: 8px;
  color: var(--muted-foreground);
  transition: color 0.15s;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -1px;
  height: 2px;
  border-radius: 999px;
  background-color: var(--primary);
  opacity: 0;
  transition: opacity 0.15s;
}

.nav-link:hover {
  color: var(--foreground);
}

.nav-link.is-active {
  color: var(--foreground);
  font-weight: 500;
}

.nav-link.is-active::after {
  opacity: 1;
}

.lang-switch {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background-color: var(--card);
  font-size: 12px;
  color: var(--muted-foreground);
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.lang-switch:hover {
  color: var(--foreground);
  border-color: var(--primary-line);
}

/* ---------- 按钮与标签 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  transition: transform 0.15s, background-color 0.15s;
}

.btn-primary {
  background-image: var(--gradient-primary);
  color: #fff;
  box-shadow: var(--shadow-glow);
}

.btn-primary:hover {
  transform: translateY(-1px);
}

.btn-outline {
  border: 1px solid var(--border);
  background-color: var(--card);
}

.btn-outline:hover {
  background-color: var(--secondary);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--primary-line);
  border-radius: 999px;
  background-color: var(--primary-soft);
  color: hsl(25 92% 42%);
  font-size: 12px;
  font-weight: 500;
}

/* ---------- 卡片与图标底衬 ---------- */
.card {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background-color: hsl(0 0% 100% / 0.6);
  padding: 24px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-elevated);
}

.card-raised {
  background-color: var(--card);
  box-shadow: var(--shadow-card);
}

.card h3 {
  margin-top: 16px;
}

.card p {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted-foreground);
}

.icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

/* 点缀色块：图标底衬按语义取色（与 admin 公开页同一套变量） */
.tint-warm {
  color: var(--site-warm);
  background-color: hsl(25 100% 50% / 0.12);
}

.tint-sky {
  color: var(--site-sky);
  background-color: hsl(199 85% 45% / 0.12);
}

.tint-mint {
  color: var(--site-mint);
  background-color: hsl(152 52% 36% / 0.12);
}

/* ---------- 首页 ---------- */
.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background-image: var(--gradient-glow);
}

/* 右上角那团柔光。用 ::before 而非 ::after：伪元素默认在容器内容之下，
   与 admin 里摆在 .hero-grid 之前的那个 div 等效；写成 ::after 会盖在文案与插画之上。 */
.hero::before {
  content: "";
  position: absolute;
  top: -96px;
  right: -80px;
  width: 288px;
  height: 288px;
  border-radius: 999px;
  background-color: hsl(25 100% 50% / 0.2);
  filter: blur(64px);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  display: grid;
  gap: 48px;
  align-items: center;
  padding-top: 64px;
  padding-bottom: 64px;
}

.hero-title {
  margin-top: 24px;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.15;
}

.hero-body {
  margin-top: 24px;
  max-width: 560px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--muted-foreground);
}

.hero-actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.hero-note {
  margin-top: 24px;
  font-size: 14px;
  color: var(--muted-foreground);
}

/* 插画背后那层柔光，对应 admin 首页插画容器里的 bg-primary/10 + blur-3xl 块 */
.hero-art {
  position: relative;
}

.hero-art::before {
  content: "";
  position: absolute;
  top: 48px;
  right: 24px;
  bottom: 16px;
  left: 24px;
  border-radius: 999px;
  background-color: hsl(25 100% 50% / 0.1);
  filter: blur(64px);
  pointer-events: none;
}

.hero-art img {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 448px;
  filter: drop-shadow(0 24px 32px rgb(60 40 20 / 0.18));
}

.section-stack {
  padding-top: 64px;
  padding-bottom: 64px;
}

.feature-grid {
  display: grid;
  gap: 20px;
}

.section {
  margin-top: 80px; /* 对应 admin 的 mt-20；≥640px 抬到 mt-28，见文件末尾的媒体查询 */
}

.section-title {
  text-align: center;
}

.section-lead {
  margin: 12px auto 0;
  max-width: 640px;
  text-align: center;
  line-height: 1.75;
  color: var(--muted-foreground);
}

.step-grid {
  margin-top: 40px;
  display: grid;
  gap: 20px;
}

.step-card {
  background-color: var(--card);
  box-shadow: var(--shadow-card);
}

.step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background-image: var(--gradient-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

.guards {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background-color: hsl(36 46% 94% / 0.4);
  padding: 64px 0;
}

.guards .feature-grid {
  margin-top: 40px;
}

/* ---------- 文档页 ---------- */
.doc-head {
  border-bottom: 1px solid var(--border);
  background-image: var(--gradient-glow);
  padding: 48px 0;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted-foreground);
}

.breadcrumb a:hover {
  color: var(--foreground);
}

.breadcrumb span {
  color: var(--foreground);
}

.doc-label {
  margin-top: 32px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--primary);
}

.doc-title {
  margin-top: 12px;
  font-size: 1.875rem;
  font-weight: 700;
}

.doc-title-en {
  color: var(--muted-foreground);
  font-weight: 400;
}

.doc-meta {
  margin-top: 16px;
  font-size: 14px;
  color: var(--muted-foreground);
}

.entry-intro {
  margin-top: 16px;
  max-width: 640px;
  line-height: 1.75;
  color: var(--muted-foreground);
}

.doc-layout {
  display: grid;
  gap: 48px;
  padding-top: 48px;
  padding-bottom: 48px;
}

.doc-toc {
  display: none;
}

.toc-inner {
  position: sticky;
  top: 96px;
}

.toc-label {
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted-foreground);
}

.doc-toc ul {
  border-left: 1px solid var(--border);
}

.doc-toc a {
  display: block;
  margin-left: -1px;
  padding: 6px 0 6px 12px;
  border-left: 2px solid transparent;
  font-size: 14px;
  line-height: 1.4;
  color: var(--muted-foreground);
  transition: color 0.15s, border-color 0.15s;
}

.doc-toc a:hover {
  border-left-color: var(--primary);
  color: var(--foreground);
}

.toc-mobile {
  margin-bottom: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background-color: var(--card);
  padding: 16px 20px;
  box-shadow: var(--shadow-card);
}

.toc-mobile summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}

.toc-mobile ol {
  margin-top: 12px;
  display: grid;
  gap: 6px;
  padding-left: 18px;
  list-style: decimal;
}

.toc-mobile a {
  font-size: 14px;
  color: hsl(25 92% 42%);
}

.toc-mobile a:hover {
  text-decoration: underline;
}

.doc-main {
  min-width: 0;
}

.doc-article {
  max-width: 768px;
}

.doc-article > section {
  scroll-margin-top: 96px;
}

.doc-article > section + section {
  margin-top: 48px;
  border-top: 1px solid var(--border);
  padding-top: 48px;
}

.doc-article h2 {
  margin-bottom: 16px; /* admin 的 prose 给 h2 留了 0.8em 下边距，此处落成定值 */
  font-size: 1.25rem;
  line-height: 1.45;
}

.doc-article h3 {
  margin-top: 28px;
  margin-bottom: 8px;
  font-size: 0.95rem;
}

/* 正文段落是兜底排版，同样降到 (0,1,0)：contact 卡片里的 .contact-line / .contact-detail
   是单类规则，必须能盖住这里的字号、颜色与行高。 */
.doc-article :where(p, li) {
  font-size: 16px;
  line-height: 1.85;
  color: hsl(25 18% 27%);
}

/* 段落之间给 16px：相邻段落，以及跟在表格 / 列表 / 提示框 / 卡片之后的段落
   （这些块只有自己的上边距，后面接的段落需要自己带间距，否则会贴着块底）。
   同样降到 (0,1,0)：contact 卡片里的 .contact-detail 紧跟在 .contact-line 之后，
   是相邻两个 p，它的 margin-top 必须能盖住这里的 16px。 */
.doc-article :where(p + p, table + p, ul + p, ol + p, div + p) {
  margin-top: 16px;
}

.doc-article a {
  color: hsl(25 92% 40%);
}

.doc-article a:hover {
  text-decoration: underline;
}

.doc-article strong {
  color: hsl(25 36% 16%);
}

.doc-article ul.items-list {
  margin-top: 16px;
  padding-left: 20px;
  list-style: disc;
}

.doc-article ul.items-list li {
  margin-bottom: 8px;
}

/* 项目符号用浅棕，与 admin 的 prose「--tw-prose-bullets: hsl(30 48% 78%)」一致 */
.doc-article ul.items-list li::marker {
  color: hsl(30 48% 78%);
}

.items-table {
  width: 100%;
  margin-top: 16px;
  border-collapse: collapse;
  font-size: 14.5px;
}

.items-table th,
.items-table td {
  padding: 11px 16px;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.items-table .items-term {
  width: 34%;
  font-weight: 600;
  color: hsl(25 32% 16%);
}

.note {
  margin-top: 20px;
  border-left: 4px solid var(--primary);
  border-radius: 8px;
  background-color: hsl(36 46% 94% / 0.4);
  padding: 16px;
}

.note p {
  margin: 0;
}

/* FAQ：问题卡片，正文缩进对齐问题文字 */
.faq-list {
  margin-top: 24px;
  display: grid;
  gap: 12px;
}

.faq-item {
  background-color: var(--card);
  box-shadow: var(--shadow-card);
}

/* 用到 (0,2,0)：卡片里的问题标题要盖住正文的 .doc-article h3（上边距 28px、字号 0.95rem），
   否则每张 FAQ 卡片顶部会凭空多出 28px 空白。 */
.faq-item .faq-q {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  line-height: 1.6;
}

.faq-q .icon-sm {
  margin-top: 3px;
  color: var(--primary);
}

.faq-a {
  margin-top: 12px;
  padding-left: 28px;
}

.faq-a p {
  margin-top: 0; /* 间距由 .faq-a 的 margin-top 统一给，避免叠加 .card p 的 8px */
  font-size: 14px;
  line-height: 1.75;
  color: var(--muted-foreground);
}

/* 联系方式卡片 */
.contact-card {
  margin-top: 24px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  border: 1px solid var(--primary-line);
  border-radius: var(--radius-card);
  background-color: hsl(25 100% 50% / 0.05);
  padding: 24px;
}

.contact-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
}

/* 标签与邮箱之间的分隔符：中文用全角冒号，英文用半角（admin 里写死全角，
   这里跟随文档语言，页面上的 <html lang> 已经是 zh-CN / en）。 */
.contact-label::after {
  content: "：";
}

html[lang="en"] .contact-label::after {
  content: ":";
}

.contact-line a {
  color: hsl(25 92% 40%);
}

.contact-line a:hover {
  text-decoration: underline;
}

.contact-detail {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--muted-foreground);
}

/* 相关条款：两张卡片 */
.doc-links {
  margin-top: 24px;
  display: grid;
  gap: 12px;
}

.doc-link {
  display: block;
  height: 100%;
  padding: 20px;
}

/* 卡片是链接，hover 时不能沿用正文的 `a:hover` 下划线（会把整张卡片划掉） */
.doc-link:hover {
  text-decoration: none;
}

.doc-link-title {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: hsl(25 92% 42%);
}

.doc-link-desc {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted-foreground);
}

/* ---------- 区域入口页 ---------- */
.entry-options {
  display: grid;
  gap: 16px;
  padding-top: 48px;
  padding-bottom: 64px;
}

.entry-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  background-color: var(--card);
  box-shadow: var(--shadow-card);
}

.entry-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.entry-region {
  font-size: 18px;
  font-weight: 600;
}

.entry-lang {
  font-size: 12px;
  color: var(--muted-foreground);
}

.entry-desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted-foreground);
}

.entry-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 500;
  color: hsl(25 92% 42%);
}

/* ---------- 页脚 ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  background-color: hsl(36 46% 94% / 0.4);
  padding: 56px 0;
}

.footer-grid {
  display: grid;
  gap: 40px;
}

.footer-group h3 {
  margin-bottom: 16px;
  font-size: 14px;
}

.footer-group ul {
  display: grid;
  gap: 10px;
}

.footer-group a,
.footer-group li {
  font-size: 14px;
  color: var(--muted-foreground);
}

.footer-group a:hover {
  color: var(--foreground);
}

.footer-tagline {
  margin-top: 16px;
  max-width: 320px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--muted-foreground);
}

.footer-badge {
  display: inline-block;
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background-color: var(--card);
  padding: 4px 12px;
  font-size: 12px;
  color: var(--muted-foreground);
}

.footer-mail {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.footer-mail .icon-sm {
  margin-top: 3px;
  color: var(--muted-foreground);
}

.footer-operator {
  padding-left: 24px;
}

.footer-bottom {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--border);
  padding-top: 24px;
  font-size: 12px;
  color: var(--muted-foreground);
}

/* ---------- 窄屏（< 640px） ---------- */
/* 英文导航四项加语言切换在 390px 视口下会横向溢出（实测右边界 441 > 390），
   把导航整行下沉到第二行，顶栏变成「品牌 + 切换」行与「导航」行。中英文统一处理。 */
@media (max-width: 639px) {
  .header-inner {
    row-gap: 4px;
  }

  .site-nav {
    order: 3;
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* ---------- 响应式（对应 admin 的 sm: 640px / lg: 1024px） ---------- */
@media (min-width: 640px) {
  .site-nav {
    gap: 4px;
    font-size: 14px;
  }

  .nav-link {
    padding: 8px 12px;
  }

  .nav-link::after {
    left: 12px;
    right: 12px;
  }

  .hero-grid {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .hero-title {
    font-size: 3rem;
  }

  .hero-body {
    font-size: 18px;
  }

  .section-stack {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .section {
    margin-top: 112px;
  }

  /* 对应 admin 的 text-2xl sm:text-3xl：大屏的区块标题要抬到 30px */
  .section-title {
    font-size: 1.875rem;
  }

  .feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* 相关条款并成两列，对应 admin 的 sm:grid-cols-2 */
  .doc-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .step-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .guards {
    padding: 80px 0;
  }

  .doc-head {
    padding: 64px 0;
  }

  .doc-title {
    font-size: 2.25rem;
  }

  .doc-layout {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .entry-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

@media (min-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1.05fr 1fr;
    padding-top: 96px;
    padding-bottom: 96px;
  }

  .step-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .doc-layout {
    grid-template-columns: 190px minmax(0, 1fr);
  }

  .doc-toc {
    display: block;
  }

  .toc-mobile {
    display: none;
  }

  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  }
}