/* ============================================================
   图漾相机文档 · sphinx_rtd_theme 品牌色覆盖
   原则：与文档中心顶层（site\percipio.css）同一套站点框架，
   主题结构与版式保持原生，只把颜色换成品牌色表。
   色值出处：spec\00-通用规范.md 第 5 节「视觉与品牌规范」。
   ============================================================ */

:root {
  --pc-red:      #BE3C1E;  /* 强调色（图漾红）：只作强调，不作大面积底色 */
  --pc-red-deep: #87281E;  /* 深红强调态 */
  --pc-topbar:   #F5F5F5;  /* 顶栏底色（也用于侧栏搜索区） */
  --pc-border:   #E1E4E5;  /* 分隔线 */
  --pc-gray:     #C9CACA;  /* 标准灰 */
  --pc-muted:    #898989;  /* 辅助说明 */
  --pc-text-2:   #595757;  /* 次要文字 */
  --pc-text:     #241916;  /* 正文近黑 */
  --pc-bg-soft:  #FAFAFA;  /* 浅背景（悬停态、当前项） */
}

/* ---------- 自定义顶栏（侧栏右侧、正文正上方） ---------- */

.percipio-header {
  position: fixed;
  top: 0;
  left: 300px;                 /* 与主题侧栏同宽，侧栏通顶 */
  right: 0;
  height: 56px;
  z-index: 250;
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 0 24px;
  background: var(--pc-topbar);
  border-bottom: 1px solid var(--pc-border);
}

/* 品牌区跳「文档中心」（另一站点）：非当前站不加粗，与普通导航项一致 */
.percipio-header .ph-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 400;
  color: var(--pc-text);
}
.percipio-header .ph-brand svg { width: 16px; height: 16px; }
.percipio-header .ph-brand:hover { color: var(--pc-red); }

/* 组间竖线分隔符（1px 灰线隔开产品链接与外部链接） */
.percipio-header .ph-sep {
  width: 1px;
  height: 16px;
  background: var(--pc-border);
}

/* 基线对齐：中/西文链接行盒高度不同（中文约21px、西文约17px），
   按盒子居中会让西文（Robot Vision Suite）基线偏高，改基线对齐保证同一行 */
.percipio-header .ph-nav { display: flex; align-items: baseline; gap: 35px; }
.percipio-header .ph-nav .ph-sep { margin: 0 -17.5px; align-self: center; }  /* 竖线无文字基线，单独垂直居中；负边距抵消其作为 flex 子项吃掉的两侧 gap，使整体间距均匀 */
.percipio-header .ph-nav a { font-size: 14px; color: var(--pc-text-2); }
.percipio-header .ph-nav a:hover { color: var(--pc-red); }
.percipio-header { overflow-x: auto; }
.percipio-header .ph-brand,
.percipio-header .ph-nav { flex-shrink: 0; white-space: nowrap; }
/* 当前产品站：近黑加粗，与普通导航项区分 */
.percipio-header .ph-nav a.ph-current {
  color: var(--pc-text);
  font-weight: 600;
}
.percipio-header .ph-nav a.ph-external::after {
  content: "↗";
  font-size: 11px;
  margin-left: 3px;
  color: var(--pc-muted);
}

/* 正文下移避开顶栏；页内锚点跳转不被顶栏遮住 */
.wy-nav-content-wrap { padding-top: 56px; }
.rst-content [id] { scroll-margin-top: 64px; }

@media screen and (max-width: 768px) {
  .percipio-header { left: 0; }
}

/* ---------- 全局文字与链接 ---------- */

body { color: var(--pc-text); }

/* 正文链接：默认亮图漾红（品牌感强，主页卡片等零散链接最好看），
   悬停加深为深红；已访问保持亮红不变（抵消主题紫色 visited 色，
   避免点过的链接与未点的混排时颜色不一致） */
a { color: var(--pc-red); }
a:hover { color: var(--pc-red-deep); }
a:visited { color: var(--pc-red); }

.wy-breadcrumbs li:not(.wy-breadcrumbs-aside),
.wy-breadcrumbs li:not(.wy-breadcrumbs-aside) a,
.wy-breadcrumbs li:not(.wy-breadcrumbs-aside) a:visited,
.wy-breadcrumbs li:not(.wy-breadcrumbs-aside) a:hover,
.wy-breadcrumbs li:not(.wy-breadcrumbs-aside) a:focus,
.wy-breadcrumbs li:not(.wy-breadcrumbs-aside) a:active,
.wy-breadcrumbs li:not(.wy-breadcrumbs-aside) a.icon::before {
  color: var(--pc-red) !important;
}

