/* GAG Recipes - 文字遮挡修复样式 */
/* 解决文字被其他元素遮挡的问题 */

/* === 全局文字层级修复 === */

/* 确保所有文字内容都有合适的层级 */
h1, h2, h3, h4, h5, h6,
p, span, a, li, td, th,
.text-content,
.hero-title,
.hero-description,
.feature-title,
.card-title,
.ingredient-title {
    position: relative;
    z-index: 10;
}

/* === 英雄区域文字修复 === */
.hero-section h1,
.hero-title,
.hero-content h1 {
    position: relative;
    z-index: 15;
    /* 确保文字清晰可见 */
    background: rgba(255, 255, 255, 0.02);
    padding: 0.2rem 0.5rem;
    border-radius: 0.25rem;
}

.hero-section p,
.hero-description,
.hero-content p {
    position: relative;
    z-index: 14;
    /* 轻微背景增强可读性 */
    background: rgba(255, 255, 255, 0.01);
    padding: 0.1rem 0.3rem;
    border-radius: 0.2rem;
}

/* === 导航文字修复 === */
.navbar,
.nav-menu,
.nav-logo {
    z-index: 100;
}

.nav-menu a,
.nav-logo span {
    position: relative;
    z-index: 101;
}

/* === 卡片内容文字修复 === */
.card,
.feature-card,
.ingredient-card {
    position: relative;
    z-index: 5;
}

.card h3,
.card p,
.feature-card h3,
.feature-card p,
.ingredient-card h2,
.ingredient-card p {
    position: relative;
    z-index: 12;
}

/* === 食材页面特殊修复 === */
.ingredient-hero,
.ingredient-header {
    position: relative;
    z-index: 8;
}

.ingredient-header h1,
.ingredient-header h2 {
    position: relative;
    z-index: 16;
    /* 确保标题完全可见 */
    background: rgba(255, 255, 255, 0.03);
    padding: 0.3rem 0.6rem;
    border-radius: 0.3rem;
}

.ingredient-description,
.ingredient-meta {
    position: relative;
    z-index: 15;
}

/* === 按钮和交互元素修复 === */
.btn,
.button,
button,
input,
select,
textarea {
    position: relative;
    z-index: 20;
}

/* === 背景元素确保在底层 === */
.hero-section::before,
.hero-section::after,
.page-hero::before,
.page-hero::after,
.section-bg,
.background-pattern {
    z-index: -1 !important;
}

/* === 修复特定的遮挡问题 === */

/* 确保面包屑导航可见 */
.breadcrumb {
    position: relative;
    z-index: 25;
}

.breadcrumb a,
.breadcrumb span {
    position: relative;
    z-index: 26;
}

/* 确保页脚内容可见 */
.footer {
    position: relative;
    z-index: 30;
}

.footer h3,
.footer h4,
.footer p,
.footer a {
    position: relative;
    z-index: 31;
}

/* === 移动设备特殊修复 === */
@media (max-width: 768px) {
    /* 移动设备上增强文字层级 */
    h1, h2, h3 {
        z-index: 50;
        /* 移动设备上轻微增强背景 */
        background: rgba(255, 255, 255, 0.05);
        padding: 0.2rem 0.4rem;
        border-radius: 0.25rem;
    }
    
    /* 移动导航特殊处理 */
    .nav-menu {
        z-index: 1000;
    }
    
    .nav-menu a {
        z-index: 1001;
    }
}

/* === 调试模式 === */
.debug-z-index * {
    outline: 1px solid red;
    position: relative;
}

.debug-z-index *::after {
    content: "z:" attr(style);
    position: absolute;
    top: 0;
    right: 0;
    background: yellow;
    color: black;
    font-size: 10px;
    padding: 2px;
    z-index: 9999;
}

/* === 确保重要文字始终可见 === */
.text-always-visible {
    position: relative !important;
    z-index: 9999 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 0.25rem !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* === 防止文字被图片遮挡 === */
img {
    z-index: 1;
}

img + h1,
img + h2,
img + h3,
img + p {
    z-index: 11;
}

/* === 防止浮动元素遮挡文字 === */
.floating-element {
    z-index: 2;
}

.floating-element ~ h1,
.floating-element ~ h2,
.floating-element ~ h3,
.floating-element ~ p {
    z-index: 12;
}