/* =========================================================
   MandarinMiles · 全站附加组件（extras.css，始终加载）
   页脚法律栏 · Cookie 同意横幅 · Plans 页补充
   ========================================================= */

/* ---------- 页脚法律栏 ---------- */
.mm-legal-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 18px; padding: 18px 20px 26px; font-size: 12.5px; }
.mm-legal-links { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.mm-legal-links a { color: var(--muted); }
.mm-legal-links a:hover { color: var(--primary); }
.mm-legal-copy { color: var(--muted); }
body.mm .mm-legal-links a, body.mm .mm-legal-copy { color: var(--muted); }

/* ---------- Cookie 同意横幅 ---------- */
.mm-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 99998; padding: 14px; transition: opacity .2s ease, transform .2s ease; }
.mm-consent[hidden] { display: none; }
.mm-consent--bye { opacity: 0; transform: translateY(16px); pointer-events: none; }
.mm-consent-inner { max-width: 960px; margin: 0 auto; background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 8px 32px rgba(11,20,50,.18); padding: 16px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; justify-content: space-between; }
.mm-consent-text { font-size: 13.5px; color: var(--text); margin: 0; flex: 1; min-width: 260px; }
.mm-consent-text a { color: var(--primary); }
.mm-consent-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mm-consent-btn { font-size: 13px; font-weight: 800; padding: 10px 18px; border-radius: 999px; cursor: pointer; border: 1.5px solid var(--primary); background: var(--primary); color: #fff; }
.mm-consent-btn:hover { opacity: .92; }
.mm-consent-reject { background: var(--card); color: var(--primary); }
/* 深色由 :root 令牌驱动（[data-theme=dark] / prefers-color-scheme），无需单独媒体查询 */

/* ---------- 主题切换按钮（短代码 [mm_theme_toggle]，可放 Blocksy 头部） ---------- */
.mm-theme-toggle { display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid var(--border); background: var(--card); color: var(--text); border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer; line-height: 1; }
.mm-theme-toggle:hover { border-color: var(--primary); color: var(--primary); }
.mm-theme-toggle .ico { font-size: 14px; }

/* ---------- 头部独立切换按钮：圆角方框 + 单个彩色 emoji（明亮=🌙 / 暗=☀️） ---------- */
.mm-theme-toggle--icon { width: 42px; height: 42px; padding: 0; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--border); background: var(--card); color: var(--text); cursor: pointer; flex: 0 0 auto; font-size: 18px; line-height: 1; }
.mm-theme-toggle--icon:hover { border-color: var(--primary); }
.mm-theme-toggle--icon .ico { font-size: 18px; line-height: 1; }
/* 桌面：按钮插在 [data-id="menu"] 之后（end 列内）→ 菜单后面，与菜单留间距 */
:root .ct-header [data-device="desktop"] [data-id="menu"] + .mm-theme-toggle--icon { margin-left: 18px; }

/* ---------- 手机头部：简繁 / 明暗 两个切换按钮 ----------
   2026-11-13 修「随屏幕滚动漂移」。

   原实现的问题：
   Blocksy 的吸顶由内层 [data-sticky] 承担（sticky.js 会给它 position:fixed），
   而两个按钮却被 JS 挂到**外层** <header> 上，用 getBoundingClientRect() 算出
   「相对 header 的像素偏移」写成 inline left/top。header 本身会随页面滚走，
   内层 sticky 行却钉在视口顶 —— 两者坐标系不一致，按钮就跟着 header 一起漂走，
   滚到页面中段时按钮已经飘到正文中间（用户截图：按钮压在「Three decisions」标题上）。

   修法：**不再用 JS 算坐标**。直接把两个按钮按文档流插进移动端 end 列
   （[data-column="end"] [data-items]），它们就成了吸顶行的正常子元素，
   随吸顶行一起固定，永远不会漂移；同时也省掉了 MutationObserver + 轮询的定位逻辑。

   尺寸：42px 的图标按钮在 320px 窄屏上会和 logo 抢位（logo 183px 固定宽），
   故窄屏降到 36px。 */
@media (max-width: 689px) {
  /* 移动端图标按钮：缩小 + 紧凑间距 */
  header.ct-header [data-device="mobile"] .mm-theme-toggle--icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 16px;
  }
  header.ct-header [data-device="mobile"] .mm-theme-toggle--icon .ico {
    font-size: 16px;
  }
  /* Blocksy 给 [data-items] > * 加了 margin:0 10px，移动端两个按钮 + 汉堡要挤进
     320px，故压缩间距（汉堡按钮自身的左边距保留） */
  header.ct-header [data-device="mobile"] [data-column="end"] [data-items] {
    gap: 6px;
  }
  header.ct-header [data-device="mobile"] [data-column="end"] [data-items] > .mm-theme-toggle--icon {
    margin: 0 4px 0 0;
  }
  /* logo 允许收缩，避免在极窄屏上把按钮挤出视口 */
  header.ct-header [data-device="mobile"] [data-id="logo"] {
    min-width: 0;
    overflow: hidden;
  }
  header.ct-header [data-device="mobile"] .site-logo-container img {
    max-width: 100%;
  }
}