/* 链接密集的页面统一用深红：正文区存在 ≥15 条项、且条目本身就是链接的
   紧密列表时（如 API 一览表），整页正文链接统一为深红，
   避免同页亮红/深红混排；纯文字的步骤/清单列表不触发。
   悬停提亮回图漾红作反馈。浏览器不支持 :has() 时回退为全亮红。 */
.rst-content:has(li:nth-last-child(n+15) a) a,
.rst-content:has(li:nth-last-child(n+15) a) a:visited {
  color: var(--pc-red-deep);
}
.rst-content:has(li:nth-last-child(n+15) a) a:hover {
  color: var(--pc-red);
}

/* ---------- 内容区与侧栏统一为白底（去掉主题浅灰底） ---------- */

.wy-nav-content-wrap,
.wy-nav-content {
  background: #ffffff;
}

/* 正文区加宽：与文档中心顶层同一做法（主题默认 800px 限宽，
   放宽到 1000px，消除右侧大片灰色空白） */
.wy-nav-content {
  max-width: 1000px;
}

.wy-nav-side {
  background: #ffffff;
  color: var(--pc-text-2);
  border-right: 1px solid var(--pc-border);
}

/* 侧栏 logo 搜索区：用浅灰与正文区分（保留品牌色 #F5F5F5） */
.wy-side-nav-search {
  background: var(--pc-topbar);
  color: var(--pc-text);
  border-bottom: 1px solid var(--pc-border);
}

.wy-side-nav-search .wy-dropdown > a,
.wy-side-nav-search > a { color: var(--pc-text); }

.wy-side-nav-search input[type="text"] {
  background: #ffffff;
  border-color: var(--pc-border);
  color: var(--pc-text);
}
.wy-side-nav-search input[type="text"]:focus {
  border-color: var(--pc-red);
  outline: none;
}

/* ---------- 侧栏选择器（版本 / 语言 / 产品）
   行布局：左侧名称标签，右侧当前值 + 下拉箭头 ---------- */

.dc-selectors {
  display: flex;
  flex-direction: column;
  margin: 16px 2px 8px;
}
.dc-select-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--pc-border);
}
.dc-select-row:last-child { border-bottom: none; }

.dc-select-label {
  font-size: 14px;
  color: var(--pc-text-2);
  white-space: nowrap;
}

/* 下拉值：去掉原生框体，只保留文字与右侧箭头 */
.dc-select-field { position: relative; }
.dc-select-field::after {
  content: "";
  position: absolute;
  right: 2px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--pc-text-2);
  border-bottom: 1.5px solid var(--pc-text-2);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.dc-selectors select.dc-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  max-width: 150px;
  padding: 0 16px 0 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 14px;
  color: var(--pc-text);
  text-align-last: right;
  cursor: pointer;
}
/* 去掉点击/聚焦时浏览器画的框（各状态全清） */
.dc-selectors select.dc-select:hover,
.dc-selectors select.dc-select:focus,
.dc-selectors select.dc-select:active,
.dc-selectors select.dc-select:focus-visible {
  border: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
}
.dc-selectors select.dc-select:hover { color: var(--pc-red); }
.dc-selectors select.dc-select:focus { color: var(--pc-red); }

/* ---------- 目录树 ---------- */

/* 分区标题（toctree :caption:）：亮图漾红，与全站链接默认色一致；
   中文保持原样不强制大写 */
.wy-menu-vertical p.caption {
  color: var(--pc-red);
  text-transform: none;
  font-size: 90%;
}

/* 展开/收起按钮（Open/close menu）：
   仅在首页默认视图（未进入任何章节）隐藏第一层 chapter 的展开图标——
   即「非当前路径」的 toctree-l1；进入章节后，当前 l1 及其下所有更深层级
   （l2/l3…）含子 topic 的 chapter 图标正常显示，提示用户还有更多 topic 可展开。
   点击按钮由主题 JS toggleCurrent 处理，不影响条目本身跳转。 */
.wy-menu-vertical li.toctree-l1:not(.current) > a > button.toctree-expand { display: none !important; }

.wy-menu-vertical a { color: var(--pc-text-2); }
.wy-menu-vertical a:hover {
  background: var(--pc-bg-soft);
  color: var(--pc-red);
}
.wy-menu-vertical a:hover button.toctree-expand { color: var(--pc-red); }

