/*
 * КРИТИЧЕСКИЕ исправления мобильной версии
 * Полная перезапись для iPhone и всех мобильных устройств
 */

/* Базовые настройки для всех устройств */
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    height: 100%;
}

body {
    width: 100%;
    min-height: 100vh;
    position: relative;
    -webkit-overflow-scrolling: touch;
}

/* Отключаем все проблемные стили на мобильных */
@media screen and (max-width: 768px) {
    
    /* КРИТИЧЕСКИ ВАЖНО - полная перезапись для мобильных */
    * {
        box-sizing: border-box !important;
    }
    
    html, body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        position: relative !important;
    }
    
    /* Шапка - полная перезапись */
    .site-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 60px !important;
        background: #2D363F !important;
        z-index: 1001 !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    }
    
    .header-container {
        width: 100% !important;
        max-width: 100% !important;
        height: 60px !important;
        padding: 0 15px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    
    /* Логотип - упрощенно */
    .site-logo {
        font-size: 16px !important;
        color: white !important;
        text-decoration: none !important;
        display: flex !important;
        align-items: center !important;
    }
    
    .logo-icon {
        width: 28px !important;
        height: 28px !important;
        margin-right: 8px !important;
        background: #28B76B !important;
        border-radius: 6px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Поиск скрываем */
    .header-search {
        display: none !important;
    }
    
    /* Меню кнопка */
    .menu-toggle {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        width: 40px !important;
        height: 40px !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        padding: 8px !important;
    }
    
    .menu-toggle span {
        display: block !important;
        width: 20px !important;
        height: 2px !important;
        background: white !important;
        margin: 3px 0 !important;
        transition: all 0.3s ease !important;
        border-radius: 1px !important;
    }
    
    /* Основной контент */
    .site-content {
        margin-top: 60px !important;
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        position: relative !important;
    }
    
    /* Сайдбар */
    .sidebar {
        position: fixed !important;
        top: 60px !important;
        left: -100% !important;
        width: 280px !important;
        height: calc(100vh - 60px) !important;
        background: white !important;
        z-index: 999 !important;
        transition: left 0.3s ease !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        box-shadow: 2px 0 10px rgba(0,0,0,0.1) !important;
    }
    
    .sidebar.open {
        left: 0 !important;
    }
    
    /* КРИТИЧЕСКИ ВАЖНО - навигация в сайдбаре должна быть видна */
    .sidebar .sidebar-content {
        padding: 1rem !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .sidebar .sidebar-nav {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .sidebar .nav-section {
        display: block !important;
        margin-bottom: 1.5rem !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .sidebar .nav-section-title {
        display: flex !important;
        align-items: center !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        color: #64748b !important;
        padding: 0 0 0.5rem !important;
        margin: 0.5rem 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .sidebar .nav-list {
        display: block !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .sidebar .nav-item {
        display: block !important;
        margin: 0 0 4px 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .sidebar .nav-link {
        display: flex !important;
        align-items: center !important;
        padding: 12px 1rem !important;
        color: #475569 !important;
        text-decoration: none !important;
        font-weight: 500 !important;
        font-size: 14px !important;
        border-radius: 6px !important;
        margin: 0 !important;
        transition: all 0.2s ease !important;
        min-height: 44px !important;
        touch-action: manipulation !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: transparent !important;
    }
    
    .sidebar .nav-link:hover,
    .sidebar .nav-link:focus {
        background: #f1f5f9 !important;
        color: #1e293b !important;
    }
    
    .sidebar .nav-link.active {
        background: #ecfdf5 !important;
        color: #166534 !important;
        font-weight: 600 !important;
    }
    
    .sidebar .nav-link-icon {
        margin-right: 8px !important;
        width: 16px !important;
        height: 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .sidebar .nav-link-text {
        flex: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .sidebar .nav-count {
        font-size: 11px !important;
        color: #9ca3af !important;
        background: #f3f4f6 !important;
        padding: 2px 6px !important;
        border-radius: 10px !important;
        margin-left: 8px !important;
        font-weight: 500 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Подменю */
    .sidebar .nav-toggle {
        position: absolute !important;
        left: 8px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 20px !important;
        height: 20px !important;
        background: none !important;
        border: none !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 2 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .sidebar .nav-item.has-children .nav-link {
        padding-left: 2.5rem !important;
    }
    
    .sidebar .nav-submenu {
        list-style: none !important;
        margin: 0 0 0 1rem !important;
        padding: 0 !important;
        border-left: 1px solid #e2e8f0 !important;
        overflow: hidden !important;
        transition: all 0.3s ease !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .sidebar .nav-submenu.collapsed {
        max-height: 0 !important;
        opacity: 0 !important;
    }
    
    .sidebar .nav-submenu.expanded {
        max-height: 500px !important;
        opacity: 1 !important;
    }
    
    .sidebar .nav-sublink {
        display: flex !important;
        align-items: center !important;
        padding: 8px 1rem !important;
        color: #64748b !important;
        text-decoration: none !important;
        font-size: 13px !important;
        transition: all 0.2s ease !important;
        border-radius: 4px !important;
        margin: 0 8px !important;
        min-height: 36px !important;
        touch-action: manipulation !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .sidebar .nav-sublink:hover,
    .sidebar .nav-sublink:focus {
        color: #1e293b !important;
        background: #f1f5f9 !important;
    }
    
    .sidebar .nav-sublink.active {
        color: #166534 !important;
        background: #ecfdf5 !important;
        font-weight: 500 !important;
    }
    
    /* Основной контент без сайдбара */
    .main-content {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        padding: 15px !important;
        box-sizing: border-box !important;
        background: #f8fafc !important;
        min-height: calc(100vh - 60px) !important;
    }
    
    /* Overlay */
    .mobile-menu-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0,0,0,0.5) !important;
        z-index: 998 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: all 0.3s ease !important;
    }
    
    .mobile-menu-overlay.open {
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Заголовки статей */
    .article-header {
        padding: 20px 15px !important;
        margin-bottom: 20px !important;
        border-radius: 12px !important;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        color: white !important;
        text-align: center !important;
    }
    
    .article-title {
        font-size: 24px !important;
        line-height: 1.3 !important;
        margin-bottom: 10px !important;
        font-weight: 700 !important;
    }
    
    /* Карточки постов */
    .posts-grid {
        display: block !important;
        gap: 0 !important;
    }
    
    .post-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 20px !important;
        padding: 15px !important;
        background: white !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
        box-sizing: border-box !important;
    }
    
    .post-thumbnail {
        width: 100% !important;
        height: 180px !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        margin-bottom: 15px !important;
        background: linear-gradient(135deg, #667eea, #764ba2) !important;
    }
    
    .post-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    
    .post-title {
        font-size: 18px !important;
        line-height: 1.4 !important;
        margin-bottom: 10px !important;
        font-weight: 600 !important;
    }
    
    .post-title a {
        color: #1e293b !important;
        text-decoration: none !important;
    }
    
    .post-excerpt {
        font-size: 14px !important;
        line-height: 1.5 !important;
        color: #64748b !important;
        margin-bottom: 15px !important;
    }
    
    /* Кнопки */
    .btn {
        display: inline-block !important;
        padding: 10px 16px !important;
        background: #28B76B !important;
        color: white !important;
        text-decoration: none !important;
        border-radius: 6px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        border: none !important;
        cursor: pointer !important;
        transition: background 0.2s ease !important;
    }
    
    .btn:hover,
    .btn:active {
        background: #22A55B !important;
    }
    
    /* Навигация в сайдбаре */
    .sidebar-content {
        padding: 20px 0 !important;
    }
    
    .nav-section-title {
        font-size: 11px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        color: #64748b !important;
        padding: 0 20px 10px !important;
        margin: 20px 0 10px !important;
    }
    
    .nav-section:first-child .nav-section-title {
        margin-top: 0 !important;
    }
    
    .nav-link {
        display: block !important;
        padding: 12px 20px !important;
        color: #475569 !important;
        text-decoration: none !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        border: none !important;
        background: none !important;
        width: 100% !important;
        text-align: left !important;
        transition: background 0.2s ease !important;
    }
    
    .nav-link:hover,
    .nav-link:active {
        background: #f1f5f9 !important;
        color: #1e293b !important;
    }
    
    .nav-link.active {
        background: #ecfdf5 !important;
        color: #166534 !important;
        font-weight: 600 !important;
    }
    
    /* Подвал */
    .site-footer {
        width: 100% !important;
        margin-left: 0 !important;
        padding: 20px 15px !important;
        background: #1f2937 !important;
        color: #9ca3af !important;
    }
    
    .footer-content {
        max-width: 100% !important;
        padding: 0 !important;
        text-align: center !important;
    }
    
    /* Отключаем все hover эффекты */
    .post-card:hover {
        transform: none !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    }
    
    /* Убираем проблемные анимации */
    * {
        animation: none !important;
        transition: none !important;
    }
    
    /* Разрешаем только базовые переходы */
    .menu-toggle span,
    .sidebar,
    .mobile-menu-overlay,
    .btn,
    .nav-link {
        transition: all 0.3s ease !important;
    }
    
    /* Скрываем все лишние элементы */
    .floating-element,
    .particles,
    .image-overlay,
    .touch-particle {
        display: none !important;
    }
}

/* Еще более жесткие правила для очень маленьких экранов */
@media screen and (max-width: 480px) {
    .header-container {
        padding: 0 12px !important;
    }
    
    .main-content {
        padding: 12px !important;
    }
    
    .post-card {
        padding: 12px !important;
    }
    
    .article-header {
        padding: 15px 12px !important;
    }
    
    .article-title {
        font-size: 20px !important;
    }
    
    .post-title {
        font-size: 16px !important;
    }
    
    .sidebar {
        width: 260px !important;
    }
}

/* iPhone X и новее с notch */
@supports (padding: max(0px)) {
    @media screen and (max-width: 768px) {
        .site-header {
            padding-top: env(safe-area-inset-top) !important;
            height: calc(60px + env(safe-area-inset-top)) !important;
        }
        
        .site-content {
            margin-top: calc(60px + env(safe-area-inset-top)) !important;
        }
        
        .sidebar {
            top: calc(60px + env(safe-area-inset-top)) !important;
            height: calc(100vh - 60px - env(safe-area-inset-top)) !important;
        }
        
        .header-container {
            padding-left: max(15px, env(safe-area-inset-left)) !important;
            padding-right: max(15px, env(safe-area-inset-right)) !important;
        }
        
        .main-content {
            padding-left: max(15px, env(safe-area-inset-left)) !important;
            padding-right: max(15px, env(safe-area-inset-right)) !important;
            padding-bottom: max(15px, env(safe-area-inset-bottom)) !important;
        }
    }
}

/* Исправления для landscape ориентации */
@media screen and (max-width: 768px) and (orientation: landscape) {
    .site-header {
        height: 50px !important;
    }
    
    .site-content {
        margin-top: 50px !important;
    }
    
    .sidebar {
        top: 50px !important;
        height: calc(100vh - 50px) !important;
        width: 240px !important;
    }
}

/* Критические исправления для WebKit (Safari) */
@supports (-webkit-appearance: none) {
    @media screen and (max-width: 768px) {
        body {
            -webkit-overflow-scrolling: touch !important;
        }
        
        .sidebar {
            -webkit-overflow-scrolling: touch !important;
        }
        
        .main-content {
            -webkit-overflow-scrolling: touch !important;
        }
        
        /* Убираем webkit zoom на inputs */
        input, textarea, select {
            font-size: 16px !important;
            -webkit-appearance: none !important;
        }
    }
}