/*   
Theme Name: UrokTheme
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 20px 20px 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; }
a img.alignright:hover, a img.alignnone:hover, a img.alignleft:hover, a img.aligncenter:hover { border-radius: 10px; cursor: zoom-in; }
.hidden, .hidden-block { display: none; }

/* === Цвета и шрифт === */
:root {
	--grey: #777;
	--light-grey: #eee;
	--orange: #ffd967;
	--light-owl: #e7f1f9;
	--owl: #bac7d3;
	--owl2: #9fc1e1;
	--black: #000;
	--red: #ff0000;
	--headercolor: #ecdfc5;
	--foncolor: #fbf8f2;
	--font: 'Fira Sans Condensed';
}

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

html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body { margin: 0; padding: 0; overflow-x: hidden; font-family: var(--font); color: var(--grey); }

/* -- Объекты для плавной анимации -- */
a, 
.autorize a:hover, .non-autorize div,
.red-btn,
.image,
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; }
.bold { font-weight: bold; }
.red-link {  cursor: pointer; color: var(--red); text-decoration: none; }
.red-link:hover { border-bottom: 1px dashed var(--red);}
.black-link { cursor: pointer; color: var(--black); width: fit-content; border-bottom: 1px dashed transparent;  }
.black-link:hover { border-bottom: 1px dashed var(--black); }
.red { color: var(--red); }
.orange-btn { width: 100%; max-width: 280px; line-height: 44px; height: 44px; display: block; box-sizing: border-box; border-radius: 10px; text-align: center; font-weight: 600; font-size: 16px; cursor: pointer; }
.orange-btn { background: var(--orange); border: 1px solid var(--orange); color: var(--black); }
.orange-btn:hover { background: transparent; }
.ramka { text-align: center; border: 1px solid red; border-radius: 10px; max-width: fit-content; margin: 10px auto; padding: 10px 20px; }
.ramka .orange-btn { margin: 0 auto; }
.no-border { border: none!important; }

.instrukcija a { display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--black); }
.instrukcija a span {display: block; font-size: 16px; margin-top: 5px; }
.instrukcija .orange-btn { margin: 20px auto; }

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

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

/* --- Шапка / подвал --- */
header, footer { width: 100%; height: auto; display: block; background-color: var(--headercolor); }
.fixed-header { position: fixed; }

