/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme — imports the Serene Indigo + Teal color system from blocksy-child-old (tokens below).
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: mandarinmiles
 */

/* =========================================================
   配色方案（设计系统 v2 · 蓝主导 / 绿紫辅助）
   ---------------------------------------------------------
   单一来源：全局 :root 定义调色板，各组件样式通过 var(--token) 继承使用。
   三层色阶（2026-11-13 全站审核后重构）：
     ① 蓝 = 主导色。品牌蓝 #1166F0 同时承担「链接 / 主强调 / 全站 CTA 填充」。
        --action 从霓虹绿 #11EE92 改为品牌蓝：此前账户页用蓝、其余 20+ 处用绿，
        两套互斥规则并存；统一为蓝后 CTA 层级才真正是「蓝色主导」。
     ② 绿 = 次级色。正向语义（媒体播放 / FREE 徽章 / 正确态 / 重点标注），
        由 --action-alt 承载；用深绿 #0B7F58 而非霓虹绿 → 白字 5.01:1（AA）。
     ③ 紫 = 装饰色。Hero 渐变尾段 / 品牌区 / 点缀，不承担 CTA。
   基底 #F2F7FD · 品牌蓝 #1166F0 · 签名蓝→绿渐变 #1166F0→#0B7F58
   ========================================================= */
