/*
 * Header 内联样式抽离
 * 包含：夜间模式背景层、悬浮圆角导航栏、各种修复样式
 */

/* ===== 夜间模式背景层：独立固定层，避免 body 上的 Chrome 渲染 bug ===== */
#dark-bg-layer {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    background:
        radial-gradient(ellipse 70% 55% at 15% 5%,  rgba(var(--color-primary-rgb), 0.14) 0%, transparent 55%),
        radial-gradient(ellipse 60% 50% at 85% 95%, rgba(var(--color-primary-rgb), 0.10) 0%, transparent 55%),
        radial-gradient(ellipse 45% 25% at 50% 100%, rgba(168, 69, 31, 0.08) 0%, transparent 60%),
        #0F1117;
}
html[data-theme="dark"] #dark-bg-layer {
    opacity: 1;
}
#dark-bg-layer::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(circle at 25% 25%, rgba(255,255,255,.025) 1px, transparent 1px);
    background-repeat: repeat;
    background-size: 4px 4px;
}
#dark-bg-layer::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 500px;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 0%, rgba(var(--color-primary-rgb), 0.06) 0%, transparent 65%);
}

/* ===== 悬浮式圆角半透明菜单栏 — 统一真相源（v2 架构） ===== */

html body header#site-header.site-header {
    position: sticky;
    top: 6px;
    z-index: 36;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    padding: 0 12px !important;
    margin-top: 6px !important;
    overflow: visible !important;
    --header-fg-active: var(--header-fg);
    --header-logo-filter-active: var(--header-logo-filter);
}
html body header#site-header.site-header > .container {
    position: relative;
    display: block;
    width: 100%;
    max-width: var(--page-width, 1450px);
    margin: 0 auto;
    box-sizing: border-box;
    padding: 5px 20px !important;
    border-radius: var(--hq-header-radius) !important;
    background: var(--hq-header-bg) !important;
    backdrop-filter: blur(var(--hq-header-blur)) saturate(var(--hq-header-saturate)) !important;
    -webkit-backdrop-filter: blur(var(--hq-header-blur)) saturate(var(--hq-header-saturate)) !important;
    border: 1px solid var(--hq-header-border) !important;
    box-shadow: var(--hq-header-shadow) !important;
    overflow: visible !important;
    transition: var(--header-transition) !important;
}
html body header#site-header.site-header .header-content {
    background: transparent !important;
    border-radius: 0 !important;
}

html body header#site-header.site-header a,
html body header#site-header.site-header .logo-text,
html body header#site-header.site-header .logo-icon,
html body header#site-header.site-header .nav-link,
html body header#site-header.site-header .hq-nav-menu > .nav-item,
html body header#site-header.site-header .new-mobile-menu-toggle,
html body header#site-header.site-header .hq-mobile-menu-toggle,
html body header#site-header.site-header .dark-mode-toggle i,
html body header#site-header.site-header .huoqiao-user-avatar,
html body header#site-header.site-header .hq-header-user-toggle,
html body header#site-header.site-header .hq-header-user-toggle i,
html body header#site-header.site-header .hq-panel-toggle,
html body header#site-header.site-header .hq-panel-toggle i,
html body header#site-header.site-header .login-button,
html body header#site-header.site-header .search-icon-button {
    color: var(--header-fg-active) !important;
    transition: color 0.3s ease !important;
}
html body header#site-header.site-header .hq-mobile-menu-toggle svg,
html body header#site-header.site-header .new-mobile-menu-toggle svg {
    stroke: currentColor !important;
}
html body header#site-header.site-header .logo-light,
html body header#site-header.site-header .search-icon-button img {
    filter: var(--header-logo-filter-active) !important;
    transition: filter 0.3s ease !important;
}

html body.body-scroll header#site-header.site-header > .container {
    background: var(--hq-header-bg-scroll) !important;
    box-shadow: var(--hq-header-shadow-scroll) !important;
}

/* ===== 沉浸式页面 ===== */
html body header#site-header.site-header.immersive {
    position: fixed !important;
    top: 10px !important;
    left: 0;
    right: 0;
    margin-top: 0 !important;
    --header-fg-active: var(--header-fg-invert);
    --header-logo-filter-active: var(--header-logo-filter-invert);
}

