/*
main.css
чистий, сподіваюсь
*/
*{
	font-family: Avanti;
	font-weight: normal;
	text-decoration: none;
}
.main-content{
	min-height: 100%;
	height: auto;
    margin: 0;
    margin-bottom: -60px;
    padding: 1px;
    padding-top: 41px;
    border: 0px solid;
    padding-bottom: 60px;
    background-color: #000000;
}
.footer{
	height: 60px;
	padding-top: 20px;
    padding-right: 40px;
    text-align: right;
}

footer { /* Або .site-footer, #colophon, залежно від твоєї розмітки футера */
    background: linear-gradient(to bottom, #337ab7, #ffffff); /* Градієнт зверху вниз: від #337ab7 до білого */
    color: #ffffff; /* Колір тексту у футері, щоб він був видимим на темному тлі */
    padding: 40px 0; /* Відступи зверху та знизу всередині футера */
    text-align: center; /* Центрування тексту у футері */
    /* Можливо, тобі захочеться додати тінь або інші ефекти */
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1); /* Легка тінь зверху */
}

/* Якщо у футері є посилання, їх також варто стилізувати для видимості */
footer a {
    color: #ffffff; /* Колір посилань білий */
    text-decoration: none; /* Без підкреслення */
    transition: color 0.3s ease; /* Плавний перехід кольору при наведенні */
}

footer a:hover {
    color: #e0e0e0; /* Світліший колір при наведенні */
    text-decoration: underline; /* З підкресленням при наведенні */
}
/* na-gpijaty category style */
/* Стилі для постів категорії "На поїржати" */
.poijaty-post {
    /*background-color: #f8f8f8; */ /* Ледь сірий фон, щоб відрізняти їх */
    background: linear-gradient(to right, #e0f2f7, #ffffff);  /* Якщо хочеш градієнт саме для них */
    border: 1px dashed #ccc; /* Пунктирна рамка */
    padding: 15px 20px;
    margin: 20px 0; /* Відступи від сусідніх постів */
    border-radius: 5px;
    font-style: italic; /* Курсив для тексту */
    color: #337ab7; /* Темно-сірий колір тексту */
    text-align: justify; /* Вирівнювання за ширині */
}
/*.poijaty-post p {*/
.category-na-poijaty p{
    margin-bottom: 0.5em; /* Зменш це значення для меншого проміжку. Спробуй 0.5em або 10px */
    line-height: 0.5;    /* Можливо, захочеш трохи зменшити міжрядковий інтервал */
}
.poijaty-post h2 { /* Приховуємо заголовок, якщо він порожній або є лише кавичкою */
    display: none; /* Приховати заголовок повністю */
    /* Або, якщо там буде кавичка/апостроф, просто стилізуємо його */
    /* font-size: 1.5em; color: #888; */
}

/* Якщо пости "На поїржати" не мають зображень, переконайтеся, що обтікання не впливає */
.poijaty-post img {
    /*display: none; /* Приховуємо зображення в цих постах, якщо їх не повинно бути */
}

/* Оскільки ці пости теж <article>, може бути потрібно скоригувати правило для :first-of-type */
/* Якщо ти хочеш, щоб вони НІКОЛИ не були першими і не мали того ж градієнта */
/*
.site-main article:first-of-type {
    // Вже має виключати пости "На поїржати" через логіку PHP
    // Але якщо хочеш перестрахуватися, можеш додати:
    // &:not(.poijaty-post)
}
*/
/* Стилізація посилання "Більше" */
.more-link { /* Або .read-more, якщо твоя тема використовує його */
    color: #337ab7; /* Бажаний колір посилання */
    text-decoration: none; /* Прибираємо стандартне підкреслення */
    font-weight: bold; /* Можна зробити текст жирним */
    transition: color 0.3s ease-in-out; /* Плавний перехід кольору при наведенні */
}

.more-link:hover {
    color: #ffa500; /* Колір при наведенні (можеш змінити на інший відтінок синього, наприклад, #2a6496) */
    text-decoration: none; /* без підкреслення */
}
/* Це батьківський контейнер для картинки та тексту */
.poijaty-content-wrapper {
    display: flex;
    align-items: flex-start; /* Вирівнюємо елементи по верхньому краю */
    gap: 20px; /* Відстань між картинкою і текстом */
}

/* Це контейнер для "клякси" */
.poijaty-klyaksa {
    /* Ми встановимо висоту і ширину за допомогою JavaScript */
    flex-shrink: 0; /* Запобігаємо стисненню */
    position: relative;
}

/* Це контейнер для тексту */
.poijaty-text {
    flex-grow: 1; /* Дозволяємо цьому блоку займати весь вільний простір */
}