:root {
  /* ---- 色彩令牌（配色方案核心） ---- */
  --bg: #F2F7FD;                 /* 页面基底 */
  --primary: #1166F0;            /* 品牌蓝（主导）：链接/主强调/主 CTA */
  --primary-light: #4A8BFA;      /* 品牌蓝亮色：渐变起点 */
  --primary-hover: #0D4FC7;      /* 品牌蓝悬停 */
  --primary-dark: #1B2A4A;       /* 深墨蓝：标题/深色字 */
  --text: #1B2A4A;               /* 正文文字 */
  --muted: #5B6678;              /* 次级/弱化文字 */
  --accent: #2A9D8F;             /* 辅助青绿：徽章/chips/插画 */
  --accent-strong: #1C7C70;      /* 深青绿 */
  --aux: #A3BBDB;                /* 辅助蓝灰 */
  --success: #1C7C70;            /* 成功绿（与青绿同族，答对态边框/文字一致） */
  /* 行动色（主 CTA 填充）：品牌蓝。白字对比 5.02:1（WCAG AA 正文级） */
  --action: #1166F0;
  --action-ink: #FFFFFF;
  --action-hover: #0D4FC7;
  /* 次级行动色：媒体播放 / FREE 徽章 / 正向标注。
     沿用深青绿 #1C7C70，白字对比 5.04:1（AA），不引入新的绿。 */
  --action-alt: #1C7C70;
  --action-alt-ink: #FFFFFF;
  --action-alt-hover: #0A5F55;
  /* 紫色系：Hero 渐变尾段 / 品牌区 / 装饰点缀 */
  --violet: #6E00F8;
  --violet-mid: #563CE9;
  --violet-tint: #F1E9FF;
  --brand-tint: #EAF2FE;         /* 品牌蓝浅底 */
  --brand-tint-2: #DCE9FD;       /* 品牌蓝浅底（深一档） */
  --teal-tint: #E7F4F2;          /* 青绿浅底 */
  --mint: #A9F0E4;               /* 薄荷高亮（深底上的绿） */
  --hero-grad: linear-gradient(20.78deg, #1166F0 0%, #2E4FD8 44%, #6E00F8 100%);
  --bg-grad: linear-gradient(100deg, #1166F0 0%, #1C7C70 100%);

  /* ---- 中性/结构令牌 ---- */
  --card: #fff;
  --border: #D6DEE6;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(31, 42, 68, .06), 0 8px 24px rgba(31, 42, 68, .05);
  --maxw: 1290px;                /* 内容最大宽度（旧主题由 Customizer 覆盖） */

  /* ---- 本地字体（Inter latin 子集 + 系统 CJK 栈，见文件末尾 @font-face） ---- */
  --mm-font-latin: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mm-font-cjk: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Source Han Sans SC', sans-serif;
  /* 覆写 Blocksy 的系统默认字体栈（其动态 CSS 输出 var(--theme-font-stack-default)） */
  --theme-font-stack-default: var(--mm-font-latin);
  --theme-font-cjk-stack: var(--mm-font-cjk);
  /* ---- 标题衬线栈（仅系统/免费字体，无外部调用；home-v2.css 使用） ---- */
  --serif: 'Songti SC', 'Noto Serif CJK SC', 'Source Han Serif SC', Georgia, 'Times New Roman', serif;
}

/* =========================================================
   深色模式（两段内容相同：手动切换 / 系统跟随）
   ---------------------------------------------------------
   1) 我们的设计令牌（同名覆盖，组件零改动跟随）
   2) Blocksy 父主题的 :root 配色变量（--theme-*）——覆写后
      头部/页脚/菜单/按钮/表单一并变深，解决「半深色」割裂
   3) color-scheme: dark 让原生控件（滚动条/表单）跟随
   全部组合通过 WCAG AA（实测见 design-samples/darkmode-demo.html）
   ========================================================= */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0F1729;
  --primary: #5B97F9;
  --primary-light: #4A8BFA;
  --primary-hover: #7FAEFB;
  --primary-dark: #D6DEE9;
  --text: #D6DEE9;
  --muted: #9AA7BC;
  --accent: #4CC6BA;
  --accent-strong: #2FB7A8;
  --aux: #33456B;
  --success: #4CC6BA;
  --action: #2F6FE4;             /* 暗色主 CTA：白字 4.65:1（AA） */
  --action-ink: #FFFFFF;
  --action-hover: #1D55C0;
  --action-alt: #1F7F63;         /* 暗色次级绿：白字 4.91:1（AA） */
  --action-alt-ink: #FFFFFF;
  --action-alt-hover: #186B53;
  --violet: #A78BFA;
  --violet-mid: #8B7CF0;
  --violet-tint: #241C4D;
  --brand-tint: #1C2A45;
  --brand-tint-2: #223154;
  --teal-tint: #173B36;
  --mint: #A9F0E4;
  --card: #16203A;
  --border: #2A3A5C;
  --shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
  --bg-deep: #0C1426;
  /* ---- Blocksy 父主题变量覆写（头部/页脚/表单/按钮）---- */
  --theme-text-color: #D6DEE9;
  --theme-link-initial-color: #5B97F9;
  --theme-link-hover-color: #9CC4FB;
  --theme-headings-color: #D6DEE9;
  --theme-border-color: #2A3A5C;
  --theme-button-background-initial-color: #2F6FE4;
  --theme-button-background-hover-color: #1D55C0;
  --theme-button-text-initial-color: #FFFFFF;
  --theme-button-text-hover-color: #FFFFFF;
  --theme-form-field-background-initial-color: #0F1729;
  --theme-form-field-background-focus-color: #16203A;
  --theme-form-text-initial-color: #D6DEE9;
  --theme-form-field-border-initial-color: #2A3A5C;
  --theme-form-field-border-focus-color: #5B97F9;
  --theme-palette-color-8: #16203A;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
    --bg: #0F1729;
    --primary: #5B97F9;
    --primary-light: #4A8BFA;
    --primary-hover: #7FAEFB;
    --primary-dark: #D6DEE9;
    --text: #D6DEE9;
    --muted: #9AA7BC;
    --accent: #4CC6BA;
    --accent-strong: #2FB7A8;
    --aux: #33456B;
    --success: #4CC6BA;
    --action: #2F6FE4;
    --action-ink: #FFFFFF;
    --action-hover: #1D55C0;
    --action-alt: #1F7F63;
    --action-alt-ink: #FFFFFF;
    --action-alt-hover: #186B53;
    --violet: #A78BFA;
    --violet-mid: #8B7CF0;
    --violet-tint: #241C4D;
    --brand-tint: #1C2A45;
    --brand-tint-2: #223154;
    --teal-tint: #173B36;
    --mint: #A9F0E4;
    --card: #16203A;
    --border: #2A3A5C;
    --shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
    --bg-deep: #0C1426;
    --theme-text-color: #D6DEE9;
    --theme-link-initial-color: #5B97F9;
    --theme-link-hover-color: #9CC4FB;
    --theme-headings-color: #D6DEE9;
    --theme-border-color: #2A3A5C;
    --theme-button-background-initial-color: #2F6FE4;
    --theme-button-background-hover-color: #1D55C0;
    --theme-button-text-initial-color: #FFFFFF;
    --theme-button-text-hover-color: #FFFFFF;
    --theme-form-field-background-initial-color: #0F1729;
    --theme-form-field-background-focus-color: #16203A;
    --theme-form-text-initial-color: #D6DEE9;
    --theme-form-field-border-initial-color: #2A3A5C;
    --theme-form-field-border-focus-color: #5B97F9;
    --theme-palette-color-8: #16203A;
  }
}
/* ---- Blocksy 头部/页脚深色底 + body 深色底（变量覆写不到的元素级背景）---- */
:root[data-theme="dark"] body,
:root[data-theme="dark"] .ct-header,
:root[data-theme="dark"] .ct-footer,
:root[data-theme="dark"] .ct-header [data-row],
:root[data-theme="dark"] .ct-footer [data-row] { background: var(--card); }
:root[data-theme="dark"] body { background: var(--bg); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) body,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .ct-header,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .ct-footer,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .ct-header [data-row],
  :root:not([data-theme="light"]):not([data-theme="dark"]) .ct-footer [data-row] { background: var(--card); }
  :root:not([data-theme="light"]):not([data-theme="dark"]) body { background: var(--bg); }
}

