/**
 * ========================================================================
 * WOWOHCOOL 站点样式表
 * 
 * 文件说明：
 * - 本文件包含站点的所有自定义样式
 * - Tailwind CSS 处理大部分布局样式，本文件仅包含自定义组件样式
 * - 包含：字体优化、徽章样式、导航链接、下拉菜单、动画效果等
 * 
 * 依赖：
 * - Tailwind CSS (CDN)
 * - Font Awesome 6.5.1 图标库
 * - Google Fonts Inter 字体
 * ========================================================================
 */


/* ========================================================================
   1. 字体优化 - Font Smoothing
   解决 Safari 字体渲染不一致的问题
   ======================================================================== */

/* 强制使用 900 字重并启用字体平滑 */
.font-black {
    font-weight: 900 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Safari 特定字体加粗处理 */
@media not all and (min-resolution:.001dpcm) { 
    @supports (-webkit-appearance:none) {
        .font-black {
            text-shadow: 0 0 0.1px rgba(255,255,255,0.1);
        }
    }
}

/* 全局字体平滑与基础字体设置 */
* { 
    -webkit-font-smoothing: antialiased; 
    font-family: 'Inter', sans-serif; 
}


/* ========================================================================
   2. 徽章样式 - Badge Capsule
   页面顶部的蓝色胶囊徽章（带脉冲动画）
   ======================================================================== */

/* 浅色背景的徽章样式 */
.bg-slate-50 .badge-capsule,
.bg-white .badge-capsule {
    border: 1.5px solid rgba(0, 0, 0, 0.15);
    background: rgba(0, 0, 0, 0.03);
    color: #0A192F;
}

/* 深色背景的徽章样式（默认） */
.badge-capsule {
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 107, 0, 0.15);
    color: #FFFFFF;
    padding: 8px 24px 8px 40px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.15em;
    position: relative;
    display: inline-flex;
    align-items: center;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    white-space: nowrap;
}

@media (min-width: 768px) {
    .badge-capsule {
        font-size: 11px;
    }
}

/* 浅色背景时橙色圆点 */
.bg-slate-50 .badge-capsule::before,
.bg-white .badge-capsule::before {
    background-color: #FF6B00;
    box-shadow: 0 0 10px #FF6B00;
}

/* 深色背景时橙色圆点 */
.badge-capsule::before {
    content: ''; 
    position: absolute; 
    left: 18px; 
    width: 10px; 
    height: 10px;
    background-color: #FF6B00; 
    border-radius: 50%; 
    box-shadow: 0 0 12px #FF6B00, 0 0 20px rgba(255, 107, 0, 0.5);
    animation: pulse 2s infinite;
}

/* 脉冲动画 keyframes */
@keyframes pulse { 
    0%, 100% { opacity: 1; transform: scale(1); } 
    50% { opacity: 0.4; transform: scale(1.1); } 
}


/* ========================================================================
   3. 导航链接样式 - Navigation Links
   桌面端导航菜单的链接样式与激活状态
   ======================================================================== */

/* 导航链接基础样式 */
.nav-link { 
    position: relative; 
}

/* 激活状态的下划线 */
.nav-link.active::after {
    content: ''; 
    position: absolute; 
    bottom: -4px; 
    left: 0; 
    width: 100%; 
    height: 2px;
    background-color: #003366;
}


/* ========================================================================
   4. 高亮线条样式 - Highlight Line
   文字下方的渐变高亮效果
   ======================================================================== */

.highlight-line {
    display: inline-block;
    position: relative;
    padding-bottom: 2px;
}

.highlight-line::after {
    content: ''; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 2px;
    background: linear-gradient(90deg, #FF6600 0%, transparent 100%);
}


/* ========================================================================
   5. 滚动 Reveal 动画 - Scroll Reveal Animation
   元素进入视口时的渐显动画效果
   ======================================================================== */

.reveal { 
    opacity: 0; 
    transform: translateY(25px); 
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; 
    will-change: opacity, transform; 
}

.reveal.active { 
    opacity: 1; 
    transform: translateY(0); 
}


/* ========================================================================
   6. 下拉菜单样式 - Dropdown Menu
   桌面端导航的下拉子菜单
   ======================================================================== */

.dropdown-content {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.group:hover .dropdown-content { 
    opacity: 1; 
    visibility: visible; 
    transform: translateY(0); 
}


/* ========================================================================
   7. 返回顶部按钮 - Back to Top Button
   页面右下角的返回顶部按钮
   ======================================================================== */

#backToTop {
    transition: transform 0.25s ease, opacity 0.25s ease;
    transform: translateY(10px);
    opacity: 0;
    pointer-events: none;
}

/* 显示状态 */
#backToTop.show {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}


/* ========================================================================
   8. 无障碍访问样式 - Accessibility Styles
   焦点状态与屏幕阅读器辅助样式
   ======================================================================== */

/* 全局焦点样式 */
:focus {
    outline: 3px solid rgba(255,102,0,0.14);
    outline-offset: 2px;
}

/* 屏幕阅读器专用 - 仅视觉隐藏 */
.sr-only {
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}


/* ========================================================================
   9. 备用样式 - Fallback Styles
   保留原有的 Tailwind 兼容样式
   ======================================================================== */

/* 此区域保留其他原始 CSS 样式（Tailwind 类处理大部分布局） */
