/*   
Theme Name: TemaKladovki
Theme URI: https://cyberworkers.ru
Version: 1.0
Tags: clean, development, html5
Description: Адаптивная тема
Author: Дмитрий Панкратов (vivado@bk.ru)
Author E-mail: vivado@bk.ru
Author Phone: +7 (905) 550-55-61
*/

/* === Ядро WordPress === */
img.alignright { float: right; margin: 5px 0 20px 20px; }
img.alignnone { margin: 5px 0px 10px 0; }
img.alignleft { float: left; margin: 5px 20px 20px 0; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { background: #fff; border: 1px solid #f0f0f0; max-width: 96%; padding: 5px 3px 10px; text-align: center; }
.wp-caption.alignnone { margin: 5px 20px 20px 0; }
.wp-caption.alignleft { margin: 5px 20px 20px 0; }
.wp-caption.alignright { margin: 5px 0 20px 20px; }
.wp-caption img { border: 0 none; height: auto; margin: 0; max-width: 98.5%; padding: 0; width: auto; }
.wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; margin: 0; padding: 0 4px 5px; }
.screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; }
.screen-reader-text:focus {	clip: auto !important; display: block; font-size: 14px; height: auto; left: 5px; line-height: normal; text-decoration: none; top: 5px; width: auto; z-index: 999; }
.hide-microrazmetka, .hide { display: none; } /* скрываем поля микроразметки */

a img.alignright:hover, a img.alignnone:hover, a img.alignleft:hover, a img.aligncenter:hover { border-radius: 10px; cursor: zoom-in; }