/* 当前页：浅底 + 左侧红色标记 */
.wy-menu-vertical li.on a,
.wy-menu-vertical li.current > a {
  color: var(--pc-text);
  font-weight: 700;
  background: var(--pc-bg-soft);
  border-left: 2px solid var(--pc-red);
}
.wy-menu-vertical li.current > a button.toctree-expand { color: var(--pc-text); }

.wy-menu-vertical li.toctree-l1.current > a {
  border-top: 1px solid var(--pc-border);
  border-bottom: 1px solid var(--pc-border);
}

/* ---------- 移动端顶条 ---------- */

.wy-nav-top {
  background: var(--pc-topbar);
  color: var(--pc-text);
  border-bottom: 1px solid var(--pc-border);
}
.wy-nav-top a { color: var(--pc-text); }

/* ---------- 首页卡片（与文档中心顶层同一款 sphinx_design 卡片） ---------- */

.sd-card {
  border: 1px solid var(--pc-border);
  border-radius: 6px;
  box-shadow: none;
}
.sd-card:hover { border-color: var(--pc-red); }

.sd-card.dc-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.sd-card.dc-card .sd-card-body { flex: 1; }

/* 配图统一为同一高度、完整显示（contain，不裁切） */
.sd-card.dc-card img.sd-card-img-top {
  width: 100%;
  height: 200px;
  object-fit: contain;
  background: #ffffff;
}

/* 标题明显大于正文 */
.sd-card.dc-card .sd-card-title {
  font-size: 19px;
  font-weight: 600;
  color: var(--pc-text);
  margin-bottom: 10px;
}
.sd-card.dc-card .sd-card-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--pc-text-2);
}

/* Keep the same text width and top alignment regardless of image shape. */
.sd-card.dc-card .sd-card-body:has(.dc-card-layout) {
  padding: 16px;
  min-height: 166px;
}
.sd-card.dc-card .sd-card-body:has(.dc-card-layout) .sd-card-title {
  line-height: 1.4;
  margin: 0 0 10px;
}
.sd-card.dc-card .dc-card-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  min-height: 96px;
  align-items: start;
  gap: 12px;
}
.sd-card.dc-card .dc-card-copy { min-width: 0; }
.sd-card.dc-card .dc-card-copy > :first-child { margin-top: 0; }
.sd-card.dc-card .dc-card-copy > :last-child { margin-bottom: 0; }
/* 说明文字预留两行高度：无论一句话还是两句话，同行卡片的链接都保持水平对齐 */
.sd-card.dc-card .dc-card-copy > p.sd-card-text:first-child { min-height: 45px; }
.sd-card.dc-card .dc-card-layout > p { margin: 0; }
.sd-card.dc-card img.dc-card-thumb {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: contain;
  justify-self: center;
  align-self: center;
}

/* 满框正方形图标（PV、通用 SDK 图标）：96px 下视觉偏大，整体缩至 72px */
.sd-card.dc-card img.dc-card-thumb.dc-thumb-square { width: 72px; height: 72px; }

/* Wide logos share the same image slot. */
.sd-card.dc-card img.dc-card-thumb.dc-thumb-wide {
  width: 100%;
  height: 96px;
}

@media screen and (max-width: 720px) {
  .rst-content .sd-row.sd-row-cols-2 > .sd-col {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }
}

@media screen and (max-width: 480px) {
  .sd-card.dc-card .dc-card-layout {
    grid-template-columns: minmax(0, 1fr) 64px;
    min-height: 96px;
    gap: 8px;
  }
  .sd-card.dc-card img.dc-card-thumb {
    width: 64px;
    height: 64px;
  }
  .sd-card.dc-card img.dc-card-thumb.dc-thumb-square { width: 56px; height: 56px; }
  .sd-card.dc-card img.dc-card-thumb.dc-thumb-wide { height: 64px; }
}

/* 悬停动效过渡（上浮、阴影、描边变色统一渐变） */
.sd-card.dc-card {
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

/* 整卡可点击（card 的 :link: 选项生成 sd-stretched-link 覆盖整张卡片）。
   覆盖扩展自带的 sd-card-hover 悬停态：品牌红描边 + 轻微上浮阴影。 */
.sd-card.dc-card.sd-card-hover:hover {
  border-color: var(--pc-red);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
}

/* 悬停/键盘聚焦时标题变红，提示卡片可点击；Tab 聚焦时整卡显示焦点框 */
.sd-card.dc-card:hover .sd-card-title,
.sd-card.dc-card:focus-within .sd-card-title { color: var(--pc-red); }
.sd-card.dc-card:focus-within {
  outline: 2px solid var(--pc-red);
  outline-offset: 2px;
}

/* 卡片内链接颜色跟随全局（默认深红、悬停亮红）；子链接列表去圆点 */
.sd-card.dc-card .sd-card-body ul { list-style: none; padding-left: 0; margin: 8px 0 0; }
.sd-card.dc-card .sd-card-body ul li { margin: 2px 0; }

/* ---------- 类型标签（规格书 / 用户手册 / 用户指南 / SDK 指南）
   10.5px、1px 边框、圆角 3px、浅色底 ---------- */

.dc-chips { margin: 0 0 10px; }
.dc-chip {
  display: inline-block;
  margin: 0 6px 4px 0;
  padding: 1px 8px;
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--pc-text-2);
  background: var(--pc-topbar);
  border: 1px solid var(--pc-border);
  border-radius: 3px;
}

