/* --- 1. БАЗОВІ НАЛАШТУВАННЯ --- */
body {
    margin: 0;
    padding: 0;
    font-family: 'Monda', sans-serif;
    line-height: 1.5;
    color: #333;
    background-color: #fff;
}

h1, h2, h3 { color: #2c3e50; margin-top: 20px; }
p { margin-bottom: 15px; text-align: justify; }
a { color: #2980b9; text-decoration: none; }
a:hover { color: #e74c3c; text-decoration: underline; }

/* --- 2. МОВНИЙ ПЕРЕМИКАЧ (lang-map) --- */
#lang-map {
    font-size: 18px;
    position: fixed;
    top: 10%;
    left: 0;
    width: 40px; /* Трохи ширше для комфорту */
    text-align: center;
    z-index: 999;
    background-color: #e8e8e3;
}

.lang ul {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
}

.lang ul li {
    display: block;
    padding: 8px;
    background-repeat: no-repeat;
    background-position: 5px center;
}

.lang ul li:hover { background-color: #e0e6d1; }
.lang ul a { color: #00008B; font-weight: bold; }

/* Прапорці */
.ua { background-image: url('https://ket.in.ua/vet/wp-content/plugins/wpglobus/flags/ua.png'); padding-left: 25px; }
.ru { background-image: url('https://ket.in.ua/vet/wp-content/plugins/wpglobus/flags/ru.png'); padding-left: 25px; }

/* Випадаюче меню (якщо потрібно) */
.lang ul ul { display: none; position: absolute; margin-top: -5px; margin-left: 5px; background: #69e; }
.lang li:hover ul { display: block; }
.lang ul ul a { color: #fff; }

/* --- 3. ВЛАСНІ КЛАСИ КОНТЕНТУ --- */
.titul_text {
    font-family: verdana, sans-serif;
    font-size: 30pt;
    line-height: 100%;
    text-align: center;
    color: #20124d;
    font-weight: bold;
    background-color: #fff;
}

.op_text {
    text-indent: 20px;
    font-family: verdana, sans-serif;
    text-align: justify;
    color: #000;
    line-height: 1.2;
    font-size: 18px;
    background-color: #fff;
}

/* --- 4. СІТКА ТА АДАПТИВНІСТЬ --- */
.grid-container { max-width: 1100px; margin: 0 auto; padding: 0 15px; }
.sidebar { float: right; width: 25%; }
.main-content { float: left; width: 70%; }

@media (max-width: 768px) {
    .sidebar, .main-content { width: 100%; float: none; }
    #lang-map { top: 5%; }
}
/* початок меню */
/* Основний контейнер */
.nav-container { 
    background: linear-gradient(135deg, #2c3e50, #1a252f); 
    padding: 0 20px; 
    border-radius: 8px; /* Округлені краї */
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.main-menu { display: flex; list-style: none; margin: 0; padding: 0; }

/* Пункти меню */
.main-menu > li > a { 
    display: block; 
    padding: 20px 25px; 
    color: #ecf0f1; 
    text-decoration: none; 
    font-weight: 500; 
    transition: all 0.3s ease; 
}

.main-menu > li > a:hover { 
    background: rgba(255,255,255,0.1); 
    color: #f1c40f; /* Золотистий акцент */
}

/* Підменю */
.submenu { 
    display: none; 
    position: absolute; 
    background: #ffffff; 
    width: 250px; 
    box-shadow: 0 10px 20px rgba(0,0,0,0.15); 
    padding: 5px 0; 
    border-radius: 0 0 8px 8px; 
    z-index: 1000;
}

.has-submenu:hover .submenu { display: block; }

.submenu li a { 
    padding: 12px 20px; 
    color: #34495e; 
    text-decoration: none; 
    display: block;
    transition: 0.2s;
}

.submenu li a:hover { 
    background: #f4f7f6; 
    color: #2c3e50; 
    padding-left: 25px; /* Легкий зсув при наведенні */
}

/* Мобільна кнопка */
.menu-mobile-btn { 
    display: none; 
    padding: 15px; 
    color: #fff; 
    cursor: pointer; 
    font-weight: bold; 
    text-transform: uppercase;
}

@media (max-width: 900px) {
    .menu-mobile-btn { display: block; }
    .main-menu { display: none; flex-direction: column; }
    .main-menu.active { display: flex; }
    .main-menu > li { width: 100%; border-top: 1px solid rgba(255,255,255,0.1); }
    .submenu { position: static; width: 100%; background: #ecf0f1; }
}
/* кінець меню */

.skip-link:focus {
    left: 0;
    top: 0;
    background: #000;
    color: #fff;
    padding: 10px;
    z-index: 9999;
}

/* хейдер початок */
/* Шапка сайту */
.vet-header {
    background: #ffffff;
    padding: 50px 20px; /* Збільшили вертикальні відступи для "повітря" */
    border-bottom: 2px solid #e1e8ed;
    display: flex;
    justify-content: center; /* Центруємо по горизонталі */
    align-items: center;     /* Центруємо по вертикалі */
}

.header-container {
    width: 100%;
    max-width: 900px;
    text-align: center;
}

.logo-area h1 {
    margin: 0 0 15px 0; /* Відступ під заголовком */
}

.logo-area h1 a {
    font-family: 'Segoe UI', sans-serif;
    font-size: 38px; /* Трохи більший шрифт для солідності */
    color: #2c3e50;
    text-decoration: none;
    letter-spacing: 3px; /* Збільшили інтервал між літерами */
    text-transform: uppercase;
    transition: 0.3s;
}

.logo-area h1 a:hover {
    color: #3498db; /* Приємний синій акцент */
}

.tagline {
    font-family: 'Segoe UI', sans-serif;
    font-size: 18px; /* Збільшили розмір для читабельності */
    color: #7f8c8d;
    margin: 0;
    line-height: 1.6;
    letter-spacing: 1px;
    border-top: 1px solid #eee; /* Тонка лінія зверху для акценту */
    padding-top: 15px;
}
/* хейдер кінець */


/* --- Скидання для повної ідентичності --- */
.grid-container {
    max-width: 1100px; /* Стандартна ширина контейнера GeneratePress */
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

.grid-parent {
    padding-left: 0;
    padding-right: 0;
}

/* --- Логіка сітки (Grid System) --- */
/* Ці класи дозволяють працювати вашій розмітці */
.grid-75 {
    width: 75%;
    float: left;
    box-sizing: border-box;
}

.tablet-grid-75 {
    width: 75%;
}

.mobile-grid-100 {
    width: 100%;
    float: none;
}

/* Очищення флоатів (важливо для вирівнювання) */
.site-content::after,
.grid-parent::after {
    content: "";
    display: table;
    clear: both;
}

/* --- Внутрішні відступи статті --- */
.inside-article {
    padding: 30px;
    background-color: #fff;
    margin-bottom: 20px;
}

.entry-header {
    margin-bottom: 20px;
}

.entry-title {
    font-size: 30px;
    font-weight: 700;
    margin: 0;
}

/* Адаптивність для планшетів (до 768px) */
@media (max-width: 768px) {
    .tablet-grid-75 {
        width: 100%;
        float: none;
    }
}

/* --- КОМПАКТНИЙ СТИЛЬ КОНТЕНТУ --- */

.entry-content {
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 16px; /* Трохи менший шрифт */
    line-height: 1.5; /* Більш щільний інтервал */
    color: #2c3e50;
    max-width: 800px;
    margin: 0 auto;
    padding: 15px; /* Менше відступів */
}

/* Компактні абзаци */
.entry-content p {
    margin-bottom: 15px;
}

/* Заголовки тепер теж компактніші */
.entry-content h2, .entry-content h3 {
    color: #1a252f;
    margin: 25px 0 15px 0;
    border-left: 3px solid #f1c40f; /* Тонша лінія */
    padding-left: 10px;
    font-size: 22px; /* Менший розмір заголовка */
}

/* Списки з меншим відступом */
.entry-content ul, .entry-content ol {
    margin-bottom: 15px;
    padding-left: 25px;
}

.entry-content li {
    margin-bottom: 5px;
}

/* Зображення тепер менше займають місця */
.entry-content img {
    max-width: 100%;
    margin: 15px 0;
    border-radius: 4px;
}


/* бокове меню */


/* --- СТАЙЛИНГ САЙДБАРУ (ОБ'ЄДНАНИЙ) --- */

.sidebar {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.sites-sidebar-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sites-sidebar-nav li {
    border-bottom: 1px solid #f0f0f0;
}

.sites-sidebar-nav li:last-child {
    border-bottom: none;
}

.sites-sidebar-nav li a {
    display: block;
    padding: 10px 5px;
    color: #34495e;
    text-decoration: none;
    font-size: 14px;
    transition: 0.2s;
}

.sites-sidebar-nav li a:hover {
    color: #e67e22; /* Оранжевий акцент */
    padding-left: 10px;
    background: #fdfaf6;
    border-radius: 4px;
}

/* Адаптивність (це критично важливо!) */
@media (min-width: 768px) {
    .sidebar {
        flex: 0 0 25%; /* Сайдбар збоку */
    }
}

@media (max-width: 767px) {
    .sidebar {
        margin-top: 30px;
        flex: 0 0 100%; /* Сайдбар знизу */
    }
}


/* 1. Батьківський контейнер (обгортка для обох блоків) */
.site-container {
    display: flex; /* Це змушує блоки стати в один ряд */
    flex-wrap: wrap; /* Дозволяє переноситись на мобільних */
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    gap: 20px; /* Відстань між контентом і сайдбаром */
}

/* 2. Основний контент */
.main-content {
    flex: 1; /* Займає весь вільний простір */
    min-width: 300px; /* Щоб не зжимався занадто сильно */
}

/* 3. Сайдбар */
.sidebar {
    flex: 0 0 250px; /* Фіксована ширина сайдбару */
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
}

/* 4. Адаптивність: коли екран вузький (телефони) */
@media (max-width: 768px) {
    .site-container {
        flex-direction: column; /* Ставить блоки один під одного */
    }
    .sidebar {
        flex: 0 0 100%; /* На мобільних сайдбар на всю ширину */
    }
}

/* футер */

.site-footer {
    text-align: center;
    padding: 30px;
    background: #2c3e50;
    color: #fff;
    margin-top: 50px;
}

.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 10px 15px;
    background: #e67e22;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}








/* Батьківська обгортка для контенту та сайдбару */
.site-wrapper {
    display: flex;
    flex-wrap: wrap; /* Дозволяє перенос на мобільних */
    max-width: 1200px;
    margin: 0 auto;
    gap: 30px; /* Відстань між ними */
    padding: 20px;
}

/* Контент займає 70% */
.main-content {
    flex: 1 1 70%; 
    min-width: 300px; /* Щоб не став занадто вузьким */
}

/* Сайдбар займає 25% */
.sidebar {
    flex: 1 1 250px; /* Бере мінімум 250px, але може рости */
    max-width: 300px; /* Обмежуємо, щоб не був занадто широким */
}

/* На мобільних ставимо один під одним */
@media (max-width: 768px) {
    .site-wrapper {
        flex-direction: column;
    }
    .main-content, .sidebar {
        flex: 1 1 100%;
        max-width: 100%;
    }
}