/* 全站沉浸式：所有页面未滚动时 header 悬浮透明 */
html body:not(.body-scroll) header#site-header.site-header {
    position: fixed !important;
    top: 10px !important;
    left: 0;
    right: 0;
    margin-top: 0 !important;
}
html body:not(.body-scroll) header#site-header.site-header > .container {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* hero 页未滚动：前景反白 */
html body.has-premium-hero:not(.body-scroll) header#site-header.site-header,
html body.hq-image-detail-page:not(.body-scroll) header#site-header.site-header,
html body.has-fullscreen-slider:not(.body-scroll) header#site-header.site-header,
html body.single.has-article-bg:not(.body-scroll) header#site-header.site-header {
    --header-fg-active: var(--header-fg-invert);
    --header-logo-filter-active: var(--header-logo-filter-invert);
}

/* 非 hero 页未滚动：#main 顶部补偿 */
html body:not(.body-scroll):not(.has-fullscreen-slider):not(.has-premium-hero):not(.hq-image-detail-page):not(.hq-video-detail-page):not(.single.has-article-bg) #main {
    padding-top: 78px !important;
}

/* 滚动后全站：header 保持 fixed，容器复用 body-scroll 玻璃态 */
html body.body-scroll header#site-header.site-header {
    position: fixed !important;
    top: 10px !important;
    left: 0;
    right: 0;
    margin-top: 0 !important;
    z-index: 36;
}

/* light-slide/dark-slide：明暗感知覆盖沉浸式反白 */
html body.has-fullscreen-slider:not(.body-scroll) header#site_header.site-header.light-slide,
html body.single.has-article-bg:not(.body-scroll) header#site-header.site-header.light-slide {
    --header-fg-active: #1a1a2e;
    --header-logo-filter-active: none;
}
html body.has-fullscreen-slider:not(.body-scroll) header#site-header.site-header.dark-slide,
html body.single.has-article-bg:not(.body-scroll) header#site-header.site-header.dark-slide {
    --header-fg-active: #e8eaed;
    --header-logo-filter-active: brightness(0) invert(0.85);
}
html[data-theme="dark"] body.single.has-article-bg:not(.body-scroll) header#site-header.site-header.light-slide,
html[data-theme="dark"] body.single.has-article-bg:not(.body-scroll) header#site-header.site-header.dark-slide {
    --header-fg-active: #e8eaed;
    --header-logo-filter-active: brightness(0) invert(0.85);
}

/* 移动端：紧凑胶囊 */
@media (max-width: 768px) {
    html body header#site-header.site-header {
        padding: 0 8px !important;
        margin-top: 5px !important;
        top: 5px;
    }
    html body header#site-header.site-header > .container {
        padding: 4px 12px !important;
        border-radius: 26px !important;
    }
}
@media (max-width: 991.98px) {
    html body header#site-header.site-header .hq-user-menu {
        display: none !important;
    }
}

/* ===== Mega Menu 修复：绝对定位子元素导致 scrollHeight 膨胀 ===== */
.hq-nav-menu > .nav-item.mega-menu-parent {
    overflow: hidden;
}
.hq-nav-menu > .nav-item.mega-menu-parent:hover,
.hq-nav-menu > .nav-item.mega-menu-parent.mega-open {
    overflow: visible;
}

/* ===== 骨架屏修复：加载完成后仍占据空间导致底部空白 ===== */
.hqw-recommended-articles-grid.loaded .skeleton-placeholder,
.hqw-article-list-grid.loaded .skeleton-placeholder,
.hqw-news-style-article-grid.loaded .skeleton-placeholder,
.hqw-image-list.loaded .skeleton-placeholder,
.hqw-category-showcase.loaded .skeleton-placeholder,
.hqw-featured-post-section.loaded .skeleton-placeholder,
.hqw-latest-posts-section.loaded .skeleton-placeholder,
#primary .loaded .skeleton-placeholder {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transform: translateY(-10px) !important;
}

/* ===== UC浏览器网盘流畅播悬浮窗屏蔽 ===== */
[class*="uccloud"],
[class*="uc-cloud"],
[id*="uccloud"],
[id*="uc-cloud"],
[class*="pan-player"],
[class*="disk-player"],
.uc-extension-panel,
.uc-toolbar,
#uc-extension-mask,
#uc-extension-panel {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}