/* 极窄屏（≤359px，如 iPhone SE 竖屏 320px）：60px 高的 logo 占 183px，
   加上两个切换按钮 + 汉堡按钮会超出屏幕。此时把 logo 等比缩小一档。
   ⚠️ 选择器必须比 Blocksy 的 [data-header*="type-1"] .ct-header [data-id="logo"]
   .site-logo-container（特异性 0,4,0）更高 —— 加 :root 提权到 (0,4,1)，否则不生效。 */
@media (max-width: 359px) {
  :root header.ct-header [data-device="mobile"] .site-logo-container {
    --logo-max-height: 44px;
  }
}

/* ---------- Newsletter 表单（首页订阅 / plans 意向登记） ---------- */
.mm-nl-ok { font-size: 13.5px; color: var(--accent-strong); font-weight: 700; margin: 0 0 10px; }
.mm-nl-err { font-size: 13.5px; color: #B3261E; font-weight: 700; margin: 0 0 10px; }
.mm-nl-form { display: flex; flex-direction: column; gap: 10px; }
.mm-nl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mm-nl-row { display: flex; gap: 10px; flex-wrap: wrap; }
.mm-nl-row input[type="email"] { flex: 1; min-width: 200px; height: 44px; border: 1.5px solid var(--border); border-radius: 999px; padding: 0 16px; font-size: 14px; font-family: inherit; background: var(--card); color: var(--text); }
.mm-nl-row input[type="email"]:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(17,102,240,.25); }
.mm-nl-btn { height: 44px; padding: 0 22px; border-radius: 999px; border: none; background: var(--action); color: var(--action-ink); font-size: 14px; font-weight: 800; font-family: inherit; cursor: pointer; }
.mm-nl-btn:hover { background: var(--action-hover); }
.mm-nl-consent { font-size: 12px; color: var(--muted); display: flex; gap: 8px; align-items: flex-start; line-height: 1.5; }
.mm-nl-consent input { margin-top: 3px; }
.mm-nl-consent a { color: var(--primary); }
/* 意向登记（plans 上下文）双列：姓名 + 计划下拉 */
.mm-nl-row-2 { display: flex; gap: 10px; flex-wrap: wrap; }
.mm-nl-row-2 input[type="text"] { flex: 1; min-width: 160px; height: 44px; border: 1.5px solid var(--border); border-radius: 999px; padding: 0 16px; font-size: 14px; font-family: inherit; background: var(--card); color: var(--text); }
.mm-nl-row-2 input[type="text"]:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(17,102,240,.25); }
.mm-nl-row-2 select { flex: 1; min-width: 180px; height: 44px; border: 1.5px solid var(--border); border-radius: 999px; padding: 0 16px; font-size: 14px; font-family: inherit; background: var(--card); color: var(--text); -webkit-appearance: none; appearance: none; }
.mm-nl-row-2 select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(17,102,240,.25); }

/* ---------- Plans 页补充 ---------- */
.mm-plans .container { padding-bottom: 64px; }
.mm-plans .page-head { padding: 54px 0 8px; }
.mm-plans .breadcrumb { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.mm-plans .breadcrumb a { color: var(--primary); }
.mm-plans .section-title { font-size: 38px; font-weight: 800; letter-spacing: -.02em; color: var(--primary-dark); margin: 0; }
.mm-plans .section-sub { font-size: 16px; color: var(--muted); margin: 12px 0 0; }
.mm-plans .bundles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 30px 0 26px; }
.mm .mm-plans .bcard { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 28px 26px 26px; display: flex; flex-direction: column; gap: 14px; overflow: visible; }
.mm .mm-plans .bcard.pop { border: 2px solid var(--primary); box-shadow: 0 12px 36px rgba(17,102,240,.14); }
.mm .mm-plans .bcard .tagp { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--primary); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
.mm .mm-plans .bcard h4 { font-size: 19px; font-weight: 800; margin: 0; color: var(--primary-dark); }
.mm .mm-plans .bcard .price { font-size: 34px; font-weight: 800; color: var(--primary); letter-spacing: -.02em; }
.mm .mm-plans .bcard .price small { font-size: 13px; color: var(--muted); font-weight: 600; }
.mm .mm-plans .bcard ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--text); }
.mm .mm-plans .bcard ul li { padding-left: 22px; position: relative; }
.mm .mm-plans .bcard ul li::before { content: "✓"; position: absolute; left: 0; color: var(--accent-strong); font-weight: 800; }
.mm .mm-plans .bcard .btn { margin-top: auto; text-align: center; }
.mm-plans .plans-note { font-size: 13.5px; color: var(--muted); }
.mm-plans .plans-note a { color: var(--primary); }
.mm-plans .plans-notify { margin-top: 34px; background: var(--bg); border: 1px solid var(--border); border-radius: 18px; padding: 28px 30px; max-width: 560px; }
.mm-plans .plans-notify h2 { font-size: 22px; font-weight: 800; margin: 0 0 14px; color: var(--primary-dark); }
@media (max-width: 860px) {
  .mm-plans .bundles { grid-template-columns: 1fr; }
  .mm-plans .section-title { font-size: 30px; }
}

