@charset "UTF-8";
/*
 * OneNav 子主题 - 自定义样式
 *
 * 加载顺序在父主题 main.css 之后，靠层叠 + 特异性覆盖。
 * 本文件只做「父主题缺失的能力补齐」，不做视觉重构。
 *
 * 每一节都标注了对应的实测证据，改动前先看证据还成不成立。
 */

/* =========================================================================
 * 1. 键盘焦点可见性
 *
 * 实测（线上首页）：抽查 6 个主要可聚焦元素
 *   .sites-body / .search-key / .togo /
 *   .switch-dark-mode / .aside-item a / .search-submit-btn
 * 结果 6/6 全部「无可见焦点环」—— 键盘用户完全看不到自己在哪。
 *
 * 父主题有 2 处 outline:none（main.css:7441 / 9511），
 * 且全库 :focus-visible 出现 0 次。
 *
 * 这里统一补一套 :focus-visible 焦点环。
 * 用 :focus-visible 而非 :focus，鼠标点击不会出现焦点环，
 * 只有键盘 Tab 导航才显示，不影响现有视觉。
 * ====================================================================== */

.io-sub-enhanced a:focus-visible,
.io-sub-enhanced button:focus-visible,
.io-sub-enhanced input:focus-visible,
.io-sub-enhanced select:focus-visible,
.io-sub-enhanced textarea:focus-visible,
.io-sub-enhanced [tabindex]:focus-visible,
.io-sub-enhanced [role="button"]:focus-visible {
  outline: 2px solid var(--focus-color, var(--theme-color));
  outline-offset: 2px;
  border-radius: var(--theme-border-radius-xs, 4px);
}

/* 卡片本体：外扩焦点环容易被相邻卡片裁掉，改用内嵌描边 */
.io-sub-enhanced .sites-body:focus-visible,
.io-sub-enhanced .posts-item a:focus-visible {
  outline: 2px solid var(--focus-color, var(--theme-color));
  outline-offset: -2px;
}

/* 深色背景卡片（big 模式）上的焦点环需要更高对比 */
.io-sub-enhanced .big-posts .sites-body:focus-visible,
.io-sub-enhanced .big-meta a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -3px;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.45);
}

/* 搜索框获得焦点时给个明确的边框反馈 */
.io-sub-enhanced .search-key:focus-visible {
  outline: 2px solid var(--focus-color, var(--theme-color));
  outline-offset: -2px;
}

/* 跳转到主内容：键盘用户可以跳过 269 张卡片的导航区 */
.io-sub-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  padding: 10px 18px;
  background: var(--main-bg-color, #fff);
  color: var(--theme-color);
  border-radius: var(--theme-border-radius-sm, 6px);
  box-shadow: 0 4px 16px var(--main-shadow, rgba(0, 0, 0, 0.15));
  font-size: 14px;
}
.io-sub-skip-link:focus {
  left: 12px;
  top: 12px;
}


/* =========================================================================
 * 2. 触控目标尺寸
 *
 * 实测：.togo（卡片右侧「直达」按钮）渲染尺寸 16×24px。
 * WCAG 2.5.8 要求最小 24×24，2.5.5（AAA）建议 44×44。
 * 移动端 16px 宽的点击区几乎必然误触。
 *
 * 用伪元素扩大热区，不改变视觉尺寸和布局。
 * ====================================================================== */

@media (pointer: coarse) {
  .io-sub-enhanced .togo,
  .io-sub-enhanced .icon-btn,
  .io-sub-enhanced .btn-tools {
    position: relative;
  }

  .io-sub-enhanced .togo::after,
  .io-sub-enhanced .icon-btn::after,
  .io-sub-enhanced .btn-tools::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
    /* 只扩热区，不显示任何东西 */
  }

  /* tabbar 每一项保证 48px 高 */
  .io-sub-enhanced .tabbar-item {
    min-height: 48px;
  }
}


/* =========================================================================
 * 3. 动效降级（prefers-reduced-motion）
 *
 * 实测：父主题自身 CSS 有 196 处 transition + 29 处 animation，
 * 但 prefers-reduced-motion 规则数为 0（页面上检测到的 18 条来自 Bootstrap，
 * 覆盖不到主题自己的动画）。
 *
 * 前庭功能障碍用户开启「减弱动态效果」后，本主题依然全量播放动画。
 * ====================================================================== */

@media (prefers-reduced-motion: reduce) {
  .io-sub-enhanced *,
  .io-sub-enhanced *::before,
  .io-sub-enhanced *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* 轮播自动播放对这类用户尤其困扰，直接停掉动画 */
  .io-sub-enhanced .swiper-wrapper {
    transition-duration: 0.001ms !important;
  }

  /* 加载动画保留一点点，否则用户不知道在加载 */
  .io-sub-enhanced .icon-spin {
    animation-duration: 1.2s !important;
    animation-iteration-count: infinite !important;
  }
}