/* ---------- 页脚（与文档中心顶层同款：白底黑字细线分隔） ---------- */

/* 关键：主题把 .wy-grid-for-nav 设为 position:absolute + height:100%
   （脱离文档流且虚高），导致其后的页脚飘到页面顶部。
   改为相对定位、高度自适应，页脚才会被推到内容下方。 */
.wy-grid-for-nav {
  position: relative;
  height: auto;
}

.pc-footer {
  margin-left: 300px;            /* 避开左侧栏，只占内容列 */
  background: #ffffff;
  border-top: 1px solid var(--pc-border);
  color: var(--pc-text);
}
.pc-footer-inner {
  max-width: 1000px;             /* 与正文同宽 */
  margin: 0 auto;                /* 照抄正文区排法：<1100px 时主题让正文居中 */
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px 28px;
  /* 左右缩进与正文区对齐（与文档中心顶层同一组实测值） */
  padding: 22px calc(3.236em + 12px) 26px;
}
.pc-footer-col {
  display: flex;
  flex-direction: column;        /* 标题在上一行，条目在下一行 */
  align-items: flex-start;
  gap: 10px;
}
.pc-footer-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--pc-text);
}
.pc-footer-title a { color: inherit; }
.pc-footer-title a:hover { color: var(--pc-red); }
.pc-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;            /* 条目横排 */
  align-items: center;
  gap: 14px;
  font-size: 13px;
}
.pc-footer-links a { color: var(--pc-text-2); }     /* 次要文字，悬停变品牌红 */
.pc-footer-links a:hover { color: var(--pc-red); }

/* 外部链接小箭头 */
.pc-footer-links a.pc-ext::after {
  content: "↗";
  font-size: 11px;
  margin-left: 3px;
  opacity: .7;
}

/* 微信二维码：悬停文字时在上方弹出小图（正方形，白底描边） */
.pc-wechat {
  position: relative;
  color: var(--pc-text-2);
  cursor: pointer;
}
.pc-wechat:hover { color: var(--pc-red); }
.pc-wechat .pc-qr {
  display: none;
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  width: 120px;
  height: 120px;
  max-width: none;               /* 抵消主题全局 img{max-width:100%}：
                                     该规则参照悬停文字的宽度，会把弹图压成窄条 */
  padding: 4px;
  background: #ffffff;
  border: 1px solid var(--pc-border);
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(36, 25, 22, .18);
  object-fit: contain;           /* 正方形完整显示，不压缩 */
}
.pc-wechat:hover .pc-qr { display: block; }

/* 桌面端三列保持同一行：空间不足时由第一列内部换行，
   避免免责声明被挤到第二行。 */
@media screen and (min-width: 960px) {
  .pc-footer-inner { flex-wrap: nowrap; }
  .pc-footer-col:first-child { min-width: 0; }
  .pc-footer-col:first-child .pc-footer-links { flex-wrap: wrap; row-gap: 6px; }
}

/* 宽屏(≥1100px)时主题把正文区改为贴左(margin:0)，
   页脚照抄，两边的左缘才能在任何窗口宽度都对齐。 */
@media screen and (min-width: 1100px) {
  .pc-footer-inner { margin: 0; }
}

@media screen and (max-width: 768px) {
  .pc-footer { margin-left: 0; }
  .pc-footer-inner {
    gap: 40px;
    padding-left: calc(1.618em + 12px);   /* 移动端正文内边距为 1.618em，同样对齐 */
    padding-right: calc(1.618em + 12px);
  }
}

/* ---------- 更新说明表格 ---------- */
/* 表格宽度默认按内容收缩，行数少、文字短的版本表会明显窄于其他表格；
   统一撑满正文宽度，使各版本的表格版式保持一致。 */
.rst-content table.release-notes-table { width: 100%; }
