/* Mobile Contrast Fixes for OzSparkHub and Navbar Dropdown Fixes */

/* Fix 0: Desktop navbar dropdown overflow fix */
@media screen and (min-width: 1088px) {
    .navbar-dropdown-wrapper .navbar-link {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.3rem !important;
        padding: 0.5rem 0.75rem !important;
        min-width: auto !important;
    }
}

/* Fix 1: Navigation bar home text contrast in mobile view */
/* Use 1087px for navbar to match Bulma's breakpoint */
@media screen and (max-width: 1087px) {
    /* Ensure navigation links are visible on mobile */
    .navbar-main .navbar-menu .navbar-item,
    .navbar-main .navbar-start .navbar-item,
    .navbar-main .navbar-end .navbar-item {
        color: inherit;
        font-weight: 500;
    }
    
    /* Home button and other navbar links on mobile - inherit background */
    .navbar-main .navbar-item a,
    .navbar-main .navbar-link {
        color: inherit;
        background-color: transparent;
        border-radius: 4px;
        margin: 2px 0;
        padding: 0.5rem 0.6rem;
    }
    
    /* Special handling for dropdown wrapper to prevent overflow on mobile */
    .navbar-dropdown-wrapper .navbar-link {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.3rem !important;
        padding: 0.5rem 0.6rem !important;
        min-width: auto !important;
    }
    
    /* Hover state for mobile navbar items */
    .navbar-main .navbar-item a:hover,
    .navbar-main .navbar-link:hover {
        color: #ff6f3c;
        background-color: rgba(255, 111, 60, 0.1);
    }
    
    /* Active state for mobile navbar items */
    .navbar-main .navbar-item.is-active,
    .navbar-main .navbar-item.is-active a {
        color: #ff6f3c;
        background-color: rgba(255, 111, 60, 0.15);
        font-weight: 600;
    }
}

/* Fix 2: Categories section "Learn more" text contrast */
@media screen and (max-width: 769px) {
    /* Category links and text in mobile view */
    .widget .media-content .categories a,
    .categories a,
    article.media .categories,
    article.media .categories a {
        color: #2c3e50;
        font-weight: 500;
        text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
    }
    
    /* Ensure category text is readable against light backgrounds */
    .widget .level-item,
    .widget .media-content .has-text-grey,
    .widget .media-content .subtitle {
        color: #2c3e50;
        font-weight: 500;
    }
    
    /* "Learn more" and similar small text */
    .is-size-7,
    .widget .media-content small,
    .widget .media-content .is-size-7 {
        color: #34495e;
        font-weight: 500;
        background-color: rgba(255, 255, 255, 0.7);
        padding: 2px 4px;
        border-radius: 2px;
    }
    
    /* Category hover states */
    .widget .media-content .categories a:hover,
    .categories a:hover {
        color: #ff6f3c;
        background-color: rgba(255, 111, 60, 0.1);
        padding: 2px 4px;
        border-radius: 3px;
        text-decoration: underline;
    }
}

/* Fix 3: General mobile text contrast improvements */
@media screen and (max-width: 769px) {
    /* Ensure all widget text has sufficient contrast */
    .widget .widget-body,
    .widget .media-content,
    .widget .content {
        background-color: rgba(255, 255, 255, 0.9);
        border-radius: 6px;
        padding: 0.75rem;
        margin: 0.25rem 0;
    }
    
    /* Widget titles */
    .widget .widget-title,
    .widget h3,
    .widget h4 {
        color: #2c3e50;
        font-weight: 600;
        text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
    }
    
    /* Widget links */
    .widget a {
        color: #2980b9;
        font-weight: 500;
    }
    
    .widget a:hover {
        color: #ff6f3c;
        text-decoration: underline;
    }
}