/* === Стили для сайта === */
*{ 
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

/* Подключаем шрифт по ссылке Google Fonts */
/* Раскоментить для резервного подключения */
/*
@font-face {
    font-family: 'PTSans Regular';
    src: url('/wp-content/themes/ABTheme/fonts/PTSans-Regular.ttf') format("truetype");
    font-weight: normal; font-style: normal;
}
*/

html { -webkit-font-smoothing: antialiased; }
body { margin: 0; padding: 0; font-family: 'PT Sans', sans-serif; }

/* -- Объекты для плавной анимации -- */
a, 
.btn, .green-btn,
img {
	-webkit-transition: all 0.3s ease-in-out 0s;
	-moz-transition: all 0.3s ease-in-out 0s;
	-o-transition: all 0.3s ease-in-out 0s;
	-ms-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s;
}

/* -- Вспомогательное -- */
.all-center { text-align: center; }
.all-left { text-align: left; }
.all-right { text-align: right; }
.clear { clear: both; }
.grid { display: grid; }
.flex { display: flex; flex-wrap: wrap; }
.block-inline { display: inline-table; }

.wrapper { padding: 50px 0; }

.bredhr { position: fixed; width: 100%; background-color: #fff; padding: 5px; box-shadow: 0 0 10px #000; top: 0; }
.bredhr .max-width { display: flex; gap: 20px; justify-content: center; }
.bredhr .grey-btn { width: 150px; text-align: center; background-color: #eee; line-height: 42px; display: block; }
.bredhr .grey-btn:hover { opacity: 0.5; }

.pulse-btn {
    display: inline-block;
    padding: 0px 15px;
	line-height: 42px; 
    color: white;
    background-color: #f30011; 
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    /* Применяем анимацию */
    animation: pulse 1.5s infinite ease-in-out; /* Название, длительность, повторение, функция сглаживания */
}

/* Определение ключевых кадров анимации */
@keyframes pulse {
    0% {
        transform: scale(1); /* Исходный размер */
        box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.7); /* Исходная тень */
    }
    50% {
        transform: scale(1.05); /* Кнопка немного увеличивается */
        box-shadow: 0 0 0 10px rgba(52, 152, 219, 0); /* Тень расширяется и исчезает */
    }
    100% {
        transform: scale(1); /* Возвращается к исходному размеру */
        box-shadow: 0 0 0 0 rgba(52, 152, 219, 0); /* Тень исчезает */
    }
}

.video__content img { width: 100%; }


/* --- Максимальная ширина контента --- */
.max-width { margin: 0 auto; padding: 0 15px; }

/* --- Шапка / подвал --- */
header, footer { width: 100%; height: auto; display: block; background-color: #eee; }
header > .flex, footer > .flex { height: 100px;  align-items: center; }
header > .flex { justify-content: space-between; }

.wrapper { min-height: calc(100vh - 200px); } /* прижимаем подвал к низу */

header { display: none; }

.header-logo-block, 
.header-menu-contact-block { display: flex; align-items: center; }

.logo { margin: 0 auto; }
.header-logo-block .gold { font-weight: 600; padding-left: 8px; }
.header-logo-block .grey { text-align: right; }

/* --------- Главное меню --------- */
.menu-block {	padding: 0; }

.menu { display: block; padding: 0; margin: 0; }
.menu ul {  padding: 0; margin: 0; }
.menu li { display: inline-block; position: relative; z-index: 100; padding: 0px; }
.menu li:first-child { margin-left: 0; }

/* -- Пункты меню -- */
.menu li a, 
.menu ul li a { font-family: 'PT Sans', sans-serif; text-transform: lowercase; display: block; text-align: center; font-size: 16px; line-height: 16px; color: #aeb0b4; width: auto; padding: 0px 5px; }
.menu li a:hover { color: #fff; }

/* -- Мобильное меню (выезжающее слева) -- */
.hidden-menu-left { 
	display: block; position: fixed; margin: 0; box-sizing: border-box; width: 200px; height: 100%; top: 0px;  -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; 
	background-color: #fff; z-index: 1000; background: linear-gradient(45deg, #aaa 0, #eee 30%, #eee 60%, #aaa 100%);
}
.hidden-menu-left { left: -200px; transition: left .2s; }
.mobile-menu { padding: 10px 20px; }
.mob-menu { list-style: none; margin: 0; padding: 0; }
.close-menu { position: relative; left: 140px; }

/* Чекбоксы: */
input#checkmenu1, input#checkmenu2 { display: none; }

/* Кнопка-бургер: */
.btn-menu { position: absolute; top: 10px; cursor: pointer; z-index: 3; -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; }
.btn-menu.left { left: 10px; transition: left .23s; }


/* CSS3-селекторы позволяют нам определять состояние чекбокса и применять, 
в зависимости от этого те или иные свойства для соседних элементов :checked ~.
В данном примере мы при «чекнутом» инпуте сдвигаем кнопку меню .hidden-menu-ticker:checked ~ .btn-menu влево на X пикселей, 
меню до левого края .hidden-menu-ticker:checked ~ .hidden-menu. */

input#checkmenu1:checked ~ .hidden-menu-left { left: -200px; transition: left .2s; }
input#checkmenu2:checked  ~ .hidden-menu-left { left: 0px; transition: left .2s; }
input#checkmenu2:checked ~ .btn-menu.left { left: 10px; }

@media (max-width: 991px) {
	.desktop-menu { display: none; }
	.mob-menu li a { line-height: 34px; width: 100%; display: block; color: #000; font-weight: bold; }
}
@media (min-width: 992px) {
	.mobile-menu, #touch-menu { display: none; }
	.menu-block .desktop-menu { text-align: center; display: block; }
}
@media (min-width: 992px) and (max-width: 1023px) {
	.menu li a { padding: 0px 8px; }
}
/* --------- END Главное меню --------- */

/* --- Баннер --- */
/*
.banner { background-size: cover; background-image: url(/wp-content/themes/ABTheme/img/banner.jpg); }
#page404.banner { background-image: url(/wp-content/themes/ABTheme/img/banner404.jpg); }
*/

.sdana, .svobodna { text-align: center; margin-bottom: 10px;}
.sdana { background-color: #eee; color: #ff0000; }
.svobodna { background-color: green; color: #fff; }
.sdana span, .svobodna span { font-size: 30px; }
.sdan  { filter: opacity(0.5); }

/* --- Контент --- */
.content p { font-size: 18px; margin: 0 0 10px 0; }

.content ul, .content ol { margin-bottom: 30px; }
.content ul li, .content ol li { font-size: 18px; line-height: 18px; margin: 0 0 10px 0; color: #345c7a; }

h1, h2, h3, h4 {  font-weight: 400; }
h1, h2 { font-style: italic; }

h1 { font-size: 38px; text-align: center; background-color: #cfe9c8; }
h2 { font-size: 38px; }
h3, article h3 { font-size: 26px; }
h4 { font-size: 20px; }

a, a:link, a:visited, a:hover, a:focus { text-decoration: none; }
.content a:hover, .anons a:hover {  }

.green-btn { background-color: #619753; color: #fff; line-height: 48px; text-align: center; display: block; width: 290px; border-radius: 10px; }
.green-btn:hover { background-color: #cfe9c8; color: #000; }

/* -- Страница Кладовки -- */
#opisanie .grid { grid-template-columns: 460px auto; gap: 50px; }
.klad-img img { width: 100%; }
.klad-img img:hover,
.thumbnail img:hover  { opacity: 0.8; }

.klad-img .contacts-block { background-color: #cfe9c8; padding: 10px 20px; text-align: center; margin-bottom: 5px; }
.klad-img .contacts-block h3 { margin: 0 0 10px 0; }
.klad-img .contacts-block .flex,  .prev-contacts .flex { gap: 10px; align-items: center; justify-content: center; }
.phone { color: #000; font-size: 20px; font-weight: 600; }
.phone:hover { color: #619753; }

.social img { width: 32px; height: 32px; }
.social img:hover { transform: rotate(30deg); }

.prev-contacts { display: flex; align-items: center; margin-top: 25px; gap: 20px; }
.prev-contacts .ramka { border: 1px solid; padding: 5px 10px; border-radius: 10px; width: 290px; }

#gallery .flex { gap: 10px; justify-content: space-around; }

.katalog .grid { grid-template-columns: 500px auto; margin-bottom: 20px; }


/* -- Статьи / Записи -- */
.meta { margin: 0 0 20px 50px; }
.meta .n-tags { font-size: 14px; font-style: italic; margin: 5px 0; }

.category-articles h3 a, .category-articles h3 a:hover,
.image-block a, .image-block a:hover,
.post-img a, .post-img a:hover { font-weight: bold; border-bottom: none; color: transparent; }

.image-block img { border: 1px solid #aeb0b4; }
.image-block img:hover { border-color: #f4b449; }
.image-block { margin-bottom: 20px; }

/* -- Подвал -- */
footer > .flex { justify-content: center; }


/* -- Адаптация по разные экраны -- */
@media (max-width: 767px) {
	#opisanie .grid, .katalog .grid { display: flex; flex-wrap: wrap; }
	.katalog .grid img.alignnone { margin: 0 auto 10px auto; }
	.katalog .grid .images { text-align: center; }
	.prev-contacts { flex-wrap: wrap; }
	.bredhr .grey-btn, .pulse-btn { font-size: 12px; }
	.content p { font-size: 16px; }
}
@media (min-width: 1280px) {
	.max-width { width: 1280px; }
}