/* =========================================================
 * Beacon site detail presentation.
 * Beacon owns the visual system; OneNav markup remains a compatibility layer.
 * ======================================================= */

/* =========================================================
 * 1) 面包屑：mono 大写眉题化（11px / 500 / 正字距）
 * ======================================================= */
.single-sites main.container > nav[aria-label="breadcrumb"] {
  font-family: var(--bc-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--bc-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--bc-body);
  margin-bottom: 20px;
}
.single-sites .breadcrumb .crumbs,
.single-sites nav[aria-label="breadcrumb"] a {
  color: var(--bc-body);
}
.single-sites nav[aria-label="breadcrumb"] a:hover {
  color: var(--bc-ink);
}
.single-sites nav[aria-label="breadcrumb"] .text-color {
  color: var(--bc-hairline);
}

/* =========================================================
 * 2) 暗色头带：站点信息区整体翻转为 canvas-dark
 * ======================================================= */
.single-sites .io-sites-header-wrap {
  position: relative;
  background: var(--bc-canvas-dark);
  color: var(--bc-on-dark);
  border-radius: var(--bc-rounded-sm);
  border: 1px solid var(--bc-surface-dark-soft);
  padding: var(--bc-space-3xl) !important;
  margin-bottom: var(--bc-space-3xl) !important;
  overflow: hidden;
}

/* 品牌渐变 ribbon：暗色头带顶缘品牌铬件 */
.single-sites .io-sites-header-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: var(--bc-gradient);
}

/* 站点名：display 字体 + 负字距 + sentence case */
.single-sites .io-sites-header-wrap h1.site-name {
  font-family: var(--bc-font-sans);
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--bc-on-dark) !important;
  margin-bottom: 12px !important;
}
.single-sites .io-sites-header-wrap h1.site-name a {
  font-size: 12px;
  color: var(--bc-body-on-dark);
  margin-left: 8px;
  vertical-align: middle;
}
.single-sites .io-sites-header-wrap h1.site-name a:hover {
  color: var(--bc-on-dark);
}

/* meta 行（更新时间 / 浏览 / 评论 / 点赞） */
.single-sites .io-sites-header-wrap .text-muted,
.single-sites .io-sites-header-wrap .d-flex.flex-fill.text-muted {
  color: var(--bc-body-on-dark) !important;
}
.single-sites .io-sites-header-wrap .io-posts-like {
  color: var(--bc-body-on-dark);
}
.single-sites .io-sites-header-wrap .io-posts-like:hover {
  color: var(--bc-on-dark);
}

/* 收藏按钮：ghost on dark */
.single-sites .io-sites-header-wrap .posts-like .btn,
.single-sites .io-sites-header-wrap .btn.vc-l-red {
  background: var(--bc-surface-dark-soft) !important;
  border: 1px solid var(--bc-surface-dark-soft) !important;
  color: var(--bc-on-dark) !important;
  border-radius: var(--bc-rounded-sm) !important;
  box-shadow: none !important;
}
.single-sites .io-sites-header-wrap .posts-like .btn:hover {
  border-color: var(--bc-body-on-dark) !important;
}

/* 站点描述 */
.single-sites .io-sites-header-wrap .mt-2 > p {
  color: color-mix(in srgb, var(--bc-on-dark) 82%, transparent);
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: -0.01em;
}

/* =========================================================
 * 3) 信息表：mono 大写键名列 + 发丝线（暗面用 surface-dark-soft）
 * ======================================================= */
.single-sites .io-sites-header-wrap .table-div .table-row {
  display: flex;
  border-bottom: 1px solid var(--bc-surface-dark-soft);
  padding: 10px 0;
}
.single-sites .io-sites-header-wrap .table-div .table-row:last-child {
  border-bottom: 0;
}
.single-sites .io-sites-header-wrap .table-div .table-title {
  flex: 0 0 96px;
  font-family: var(--bc-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--bc-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--bc-body-on-dark);
  padding-top: 3px;
}
.single-sites .io-sites-header-wrap .table-div .table-value {
  color: var(--bc-on-dark);
  font-size: 14px;
}

