/*
Theme Name: My Theme
Author: Dima
Version: 1.0
*/

*,
*::after,
*::before {
	box-sizing: border-box;
}

:root {
	--fone: #eee;
	--green: #499836;
	--black: #000;
	--white: #fff;
}

html #wpadminbar {
    position: fixed !important;
}

a {
	color: inherit;
}

img {
	vertical-align: center;
}

body {
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	font-family: "Roboto", sans-serif;
	background-color: var(--fone);
	color: var(--black);
}

.container {
    width: 100%;
	max-width: 1460px;
	padding: 0 15px;
	margin: 0 auto;
}

.content-wrapper {
    display: grid;
    grid-template-columns: 460px 1fr;
    gap: 30px;
    align-items: start;
}

.category-label {
	display: inline-block;
	background-color: var(--green);
	padding: 5px;
	
	color: var(--white);
	font-weight: 700;
	font-size: 10px;
	
	border-radius: 5px;
	text-decoration: none;
	text-transform: uppercase;
	
}


/* Кнопка "Редагувати" */
.edit-link-top,
.edit-link {
    display: inline-flex;
    align-items: center;
    background-color: #212529;
    color: #fff !important;
    padding: 6px 14px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
}

.edit-link:hover {
    background-color: #c8e6c9;
}

#dateTime {
	font-weight: 700;
	font-size: 18px;
}

/* Налаштування для 3-х колонок (як на скріншоті) */
.related-posts-box .missed-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 15px;
    margin-top: 15px;
}

/* Стиль білого фону для всієї правої колонки, щоб блоки не розліталися */
.full-post-content {
    display: flex;
    flex-direction: column;
    gap: 30px; /* Відступ між статтею, пов'язаними та коментарями */
}

/* Картка пов'язаного запису (трохи менша висота для 3-х колонок) */
.related-posts-box .missed-card {
    height: 200px;
    border-radius: 4px;
}

/* Маленька кнопка редагувати всередині картки */
.mini-edit-btn {
    border: 1px solid var(--green);
    color: #fff;
    padding: 2px 8px;
    font-size: 10px;
    text-decoration: none;
    border-radius: 4px;
    background: rgba(0,0,0,0.4);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.socials-svg {
    display: flex;
    gap: 12px;
}

.social-link {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: transform 0.2s, filter 0.2s;
}

.social-link svg {
    width: 22px;
    height: 22px;
    fill: #fff; /* Колір самої іконки всередині */
}

/* Кольори фону як на скріншоті */
.icon-fb { background-color: #1877F2; }
.icon-yt { background-color: #FF0000; }
.icon-ig { 
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); 
}

.social-link:hover {
    transform: translateY(-3px);
    filter: brightness(1.1); /* Трохи підсвічуємо при наведенні */
}

#sbi_images {
	padding: 0 12px!important;
}


/* Робимо список горизонтальним: фото зліва, текст справа */
.wp-block-latest-posts.has-thumbnails li {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    align-items: flex-start;
}

/* Налаштування розміру фото */
.wp-block-latest-posts__featured-image img {
    width: 120px !important;
    height: 80px !important;
    object-fit: cover; /* Щоб фото не розтягувалося */
    border-radius: 6px;
}

/* Стиль для заголовка та тексту поруч із фото */
.wp-block-latest-posts__post-title {
    font-weight: 700;
    font-size: 14px;
    margin-top: 0;
    display: block;
}

.wp-block-latest-posts__post-excerpt, 
.wp-block-latest-posts__post-full-content {
    margin-bottom: 1em;
    margin-top: 0.5em;
    max-width: 400px; /* Задайте потрібне вам значення тут */
    width: 100%;       /* Дозволяє тексту бути вужчим на малих екранах */
    line-height: 1.6;  /* Покращує читабельність при малій ширині */
}

.post-share-actions {
    display: flex;
    gap: 12px;
    margin: 30px 0;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none !important;
    font-weight: 700;
    font-size: 13px;
    color: #fff !important;
    transition: transform 0.2s;
}

.share-btn:hover { transform: translateY(-2px); }

.fb-share { background-color: #1877F2; }
.print-pdf { background-color: #6c757d; }

.share-btn .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.widget {
	padding: 0 10px;
}

/* Стиль для звичайного стану кнопок */
.wp-block-button__link.wp-element-button {
    transition: all 0.3s ease-in-out !important; /* Плавність анімації */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Легка початкова тінь */
}

/* Ефект при наведенні (Hover) */
.wp-block-button__link.wp-element-button:hover {
    background-color: #3e4856 !important; /* Колір стає трохи світлішим */
    transform: translateY(-3px); /* Кнопка піднімається на 3 пікселі вгору */
    box-shadow: 0 6px 12px rgba(0,0,0,0.2); /* Тінь стає більшою (ефект об'єму) */
    text-decoration: none !important; /* Прибираємо підкреслення тексту */
}

/* Ефект при натисканні (Active) */
.wp-block-button__link.wp-element-button:active {
    transform: translateY(-1px); /* Кнопка трохи опускається при кліку */
}

@media screen and (max-width: 1500px) {
	.content-wrapper {
		display: grid;
		grid-template-columns: 420px 1fr;
	}
	
}

@media screen and (max-width: 1320px) {
	.content-wrapper {
		display: grid;
		grid-template-columns: 400px 1fr;
	}
	
}

@media screen and (max-width: 1200px) {
	.content-wrapper {
		display: grid;
		grid-template-columns: 350px 1fr;
	}
	
}

@media screen and (max-width: 1024px) {
	.content-wrapper {
		display: grid;
		gap: 15px;
		grid-template-columns: 300px 1fr;
	}
	
	#dateTime {
		font-size: 14px;
	}
	
}

@media screen and (max-width: 1000px) {
	.content-wrapper {
		display: grid;
		grid-template-columns: 1fr;
	}
	
}

@media screen and (max-width: 730px) {
	.socials-colored-svg {
		display: none!important;
	}
	
	#dateTime {
		display: none!important;
	}
	
}

@media screen and (max-width: 568px) {
    /* Робимо таблицю блоком, щоб вона не стискалася */
    table, tbody, tr, td {
        display: flex !important;
		flex-direction: column;
        width: 100% !important;
        height: auto !important;
    }

    /* Ховаємо межі рядків, залишаємо тільки загальну рамку картки */
    tr {
        margin-bottom: 20px;
        border: 2px solid #499836 !important;
        border-radius: 8px;
        padding: 10px;
        background: #fff;
    }

    td {
        border: none !important;
        text-align: center !important;
        padding: 5px 0 !important;
    }

    /* Стилізація заголовків сесій всередині карток */
    td h5 {
        font-size: 16px !important;
        margin: 10px 0 !important;
    }

    /* Модальне вікно на мобільних */
    .sfm-content {
        flex-direction: column; /* Список файлів зверху, перегляд знизу */
        height: 95vh;
    }

    .sfm-left {
        width: 100%;
        height: 40%;
        border-right: none;
        border-bottom: 1px solid #ddd;
    }

    .sfm-right {
        width: 100%;
        height: 60%;
    }
	
	.h5__border {
		text-align: center!important;
	}
	
	.h5__border span {
		font-size: 15px !important;
	}
}

@media screen and (max-width: 450px) {
	.content-wrapper {
		display: grid;
		grid-template-columns: 1fr;
	}
	
}