/* =========================================================================
 * 4. 触屏 hover 粘滞
 *
 * 实测：父主题 @media (hover: hover) 出现 0 次。
 * 触屏上点过的卡片会保持 hover 态，直到点别处才消失。
 *
 * 把 hover 效果限定在真正支持悬停的设备上。
 * ====================================================================== */

@media (hover: none) {
  .io-sub-enhanced .posts-item:hover,
  .io-sub-enhanced .sites-item:hover {
    transform: none;
    box-shadow: none;
  }
}


/* =========================================================================
 * 5. 提示条（showAlert）无障碍
 *
 * 实测：页面 aria-live / role=alert 区域数量为 0，
 * 屏幕阅读器读不到任何操作反馈（复制成功、点赞、提交结果等）。
 *
 * sub-app.js 会给 #alert_placeholder 加 role/aria-live，
 * 这里只保证它在视觉上不会挡住焦点元素。
 * ====================================================================== */

.io-sub-enhanced #alert_placeholder {
  pointer-events: none;
}
.io-sub-enhanced #alert_placeholder .alert-body {
  pointer-events: auto;
}


/* =========================================================================
 * 6. 图片宽高比占位
 *
 * 实测：732 张图片中 730 张没有 aspect-ratio；
 * 父主题输出的是 width="auto" height="auto"（非法值，浏览器忽略）。
 *
 * 当前实测 CLS 仅 0.0265（良好），所以这里只做温和加固，
 * 给懒加载占位图一个稳定比例，避免弱网下抖动。
 * ====================================================================== */

.io-sub-enhanced .sites-icon,
.io-sub-enhanced .item-image > img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.io-sub-enhanced .big-bg-cover {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}


/* =========================================================================
 * 7. 搜索联想下拉：加载态与空态
 *
 * 父主题在请求期间保持旧内容、无结果时直接收起，
 * 用户不知道「在加载」还是「没结果」。
 * sub-app.js 会插入这两个状态节点。
 * ====================================================================== */

.io-sub-tips-state {
  padding: 14px 16px;
  color: var(--muted-color, #93959a);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.io-sub-tips-state .iconfont {
  font-size: 14px;
}


/* =========================================================================
 * 8. 网址卡片改版（style-sites-big）
 *
 * 目标形态：
 *   ┌─────────────────────┐
 *   │   首图 16:9 圆角     │
 *   ├─────────────────────┤
 *   │ [32] 名称（最多2行）  │
 *   │ 摘要最多两行，超出截断 │
 *   └─────────────────────┘
 *
 * 父主题原设计（main.css:6245-6360）是「120% 竖图 + 悬停上滑毛玻璃面板」，
 * 且 .big-meta 带 will-change:backdrop-filter —— 229 张卡就是 229 个
 * 独立 GPU 合成层，开销很大。新样式不需要毛玻璃，一并去掉。
 *
 * ── 两个必须知道的坑（v1.3.0 踩过）──────────────────────────────
 *
 * 坑 1：.item-body 的 class 是 "item-body overflow-hidden d-flex flex-column flex-fill"
 *       Bootstrap 的 .d-flex 是 `display:flex !important`，
 *       所以这里的 display:contents 必须加 !important 才能生效，
 *       否则 h3 和摘要不会成为 grid 项，布局会散掉。
 *
 * 坑 2：h3 的 class 是 "item-title line1" —— **标题自己也带 line1**。
 *       所以摘要不能用 .line1 选，必须用 .line1:not(.item-title)，
 *       否则标题会被当成摘要塞进 sum 区域。
 *
 * 坑 3：父主题 main.css 里 `.line1 { overflow:hidden; text-overflow:ellipsis;
 *       white-space:nowrap }` —— 这是个单行截断工具类，而标题和摘要都带着它。
 *       nowrap 会让 -webkit-line-clamp 永远只出一行，所以必须
 *       `white-space: normal !important` 解除。
 *       同时父主题把 .item-title 的 display 设成了 flow-root，
 *       所以 `display:-webkit-box` 也要 !important。
 * ────────────────────────────────────────────────────────────
 * ====================================================================== */

/* --- 尺寸变量，改这里就能整体调 --- */
.io-sub-enhanced .style-sites-big {
  --card-logo-size: 32px;      /* 站点 logo 边长 */
  --card-title-lines: 2;       /* 标题最多几行 */
  --card-summary-lines: 2;     /* 摘要最多几行 */
  --card-title-size: 16px;
  --card-summary-size: 13px;
}

/* --- 卡片外壳 --- */
.io-sub-enhanced .style-sites-big.d-flex {
  display: flex !important;
  flex-direction: column;
  padding: 12px;
  background: var(--main-bg-color);
  border-radius: var(--theme-border-radius-xl);
  overflow: hidden;
}

.io-sub-enhanced .style-sites-big:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -12px var(--main-shadow);
}