header { box-shadow: 0 0 10px #000; }
header > .flex { justify-content: space-between; align-items: center; }
.header-logo-block { width: 400px; position: relative; }
.header-logo-block img { width: 100%; }
.plus18, .user-header img { max-width: 26px; width: 26px; height: 26px; }
.plus18 { position: absolute; left: 5px; top: 132px; filter: grayscale(1); opacity: 0.5; }
.user-header img { float: left; margin-right: 10px; }

.reg-num { position: absolute; right: 15px; top: 40px; font-size: 14px; }
.header-search-block { margin-top: 10px; }
.header-contacts-block { min-width: 170px; }
.header-contacts-block .phones,
.header-contacts-block .user-header { margin-bottom: 10px; }
.header-contacts-block .user-header { line-height: 34px; }
.header-contacts-block .phone,
.header-contacts-block .user-header { font-size: 20px; font-weight: 600; color: var(--grey); }
.header-contacts-block .phone:hover { color: var(--black); }
.actions-btns { margin-left: 8px; }

.header-contacts-block .phones { display: none; }

/* --- Кнопки авторизации, регистрации, выхода --- */
.autorize a, .non-autorize div { cursor: pointer; color: var(--grey); }
.autorize a:first-child, .non-autorize div:first-child { margin-bottom: 5px; }
.autorize a:hover, .non-autorize div:hover { color: var(--black); }

/* --- Всплывающие сообщения Регистрации/Авторизации --- */
.success-message { background: #d4edda; color: #155724; padding: 15px; border-radius: 4px; }
.error-message { background: #f8d7da; color: #721c24; padding: 15px; border-radius: 4px; }
.fancybox-container { z-index: 9999 !important; }

.reg-log-mobile { margin: 15px 10px 20px 10px; }
.reg-log-mobile .autorize div:first-child, .reg-log-mobile .non-autorize div:first-child { margin-bottom: 15px; }
.warn { font-size: 14px; margin-bottom: 10px; }
.warn strong { color: red; }

/* --------- Главное меню --------- */
#header-menu { display: flex; padding: 0 15px; margin: 0; justify-content: space-between; align-items: center; }
.menu ul {  padding: 0; margin: 0; }
.menu li { display: inline-block; position: relative; z-index: 100; }

/* -- Пункты меню -- */
.menu li a { font-family: var(--font); border: 1px solid var(--grey); color: var(--grey); display: block; text-align: center; font-size: 18px; line-height: 24px; width: auto; background-color: var(--light-grey); border-radius: 6px; padding: 5px 10px; }
.menu li a:hover { color: #000; background-color: #dce4eb; }
.menu li.current_page_item > a, .menu li.current_page_item > a:hover { color: #000; background-color: var(--orange); }


/* -- Мобильное меню (выезжающее слева) -- */
.hidden-menu-right { 
	display: block; position: fixed; margin: 0; box-sizing: border-box; width: 290px; height: 100%; top: 0px;  -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; 
	background-color: #fff; z-index: 1000; background-color: #fff;
}
.hidden-menu-right, .sub-menu.active { background-color: rgba(255 255 255 / 1); }

.hidden-menu-right { right: -290px; transition: right .2s;  }
.mob-menu { margin: 0; padding: 0; position: relative; }
.mob-menu #mobile-menu { list-style: none; padding: 0 15px; background-color: transparent; min-height: 240px; }
.close-menu { position: relative; right: -255px; top: 10px; }

.sub-menu.active { transition: left .2s; left: 0; z-index: 100; min-height:100%; }
.sub-menu.active a { border-bottom: 1px solid var(--white); line-height: 20px; padding: 7px 0 7px 15px; }
.sub-menu.active a.back { padding: 5px; }

/* Чекбоксы: */
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 { right: 10px; transition: right .23s; }

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

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

@media (max-width: 767px) {
	.desktop-menu { display: none; }
	.mob-menu li a { line-height: 32px; display: block; color: #000; font-weight: bold; }
}
@media (min-width: 768px) {
	#header-menu { padding: 0;  margin: 0; }	
	.mob-menu, #touch-menu { display: none; }
	.menu-block .desktop-menu { text-align: center; display: block; }
}
@media (min-width: 768px) and (max-width: 1279px) {
	#header-menu { width: 600px; }	
}
@media (min-width: 1280px) and (max-width: 1439px) {
	#header-menu { width: 650px; }
}
@media (min-width: 1440px) {
	#header-menu { width: 700px; }
}
/* --------- END Главное меню --------- */

.hidden-menu-right .contacts { padding: 0 15px 15px 15px; color: var(--black); position: absolute; bottom: 0; z-index: -1; }
.hidden-menu-right .contacts .h4 { font-weight: bold; }
.hidden-menu-right .contacts table { margin: 10px 5px; }
.hidden-menu-right .contacts table td { padding: 5px 0; }
.hidden-menu-right .contacts table td:first-child { vertical-align: top; min-width: 26px; }
.hidden-menu-right .contacts a { color: var(--black); }
.hidden-menu-right .contacts .socials-block { justify-content: flex-start; }
.hidden-menu-right .contacts .socials-block img { width: 32px; height: 32px; }


/* -- Хлебные крошки -- */
.breadcrumbs { font-size: 14px; padding-top: 10px; }
.breadcrumbs__separator { padding: 0 10px; }
.breadcrumbs__link, .link { color: var(--owl2); cursor: pointer; }
.breadcrumbs__link:hover, .link:hover { color: var(--black); text-decoration: underline; }

/* --- Контент --- */
.content { padding: 10px 15px; overflow: hidden; }
.content p { font-size: 18px; font-weight: 400; }
.content ul, .content ol { margin-bottom: 30px; }
.content ul li, .content ol li { font-size: 16px; line-height: 16px; margin: 0 0 10px 0; font-weight: 400; color: #333; }

h1, h2, h3, h4 { font-weight: 600; }
h1, .h1, h2, .h2 { font-size: 30px; line-height: 40px; text-align: center; }
h1, h2 { text-transform: uppercase; }

h3, article h3, .h3 { font-size: 26px; }
h4, .h4 { font-size: 20px; }

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

.content a, .content a:link, .content a:visited,
#cookieBar a { color: #1a82e1; }
.content a:hover, .anons a:hover, #cookieBar a:hover { color: var(--grey); }

section { width: 100%; margin: 20px auto; display: inline-block; }

#content-block { border: 1px solid var(--light-grey); border-radius: 6px; padding: 10px 15px; }


/* -- Всплывающие окна и формы обратной связи -- */
.modal-form { max-width: 460px!important; }
.modal-form .flex div { width: 100%; }
.modal-form .h3 { text-transform: none; margin: 0 0 10px 0; }
.modal-form p { margin: 0; }
.modal-form .wpcf7-text, .modal-form .wpcf7-textarea { border: 1px solid var(--black); width: 100%; padding: 10px; background-color: var(--white); font-family: var(--font); font-size: 18px; color: var(--black); border-radius: 10px; margin-bottom: 10px; }
.modal-form .wpcf7-textarea { max-height: 110px; }
.modal-form .orange-btn { line-height: 44px; height: 44px; margin: 5px auto; }
.modal-form .priv { text-align: center; }
.modal-form .priv p { font-size: 16px; }

.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output { text-align: center; border-color: var(--red); }
.wpcf7-spinner { position: absolute; }
.wpcf7-not-valid-tip { color: #fff; font-size: 14px; text-align: center; background-color: var(--red); border-radius: 10px; }
.agree { display: none; }

#register-form input[type="checkbox"] { width: 20px; height: 20px; }
#register-form button[type="submit"]:disabled { background-color: #ccc; cursor: not-allowed; background-color: #ccc; cursor: not-allowed; border: 1px solid #ccc; opacity: 0.3; }
.privacy-block p { display: flex; align-items: center; }

/* -- Страница Автора */
.user-profile { border: 2px solid #000; border-radius: 20px; padding: 5px; margin-bottom: 40px; }
.user-profile .flex { gap: 20px; flex-wrap: nowrap; }
.user-profile img { border-radius: 20px; }

/* -- Блоки ссылок -- */
#links-block .flex { justify-content: space-evenly; }
#links-block .flex .block { width: 30%; min-width: 300px; border: 1px solid var(--grey); background-color: var(--headercolor); border-radius: 6px; padding: 10px 15px; margin-bottom: 10px; text-align: center; font-weight: bold; font-size: 18px; color: var(--black); }
#links-block .flex .block:hover { background-color: var(--light-owl); }

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

.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; }

.two-images, .three-images { width: 100%; }
.two-images .flex, .three-images .flex { justify-content: center; gap: 20px; }

.two-images img, .three-images img { border: 1px solid var(--black); border-radius: 10px; box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.5); }
.two-images img { max-width: 600px; max-height: 400px; height: auto; }
.three-images img { max-width: 400px; max-height: 400px; height: auto; }
.two-images img:hover, .three-images img:hover { left: 2px; top: 2px; box-shadow: none; }

/* Стили для контейнера с новостями */
.news-content table { border-collapse: collapse; margin: 20px 0; width: 100% !important; max-width: 100% !important; display: block; overflow-x: auto; }

.news-content th, .news-content td { border: 1px solid var(--grey); padding: 8px; text-align: left; }
.news-content th { background-color: var(--light-grey); font-weight: bold; }

/* -- Блок Публикации -- */
#posts > .flex { gap: 10px; }
#posts > .flex > .post-block { color: var(--gey); width: 100%; background-color: var(--light-grey); border-radius: 10px; padding: 10px 15px; display: flex; gap: 10px; }
#posts > .flex > .post-block:hover { background-color: var(--light-owl); }
#posts .post-title { font-size: 20px; margin-bottom: 10px; color: var(--black); }
#posts .anons, #posts .anons p { font-size: 16px; }

/* -- Блок Новости -- */
#news > .flex { gap: 10px; }
#news > .flex > .post-block,
#news > .flex > article .post-block { color: var(--gey); background-color: var(--white); border: 1px solid var(--grey); border-radius: 10px; padding: 10px 15px; display: flex; gap: 10px; }
#news > .flex > .post-block:hover,
#news > .flex > article .post-block:hover { border-color: var(--orange); }
#news .post-title { font-size: 20px; margin-bottom: 10px; color: var(--black); }
#news .anons, #news .anons p { font-size: 16px; }

/* -- Преимущества -- */
#preim .flex { justify-content: space-around; }

#preim .flex .block { max-width: 330px; text-align: center; border: 1px solid var(--grey); padding: 10px 15px; border-radius: 6px; background-color: #fff; }
#preim .flex .block .preim-image { margin: 0 auto; display: block; width: 100%; max-width: 150px; }

/* -- Вопрос-ответ -- */
#faq { margin-bottom: 40px; }
details { margin: 10px auto; width: 100%; max-width: 1200px; }
details > summary { background-color: var(--light-grey); border-radius: 20px; font-size: 20px; color: var(--black); line-height: 40px; height: 42px; padding: 2px 20px 2px 40px; user-select: none; }
.text-details { padding: 20px 40px; font-size: 18px; border-top: 2px dashed var(--black); }
details > summary:hover,
details[open] summary { background-color: var(--light-owl); cursor: pointer; }

details summary::-webkit-details-marker { display: none; } /* Убираем стандартный маркер Chrome */
details > summary { list-style: none; } /* Убираем стандартный маркер Firefox */

/* Добавляем собственный маркер для закрытого состояния */
details summary:after { content: ' '; background-image: url(/wp-content/themes/UrokTheme/img/details-icon.png); background-position: center; width: 32px; height: 32px; display: inline-block; float: right; margin-top: 2px; }

details[open] { background-color: var(--light-owl); border-radius: 20px; padding: 0; }
/* Добавляем собственный маркер для открытого состояния */
details[open] summary:after { transform: rotate(180deg); margin-top: 4px; }

/*-- Пагинация -- */
.pagination { display: none !important; list-style: none; display: flex; gap: 10px; margin: 40px auto; justify-content: center; }
.pagination li a, .pagination li span { padding: 5px 10px; border-radius: 50%; width: 30px; height: 30px; line-height: 30px; color: var(--black); }
.pagination li a { background-color: var(--mednyj); }
.pagination li span { background-color: var(--light-grey); }
.pagination li:hover a { background-color: var(--orange); color: var(--white); }
.pagination li .prev, .pagination li .next { min-width: 70px; border-radius: 10px; }

/* -- Контакты -- */
.contacts td { padding: 5px 10px 7px 10px; font-size: 18px; font-weight: 400; }
.contacts td a { color: var(--grey); }
.contacts td a:hover { color: var(--black); }
.contacts td .orange-btn { margin-top: 5px; }

/* -- Страница Успешная оплата -- */
.green-ramka, .red-ramka { max-width: 60%; margin: 0 auto 20px auto; text-align: center; border-radius: 10px;}
.green-ramka { border: 2px solid green; }
.red-ramka { border: 2px solid red; }
.certificate-preview { text-align: center; }
.green-ramka .orange-btn { margin: 0 auto; }

/* Страница Прайс */
.price-table { width: 100%; max-width: 800px; margin: 0 auto 30px auto; }
.price-table td { padding: 5px 10px; }
.price-table td:first-child { width: 200px; }
.price-table td:last-child { width: 150px; }
.tochki { border-bottom: 1px dashed var(--grey); }


/* -- Подвал -- */
footer { box-shadow: 0 0 10px #000; padding: 10px 0; }
.footer-links-block { width: fit-content; margin: 10px auto; }
.footer-links-block  a { display: block; margin-bottom: 5px; }
.copyright { border-top: 1px solid var(--grey); padding-top: 10px; }


/* Тулбар в подвале про Cookie */
#cookieBar { position: fixed; z-index: 100; border: 1px dashed #ff0000; background-color: rgba(2555,255,255, 0.7); border-radius: 10px; text-align: center; display: none; box-sizing: border-box; padding: 10px; }
#cookieBar p { font-size: 16px; color: #000; margin: 0; }
#closeButton { font-family: var(--font); color: var(--grey); background-color: var(--light-grey); border: none; display: block; cursor: pointer; margin: 5px auto 0 auto; font-size: 16px; line-height: 24px; padding: 5px 10px; border-radius: 6px; }
#closeButton:hover { background-color: var(--orange); color: var(--black); }


@media screen and (max-width: 439px) {
	.header-logo-block img { width: 90%; }
	.wrapper { padding-top: 180px; }
	.reg-num { right: 50px; }
	.plus18 { left: 5px; top: 118px; max-width: 24px; height: 24px; }
	.content { padding: 15px; }
}

@media screen and (max-width: 767px) {
	#links-block .flex .block a { font-size: 15px; }
	.header-menu-block { width: 100%; margin: 0 10px 10px 10px; }
	.header-contacts-block { display: none; }
	.header-search-block { margin-top: 0; }
	.wrapper { padding-top: 210px; }
    details > summary { font-size: 16px; padding: 2px 2px 2px 15px; }
	#cookieBar { width: 100%; bottom: 0px; right: 0; left: 0; }
	#cookieBar p, #closeButton { font-size: 14px; }
	.user-profile .flex { flex-wrap: wrap; gap: 0; }
	.user-profile .flex div { padding: 0 15px; }
    .user-profile .flex .img { margin: 10px auto 0 auto; }
	
}
@media screen and (min-width: 768px) {
	#cookieBar { width: 300px; bottom: 10px; right: 10px; }
}
@media screen (min-width: 768px) and (max-width: 1199px) {
	header > .flex { max-width: 600px; position: relative; padding-bottom: 10px; }
	.header-contacts-block { min-width: 150px; position: absolute; right: 0; top: 40px; }
	.wrapper { padding-top: 246px; }
}
@media screen and (min-width: 1200px) {
    .wrapper { padding-top: 164px; }
}
@media screen (min-width: 1280px) and (max-width: 1439px) {
	.max-width { width: 1280px; }
}

@media screen and (min-width: 1440px) {
	.max-width { width: 1440px; }
}