/**
 * 永久导航修复文件 - 2025-08-27
 * 这些修复必须保持，不要被其他CSS覆盖
 * Created by 思思 🦊
 */

/* ============================================
   0. Logo样式优化
   ============================================ */
.navbar-logo img {
    height: 48px !important;
    width: auto !important;
    max-width: 200px !important;
    object-fit: contain !important;
}

/* 移动端logo尺寸调整 */
@media screen and (max-width: 767px) {
    .navbar-logo img {
        height: 40px !important;
        max-width: 160px !important;
    }
}

/* ============================================
   1. 桌面端导航对齐修复
   ============================================ */
@media screen and (min-width: 1024px) {
    .navbar-start {
        margin-left: 200px !important; /* 从280px改为200px，与文章内容对齐 */
    }
}

/* ============================================
   2. iPad下拉菜单不透明修复 + 点击响应 + 橙色阴影移除
   ============================================ */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    /* 强制移除所有阴影和位移效果 */
    .navbar-dropdown,
    .navbar-dropdown-wrapper,
    .navbar-dropdown-wrapper .navbar-dropdown {
        background: #ffffff !important;
        background-color: #ffffff !important;
        opacity: 1 !important;
        min-width: 300px !important;
        transform: none !important;
        box-shadow: 0 8px 16px rgba(0,0,0,0.1) !important; /* 只保留灰色阴影 */
        filter: none !important;
    }
    
    /* 移除橙色背景和伪元素 */
    .navbar-dropdown::before,
    .navbar-dropdown::after,
    .navbar-dropdown-wrapper::before,
    .navbar-dropdown-wrapper::after {
        display: none !important;
        background: none !important;
    }
    
    /* 确保内容不透明 */
    .navbar-dropdown * {
        opacity: 1 !important;
        background-color: transparent !important;
    }
    
    /* 确保链接文字不透明 */
    .navbar-dropdown .navbar-item {
        color: #363636 !important;
        opacity: 1 !important;
    }
    
    /* 防止overflow导致的橙色元素溢出 */
    .navbar-main,
    .navbar-container,
    .navbar-brand,
    .navbar-menu {
        overflow: visible !important;
    }
    
    .navbar-dropdown-wrapper {
        overflow: visible !important;
        position: relative !important;
        z-index: 999 !important;
    }
    
    /* iPad特定的点击区域优化 */
    .navbar-dropdown-wrapper > .navbar-item {
        cursor: pointer !important;
        -webkit-tap-highlight-color: rgba(0,0,0,0.1);
    }
    
    /* 确保下拉菜单在iPad上可以点击展开 */
    .navbar-dropdown-wrapper:hover .navbar-dropdown,
    .navbar-dropdown-wrapper.is-active .navbar-dropdown {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* ============================================
   3. 通用下拉菜单样式（所有设备）
   ============================================ */
.navbar-dropdown {
    background: white !important;
    background-color: white !important;
    opacity: 1 !important;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1) !important;
    border-radius: 4px !important;
    z-index: 999 !important;
}

/* ============================================
   4. 移动端汉堡菜单修复
   ============================================ */
/* 先在大屏幕上隐藏汉堡菜单 */
@media screen and (min-width: 768px) {
    .navbar-burger {
        display: none !important;
        visibility: hidden !important;
    }
}

