/* ==========================================================================
   ОБ'ЄДНАНИЙ МЕДІА-ЗАПИТ ДЛЯ ЕКРАНІВ МЕНШЕ 992px (ПЛАНШЕТИ ТА МОБІЛЬНІ)
   ========================================================================== */
@media (max-width: 991px) {
    
    /* --- 1. КНОПКА МОБІЛЬНОГО БУРГЕР-МЕНЮ --- */
    #mobile-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        box-sizing: border-box;
        margin: 15px 0;
        padding: 12px 20px;
        background-color: #222222 !important;
        color: #ffffff !important;
        border: 2px solid #ffd700;
        font-size: 16px;
        font-weight: bold;
        letter-spacing: 1px;
        cursor: pointer;
        border-radius: 4px;
        gap: 12px;
    }

    /* Анімаційні смужки всередині бургера */
    .burger-icon {
        display: inline-block;
        width: 20px;
        height: 14px;
        position: relative;
    }
    .burger-icon span {
        display: block;
        position: absolute;
        height: 2px;
        width: 100%;
        background: #ffffff;
        border-radius: 2px;
        left: 0;
        transition: .25s ease-in-out;
    }
    .burger-icon span:nth-child(1) { top: 0px; }
    .burger-icon span:nth-child(2) { top: 6px; }
    .burger-icon span:nth-child(3) { top: 12px; }

    /* Ефект хрестика (X) при активному меню */
    #mobile-menu-toggle.open .burger-icon span:nth-child(1) { top: 6px; transform: rotate(135deg); }
    #mobile-menu-toggle.open .burger-icon span:nth-child(2) { opacity: 0; left: -60px; }
    #mobile-menu-toggle.open .burger-icon span:nth-child(3) { top: 6px; transform: rotate(-135deg); }


    /* --- 2. ТРАНСФОРМАЦІЯ ГОЛОВНОГО МЕНЮ (Вертикальний стовпчик) --- */
    /* --- 2. ТРАНСФОРМАЦІЯ ГОЛОВНОГО МЕНЮ (Вертикальний стовпчик) --- */
    .side-menu.m-left-side {
        display: none; 
        width: 100% !important;
        float: none !important;
        clear: both !important;
        box-sizing: border-box;
        background: #222222 !important; /* Базовий фон контейнера */
        opacity: 1 !important;
        margin-bottom: 20px;
        padding: 0 !important;
    }
    
    .main-menu {
        width: 100% !important;
        background: #222222 !important;
    }
    
    .main-menu ul, 
    .main-menu nav {
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
        width: 100% !important;
        background: #222222 !important;
        opacity: 1 !important;
    }
    
    .main-menu ul li {
        width: 100% !important;
        float: none !important;
        display: block !important;
        background-color: #222222 !important; /* Фарбуємо самі комірки li */
    }
    
    /* Фарбуємо ВСІ посилання в меню, включаючи головні */
    .main-menu ul li a,
    .main-menu ul > li > a {
        display: block !important;
        padding: 15px 20px !important;
        color: #ffffff !important;
        background: #222222 !important; /* Суцільний непрозорий колір замість прозорого */
        background-color: #222222 !important; 
        border-bottom: 1px solid #333333 !important;
        text-align: left !important;
        box-sizing: border-box !important;
        opacity: 1 !important;
        position: relative;
        z-index: 10;
    }


    /* --- 3. ОНОВЛЕНЕ ПІДМЕНЮ (Абсолютна непрозорість) --- */
    .main-menu ul li ul, 
    .main-menu .sub-menu {
        display: none !important; 
        position: static !important;
        background: #1a1a1a !important; /* Трохи темніший фон для внутрішніх списків */
        opacity: 1 !important; /* Повністю прибираємо прозорість */
        visibility: visible !important;
        box-shadow: none !important;
        padding: 0 !important;
        width: 100% !important;
    }
    
    /* Показуємо підменю, коли jQuery перемикає його через inline-стилі */
    .main-menu ul li ul[style*="display: block"], 
    .main-menu .sub-menu[style*="display: block"] {
        display: block !important;
        opacity: 1 !important;
    }
    
    .main-menu ul li ul li a {
        padding-left: 40px !important; /* Візуальний зсув підпунктів вправо */
        background-color: #1a1a1a !important; /* Робимо фон посилань підменю непрозорим */
        color: #ffffff !important;
        opacity: 1 !important;
    }
    
    /* Золотиста стрілочка вниз для батьківських категорій */
    .main-menu ul li.m-has-submenu > a::after {
        content: ' ▼';
        font-size: 10px;
        float: right;
        color: #ffd700;
    }


    /* --- 4. АДАПТАЦІЯ ПАНЕЛІ ДОСТУПНОСТІ --- */
    #accessibility-panel {
        padding: 10px;
        font-size: 14px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
    #accessibility-panel .font-controls {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
    }


    /* --- 5. СКИДАННЯ СІТКИ ДЛЯ ОСНОВНОГО КОНТЕНТУ САЙТУ --- */
    .col-md-9.middle-column.col-md-push-3,
    .col-md-3.left-column.col-md-pull-9 {
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        float: none !important;
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .c-container .row {
        display: flex;
        flex-direction: column;
    }
    .middle-column {
        order: 1;
    }
    .left-column {
        order: 2;
        margin-top: 30px;
    }

    .vc_row-fluid [class*="vc_col-"] {
        width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }


    /* --- 6. АДАПТАЦІЯ ПІДВАЛУ (FOOTER) --- */
    #footer .footer-top .row,
    #footer .footer-top .links .row {
        display: flex;
        flex-direction: column;
        text-align: center;
    }
    #footer .col-md-8, 
    #footer .col-md-4, 
    #footer .col-sm-4 {
        width: 100% !important;
        margin-bottom: 20px;
        padding: 0 15px;
    }
    .footer-bottom {
        text-align: center;
        padding: 15px 0;
    }
}

/* ==========================================================================
   МЕДІА-ЗАПИТ ДЛЯ СМАРТФОНІВ (МЕНШЕ 576px)
   ========================================================================== */
@media (max-width: 575px) {
    .parahold {
        padding: 15px;
        font-size: 16px;
        text-align: center;
    }
    #page-content {
        word-wrap: break-word;
        overflow-x: hidden;
    }
}