/* ========================================= */
/* 1. ШАПКА З МАЯКОМ                         */
/* ========================================= */
.container-header {
    background-color: #ffffff !important; 
    background-image: url('/images/site/head.jpg') !important; 
    background-repeat: no-repeat !important;
    background-position: center top !important; 
    background-size: min(100%, 1320px) 100% !important; 
    min-height: 215px !important; 
    border-bottom: none !important;
    box-shadow: none !important;
    position: relative !important; 
}

/* ========================================= */
/* 2. ЛІВЕ МЕНЮ (ЗМЕНШУЄМО "ЛАПТІ")          */
/* ========================================= */
.container-sidebar-left .mod-menu {
    display: block !important; 
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

.container-sidebar-left .mod-menu li {
    margin-bottom: 3px !important; 
    padding: 0 !important;
}

.container-sidebar-left .mod-menu li a {
    display: block !important;
    background-color: #dcdcdc !important; 
    color: #000000 !important; 
    padding: 8px 12px !important; /* РОБИМО ВІДСТУПИ МЕНШИМИ */
    text-decoration: none !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important; /* ЗМЕНШУЄМО ШРИФТ МЕНЮ */
    transition: background-color 0.2s !important;
    border-radius: 0 !important; 
    margin: 0 !important;
}

.container-sidebar-left .mod-menu li.current > a,
.container-sidebar-left .mod-menu li.active > a,
.container-sidebar-left .mod-menu li a:hover {
    background-color: #4369fe !important; 
    color: #ffffff !important; 
}

/* ========================================= */
/* 4. КРАСИВИЙ ТЕКСТ У ШАПЦІ                 */
/* ========================================= */
.container-header .navbar-brand {
    position: absolute !important;
    right: 18% !important; /* ОСЬ ЦЯ ЦИФРА РУХАЄ ТЕКСТ ВЛІВО/ВПРАВО */
    left: auto !important; 
    top: 45% !important; 
    transform: translateY(-50%) !important; 
    text-align: center !important; 
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 10 !important;
    max-width: 600px !important;
}

/* Ловимо назву сайту за будь-який клас, який їй дасть Cassiopeia */
.container-header .site-title,
.container-header .brand-logo {
    font-family: "Segoe Print", "Comic Sans MS", cursive !important;
    font-size: 34px !important;
    color: #000000 !important; 
    font-style: italic !important;
    text-decoration: none !important;
    display: block !important;
    line-height: 1.2 !important;
}

.container-header .site-description {
    font-family: "Segoe Print", "Comic Sans MS", cursive !important;
    font-size: 22px !important;
    color: #ff0000 !important; 
    font-style: italic !important;
    display: block !important;
    margin-top: 5px !important;
    line-height: 1.2 !important;
}

/* ========================================= */
/* 5. ТЕКСТ СТАТЕЙ (ПЕРЕБИВАЄМО СТАРІ СТИЛІ) */
/* ========================================= */
/* Примусово змушуємо всі теги всередині статті стати 16px */
.com-content-article__body,
.com-content-article__body p,
.com-content-article__body span,
.com-content-article__body li {
    font-family: Arial, Helvetica, sans-serif !important; 
    font-size: 16px !important; 
    line-height: 1.5 !important; 
    color: #000000 !important; 
}

p {
    margin-bottom: 12px !important;
}

h1, h2, h3, h4 {
    color: #000000 !important;
    line-height: 1.3 !important;
    margin-top: 15px !important;
    margin-bottom: 10px !important;
}
/* ========================================= */
/* 6. МОБІЛЬНЕ МЕНЮ ТА ПРИХОВУВАННЯ ЗАЙВОГО  */
/* ========================================= */

/* --- А. НА КОМП'ЮТЕРІ --- */
@media (min-width: 992px) {
    /* Жорстко вбиваємо верхнє меню на великих екранах, щоб не лізло на маяк */
    .container-nav {
        display: none !important;
    }
}

/* --- Б. НА МОБІЛЬНОМУ (ТЕЛЕФОНИ І ПЛАНШЕТИ) --- */
@media (max-width: 991px) {
    /* 1. Прибираємо маяк з шапки */
    .container-header {
        background-image: none !important;
        min-height: auto !important;
        padding: 10px !important;
    }
    
    /* 2. Ховаємо текст "Дарія Дзюба", щоб не розлазив екран */
    .container-header .navbar-brand {
        display: none !important;
    }
    
    /* 3. Ховаємо старе ліве меню */
    .container-sidebar-left {
        display: none !important;
    }
    
    /* 4. Контейнер нового меню */
    .container-nav {
        display: block !important;
        background-color: #ffffff !important; 
        padding: 10px !important;
    }
    
/* 5-6. КНОПКА ГАМБУРГЕРА (Бронебійний варіант) */
    .navbar-toggler {
        display: inline-block !important;
        background-color: #ffffff !important;
        border: 2px solid #4369fe !important; 
        border-radius: 5px !important;
        width: 50px !important;  /* Фіксована ширина кнопки */
        height: 40px !important; /* Фіксована висота кнопки */
        
        /* Малюємо смужки прямо на самій кнопці */
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%234369fe' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
        background-size: 26px 26px !important; /* Розмір самих смужок */
        background-repeat: no-repeat !important;
        background-position: center !important;
    }
    
    /* Жорстко ховаємо всі внутрішні елементи, щоб не розмножувалися */
    .navbar-toggler span,
    .navbar-toggler-icon,
    .navbar-toggler::before,
    .navbar-toggler::after {
        display: none !important;
    }
    
    /* Фарбуємо в синій, якщо це псевдоелемент */
    .navbar-toggler span::before {
        color: #4369fe !important;
    }

    /* 7. ВИВОДИМО ТЕКСТ МЕНЮ З ТІНІ (робимо чорним) */
    .container-nav .mod-menu li a,
    .container-nav .metismenu li a {
        color: #000000 !important; /* Чорний текст */
        font-size: 18px !important; /* Збільшений шрифт для зручного натискання пальцем */
        padding: 12px 5px !important;
        border-bottom: 1px solid #eeeeee !important; /* Тонка лінія-розділювач між пунктами */
        display: block !important;
        text-decoration: none !important;
        background-color: transparent !important;
    }
    
    /* Синій колір при натисканні на пункт меню */
    .container-nav .mod-menu li a:hover,
    .container-nav .metismenu li a:hover,
    .container-nav .mod-menu li.active > a {
        color: #4369fe !important;
    }
}
/* ========================================= */
/* 7. ФУТЕР (НИЖНЯ ЧАСТИНА САЙТУ)            */
/* ========================================= */
.container-footer {
    background-color: #99CCFF !important; 
    background-image: none !important; 
    
    /* --- ШИРИНА --- */
    width: 100% !important;
    max-width: 1350px !important; 
    margin: 0 auto !important; 
    
    /* --- УЛЬТРАТОНКА ВИСОТА --- */
    padding: 5px 0 !important; /* Тільки 5 пікселів зверху і знизу */
    
    /* Вбиваємо гріди/флекси шаблону, щоб він нас слухався */
    display: block !important; 
    text-align: center !important; 
}

/* Жорстко вбиваємо УСІ невидимі коробки Joomla (особливо grid-child) */
.container-footer > div,
.container-footer .grid-child,
.container-footer .moduletable,
.container-footer .mod-custom,
.container-footer .custom,
.container-footer .card,
.container-footer .card-body {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    width: 100% !important;
    display: block !important; /* Ламаємо сітку */
    text-align: center !important; /* Примусово по центру */
}

/* Сам текст */
.container-footer p {
    margin: 0 auto !important; /* НУЛЬ відступів */
    padding: 0 !important;
    line-height: 1.2 !important; 
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important; 
    color: #000000 !important; 
    text-align: center !important;
    display: inline-block !important; /* Гарантує центрування */
}

/* Посилання */
.container-footer a {
    color: #0000ee !important; 
    text-decoration: underline !important;
}

.container-footer a:hover {
    text-decoration: none !important;
}