/* 只在移动端显示汉堡菜单 */
@media screen and (max-width: 767px) {
    /* 显示汉堡菜单 */
    .navbar-burger {
        display: flex !important;
        width: 3.5rem;
        height: 3.5rem;
        cursor: pointer;
        position: relative;
        background: transparent;
        border: none;
        padding: 0;
        margin-right: 0.5rem;
        overflow: visible !important;
    }
    
    /* 橙色的三条线 */
    .navbar-burger span {
        background-color: #ff6b35 !important;
        display: block;
        height: 3px;
        width: 26px;
        position: absolute;
        left: calc(50% - 13px);
        transition: all 0.3s ease;
    }
    
    .navbar-burger span:nth-child(1) { 
        top: calc(50% - 10px);
    }
    
    .navbar-burger span:nth-child(2) { 
        top: calc(50% - 1.5px);
    }
    
    .navbar-burger span:nth-child(3) { 
        top: calc(50% + 7px);
    }
    
    /* 激活状态 - 变成X */
    .navbar-burger.is-active span:nth-child(1) {
        transform: rotate(45deg);
        top: calc(50% - 1.5px);
    }
    
    .navbar-burger.is-active span:nth-child(2) {
        opacity: 0;
    }
    
    .navbar-burger.is-active span:nth-child(3) {
        transform: rotate(-45deg);
        top: calc(50% - 1.5px);
    }
    
    /* 移动端菜单展开样式 */
    .navbar-menu.is-active {
        display: block !important;
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        background: white;
        box-shadow: 0 8px 16px rgba(0,0,0,0.1);
        max-height: calc(100vh - 70px);
        overflow-y: auto;
        z-index: 999;
        animation: slideDown 0.3s ease;
    }
    
    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .navbar-menu.is-active .navbar-start,
    .navbar-menu.is-active .navbar-end {
        display: block !important;
        padding: 1rem 0;
    }
    
    /* 所有导航项统一对齐 - Browse与Home/Store同级 */
    .navbar-menu.is-active .navbar-item {
        display: block !important;
        padding: 0.75rem 1.5rem !important;
        border-bottom: 1px solid #f0f0f0;
        transition: background-color 0.2s;
        text-indent: 0 !important; /* 移除任何缩进 */
        margin-left: 0 !important; /* 确保左对齐 */
    }
    
    /* 确保所有一级菜单项对齐 */
    .navbar-menu.is-active > .navbar-start > .navbar-item,
    .navbar-menu.is-active > .navbar-start > .navbar-dropdown-wrapper > .navbar-item {
        padding-left: 1.5rem !important; /* 统一左边距 */
    }
    
    .navbar-menu.is-active .navbar-item:hover {
        background-color: #f9f9f9;
    }
    
    /* 移动端下拉菜单支持 */
    .navbar-menu.is-active .navbar-dropdown-wrapper {
        position: relative !important;
        display: block !important;
    }
    
    /* 下拉触发器样式 */
    .navbar-menu.is-active .navbar-dropdown-wrapper > .navbar-item {
        position: relative;
        padding-right: 2.5rem !important; /* 为箭头留空间 */
    }
    
    /* 添加下拉箭头 */
    .navbar-menu.is-active .navbar-dropdown-wrapper > .navbar-item:after {
        content: '▼';
        position: absolute;
        right: 1.5rem;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.8em;
        color: #999;
        transition: transform 0.3s;
    }
    
    /* 展开状态的箭头 */
    .navbar-menu.is-active .navbar-dropdown-wrapper.is-active > .navbar-item:after {
        transform: translateY(-50%) rotate(180deg);
    }
    
    /* 移动端下拉内容 */
    .navbar-menu.is-active .navbar-dropdown {
        display: none !important; /* 默认隐藏 */
        position: static !important;
        box-shadow: none !important;
        background: #f9f9f9 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* 展开时显示下拉内容 */
    .navbar-menu.is-active .navbar-dropdown-wrapper.is-active .navbar-dropdown {
        display: block !important;
    }
    
    /* 下拉菜单项缩进 */
    .navbar-menu.is-active .navbar-dropdown .navbar-item {
        padding-left: 3rem !important; /* 子菜单缩进 */
        background: transparent !important;
        font-size: 0.95em;
    }
}

/* ============================================
   5. 防止被覆盖的最高优先级修复
   ============================================ */
/* 强制显示汉堡菜单，覆盖任何隐藏它的规则 */
@media screen and (max-width: 768px) {
    .navbar-burger {
        display: flex !important;
        visibility: visible !important;
    }
}

/* 强制iPad下拉菜单不透明 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .navbar-dropdown,
    .navbar-dropdown-wrapper .navbar-dropdown {
        background: white !important;
        background-color: white !important;
        opacity: 1 !important;
    }
}

/* ============================================
   6. 终极覆盖规则 - 最高优先级 + PJAX防护
   ============================================ */
/* PJAX防护 - 防止页面切换时样式被覆盖 */
[data-pjax-state] .navbar-burger,
html[data-pjax-state] .navbar-burger {
    /* 这个规则会在PJAX加载时保持有效 */
}

@media screen and (min-width: 768px) {
    /* 超高优先级选择器组合 - 防止任何覆盖 */
    html body .navbar-burger,
    html body .navbar .navbar-burger,
    html body .navbar-main .navbar-burger,
    html body [class*="navbar"] .navbar-burger,
    html[data-pjax-state] body .navbar-burger,
    body.is-loading .navbar-burger,
    body.pjax-loading .navbar-burger {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -9999px !important;
    }
}
/* 移除所有设备上的橙色效果 */
.navbar *::before,
.navbar *::after {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* iPad强制不透明 - 使用ID选择器提高优先级 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    #navbar .navbar-dropdown,
    body .navbar-dropdown,
    html body .navbar-dropdown {
        background: rgba(255, 255, 255, 1) !important;
        background-color: rgba(255, 255, 255, 1) !important;
        opacity: 1 !important;
        transform: translateX(0) translateY(0) !important;
    }
    
    /* 移除可能的滤镜效果 */
    .navbar-dropdown {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        mix-blend-mode: normal !important;
    }
}

/* 移动端汉堡菜单强制显示 */
@media screen and (max-width: 767px) {
    .navbar-burger {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    /* 确保点击立即响应 */
    .navbar-burger:active {
        transform: scale(0.95) !important;
    }
}

/* 确保iPad和桌面版绝不显示汉堡菜单 - 增强版 */
@media screen and (min-width: 768px) {
    .navbar-burger,
    #mobile-menu-toggle,
    .navbar-brand .navbar-burger,
    .navbar-container .navbar-burger {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        background: none !important;
        position: absolute !important;
        left: -9999px !important; /* 完全移出视区 */
    }
    
    /* 移除所有汉堡菜单的子元素 */
    .navbar-burger span,
    .navbar-burger::before,
    .navbar-burger::after,
    #mobile-menu-toggle span,
    #mobile-menu-toggle .menu-line {
        display: none !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
    }
}
}