/* =========================================================
 * 4) CTA 簇：白底主 CTA（暗面反转）+ ghost 次级
 * ======================================================= */
.single-sites .io-sites-header-wrap .site-go .btn {
  border-radius: var(--bc-rounded-sm) !important;
  box-shadow: none !important;
  font-family: var(--bc-font-mono);
  font-weight: 500;
  letter-spacing: 0.02em;
}
/* 主 CTA「打开网站」：暗面上的白色按钮（对应 hero white pill） */
.single-sites .io-sites-header-wrap .site-go .btn.vc-theme {
  background: var(--bc-canvas) !important;
  border: 1px solid var(--bc-canvas) !important;
  color: var(--bc-ink) !important;
}
.single-sites .io-sites-header-wrap .site-go .btn.vc-theme:hover {
  background: var(--bc-accent-mint) !important;
  border-color: var(--bc-accent-mint) !important;
}
/* 次级：ghost on dark */
.single-sites .io-sites-header-wrap .site-go .btn.vc-l-theme,
.single-sites .io-sites-header-wrap .site-go .btn.vc-red {
  background: var(--bc-surface-dark-soft) !important;
  border: 1px solid var(--bc-surface-dark-soft) !important;
  color: var(--bc-on-dark) !important;
}
.single-sites .io-sites-header-wrap .site-go .btn:hover {
  border-color: var(--bc-body-on-dark) !important;
}

/* =========================================================
 * 5) 标签 pills：badge-subtle-on-dark，4px 圆角（禁 rounded-pill）
 * ======================================================= */
.single-sites .io-sites-header-wrap .terms-list .btn {
  background: var(--bc-surface-dark-soft) !important;
  border: 1px solid var(--bc-surface-dark-soft) !important;
  color: var(--bc-on-dark) !important;
  border-radius: var(--bc-rounded-sm) !important;
  font-size: 13px;
  box-shadow: none !important;
  font-family: var(--bc-font-sans);
}
.single-sites .io-sites-header-wrap .terms-list .btn:hover {
  border-color: var(--bc-body-on-dark) !important;
  color: var(--bc-on-dark) !important;
}

/* =========================================================
 * 6) 站点截图预览：暗面内嵌卡片，发丝线（暗）边框
 * ======================================================= */
.single-sites .io-sites-header-wrap .sites-preview .preview {
  border: 1px solid var(--bc-surface-dark-soft);
  border-radius: var(--bc-rounded-sm);
  overflow: hidden;
}
.single-sites .io-sites-header-wrap .sites-preview img {
  border-radius: var(--bc-rounded-sm);
  display: block;
}

/* =========================================================
 * 7) 白色内容带：正文 / 风险提示 / 侧栏
 * ======================================================= */
/* 正文区块标题：display 字体负字距，sentence case */
.single-sites .bh-detail-article h2,
.single-sites .bh-detail-article h3 {
  font-family: var(--bc-font-sans);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: inherit;
}
html:not(.io-black-mode) .single-sites .bh-detail-article h2,
html:not(.io-black-mode) .single-sites .bh-detail-article h3 {
  color: var(--bc-ink);
}
.single-sites .bh-detail-article p,
.single-sites .panel-body.single p {
  color: inherit;
  line-height: 1.7;
}
html:not(.io-black-mode) .single-sites .bh-detail-article p,
html:not(.io-black-mode) .single-sites .panel-body.single p {
  color: var(--bc-ink);
}

/* 风险提示与声明卡片：mono 大写卡头（全局已处理），正文次级灰 */
.single-sites .panel.site-content .content-title {
  font-family: var(--bc-font-sans);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: inherit;
}
html:not(.io-black-mode) .single-sites .panel.site-content .content-title {
  color: var(--bc-ink);
}
.single-sites .panel.site-content .text-muted {
  color: var(--bc-body) !important;
}