/* --- 首图：16:9，静态在顶部 --- */
.io-sub-enhanced .style-sites-big .big-bg {
  position: relative;
  padding-top: 56.25%;              /* 覆盖父主题的 120% */
  border-radius: var(--theme-border-radius-md);
  overflow: hidden;
  background: var(--muted-bg-color);
  flex: none;
}

.io-sub-enhanced .style-sites-big .big-bg .big-img {
  position: absolute;
  inset: 0;
}

.io-sub-enhanced .style-sites-big .big-bg .big-bg-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* 倒影图已在 PHP 层删除，这里兜底 */
.io-sub-enhanced .style-sites-big .bg-reflect {
  display: none !important;
}

/* --- 信息区：从绝对定位浮层改成正常文档流 --- */
.io-sub-enhanced .style-sites-big .big-meta {
  position: static;
  width: auto;
  margin: 0;
  padding: 12px 2px 2px;
  bottom: auto;
  background: none;
  color: var(--main-color);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  will-change: auto;                /* 关键：撤掉 229 个合成层 */
  transition: none;
}

.io-sub-enhanced .style-sites-big:hover .big-meta {
  bottom: auto;
}

/* --- 布局：第一行 logo + 名称，第二行摘要独占 --- */
.io-sub-enhanced .style-sites-big .sites-body {
  display: grid;
  grid-template-columns: var(--card-logo-size) minmax(0, 1fr);
  grid-template-areas:
    "logo title"
    "sum  sum";
  align-items: center;
  column-gap: 10px;
  row-gap: 0;
}

.io-sub-enhanced .style-sites-big .item-header {
  grid-area: logo;
  width: var(--card-logo-size);
  height: var(--card-logo-size);
}

/* 见上方「坑 1」：Bootstrap .d-flex 是 !important，这里必须也用 !important */
.io-sub-enhanced .style-sites-big .item-body {
  display: contents !important;
}

/* --- 名称：最多 2 行，超出截断 --- */
.io-sub-enhanced .style-sites-big .item-title,
.io-sub-enhanced .posts-item.style-sites-big .item-title {
  grid-area: title;
  margin: 0;
  font-size: var(--card-title-size);
  font-weight: 600;
  line-height: 1.4;
  color: var(--main-color);
  /* 见下方「坑 3」：必须 !important，父主题把 .item-title 设成了 display:flow-root */
  display: -webkit-box !important;
  -webkit-line-clamp: var(--card-title-lines);
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* 见下方「坑 3」：.line1 带 white-space:nowrap，不解除就永远只有一行 */
  white-space: normal !important;
  word-break: break-word;
}

.io-sub-enhanced .style-sites-big .item-title b {
  font-weight: 600;
}

/* --- 摘要：独占一行，最多 2 行，超出截断 ---
 * 见上方「坑 2」：必须排除 .item-title，因为 h3 自己也带 line1 */
.io-sub-enhanced .style-sites-big .sites-body .line1:not(.item-title) {
  grid-area: sum;
  margin-top: 10px;
  display: -webkit-box !important;
  -webkit-line-clamp: var(--card-summary-lines);
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal !important;
  font-size: var(--card-summary-size);
  line-height: 1.6;
  color: var(--muted-color);
  word-break: break-word;
  /* 固定占位，避免摘要长短不一导致卡片高度参差 */
  min-height: calc(var(--card-summary-size) * 1.6 * var(--card-summary-lines));
}

/* 标题也占满 2 行的高度，让每张卡的首图起点对齐 */
.io-sub-enhanced .style-sites-big .item-title {
  min-height: calc(var(--card-title-size) * 1.4 * var(--card-title-lines));
}

/* --- logo 方块 32×32 --- */
.io-sub-enhanced .style-sites-big .item-media,
.io-sub-enhanced .posts-item.style-sites-big .item-image {
  width: var(--card-logo-size);
  height: var(--card-logo-size);
  min-width: var(--card-logo-size);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: none;                 /* 去掉父主题的白色描边 */
}

.io-sub-enhanced .style-sites-big .sites-icon,
.io-sub-enhanced .posts-item.style-sites-big .fill-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* logo 背后的模糊底衬不再需要 */
.io-sub-enhanced .style-sites-big .blur-img-bg {
  display: none;
}

/* --- 精简：只留 首图 / Logo / 名称 / 摘要 --- */
.io-sub-enhanced .style-sites-big .meta-ico,
.io-sub-enhanced .style-sites-big .item-tags,
.io-sub-enhanced .style-sites-big .sites-tags,
.io-sub-enhanced .style-sites-big .big-togo {
  display: none;
}

/* --- 移动端 --- */
@media (max-width: 767.98px) {
  .io-sub-enhanced .style-sites-big {
    --card-title-size: 15px;
    --card-summary-size: 12px;
    --card-logo-size: 28px;
  }
  .io-sub-enhanced .style-sites-big.d-flex {
    padding: 10px;
  }
}