/* Fix 4: Ensure navbar dropdown text is visible on mobile */
/* Use 1087px for navbar to match Bulma's breakpoint */
@media screen and (max-width: 1087px) {
    .navbar-dropdown-wrapper.is-mobile-active .navbar-link,
    .navbar-dropdown-item {
        color: #2c3e50;
        background-color: rgba(255, 255, 255, 0.95);
        font-weight: 500;
    }
    
    .navbar-dropdown-item:hover {
        color: #ff6f3c;
        background-color: rgba(255, 111, 60, 0.15);
    }
}

/* Fix 5: Footer and bottom section text contrast on mobile */
@media screen and (max-width: 769px) {
    .footer,
    .footer .content,
    .footer .widget {
        background-color: rgba(44, 62, 80, 0.95);
        color: #ffffff;
    }
    
    .footer a {
        color: #3498db;
        font-weight: 500;
    }
    
    .footer a:hover {
        color: #ff6f3c;
    }
}

/* Fix 6: Dark background sections with light text */
@media screen and (max-width: 769px) {
    /* For sections with dark backgrounds, ensure white text */
    .has-background-dark,
    .has-background-black,
    .hero.is-dark,
    .hero.is-black {
        color: #ffffff;
    }
    
    .has-background-dark .widget,
    .has-background-black .widget,
    .hero.is-dark .widget,
    .hero.is-black .widget {
        background-color: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .has-background-dark a,
    .has-background-black a,
    .hero.is-dark a,
    .hero.is-black a {
        color: #3498db;
        font-weight: 500;
    }
}

/* Fix 7: Form elements and buttons mobile contrast */
@media screen and (max-width: 769px) {
    .button,
    .input,
    .textarea,
    .select select {
        border: 2px solid #bdc3c7;
        color: #2c3e50;
        font-weight: 500;
    }
    
    .button:hover,
    .button:focus {
        border-color: #ff6f3c;
        color: #ff6f3c;
    }
    
    .button.is-primary {
        background-color: #ff6f3c;
        border-color: #ff6f3c;
        color: #ffffff;
        font-weight: 600;
    }
}

/* Fix 8: Search and filter elements */
@media screen and (max-width: 769px) {
    .search-form,
    .search-box,
    .filter-box {
        background-color: rgba(255, 255, 255, 0.95);
        border: 1px solid #bdc3c7;
        border-radius: 6px;
        padding: 0.75rem;
    }
    
    .search-form input,
    .search-box input {
        color: #2c3e50;
        font-weight: 500;
    }
    
    .search-form input::placeholder,
    .search-box input::placeholder {
        color: #7f8c8d;
        font-weight: 400;
    }
}

/* Fix 9: Article and post content mobile readability */
@media screen and (max-width: 769px) {
    .article .content,
    .post .content,
    .article-content {
        background-color: rgba(255, 255, 255, 0.95);
        color: #2c3e50;
        padding: 1rem;
        border-radius: 6px;
        margin: 0.5rem 0;
    }
    
    .article .content h1,
    .article .content h2,
    .article .content h3,
    .article .content h4,
    .article .content h5,
    .article .content h6 {
        color: #2c3e50;
        font-weight: 600;
    }
    
    .article .content a {
        color: #2980b9;
        font-weight: 500;
        text-decoration: underline;
    }
    
    .article .content a:hover {
        color: #ff6f3c;
    }
}

/* Fix 10: 表格对比度修复 - 特别是第一栏 */
@media screen and (max-width: 769px) {
    /* 确保移动端始终使用白底，不是蓝底 */
    body {
        background-color: #ffffff;
    }
    
    .container,
    .main-content,
    .content-wrap {
        background-color: #ffffff;
    }
    
    /* 表格整体优化 */
    table {
        background-color: #ffffff;
        border: 1px solid #e1e5e9;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    /* 表格头部 */
    table thead th {
        background: linear-gradient(135deg, #FF6F3C, #F39C12);
        color: #ffffff;
        font-weight: 700;
        text-shadow: 0 1px 2px rgba(0,0,0,0.3);
        border: none;
    }
    
    /* 表格第一栏特殊处理 - 解决对比度问题 */
    table td:first-child,
    table th:first-child {
        background-color: #f8f9fa;
        color: #2c3e50;
        font-weight: 600;
        border-right: 2px solid #e9ecef;
    }
    
    /* 表格所有单元格 */
    table td {
        color: #2c3e50;
        font-weight: 500;
        background-color: #ffffff;
        border-bottom: 1px solid #e9ecef;
    }
    
    /* 表格行交替背景 */
    table tr:nth-child(even) td {
        background-color: #f8f9fa;
    }
    
    /* 表格行交替背景 - 第一栏保持特殊样式 */
    table tr:nth-child(even) td:first-child {
        background-color: #e9ecef;
        color: #2c3e50;
        font-weight: 600;
    }
    
    /* 表格悬停效果 */
    table tr:hover td {
        background-color: rgba(255, 111, 60, 0.08);
    }
    
    table tr:hover td:first-child {
        background-color: rgba(255, 111, 60, 0.15);
        color: #2c3e50;
        font-weight: 700;
    }
}

/* Fix 11: 暗色模式下的表格对比度修复 - 移动端禁用自动深色模式 */
/* Mobile devices will use default light theme for simplicity
@media screen and (max-width: 769px) and (prefers-color-scheme: dark) {
    /* 暗色模式整体背景 */
    body {
        background-color: #1a1a1a;
    }
    
    .container,
    .main-content,
    .content-wrap {
        background-color: #1a1a1a;
    }
    
    /* 暗色模式表格 */
    table {
        background-color: #2c3e50;
        border-color: #485063;
    }
    
    /* 暗色模式表格头部 */
    table thead th {
        background: linear-gradient(135deg, #FF6F3C, #F39C12);
        color: #ffffff;
        font-weight: 700;
        text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    }
    
    /* 暗色模式第一栏 - 关键修复：提高对比度 */
    table td:first-child,
    table th:first-child {
        background-color: #34495e;
        color: #ffffff;
        font-weight: 700;
        text-shadow: 0 1px 2px rgba(0,0,0,0.8);
        border-right: 2px solid #485063;
    }
    
    /* 暗色模式所有单元格 */
    table td {
        color: #e8eaed;
        background-color: #2c3e50;
        border-color: #485063;
        font-weight: 500;
    }
    
    /* 暗色模式行交替背景 */
    table tr:nth-child(even) td {
        background-color: #34495e;
    }
    
    /* 暗色模式行交替背景 - 第一栏保持高对比度 */
    table tr:nth-child(even) td:first-child {
        background-color: #3d566e;
        color: #ffffff;
        font-weight: 700;
        text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    }
    
    /* 暗色模式悬停效果 */
    table tr:hover td {
        background-color: #485063;
    }
    
    table tr:hover td:first-child {
        background-color: #5a6c7d;
        color: #ffffff;
        font-weight: 700;
        text-shadow: 0 1px 2px rgba(0,0,0,0.9);
    }
}
*/

/* Fix 12: Accessibility improvements for mobile */
@media screen and (max-width: 769px) {
    /* Focus states for better keyboard navigation */
    a:focus,
    button:focus,
    input:focus,
    textarea:focus,
    select:focus {
        outline: 3px solid #ff6f3c;
        outline-offset: 2px;
        box-shadow: 0 0 0 2px rgba(255, 111, 60, 0.3);
    }
    
    /* High contrast mode support */
    @media (prefers-contrast: high) {
        .navbar-main .navbar-item,
        .categories a,
        .widget a {
            border: 1px solid currentColor;
            background-color: rgba(255, 255, 255, 0.9);
        }
        
        /* High contrast mode table fixes */
        table td:first-child {
            border: 2px solid #000000;
            background-color: #ffffff;
            color: #000000;
        }
    }
    
    /* Reduced motion support */
    @media (prefers-reduced-motion: reduce) {
        * {
            animation-duration: 0.01ms;
            animation-iteration-count: 1;
            transition-duration: 0.01ms;
        }
    }
}