/* 侧栏小工具：与主内容同节奏 */
.single-sites .sidebar-tools .card.io-sidebar-widget {
  border-radius: var(--bc-rounded-sm);
}

/* =========================================================
 * 8) 页尾巨型 wordmark 签名（纯 CSS 注入，无模板改动）
 * ======================================================= */
html:not(.io-black-mode) .single-sites main.container::after {
  content: "BEACON.CN";
  display: block;
  font-family: var(--bc-font-sans);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  font-size: clamp(48px, 11vw, 150px);
  color: var(--bc-hairline);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  user-select: none;
  margin-top: var(--bc-space-section);
  pointer-events: none;
}

/* =========================================================
 * 9) 响应式：暗色头带在移动端收紧内边距
 * ======================================================= */
@media (max-width: 767.98px) {
  .single-sites .io-sites-header-wrap {
    padding: 20px !important;
  }
  html:not(.io-black-mode) .single-sites main.container::after {
    margin-top: 48px;
  }
}

/* 暗色模式：wordmark 使用暗面弱化色 */
.io-black-mode .single-sites main.container::after {
  content: "BEACON.CN";
  display: block;
  font-family: var(--bc-font-sans);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  font-size: clamp(48px, 11vw, 150px);
  color: var(--bc-color-palette-dark-surface);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  user-select: none;
  margin-top: var(--bc-space-section);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .single-sites * { transition: none !important; }
}

/* =========================================================
 * 10) 截图外框（Safari 拟物窗口）规范化
 *     16px 大圆角 → 8px；多层大投影/hover 上浮 → hairline 层级；
 *     顶栏渐变/渐变按钮 → 单色 hairline 体系；暗色窗口/顶栏/灰点
 * ======================================================= */
