/* Базовий стан бургера і мобільного меню */
.burger-btn { display: none; }
.mobile-menu-overlay { display: none; }
.desktop-btn { display: inline-block; }

/* =========================================================
   1. НОУТБУКИ (від 1200px до 1440px)
========================================================= */
@media (max-width: 1440px) {
    :root { --grid-offset: 40px; }
    .header-container { padding: 0 calc(var(--grid-offset) + 20px); }
    .main-nav { gap: 2vw; } 
    .header-actions { gap: 2vw; }
    .nav-item, .lang-switch a { font-size: 13px; }
    .btn-outline { padding: 10px 20px; font-size: 13px; }
    .logo-img { max-height: 24px; }
    .site-header.scrolled .logo-img { max-height: 20px; }
}

@media (max-width: 1200px) {
    :root { --grid-offset: 30px; }
    .header-container { padding: 0 calc(var(--grid-offset) + 15px); }
    .main-nav, .header-actions { gap: 15px; }
    .nav-item { font-size: 12px; }
    .nav-item i { margin-left: 4px; font-size: 9px; }
    .btn-outline { padding: 8px 16px; font-size: 12px; }
    .logo-img { max-height: 22px; }
    .site-header.scrolled .logo-img { max-height: 18px; }
}

/* =========================================================
   2. ПЛАНШЕТИ (max-width: 1024px) - ПОЯВА БУРГЕРА
========================================================= */
@media (max-width: 1024px) {
    :root { --header-height: 80px; --header-height-scrolled: 60px; }
    .main-nav { display: none !important; }
    .desktop-btn { display: none !important; }
    .header-actions { gap: 25px; }

    /* НОВИЙ БУРГЕР */
    .burger-btn {
        display: flex; flex-direction: column; justify-content: space-between;
        width: 24px; height: 14px;
        background: transparent; border: none; cursor: pointer; z-index: 1001;
    }
    .burger-btn span {
        width: 100%; height: 2px; background-color: var(--text-main);
        border-radius: 0;
    }
    .burger-btn span:nth-child(2) { width: 80%; margin-left: auto; }
    
    /* === АНІМАЦІЯ БУРГЕРА === */
    .burger-btn span:nth-child(1),
    .burger-btn span:nth-child(3) {
        transition: transform 0.3s ease 0s, background-color 0.3s ease 0s;
    }
    .burger-btn span:nth-child(2) {
        transform: translateX(0); opacity: 1;
        transition: transform 0.3s ease 0.3s, opacity 0.3s ease 0.3s, background-color 0.3s ease 0s;
    }
    .burger-btn.active span:nth-child(2) { 
        transform: translateX(20px); opacity: 0; 
        transition: transform 0.3s ease 0s, opacity 0.3s ease 0s;
    }
    .burger-btn.active span:nth-child(1) { 
        transform: translateY(6px) rotate(45deg); background-color: var(--primary); width: 100%; 
        transition: transform 0.3s ease 0.3s, background-color 0.3s ease 0.3s;
    }
    .burger-btn.active span:nth-child(3) { 
        transform: translateY(-6px) rotate(-45deg); background-color: var(--primary); width: 100%; 
        transition: transform 0.3s ease 0.3s, background-color 0.3s ease 0.3s;
    }

    /* ПОВНОЕКРАННЕ МЕНЮ */
    .mobile-menu-overlay {
        display: block; position: fixed; top: 0; left: 0;
        width: 100%; height: 100vh;
        background-color: rgba(12, 12, 14, 0.98); backdrop-filter: blur(10px);
        z-index: 999; opacity: 0; visibility: hidden;
        transition: opacity 0.4s ease, visibility 0.4s ease;
    }
    .mobile-menu-overlay.active { opacity: 1; visibility: visible; }
    
    .mobile-menu-inner {
        display: flex; flex-direction: column; align-items: center;
        width: 100vw !important; /* Жорстко фіксуємо ширину вікна */
        height: 100%; 
        /* МАГІЯ ТУТ: Стискаємо ВЕСЬ контент меню по 30px з боків. Забороняємо вилазити за межі! */
        padding: 100px 30px 40px !important; 
        box-sizing: border-box !important;
        overflow-x: hidden !important; /* Блокуємо горизонтальний скрол */
        overflow-y: auto;
    }
    
    .mobile-nav { 
        width: 100% !important; 
        margin: 0 !important;
        display: flex; flex-direction: column; margin-bottom: 40px; text-align: left; 
    }

    /* === ВИПРАВЛЕНІ ВІДСТУПИ === */
    .mobile-nav-item, 
    .mobile-nav-header, 
    .nav-title, 
    .mobile-nav-item .cat-text {
        font-size: 18px !important;
        font-weight: 500 !important;
        color: #ffffff !important;
    }

    .mobile-nav-item, 
    .mobile-nav-header {
        text-decoration: none; 
        padding: 20px 0 !important; /* Текст стає врівень з початком лінії */
        margin: 0 20px !important;  /* Відсовуємо саму лінію від країв екрану */
        border-bottom: 1px solid rgba(255,255,255,0.05) !important;
        transition: color 0.3s ease; cursor: pointer;
        width: calc(100% - 40px) !important; /* Робимо лінію коротшою */
        box-sizing: border-box !important;
    }

    /* Статичні посилання */
    .mobile-menu-overlay div[style*="flex-direction: column"] {
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .mobile-nav-header { display: flex; justify-content: space-between; align-items: center; }
    .mobile-nav-header i { font-size: 14px; color: #ffffff; opacity: 0.4; transition: all 0.3s ease; }
    
    .mobile-nav-group.open .mobile-nav-header i { transform: rotate(180deg); color: var(--primary); opacity: 1; }
    .mobile-nav-group.open .nav-title { color: var(--primary) !important; }

    .mobile-submenu { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-in-out; }
    .mobile-nav-group.open > .mobile-submenu { max-height: 1000px; }
    
    /* Внутрішні посилання підменю */
    .mobile-nav-link {
        display: flex; align-items: center; gap: 12px;
        color: rgba(255,255,255,0.8);
        text-decoration: none; 
        font-size: 16px !important; 
        font-weight: 400;
        padding: 15px 0 15px 20px !important; /* Лишаємо невеликий відступ для драбинки */
        margin: 0 20px !important; /* Звужуємо лінію підменю */
        transition: color 0.3s;
        box-sizing: border-box !important;
        width: calc(100% - 40px) !important;
    }
    .mobile-nav-link:hover { color: #ffffff; }
    .menu-icon { font-size: 16px; color: rgba(255,255,255,0.3); width: 20px; text-align: center; }
    .mobile-nav-link:hover .menu-icon { color: #ffffff; }
    
    .submenu-banner {
        width: 100% !important; 
        height: 80px; background-size: cover; background-position: center;
        border-radius: 4px; margin: 10px 0 !important; border: 1px solid rgba(255,255,255,0.1);
        box-sizing: border-box !important;
    }

    /* Кнопка "Зв'язатись" */
    .mobile-btn { 
        width: calc(100% - 40px) !important; /* Підганяємо ширину кнопки під лінії */
        text-align: center; font-size: 16px; padding: 15px; 
        margin: 20px auto !important; 
        box-sizing: border-box !important;
        display: block !important;
    }

    /* Вкладений акордеон мобільного меню */
    .nested-group { border-bottom: none; }
    .nested-header { padding: 15px 15px 15px 35px !important; border-bottom: none !important; }
    .nested-submenu { padding-left: 20px; border-left: 1px solid rgba(255,255,255,0.1); margin-left: 15px; }

    /* КОМПАКТНЕ ІНФО В МОБІЛЬНОМУ МЕНЮ */
    .mobile-cat-info {
        display: flex; align-items: center; gap: 15px;
        background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05);
        border-radius: 6px; padding: 10px 15px; margin: 10px 0 20px 0 !important;
        box-sizing: border-box;
        width: 100% !important;
    }
    .mobile-cat-img-wrap {
        flex-shrink: 0; width: 60px; height: 60px; background: rgba(0,0,0,0.2);
        border-radius: 4px; display: flex; justify-content: center; align-items: center; padding: 5px;
    }
    .mobile-cat-img-wrap img { width: 100%; height: 100%; object-fit: contain; }
    .mobile-cat-desc { flex: 1; font-size: 12px; color: #aaa; line-height: 1.4; }
    .mobile-cat-desc p { margin: 0; }

    /* =========================================
       HERO SECTION (ГОЛОВНИЙ ЕКРАН)
       ========================================= */
    .hero-section {
        height: 100vh !important;
        min-height: 600px;
        display: flex !important;
        flex-direction: column !important;
    }
    
    .hero-container {
        flex-grow: 1; 
        display: flex !important;
        flex-direction: column !important;
        padding-bottom: 120px !important; 
        box-sizing: border-box;
    }
    
    .hero-content {
        margin-top: auto !important; 
        padding-top: 80px; 
        flex-direction: column;
        align-items: flex-start;
        gap: 30px !important;
        width: 100%;
    }
    
    .hero-left { margin-left: 0; padding-left: 20px; }
    .hero-right { max-width: 100%; margin-top: 0; margin-bottom: 0; padding-left: 20px; padding-right: 20px; }
    .hero-line-2 { flex-direction: column; align-items: flex-start; gap: 20px; }


    /* =========================================
   FOOTER
   ========================================= */
    .footer-nav-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .socials-row { 
        justify-content: center; 
    }
}

/* =========================================================
   3. МОБІЛЬНІ ТЕЛЕФОНИ (max-width: 768px)
========================================================= */
@media (max-width: 768px) {
    :root { --grid-offset: 15px; }
    .header-container { padding: 0 calc(var(--grid-offset) + 15px); }
    .logo-img { max-height: 20px; }
    .site-header.scrolled .logo-img { max-height: 16px; }
    .grid-dots { left: -1.5px; gap: 2px; }
    .grid-dots span { width: 4px; height: 4px; }

    /* =========================================
   FOOTER
   ========================================= */
    .footer-container {
        flex-direction: column;
        gap: 40px;
        padding: 0 20px;
    }
    
    .footer-col-logo {
        display: flex;
        justify-content: center;
    }
    
    .footer-nav-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .footer-heading {
        text-align: center;
    }

    .footer-col-contacts {
        align-items: center;
        text-align: center;
    }
    
    .footer-col-actions {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
}

/* =========================================
   РОЗМІР ІКОНОК В МОБІЛЬНОМУ МЕНЮ
========================================= */

/* Іконки 1-го рівня (великі, під текст 18px) */
.mobile-nav-header .nav-title .menu-icon {
    width: 16px !important;
    height: 16px !important;
    object-fit: contain;
    flex-shrink: 0;
}

/* Іконки 2-го рівня та підменю (трохи менші, під текст 16px) */
.mobile-submenu .mobile-nav-link .menu-icon {
    width: 14px !important;
    height: 14px !important;
    object-fit: contain;
    flex-shrink: 0;
}

/* Вирівнювання тексту і заголовків */
.nav-title, .mobile-nav-item, .mobile-nav-link {
    display: flex; align-items: center; gap: 10px;
}




/* Жорстко білий колір для тексту всіх підменю (2-й рівень) */
.mobile-nav-group.nested-group .nav-title,
.mobile-nav-group.nested-group .nav-title span,
.mobile-submenu .mobile-nav-link,
.mobile-submenu .mobile-nav-link span {
    color: #ffffff !important;
}





/* =========================================
   ФІКС МОБІЛЬНОГО МЕНЮ (ІДЕАЛЬНИЙ 2-Й РІВЕНЬ)
========================================= */

/* 1. Вирівнюємо відступи в один ряд для 2-го рівня */
.mobile-menu-inner .nested-header { 
    padding: 15px 0 15px 20px !important; 
    margin: 0 20px !important; 
    border-bottom: none !important; 
    width: calc(100% - 40px) !important;
}

.mobile-menu-inner .mobile-submenu > .mobile-nav-link,
.mobile-menu-inner .mobile-submenu > .no-link {
    padding: 15px 0 15px 20px !important; 
    margin: 0 20px !important; 
    width: calc(100% - 40px) !important;
    display: flex; align-items: center; gap: 10px;
}

/* 2. Робимо шрифти абсолютно однаковими (16px, звичайний) */
.mobile-menu-inner .nested-header .nav-title,
.mobile-menu-inner .nested-header .nav-title span,
.mobile-menu-inner .mobile-submenu > .mobile-nav-link,
.mobile-menu-inner .mobile-submenu > .mobile-nav-link span,
.mobile-menu-inner .mobile-submenu > .no-link,
.mobile-menu-inner .mobile-submenu > .no-link span {
    font-size: 16px !important;
    font-weight: 400 !important;
    color: rgba(255,255,255,0.8) !important;
}

/* 3. При відкритті або наведенні - стає білим */
.mobile-menu-inner .nested-group.open > .nested-header .nav-title,
.mobile-menu-inner .nested-group.open > .nested-header .nav-title span,
.mobile-menu-inner .mobile-submenu > .mobile-nav-link:hover,
.mobile-menu-inner .mobile-submenu > .mobile-nav-link:hover span {
    color: #ffffff !important;
}

/* 4. Налаштування для 3-го рівня (щоб було видно ієрархію) */
.mobile-menu-inner .nested-submenu .mobile-nav-link,
.mobile-menu-inner .nested-submenu .no-link {
    padding: 12px 0 12px 0 !important; 
    margin: 0 0 0 20px !important; 
    width: calc(100% - 20px) !important;
}

.mobile-menu-inner .nested-submenu .mobile-nav-link,
.mobile-menu-inner .nested-submenu .mobile-nav-link span,
.mobile-menu-inner .nested-submenu .no-link,
.mobile-menu-inner .nested-submenu .no-link span {
    font-size: 15px !important;
    font-weight: 400 !important;
    color: rgba(255,255,255,0.6) !important;
}

.mobile-menu-inner .nested-submenu .mobile-nav-link:hover,
.mobile-menu-inner .nested-submenu .mobile-nav-link:hover span {
    color: #ffffff !important;
}