/* ---- 统一页面基底底色（明/暗模式共用 --bg 令牌，避免不同页面底色漂移）---- */
body { background: var(--bg); }
/* ---- 深色下 sec.base 用更深的底色分层（首页/分类页）---- */
:root[data-theme="dark"] { --bg-deep: #0C1426; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) { --bg-deep: #0C1426; }
}
/* ---- 深色模式 logo 换深色变体（assets/img/logo-dark.svg：浅字 + 青绿 Miles，徽章底 #2A3E66）----
   light 模式的 logo 是深色文字的 SVG，深底上不可读；content:url 覆写 img 渲染，
   路径相对本文件，跨域名可用。?v=3 为缓存破坏参数（改 SVG 内容时递增）。无 JS 时 prefers-color-scheme 块兜底。 */
:root[data-theme="dark"] .ct-header [data-id="logo"] img { content: url("assets/img/logo-dark.svg?v=3"); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .ct-header [data-id="logo"] img { content: url("assets/img/logo-dark.svg?v=3"); }
}

/* ---- 放开 Blocksy 对 #main-container 的纵向裁切 ----
   Blocksy main.min.css（ct-main-styles，加载在子主题样式之后）给 #main-container
   设了 overflow:hidden/clip，会把卡片顶部悬出的徽章（.tagp，top:-13px）裁掉一半。
   用 body 前缀提高优先级，保证覆盖（同级特异性会输给后加载的父样式）。
   横向溢出已由 body 的 overflow-x:hidden 兜底，这里只放开纵向裁切。 */
body #main-container { overflow: visible; }

/* ---- 全局简繁切换防闪 ----
   偏好为繁体时，wp_head 内联脚本先给 <html> 打 data-script-conv="pending"，
   此处隐藏 body；script-toggle.js 转换完成后移除属性再显示，避免「简体闪一下变繁体」。 */
html[data-script-conv="pending"] body { visibility: hidden; }

/* =========================================================
   全局可访问性：尊重系统「减少动态效果」偏好（WCAG 2.2）
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 本地 Inter 字体（woff2 子集）见 assets/fonts/inter.css，由 inc/fonts.php 条件挂载 */