/* ---------- 移动端抽屉菜单（Blocksy offcanvas #offcanvas.ct-panel） ----------
   风格：淡色基底 + 每个菜单项一张独立圆角卡片（截图定稿样式）。
   设计令牌驱动（--bg/--brand-tint/--border/--text/--primary…），深浅模式自动跟随。
   覆盖 Blocksy 默认「黑底白字」调色板，body 前缀保证压过父主题后期加载样式。 */
/* 面板本体：淡色基底（卡片才能浮起来）+ 柔和投影 */
body #offcanvas.ct-panel { --theme-palette-color-8: var(--bg); }
body #offcanvas .ct-panel-inner {
  background: var(--bg);
  box-shadow: -24px 0 64px rgba(11, 20, 50, .22);
  border-radius: 0;
}
/* Blocksy global.css 的 [data-header*="type-1"] #offcanvas .ct-panel-inner（1,2,0）
   会硬编码 rgba(18,21,25,.98) 黑底，这里用 body #offcanvas.ct-panel .ct-panel-inner（1,2,1）压过 */
body #offcanvas.ct-panel .ct-panel-inner {
  background: var(--bg);
}
/* 关闭行：无分隔线，X 悬浮右上角（与截图一致） */
body #offcanvas .ct-panel-actions {
  border-bottom: 0;
  padding: 18px 20px 6px;
  margin: 0;
}
/* ⚠️ Blocksy 全局 [class*="ct-toggle"] 用 background:var(--toggle-button-background,transparent)!important
   等一排 !important 压样式——特异性再高也赢不了。正确姿势：
   ① 改它的变量 --toggle-button-background；② 边框用 inset box-shadow 环代替（绕开 border 战场）。 */
body #offcanvas.ct-panel .ct-toggle-close {
  --toggle-button-background: transparent;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: transparent !important;
  color: var(--text);
  cursor: pointer;
  transition: color .15s ease, transform .15s ease;
}
/* ⚠️ Blocksy 给抽屉 X 图标写死白色 fill（深色抽屉假定）——白底抽屉下会隐身，必须覆盖 */
body #offcanvas.ct-panel .ct-toggle-close .ct-icon {
  fill: var(--text);
  width: 15px; height: 15px;
}
body #offcanvas.ct-panel .ct-toggle-close:hover {
  color: var(--primary);
  transform: rotate(90deg);
}
body #offcanvas.ct-panel .ct-toggle-close:hover .ct-icon { fill: var(--primary); }
/* 菜单列表：每个顶级项 = 一张独立圆角卡片（截图定稿样式）
   卡片底用 --brand-tint（浅蓝），细描边用 inset box-shadow（绕开 Blocksy border 战场） */
body #offcanvas .ct-panel-content nav { padding: 6px 20px 28px; }
body #offcanvas .ct-panel-content nav > ul { gap: 12px; }
body #offcanvas .ct-panel-content nav > ul > li {
  background: var(--brand-tint);
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px var(--border);
  overflow: hidden;
  transition: box-shadow .15s ease, background .15s ease;
}
body #offcanvas .ct-panel-content nav > ul > li:hover {
  background: var(--card);
  box-shadow: inset 0 0 0 1.5px var(--primary);
}
/* 卡片内链接：透明底，尺寸撑起卡片 */
body #offcanvas .ct-panel-content nav a,
body #offcanvas .ct-panel-content nav .ct-sub-menu-parent > span {
  color: var(--text);
  font-weight: 700;
  font-size: 16px;
  padding: 15px 18px;
  border-radius: 0;
  transition: background .15s ease, color .15s ease;
}
body #offcanvas .ct-panel-content nav a:hover,
body #offcanvas .ct-panel-content nav [aria-current="page"],
body #offcanvas .ct-panel-content nav .ct-sub-menu-parent[aria-expanded="true"] > span {
  background: transparent;
  color: var(--primary);
}
/* 子菜单（分级列表）：卡片内收敛排布，左侧青绿短线示意层级 */
body #offcanvas .ct-panel-content nav .sub-menu { margin: 0 10px 10px; padding-left: 10px; border-left: 2px solid var(--teal-tint); }
body #offcanvas .ct-panel-content nav .sub-menu a {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--muted);
  padding: 10px 12px;
  border-radius: 8px;
}
body #offcanvas .ct-panel-content nav .sub-menu a:hover { background: var(--teal-tint); color: var(--accent-strong); }
/* 下拉角标（移动端抽屉）：button.ct-toggle-dropdown-mobile，Blocksy 默认 25px 盒 + 15px 小图标
   + margin-end:-5px 贴右缘 → 太小、不明显。放大 + 主色描边圆底 + 往左收进。
   ⚠️ Blocksy 对 [class*=ct-toggle] 有一排 background/border/radius/shadow !important，
   直接写属性必输——必须改它的变量（--toggle-button-*），与抽屉 X 按钮同一战法。 */
