/*
 * 花卷云主题 · 站点级修正样式
 *
 * 位置：必须在两套 CSS（主站 style.css / 博客 bootstrap.min.css + blog.css + grid.css）**之后**引入，
 *       见 app/index/view/huajuanyun-blog/include/links.html 与 links_blog.html。
 * 用途：只放「迁过来的老站 CSS 不修就没法用」的补丁，不重写老站样式；
 *       每条都写清原因，避免以后被当成冗余样式删掉。
 * 约束：CSS 内 url() 一律写与 css 同层的相对路径（禁止 /assets/... 根绝对路径，
 *       否则 OSS 上 404，见 app/common/view/css_path_huajuanyun_test.go）。
 */

/*
 * 1. 鼠标点击留焦：去掉导航链接的黑色聚焦圈
 *
 * blog.css 与本主题引入的 bootstrap.min.css 都有
 *     a:focus { outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; }
 * 鼠标点一下导航（文章列表页/详情页顶部导航）就会留一个黑色圆圈框，视觉上像选中了。
 *
 * 用 :not(:focus-visible) 只吞掉「鼠标点击」产生的焦点：
 * 键盘 Tab 切到链接时 :focus-visible 命中，仍保留可见焦点框（可访问性不牺牲）。
 */
a:focus:not(:focus-visible) {
    outline: none;
}

/*
 * 2. 点击后文字变黑：导航链接 focus 时不要套用通用 a:focus 配色
 *
 * style.css 里这几组规则的权重相同（都是 0-1-1，「元素 + 一个类或伪类」），
 * 而通用链接规则写在很后面：
 *   .nav-main-header a  { color: rgba(255, 255, 255, 0.6) }  ← 1087 行，主站顶栏（白字）
 *   .nav-black a        { color: rgba(69, 88, 140, 0.6) }    ← 1109 行，主站内页顶栏（灰蓝字）
 *   a:focus, a:hover    { color: #3c4551; text-decoration: underline } ← 2317 行，通用链接
 * 权重相同、通用规则在后 → 「鼠标点过的导航项」被压成近黑 #3c4551（并加上下划线）。
 *
 * 只在当前页面**停留**时才看得出来：文章栏目「花卷云博客」是 target=_blank，
 * 点开新标签页、关掉回来时原页面的链接仍持有 :focus，文字就一直是黑的
 * （普通链接点了就跳走，新页面里 :focus 自然清空，所以平时看不到）。
 *
 * ⚠️ 两个头部都要写：主站顶栏是 .nav-main-header（内页那层额外带 .nav-black 变成深色字），
 *    内页 .nav-black 是另一套配色；只写一个的话另一套照样变黑。
 *
 * ⚠️ 为什么限定 #switch-hide / #switch-show 且排除 .nav-black：
 *    - 博客页（include/header_blog.html）也用了 .nav-main-header，但那里是纯白实色、
 *      不加载 style.css、不存在 a:focus 变黑的问题，不限定 #switch-* 会把博客顶栏改成半透明白；
 *    - 内页桌面导航的 <ul> 带 .nav-black，配色走下面那组灰蓝规则，
 *      若这里的 :not(.nav-black) 不写，白字规则会因为 #id 权重更高把深色头的颜色盖掉。
 *
 * 口径：
 *   - 普通项恢复成「未悬停」的设计色（顶栏半透明白 / 内页灰蓝），当前栏目（.active）仍是实色；
 *   - 补 :focus:hover，让「悬停在刚点过的项上」仍按 hover 变亮
 *     （否则 .xxx a:focus 会把 .xxx a:hover 的同权重规则盖掉）；
 *   - 颜色规则**不加** :not(:focus-visible) 条件：颜色不承担可访问性语义，
 *     加了反而依赖各浏览器 focus-visible 的启发式判断，鼠标点击在某些场景会被判成「可见焦点」；
 *     键盘焦点的可见框由上面第 1 条负责（那里保留 :focus-visible 的 outline）。
 *   - text-decoration 一并清掉：通用 a:focus 会加下划线，导航项不需要。
 */
#switch-hide .nav-main-header:not(.nav-black) a:focus,
#switch-show .nav-main-header:not(.nav-black) a:focus {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
}

#switch-hide .nav-main-header:not(.nav-black) a.active:focus,
#switch-show .nav-main-header:not(.nav-black) a.active:focus {
    color: #fff;
}

#switch-hide .nav-main-header:not(.nav-black) a:focus:hover,
#switch-show .nav-main-header:not(.nav-black) a:focus:hover {
    color: #fff;
}

.nav-black a:focus {
    color: rgba(69, 88, 140, 0.6);
    text-decoration: none;
}

.nav-black a.active:focus {
    color: #45588c;
}

.nav-black a:focus:hover {
    color: #45588c;
}