/* =========================================================
   Taxonomy 落地页（结构 2.0 · /level/* /topic/*）附加组件
   作用域 .mm-reader（readers.css 之外的少量补充样式）
   ========================================================= */

/* CEFR / 话题横向切换 chips（内部链接层） */
.mm-tax-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 22px;
}
.mm-tax-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid var(--mm-line, #E3E9F2);
  border-radius: 99px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--mm-ink-soft, #4A5872);
  background: var(--mm-card, #fff);
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.mm-tax-chip:hover {
  border-color: var(--mm-blue-500, #3B82F6);
  color: var(--mm-blue-600, #2563EB);
  transform: translateY(-1px);
}
.mm-tax-chip.on {
  background: var(--mm-blue-600, #2563EB);
  border-color: var(--mm-blue-600, #2563EB);
  color: #fff;
}

/* 落地页导语（term description） */
.mm-tax-desc {
  max-width: 760px;
  margin: 4px 0 6px;
  color: var(--mm-ink-soft, #4A5872);
  font-size: 15.5px;
}
.mm-tax-desc p + p { margin-top: 10px; }

/* HSK 筛选预设提示（301 桥接落点：/level/a1/?mm_hsk=hsk1） */
.mm-tax-hsk-note {
  display: inline-block;
  margin: 0 0 18px;
  padding: 7px 14px;
  border: 1px solid var(--mm-green-100, #D1FAE5);
  background: var(--mm-green-50, #F0FDF7);
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--mm-green-600, #059669);
}

/* ============================================================
   双标码 chips（CEFR + HSK）· 数据唯一真值源：inc/levels-map.php
   CEFR = 实心品牌蓝胶囊；HSK = 描边胶囊（视觉可区分谁是哪套标准）。
   令牌驱动；暗色由 :root[data-theme="dark"] 覆写文字色。
   ============================================================ */
.mm-lvl-chip {
  display: inline-block;
  padding: .18rem .62rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.5;
  vertical-align: middle;
  white-space: nowrap;
}
.mm-lvl-chip--cefr { background: var(--primary); color: #fff; }
:root[data-theme="dark"] .mm-lvl-chip--cefr { color: #0F1729; }
.mm-lvl-chip--hsk {
  background: var(--card);
  color: var(--text);
  box-shadow: inset 0 0 0 1.5px var(--accent-strong);
}

/* =========================================================
   留言区（Comments）与正文左对齐修正
   Blocksy 分离式评论区 DOM：
     .ct-comments-container > .ct-container-narrow > .ct-comments#comments
   默认 .ct-container-narrow 居中且限窄列宽，导致留言区相对正文右缩进。
   复刻文章区 [data-sidebar="right"] 的「内容列 + 侧栏」网格，
   让留言区落在内容列（grid-column:1），与 <article> 等宽左对齐。
   ========================================================= */
.ct-comments-container {
  max-width: var(--theme-normal-container-max-width, 1200px) !important;
  margin-inline: auto !important;
  padding-inline: 15px !important;
}

@media (min-width: 1000px) {
  .ct-comments-container > .ct-container,
  .ct-comments-container > .ct-container-narrow {
    display: grid !important;
    grid-template-columns: minmax(100px, 1fr) var(--sidebar-width, 27%) !important;
    grid-column-gap: var(--sidebar-gap, 4%) !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
  }
  .ct-comments-container > .ct-container > .ct-comments,
  .ct-comments-container > .ct-container-narrow > .ct-comments {
    grid-column: 1 / 2 !important;
  }
}

.ct-comments,
.ct-comments.is-width-constrained,
.comments-area,
#comments {
  margin-inline: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

.ct-comments .ct-comments-title,
.ct-comments .comments-title,
.ct-comments .comment-respond,
.ct-comments .comment-form,
.ct-comments .comment-list,
.ct-comments .comment-body,
.ct-comments .comment-content {
  text-align: left !important;
}