/* ============================================
   RESPONSIVE MENU ADAPTATION FOR ALL PAGES
   (Except glossary.html)
   ============================================ */

/* ============================================
   HEADER / MENU ADAPTATION (≤1126px)
   Mobile and Tablet with Hamburger Menu
   ============================================ */
@media screen and (max-width: 1126px) {
    /* Show hamburger menu */
    .hamburger {
        display: inline-flex !important;
        order: 3 !important;
        margin-left: 0.25rem !important;
        cursor: pointer !important;
        z-index: 1001 !important;
    }
    
    .hamburger * {
        pointer-events: none !important;
    }
    
    /* Header container */
    .header,
    .header-container {
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        align-items: center !important;
        height: 60px !important;
        padding: 0 1rem !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Logo - aligned to left */
    .logo {
        order: 1 !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important;
        margin-right: auto !important;
        flex-shrink: 0 !important;
        max-width: calc(100% - 140px) !important; /* Оставляем место для кнопок и бургера */
        min-width: 0 !important;
        line-height: 1.2 !important;
    }
    
    .logo-main {
        font-size: 1.1rem !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .logo-subtitle {
        font-size: 0.5rem !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
        display: block !important;
        margin: 0 !important;
        margin-top: 0.125rem !important;
        padding: 0 !important;
    }
    
    /* Header actions (Login/Register buttons) - aligned to right */
    .header-actions {
        order: 2 !important;
        display: flex !important;
        gap: 0.5rem !important;
        height: 100% !important;
        align-items: center !important;
        margin-left: auto !important;
        margin-right: 0.25rem !important;
        flex-shrink: 0 !important;
        min-width: 110px !important; /* Минимальная ширина для кнопок */
    }
    
    .header-actions .btn {
        padding: 0.4rem 0.75rem !important;
        font-size: 0.85rem !important;
        white-space: nowrap !important;
        height: auto !important;
    }
    
    .header-actions .theme-toggle {
        display: none !important;
    }
    
    /* Navigation - hidden by default, shown when menu is open */
    .nav {
        position: fixed !important;
        top: 60px !important;
        left: 0 !important;
        right: 0 !important;
        background: var(--card) !important;
        border-bottom: 1px solid var(--border) !important;
        padding: 1rem !important;
        display: none !important;
        flex-direction: column !important;
        z-index: 1000 !important;
        max-height: calc(100vh - 60px) !important;
        overflow-y: auto !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
        visibility: hidden !important;
        opacity: 0 !important;
        transition: opacity 0.2s ease, visibility 0.2s ease !important;
    }
    
    /* When menu is active */
    .header.is-open .nav {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Navigation items - aligned to left */
    .nav-dropdown,
    .nav-link {
        width: 100% !important;
        text-align: left !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Dropdown toggle - full width button */
    .nav-dropdown .dropdown-toggle {
        width: 100% !important;
        padding: 0.875rem 1rem !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        background: transparent !important;
        border: none !important;
        color: var(--foreground) !important;
        font-size: 1rem !important;
        font-weight: 500 !important;
        border-radius: 8px !important;
        transition: background 0.2s ease !important;
    }
    
    .nav-dropdown .dropdown-toggle:hover {
        background: var(--accent) !important;
    }
    
    .nav-dropdown .dropdown-toggle::after {
        border-left: 5px solid transparent !important;
        border-right: 5px solid transparent !important;
        border-top: 5px solid currentColor !important;
        margin-left: auto !important;
        transition: transform 0.3s ease !important;
    }
    
    .nav-dropdown.open .dropdown-toggle::after {
        transform: rotate(180deg) !important;
    }
    
    /* Dropdown menu - shown below toggle */
    .nav-dropdown .dropdown-menu {
        position: static !important;
        display: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        margin: 0 !important;
        padding: 0.5rem 0 !important;
        border: none !important;
        box-shadow: none !important;
        background: var(--popover) !important;
        width: 100% !important;
    }
    
    .nav-dropdown.open .dropdown-menu {
        display: block !important;
    }
    
    /* Dropdown items - indented and aligned left */
    .dropdown-item {
        display: block !important;
        width: 100% !important;
        padding: 0.75rem 1rem 0.75rem 2rem !important;
        text-align: left !important;
        color: var(--popover-foreground) !important;
        font-size: 0.95rem !important;
        border-radius: 6px !important;
        transition: all 0.2s ease !important;
    }
    
    .dropdown-item:hover {
        background: var(--accent) !important;
        color: var(--foreground) !important;
    }
    
    /* Submenu styles */
    .dropdown-submenu {
        width: 100% !important;
    }
    
    .dropdown-submenu-toggle {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        padding: 0.75rem 1rem 0.75rem 2rem !important;
        color: var(--muted-foreground) !important;
        font-size: 0.95rem !important;
        border-radius: 6px !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
    }
    
    .dropdown-submenu-toggle::after {
        content: '›' !important;
        font-size: 1.2rem !important;
        transition: transform 0.3s ease !important;
    }
    
    .dropdown-submenu.open .dropdown-submenu-toggle::after {
        transform: rotate(90deg) !important;
    }
    
    .dropdown-submenu-toggle:hover {
        background: var(--accent) !important;
        color: var(--foreground) !important;
    }
    
    .dropdown-submenu-content {
        display: none !important;
        padding-left: 1rem !important;
    }
    
    .dropdown-submenu.open .dropdown-submenu-content {
        display: block !important;
    }
    
    .dropdown-submenu-content .dropdown-item {
        padding-left: 3rem !important;
    }
    
    /* Regular nav links - full width */
    .nav-link {
        display: block !important;
        width: 100% !important;
        padding: 0.875rem 1rem !important;
        text-align: left !important;
        color: var(--foreground) !important;
        font-size: 1rem !important;
        font-weight: 500 !important;
        border-radius: 8px !important;
        transition: background 0.2s ease !important;
    }
    
    .nav-link:hover {
        background: var(--accent) !important;
    }
    
    .nav-link::after {
        display: none !important;
    }
}

/* ============================================
   IPHONE SE (375x667) SPECIFIC FIXES
   Адаптация кнопок "Войти" и "Попробовать"
   ============================================ */
@media screen and (max-width: 375px) {
    /* Уменьшаем padding header для экономии места */
    .header,
    .header-container {
        padding: 0 0.5rem !important;
        height: 56px !important;
    }
    
    /* Уменьшаем размер логотипа */
    .logo {
        max-width: calc(100% - 160px) !important; /* Больше места для кнопок */
        margin-right: 0.25rem !important;
    }
    
    .logo-main {
        font-size: 0.95rem !important;
    }
    
    .logo-subtitle {
        font-size: 0.45rem !important;
    }
    
    /* Оптимизация кнопок для iPhone SE */
    .header-actions {
        gap: 0.25rem !important; /* Уменьшаем расстояние между кнопками */
        margin-right: 0.25rem !important;
        min-width: auto !important; /* Убираем минимальную ширину */
        flex-shrink: 1 !important; /* Позволяем сжиматься */
    }
    
    .header-actions .btn {
        padding: 0.35rem 0.5rem !important; /* Уменьшаем padding */
        font-size: 0.75rem !important; /* Уменьшаем размер шрифта */
        min-width: auto !important;
        flex-shrink: 1 !important;
    }
    
    /* Специальные стили для кнопок "Войти" и "Попробовать" */
    .header-actions .btn-outline,
    .header-actions .btn-accent {
        padding: 0.35rem 0.5rem !important;
        font-size: 0.75rem !important;
        min-width: auto !important;
        flex-shrink: 1 !important;
        white-space: nowrap !important;
    }
    
    /* Уменьшаем размер hamburger меню */
    .hamburger {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        padding: 8px !important;
        margin-left: 0.25rem !important;
    }
    
    .hamburger-box {
        width: 20px !important;
        height: 14px !important;
    }
}

/* Дополнительная оптимизация для очень маленьких экранов (320-374px) */
@media screen and (max-width: 374px) and (min-width: 320px) {
    /* Еще больше уменьшаем кнопки если нужно */
    .header-actions .btn {
        padding: 0.3rem 0.4rem !important;
        font-size: 0.7rem !important;
    }
    
    .header-actions .btn-outline,
    .header-actions .btn-accent {
        padding: 0.3rem 0.4rem !important;
        font-size: 0.7rem !important;
    }
    
    /* Уменьшаем логотип еще больше */
    .logo-main {
        font-size: 0.9rem !important;
    }
    
    .logo-subtitle {
        font-size: 0.4rem !important;
    }
}

/* Специальная оптимизация для iPhone SE точного размера (375x667 и 375x670) */
@media screen and (width: 375px) and (height: 667px),
       screen and (width: 375px) and (height: 670px),
       screen and (min-width: 374px) and (max-width: 376px) and (min-height: 666px) and (max-height: 671px) {
    /* Переопределяем все стили из style.css для iPhone SE */
    .header-container {
        padding: 0 0.5rem !important;
        height: 56px !important;
    }
    
    .header {
        padding: 0.5rem 0 !important;
        height: 56px !important;
    }
    
    .logo {
        max-width: calc(100% - 155px) !important;
        margin-right: 0.25rem !important;
        flex-shrink: 1 !important;
    }
    
    .logo-main {
        font-size: 0.9rem !important;
    }
    
    .logo-subtitle {
        font-size: 0.4rem !important;
    }
    
    .header-actions {
        gap: 0.25rem !important;
        margin-right: 0.25rem !important;
        min-width: auto !important;
        flex-shrink: 0 !important;
        order: 2 !important;
        display: flex !important;
        align-items: center !important;
        height: auto !important;
        padding: 0 !important;
    }
    
    .header-actions .btn {
        padding: 0.3rem 0.5rem !important;
        font-size: 0.7rem !important;
        min-width: auto !important;
        height: auto !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        flex-shrink: 1 !important;
    }
    
    .header-actions .btn-outline {
        padding: 0.3rem 0.5rem !important;
        font-size: 0.7rem !important;
        height: auto !important;
        min-height: 28px !important;
        line-height: 1.2 !important;
    }
    
    .header-actions .btn-accent {
        padding: 0.3rem 0.5rem !important;
        font-size: 0.7rem !important;
        height: auto !important;
        min-height: 28px !important;
        line-height: 1.2 !important;
    }
    
    .hamburger {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        padding: 8px !important;
        margin-left: 0.25rem !important;
        order: 3 !important;
    }
    
    .hamburger-box {
        width: 18px !important;
        height: 12px !important;
    }
}

/* Дополнительная переопределяющая секция для гарантии применения стилей */
@media screen and (max-width: 376px) and (min-width: 374px) {
    .header-actions .btn {
        padding: 0.3rem 0.5rem !important;
        font-size: 0.7rem !important;
        height: auto !important;
        min-height: 28px !important;
        line-height: 1.2 !important;
    }
    
    .header-actions .btn-outline,
    .header-actions .btn-accent {
        padding: 0.3rem 0.5rem !important;
        font-size: 0.7rem !important;
        height: auto !important;
        min-height: 28px !important;
        line-height: 1.2 !important;
    }
    
    .logo {
        max-width: calc(100% - 155px) !important;
    }
    
    .header-container {
        padding: 0 0.5rem !important;
    }
}

/* ============================================
   КРИТИЧЕСКИЕ ПЕРЕОПРЕДЕЛЕНИЯ ДЛЯ IPHONE SE
   Эти стили должны применяться в последнюю очередь
   ============================================ */
@media screen and (max-width: 376px) {
    /* Принудительное переопределение всех стилей для кнопок на iPhone SE */
    .header .header-container .header-actions .btn,
    .header .header-container .header-actions a.btn {
        padding: 0.3rem 0.5rem !important;
        font-size: 0.7rem !important;
        height: auto !important;
        min-height: 28px !important;
        max-height: none !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        flex-shrink: 1 !important;
        min-width: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .header .header-container .header-actions .btn-outline,
    .header .header-container .header-actions a.btn-outline {
        padding: 0.3rem 0.5rem !important;
        font-size: 0.7rem !important;
        height: auto !important;
        min-height: 28px !important;
        max-height: none !important;
        line-height: 1.2 !important;
    }
    
    .header .header-container .header-actions .btn-accent,
    .header .header-container .header-actions a.btn-accent {
        padding: 0.3rem 0.5rem !important;
        font-size: 0.7rem !important;
        height: auto !important;
        min-height: 28px !important;
        max-height: none !important;
        line-height: 1.2 !important;
    }
    
    .header .header-container .header-actions {
        gap: 0.25rem !important;
        margin-right: 0.25rem !important;
        min-width: auto !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        height: auto !important;
        padding: 0 !important;
    }
    
    .header .header-container .logo {
        max-width: calc(100% - 155px) !important;
        flex-shrink: 1 !important;
    }
    
    .header .header-container {
        padding: 0 0.5rem !important;
        height: 56px !important;
    }
}