html .sites-preview .io-mac-window{
  border-radius: 8px !important;
  border: 1px solid var(--bc-hairline) !important;
  overflow: hidden !important;
  background: var(--bc-color-palette-white) !important;
  box-shadow: none !important;
  transition: none !important;
  transform: none !important;
}
html .sites-preview .io-mac-window:hover{
  transform: none !important;
  box-shadow: none !important;
  border-color: var(--bc-body) !important;
}
html.io-black-mode .sites-preview .io-mac-window{
  background: var(--bc-surface-dark-soft) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html.io-black-mode .sites-preview .io-mac-window:hover{
  border-color: var(--bc-body-on-dark) !important;
  box-shadow: none !important;
}
/* Safari 顶栏：单色体系 */
html .sites-preview .io-sf-top{
  background: var(--bc-semantic-color-surface-subtle) !important;
  border-bottom: 1px solid var(--bc-hairline) !important;
}
html.io-black-mode .sites-preview .io-sf-top{
  background: var(--bc-color-palette-dark-raised) !important;
  border-bottom-color: transparent !important;
}
/* 红黄绿点：亮色保留拟物识别；暗色转灰点维持单色系 */
html.io-black-mode .sites-preview .io-sf-dots span:nth-child(1){ background: var(--bc-color-palette-legacy-slate-600) !important; }
html.io-black-mode .sites-preview .io-sf-dots span:nth-child(2){ background: var(--bc-color-palette-legacy-slate-650) !important; }
html.io-black-mode .sites-preview .io-sf-dots span:nth-child(3){ background: var(--bc-color-palette-legacy-slate-500) !important; }
/* 顶部按钮：发丝线方形，去渐变与投影 */
html .sites-preview .io-sf-ico{
  border-radius: 6px !important;
  background: var(--bc-canvas) !important;
  border: 1px solid var(--bc-hairline) !important;
  box-shadow: none !important;
  color: var(--bc-body) !important;
}
html .sites-preview .io-sf-ico:hover,
html .sites-preview .io-sf-ico:active{
  background: var(--bc-canvas) !important;
  border-color: var(--bc-body) !important;
  box-shadow: none !important;
  transform: none !important;
}
html.io-black-mode .sites-preview .io-sf-ico{
  background: var(--bc-color-palette-dark-raised) !important;
  border-color: transparent !important;
  color: var(--bc-body-on-dark) !important;
  box-shadow: none !important;
}
html.io-black-mode .sites-preview .io-sf-ico:hover,
html.io-black-mode .sites-preview .io-sf-ico:active{
  background: var(--bc-color-palette-dark-raised) !important;
  border-color: var(--bc-body-on-dark) !important;
  box-shadow: none !important;
}
/* 地址栏胶囊：发丝线矩形 */
html .sites-preview .io-sf-addr{
  background: var(--bc-canvas) !important;
  border: 1px solid var(--bc-hairline) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}
html.io-black-mode .sites-preview .io-sf-addr{
  background: var(--bc-color-palette-dark-raised) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
/* 窗口内容区：去掉玻璃内描边 */
html .sites-preview .io-mac-body:before{
  box-shadow: none !important;
}

/* 圆角裁剪加固：窗口/顶栏/内容区三层锁定，防止截图溢出圆角 */
html .sites-preview .io-sf-top{
  border-radius: 8px 8px 0 0 !important;
  overflow: hidden !important;
}
html .sites-preview .io-mac-body{
  border-radius: 0 0 8px 8px !important;
  overflow: hidden !important;
}
html .sites-preview .io-mac-body img{
  border-radius: 0 0 8px 8px !important;
}

/* =========================================================
 * 11) 呼吸感增强（正文与卡片容器的间距）
 *     只动容器内边距与面板间距，不改页面宽度
 *     - 内容面板 card-body：Bootstrap 默认 20px → 32px
 *       （对齐暗色头带 --bc-space-3xl，亮暗同规）
 *     - 内容面板与后续面板间距：统一 24px（--bc-space-2xl）
 *     - 移动端（<992px）回落 Bootstrap 默认 20px
 * ======================================================= */

/* 11.1 内容面板内边距：20 → 32px */
.single-sites .panel.site-content .card-body{
  padding: var(--bc-space-3xl) !important;
}

/* 11.2 内容面板与后续面板纵向间距：24px */
.single-sites .content-layout > .panel.site-content{
  margin-bottom: var(--bc-space-2xl);
}

/* 11.3 移动端回落：内容面板恢复 20px，避免窄屏挤压正文 */
@media (max-width: 991.98px){
  .single-sites .panel.site-content .card-body{
    padding: 20px !important;
  }
}

/* Laptop mockup: keep the live site screenshot inside the clean transparent frame. */
.single-sites .io-sites-header-wrap .sites-preview .preview-body,
.single-sites .io-sites-header-wrap .sites-preview .io-mac-window{
  width: 100%;
  aspect-ratio: 1610 / 977;
  padding: 0 !important;
  overflow: visible !important;
  position: relative;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.single-sites .io-sites-header-wrap .sites-preview .io-sf-top{
  display: none !important;
}

.single-sites .io-sites-header-wrap .sites-preview .io-mac-body{
  position: absolute !important;
  z-index: 1;
  left: 9.5%;
  top: 5.8%;
  width: 81.1%;
  height: 84%;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.single-sites .io-sites-header-wrap .sites-preview .io-mac-window{
  isolation: isolate;
}

.single-sites .io-sites-header-wrap .sites-preview .io-mac-body::before{
  content: none !important;
  display: none !important;
}

.single-sites .io-sites-header-wrap .sites-preview .io-mac-body > img{
  display: block;
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain;
  object-position: center;
  background: var(--bc-canvas-dark);
  border-radius: 0 !important;
}

.single-sites .io-sites-header-wrap .sites-preview .io-mac-window::after{
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  background: url("../images/beacon-laptop-frame-clean.png") center / 100% 100% no-repeat;
}

.single-sites .io-sites-header-wrap .sites-preview .preview-btn{
  z-index: 3;
}

@media (max-width: 575.98px){
  .single-sites .io-sites-header-wrap .sites-preview{
    width: 100%;
    max-width: 456px;
    margin-inline: auto !important;
  }
}