body #offcanvas .ct-panel-content nav .ct-toggle-dropdown-mobile {
  --toggle-button-size: 34px;          /* 默认 25px */
  --toggle-button-margin-end: 8px;     /* 默认 -5px 贴右缘 → 收进来（往左移） */
  --toggle-button-background: var(--card);
  --toggle-button-radius: 9px;
  --toggle-button-border-width: 1.5px;
  --toggle-button-border-color: var(--border);
  --theme-icon-color: var(--primary);
  color: var(--primary);
}
body #offcanvas .ct-panel-content nav .ct-toggle-dropdown-mobile svg { width: 17px; height: 17px; }
/* 展开态（Blocksy 用 li.dropdown-active）：底色变品牌浅蓝，图标转正文色 */
body #offcanvas .ct-panel-content nav li.dropdown-active > .ct-sub-menu-parent .ct-toggle-dropdown-mobile {
  --toggle-button-background: var(--brand-tint);
  --theme-icon-color: var(--text);
  color: var(--text);
}

/* ---------- 头部下拉子菜单：令牌化配色 ----------
   Blocksy 下拉背景 = var(--dropdown-background-color, --theme-palette-color-4)，
   链接色 = var(--theme-link-initial-color)。暗色模式下会出现「深底深字」不可读，
   这里整体切到主题令牌：卡片底 + 正文色，深浅模式自动跟随。 */
header.ct-header nav .sub-menu {
  --dropdown-background-color: var(--card);
}
header.ct-header nav .sub-menu .ct-menu-link {
  color: var(--text);
}
header.ct-header nav .sub-menu .ct-menu-link:hover {
  color: var(--primary);
}

/* ---------- 头部 logo：去除 SVG 自带的透明白边 ----------
   logo SVG 原画布 560 宽，内容只占 x 24~464（左 24 右 96 单位透明边），
   已把 SVG viewBox 裁成 24 0 440 140。但 WP 输出的 <img width="560" height="140">
   属性仍强制 4:1 盒子 + object-fit:contain 居中 → 白边会以「两侧居中留空」形式回来。
   这里强制 img 按文件真实比例撑开（height 仍由 Blocksy 控制），彻底贴合内容。 */
header.ct-header .site-branding img,
header.ct-header .site-logo-container img {
  aspect-ratio: auto !important;
  object-fit: contain;
}

/* ---------- 手机头部：logo 左边距 = 菜单右边距（对称） ----------
   移动端 Blocksy 头部容器两侧已收窄为各 12px（见下方 .ct-container）。
   但起始列（logo）默认带 4px 左内边距，导致 logo 离屏左边 = 16px，
   而菜单离屏右边 = 容器 margin 12px → 左右不对称。这里把起始列左内边距清零，
   使 logo 视觉左缘（SVG 已裁到内容边界）正好落在 12px 处，与菜单右边距对等。
   SVG 的三边白边已由 viewBox 裁掉（亮：uploads/logo-light.svg；暗：assets/img/logo-dark.svg），
   故 logo 左缘=徽章左缘，无内部留白。 */
@media (max-width: 689px) {
  header.ct-header [data-row] > .ct-container {
    width: calc(100% - 24px) !important;
  }
  .ct-header [data-device="mobile"] [data-id="logo"],
  .ct-header [data-device="mobile"] [data-column="start"] {
    justify-content: flex-start !important;
    text-align: left !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
  /* 起始列若被拉伸居中，收缩回自适应并左对齐（不影响右侧汉堡触发按钮）
     注：Blocksy 列 markup 是 <div data-column="start">，无独立 class */
  .ct-header [data-device="mobile"] > [data-column="start"] {
    flex: 0 0 auto !important;
  }
}