/* 全局补充样式：Blazor CSS 隔离与 Bootstrap 工具类都做不到的部分。

   1) 展示端 FocusOnNavigate 会把焦点移到 <h1>（见 Routes.razor Selector="h1"），
      去掉默认焦点环，避免每次导航后标题出现蓝色描边。
   2) 代码块的「复制」按钮（app.js 的 fzHighlight 注入）：
      Prose 组件的隔离样式盖不到广告位 / 评论区里的代码块，
      而这是跨组件统一的交互件，所以放全局。
   其余一律用 Bootstrap 工具类 / BootstrapBlazor 组件或各组件 .razor.css 隔离样式。 */
h1:focus {
    outline: none;
}

/* fzHighlight 在 <pre> 外包裹的定位容器（渐进增强，无 JS 时不存在） */
.fz-code-wrap {
    position: relative;
}

.fz-code-copy {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .16rem .55rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 7px;
    background: color-mix(in srgb, var(--bs-body-bg) 86%, transparent);
    color: var(--bs-secondary-color);
    font-size: .72rem;
    line-height: 1.6;
    opacity: 0;
    cursor: pointer;
    transition: opacity .15s ease, color .15s ease, border-color .15s ease;
}

.fz-code-wrap:hover .fz-code-copy,
.fz-code-copy:focus-visible {
    opacity: 1;
}

.fz-code-copy:hover {
    color: var(--bs-primary);
    border-color: color-mix(in srgb, var(--bs-primary) 45%, var(--bs-border-color));
}

/* 触屏设备没有 hover，常显 */
@media (hover: none) {
    .fz-code-copy {
        opacity: 1;
    }
}

/* ============================================================
   标签徽章（前台侧边栏 / 标签云）
   颜色来自后台「标签管理」的取色器，以 --fz-tag-color 注入
   （见 Components/Shared/TagBadge.cs，非法色值不会输出该变量）。
   color-mix 让文字色朝正文色靠拢：亮色/暗色主题下都保证可读，
   不必为深色标签单独写一套。
   ============================================================ */
.tag-badge {
    --fz-tag-fill: var(--fz-tag-color, #6b7280);
    color: color-mix(in srgb, var(--fz-tag-fill) 78%, var(--bs-body-color));
    background: color-mix(in srgb, var(--fz-tag-fill) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--fz-tag-fill) 32%, transparent);
    font-weight: 600;
    transition: background .15s ease, border-color .15s ease;
}

.tag-badge:hover,
.tag-badge:focus-visible {
    color: color-mix(in srgb, var(--fz-tag-fill) 85%, var(--bs-body-color));
    background: color-mix(in srgb, var(--fz-tag-fill) 22%, transparent);
    border-color: color-mix(in srgb, var(--fz-tag-fill) 50%, transparent);
}

/* 暗色下把文字往白色拉：深色标签（#2f7d31 这类）直接用原色对比度不足 */
[data-bs-theme="dark"] .tag-badge {
    color: color-mix(in srgb, var(--fz-tag-fill) 52%, #fff);
    background: color-mix(in srgb, var(--fz-tag-fill) 18%, transparent);
}

/* ============================================================
   浮动「返回顶部」（BootstrapBlazor GoTop 组件）
   BB 自带的 .layout-gotop 是页脚内联样式（20px 小圆点），这里改成右下角浮动按钮。
   选择器带 .fz-gotop-wrap 前缀，避免影响后台 Layout 内部的 GoTop。
   ============================================================ */
.fz-gotop-wrap {
    /* 定位基准：固定右下角，避让移动端地址栏留下的安全区 */
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1030;
}

.fz-gotop-wrap .layout-gotop {
    --bb-gotop-size: 2.75rem;
    width: var(--bb-gotop-size);
    height: var(--bb-gotop-size);
    margin: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--bs-secondary-color);
    background: var(--bs-body-bg);
    border: 1px solid color-mix(in srgb, var(--bs-body-color) 20%, transparent);
    box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .16);
    backdrop-filter: blur(6px);
    /* 默认隐藏并下移 8px；滚动后由 app.js 加 .is-show 淡入 */
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, background-color .2s ease, color .2s ease;
}

/* 滚动到位后显示。放在 :hover 之前 —— 两者特异性相同（0,3,0），
   靠顺序决定优先级，否则会把悬停的上浮效果盖掉。 */
.fz-gotop-wrap.is-show .layout-gotop {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.fz-gotop-wrap .layout-gotop:hover,
.fz-gotop-wrap .layout-gotop:focus-visible {
    color: var(--bs-primary);
    background: var(--bs-body-bg);
    border-color: color-mix(in srgb, var(--bs-primary) 45%, var(--bs-border-color));
}

.fz-gotop-wrap.is-show .layout-gotop:hover,
.fz-gotop-wrap.is-show .layout-gotop:focus-visible {
    transform: translateY(-2px);
}

/* 脚本被禁用时不能让按钮永久隐形：用 scripting 媒体特性判断。
   **不要**改成「html 上有没有某个类」——Blazor 增强导航（点导航链接走 SPA 式切换）
   会用服务端返回的 <html> 属性覆盖 documentElement，脚本加的类会被抹掉，
   兜底规则反而生效，按钮就变成常显了。
   旧浏览器不认 scripting 特性时整段忽略，等同 JS 正常时的表现（可接受降级）。 */
@media (scripting: none) {
    .fz-gotop-wrap .layout-gotop {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }
}

/* ============================================================
   页脚：友情链接
   ============================================================ */
.footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem .9rem;
    padding-bottom: .25rem;
}

.footer-links-title {
    font-size: .8rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.footer-links a {
    color: var(--bs-secondary-color);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.footer-links a:hover,
.footer-links a:focus-visible {
    color: var(--bs-primary);
}

.footer-link-logo {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    object-fit: cover;
    background: var(--bs-tertiary-bg);
}