/*
Theme Name: GraySteelblueGridTheme
Author: Ведерников Сергей Николаевич город Саратов
Author URI: https://1promtai.ru/
Description: Мой первый адаптивный шаблон WordPress
Version: 1.2
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/

/*----------------------------------------------------------------------------------------------------*/

*{
  	box-sizing: border-box;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1.5;
}

.rsswidget img, img {
	object-fit: cover;
	width: auto;
	height: auto;
}
.footer img {
  	object-fit: cover;
  	width: auto;
 	height: auto;
	color: #232325!important;
}
.loop img, .article img {
	  object-fit: cover;
	  width: 100%;
	  height: auto;
	  text-align: center;
}

a, ul, ol, li, p {
	  list-style: none;
	  text-decoration: none;
	  word-wrap: break-word;
}

/*-------------------------------------- Основные стили ----------------------------------------------*/

body { 
  	display: grid;
  	grid-template-areas: 
    "header header header"
	"nav nav nav"
    "ads article aside"
	"pag pag pag"
    "footer footer footer";
  	grid-gap: 0;
  	margin: 0;
	grid-template-columns: .5fr 1fr .5fr;
	grid-auto-rows: minmax(70px, auto);
}

.header {
	  grid-area: header;
	  text-align: center;
	  background: white;
}
.header a {
	  color: #007bff;
      line-height: 70px;
	  font-weight: 700;
	  font-size: 2em;
}

.footer {
  	grid-area: footer;
	text-align: center;
	background: #232325;
}
.footer p, .footer a {
  	color: #dcdcdc;
}

/*----------------------------------------------------------------------------------------------------*/

.article { 
  	grid-area: article; 
	padding: 0 2%;
	max-width: 50vw;
}

.article a { 
  	color: #336168;
}

/*----------------------------------------------------------------------------------------------------*/

.nav { 
  	grid-area: nav;
	text-align: center;
  	background: #232325;
	position: sticky;
	top: 0;
	z-index: 9999;
}

.nav li { 
	display: inline;
	background: black;
}

.nav ul { 
	background: black;
}

.nav a { 
	color: white;
}
/*----------------------------------------------------------------------------------------------------*/

.ads { 
  	grid-area: ads; 
	  padding: 1% .3%;
}

/*----------------------------------------------------------------------------------------------------*/
.aside { 
  	grid-area: aside; 
	padding: 1% .3%;
}

/*----------------------------------------------------------------------------------------------------*/

.pag { 
  	grid-area: pag; 
	  text-align: center;
	  background: #336168;
	  color: #dcdcdc;
	  line-height: 70px;
	  font-weight: 700;
}



/*----------------------------------------------------------------------------------------------------*/
.loop {
	display: grid;
 	white-space: normal;
	grid-template-columns: 1fr;
	width: 100%;
}

.loop h2 a {
	color: #336168;
} 

.loop pre {
    color: #dcdcdc; /* Изменено на красный */
    width: auto;
    max-height: 350px;
    overflow: auto;
    background-color: #232325; /* Основной фон */
    background-image: 
      linear-gradient(black 1px, transparent 1px),
      linear-gradient(90deg, black 1px, transparent 1px);
    background-size: 20px 20px;
    background-position: center center;
    border: 2px solid gray;
    white-space: pre-wrap;
    max-width: 100%;
	padding: 3%;
	border: 10px solid #232325;
	border-radius: 20px;
}

/*----------------------------------------------------------------------------------------------------*/

pre {
	white-space: pre-wrap;
	max-width: 100%;
}
pre {
    color: #dcdcdc; 
    width: auto;
    max-height: 350px;
    overflow: auto;
    background-color: #232325; /* Основной фон */
    background-image: 
      linear-gradient(black 1px, transparent 1px),
      linear-gradient(90deg, black 1px, transparent 1px);
    background-size: 20px 20px;
    background-position: center center;
    border: 2px solid gray;
    white-space: pre-wrap;
    max-width: 100%;
	padding: 3%;
	border: 10px solid #232325;
	border-radius: 20px;
}



/*----------------------------------------------------------------------------------------------------*/

p {
	color: #232325;
	line-height: 1.5;
}

a {
	color: #336168;
}
/*----------------------------------------------------------------------------------------------------*/

@media only screen and (max-width: 700px) {
	body { 
 	  grid-template-areas: 
		"header"
    	"nav"
		"article"
    	"ads"
		"aside"
		"pag"
		"footer";
   
	  grid-template-columns: 1fr;
	}
	.article { 
  	grid-area: article; 
	  padding: 0 2%;
	  max-width: 100vw;
  }
}

/*----------------------------------------------------------------------------------------------------*/

.ads h2, .aside h2 {
	background: white;
	color: black;
	text-align: center;
	padding: 2%;
	margin: 2% 0;
}

.ads li, .aside li {
	padding: 3px;
}

/*----------------------------------------------------------------------------------------------------*/

.tagcloud {
	background: #dcdcdc;
	color: #232325;
	padding: 3%;
	border-radius: 25px;
}

/*----------------------------------------- Верхнее меню------------------------------------ */

.ads ul {
	padding: 4%;
	color: #232325;
}
.ads a {
	color: #336168;
}	
 .aside a {
	color: #336168;
}	
/*----------------------------------------------------------------------------------------------------*/

/*------------------------------       audio video            --------------------------------*/

.mejs-controls {
	background: #336168 !important;
}
/* Основные стили для контейнера и видео */
.mejs-container.mejs-video {
    height: 50vh !important; /* Высота контейнера */
    max-height: 100vh !important; /* Ограничение максимальной высоты */
    background: black !important; /* Фон */
    display: flex; /* Используем flex для выравнивания */
   	justify-content: center; /* Горизонтальное центрирование */
    align-items: center; /* Вертикальное центрирование */
}

.mejs-container.mejs-video video {
    max-height: 100% !important; /* Ограничение максимальной высоты видео */
    max-width: 100% !important;  /* Ограничение максимальной ширины видео */
    height: auto !important;     /* Автоматическое изменение высоты для сохранения пропорций */
    width: auto !important;      /* Автоматическое изменение ширины для сохранения пропорций */
}

/* Стили для полноэкранного режима */
.mejs-container.mejs-video:fullscreen,
.mejs-container.mejs-video video:fullscreen,
.mejs-container.mejs-video:-webkit-full-screen,
.mejs-container.mejs-video video:-webkit-full-screen,
.mejs-container.mejs-video:-moz-full-screen,
.mejs-container.mejs-video video:-moz-full-screen {
    height: 100vh !important; /* Высота контейнера в полноэкранном режиме */
    max-height: 100vh !important; /* Ограничение максимальной высоты */
    width: auto !important;  /* Ширина подстраивается автоматически */
    display: flex;
    justify-content: center; /* Центрирование видео в полноэкранном режиме */
    align-items: center; /* Вертикальное центрирование в полноэкранном режиме */
}

.mejs-mediaelement
    {
        text-align: center !important;
 }

/*----------------------------------------------------------------------------------------------------*/

#wp-calendar {
	width: 100%;
	max-width: 27.5rem;
	background: #dddddd;
	margin-left: auto;
	margin-right: auto;
	
}

#wp-calendar caption {
	background: #336168;
	color: white;
	padding: 0.25rem;
	text-align: center;
	text-align: center;
	padding: 10px;
	border-radius: 25px;
}

#wp-calendar thead tr {
	border-right: 1px solid #ccc;
}

nav.wp-calendar-nav {
	padding: 0;
	width: 100%;
	color: white;
	background: #232325;
	text-align: center;
	padding: 10px;
	border-radius: 25px;
}

nav.wp-calendar-nav a {
	color: white;
	padding-left: 30px;
	text-decoration: none;
}

#wp-calendar thead th {
	font-size: 90%;
	font-weight: bold;
	padding: 0.25rem;
	background: #dddddd;
	text-transform: uppercase;
	text-align: center;
}

#wp-calendar tbody td {
	position: relative;
	padding: 0.125rem;
	text-align: center;
	border: 1px solid #dddddd;
	background: white;
	color: #232325;
}

#wp-calendar tbody td.pad {
	opacity: 0.6;
}

#wp-calendar tbody td#today {
	font-weight: bold;
}

#wp-calendar tbody td#today:after {
	content: »;
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 0;
	border-top: 10px solid #dddddd;
	border-left: 10px solid transparent;
}

#wp-calendar tbody td a {
	display: block;
	background: #dddddd;
}

#wp-calendar tbody td a:hover {
	background: #dddddd;
	color: #fff;
}

#wp-calendar tfoot tr {
	background: gray;
	border: 1px solid #dddddd;
}

#wp-calendar tfoot tr td {
	border: 0;
	padding: 0;
}

#wp-calendar tfoot tr a {
	display: block;
	padding: 0.25rem 0.75rem;
}

#wp-calendar tfoot tr a:hover {
	background: #ffffff;
}

#wp-calendar tfoot tr #prev {
	text-align: left;
	
}

#wp-calendar tfoot tr #next {
	text-align: right;
}
/* ------------------------------------ форма добавления комментариев--------------------------*/

#respond {
	display: grid;
  	grid-template-columns: 1fr;
  	grid-gap: 5px;
  	box-sizing: border-box;
  	width: 100%;
  	background-color: #ffffff;
  	padding: 8%;
	text-align: center;
	border-radius: 10px;
}
#respond p {
	color: #000000;
}
#respond {
  	transition: all 0.5s ease-out;
}
#respond:hover {
  	background: #dcdcdc;
	color: #336168;
}


#respond input {
	
	color: black;
	background: white;
	padding: 0;
	border: 2px solid #336168;
	width: 100%;
	padding: 3% 0;
	border-radius: 10px;
	font-size: .975rem;
}
#respond input:hover {
	
	color: black;
	background: white;
	padding: 0;
	border: 2px solid #336168;
	width: 100%;
	padding: 3% 0;
	border-radius: 10px;
	font-size: .975rem;
}
.form-submit {
	width: 100%;
	padding: 3% 0;
}

#respond textarea {
	padding: 0;
	border: 2px solid #336168;
	width: 100%;
	padding: 3% 0;
	border-radius: 10px;
}
#respond textarea:hover {
	background: white;
}

/*--------------------------------- Стиль для комментариев -----------------------------------*/
.comment {
 	margin: 0!important;
	padding: 0!important;
}


/*-------------------------------- Стиль для ответов на комментарии ------------------------------*/

.children {
  	margin: 0!important;
	padding: 0!important;
}
.comment-body {
	margin-bottom: 30px;
	padding: 1px;
}
.commentlist img {
	object-fit: cover;
	padding: 2%;
	width: auto;
	height: auto;
}

.commentlist {
	margin: 0!important;
	padding: 0!important;
}

.comment {
    border:none;
    padding: 0;
	background: #ffffff;
	padding: 6px;
	color: black;
}

.comment p {
	background: white;
	color: #222222;
	padding: 0 36px;
}

.children .comment {
    padding: 6px;
	background: #ffffff;
	color: black;
}
.children .comment p {
    padding: 0 6px;
	background: #fff6e3;
	color: orangered;
}

.comment-meta a, .commentmetadata a {
	color: darkred;
	padding: 0 6px;
}

/*----------------------------------------------------------------------------------------------------*/

blockquote {
	display: grid;
  	background-color: #dcdcdc; 
	border-left: 2px solid #336168;
  	padding: 2%;
  	font-style: italic; 
	color: #336168;
	margin: 1%;
}

blockquote p {
  	background-color: #dcdcdc; 
	color: #232325;
}

blockquote:before {
    content: "\201C"; /* левая кавычка */
    font-size: 36px;
    font-weight: bold;
    color: #336168;
    margin-right: 0px;
}

blockquote:after {
    content: "\201D"; /* правая кавычка */
    font-size: 36px;
    font-weight: bold;
    color: #336168;
    float: right!important; /* Разместить справа */
    margin-right: 0px;
}

/*----------------------------------------------------------------------------------------------------*/

#scroll-buttons {
    position: fixed;
    bottom: 20px;
    right: 15px;
    z-index: 100;
}

#scroll-up, #scroll-down {
    display: block;
    margin-bottom: 10px;
    padding: 10px;
    border: none;
	z-index: 102;
	color: #ffffff;
	background: #007bff;
	font-size: 1em;
}

/*----------------------------------------- menu -----------------------------------------------------*/

h2 {
    vertical-align: center;
    text-align: center;
}

.top-nav {
  	display: flex;
  	flex-direction: row;
  	align-items: center;
  	justify-content: space-between;
  	background: black;
  	color: white;
  	height: 70px;
  	padding: .5em;
}

.menu {
  	display: flex;
  	flex-direction: row;
  	list-style-type: none;
  	margin: 0;
  	padding: 0;
}

.menu > li {
  	margin: 0 1rem;
  	overflow: hidden;
}

.menu-button-container {
  	display: none;
  	height: 100%;
  	width: 30px;
  	cursor: pointer;
  	flex-direction: column;
  	justify-content: center;
  	align-items: center;
}

#menu-toggle {
  	display: none;
}

.menu-button,
.menu-button::before,
.menu-button::after {
  	display: block;
  	background-color: white;
  	position: absolute;
  	height: 4px;
  	width: 30px;
  	transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
  	border-radius: 2px;
}

.menu-button::before {
  content: '';
  margin-top: -8px;
}

.menu-button::after {
  content: '';
  margin-top: 8px;
}

#menu-toggle:checked + .menu-button-container .menu-button::before {
  margin-top: 0px;
  transform: rotate(405deg);
}

#menu-toggle:checked + .menu-button-container .menu-button {
  background: rgba(255, 255, 255, 0);
}

#menu-toggle:checked + .menu-button-container .menu-button::after {
  margin-top: 0px;
  transform: rotate(-405deg);
}

@media (max-width: 700px) {
	.menu-button-container {
    	display: flex;
  	}
  	.menu {
    	position: absolute;
    	top: 17px;
    	margin-top: 50px;
    	left: 0;
    	flex-direction: column;
    	width: 100%;
    	justify-content: center;
    	align-items: center;
  	}
  	#menu-toggle ~ .menu li {
    	height: 0;
    	margin: 0;
    	padding: 0;
    	border: 0;
    	transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
  	}
  	#menu-toggle:checked ~ .menu li {
    	border: 1px solid #333;
    	height: 4.5em;
    	padding: 1.5em;
    	transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
  	}
	
	.menu > li {
    	display: flex;
    	justify-content: center;
    	margin: 0;
    	padding: 0.5em 0;
    	width: 100%;
    	color: white;
    	background-color: #222;
  	}
	
	.menu > li:not(:last-child) {
    	border-bottom: 1px solid #444;
  	}
}

/*--  Навигация внизу, вперёд и назад  ---------------------------------------------------------------*/

.pag {
   	grid-area: pag;
	display: inline;
	background: white;
	text-align: center;
	font-size: 1.175rem;
	font-weight: 500;

  }

.pag a {

	padding: 1%;
	line-height: 80px;
	font-size: 1.5em;
	color: yellowgreen;
  }

/*---------------------------------------------------------------------------------------------------*/



#dark-mode-button {
   	background: transparent;
	border: none;
}

.dark-mode #dark-mode-button {

}



/*-------------------------------------------------------------------------------------------------*/
/* Стили для тёмного режима */

body.dark-mode {
    background: #232325; 
    color: #e0e0e0;
}

.dark-mode a {
  
}

.dark-mode .more_link {
   
}

.dark-mode #dark-mode-button {
  
}


.dark-mode .header {
    background: #232325;
}

.dark-mode .header a {
    color: wheat;
}

.dark-mode .footer {
    background: #232325;
}
.dark-mode .ads {
    background: #232325;
}
.dark-mode .nav {
    background: #232325;
}

/*-------------------------------------------------------------------------------------------------*/
/* Другие стили для тёмного режима */

/*-------------------------------------------------------------------------------------------------*/
/* Определение стилей для тёмной темы */

.dark-mode {
    background-color: #1a1a1a;
    color: #ffffff;
}

/*-------------------------------------------------------------------------------------------------*/
/* Стили для кнопки переключения тёмной темы */

#dark-mode-button {
    position: fixed;
    right: 2px;
    bottom: 160px; 
    z-index: 1000; 
	margin-bottom: 30px;
    color: yellowgreen;
	font-size: 3em;
  	background: transparent;
}
.dark-mode #dark-mode-button {
   
}

.dark-mode .article {
  	background: #232325;
  	padding: 5px;
  	margin: 0;
  	position: relative;
	border-radius: 50%;
}

.dark-mode .article p {
  	color: #dcdcdc;
}

.dark-mode .article h2 {
  	color: #dcdcdc;
}

.dark-mode .article blockquote p {
	color: #232325;
}

.dark-mode .article #respond {
   	background-color: #dcdcdc;
}

.dark-mode .top-nav {
   	background: #336168;
   	color: wheat;
}
.dark-mode .nav ul, .dark-mode .nav li {
  	background: #336168;
}
.dark-mode .nav a {
   	background: #336168;
	color: wheat;
}




/*-------------------------------------------------------------------------------------------------*/

.dark-mode .loop h2 a {
	color: wheat;
}


a.more_link {
	font-size: 1em;
	padding: 12px;
	color: #ffffff;
	background: #007bff;

}


.dark-mode .ads h2 {
	background: #232325;
	color: white;
	text-align: center;
	padding: 2%;
	margin: 2% 0;
}
.dark-mode .aside h2 {
	background: #232325;
	color: white;
	text-align: center;
	padding: 2%;
	margin: 2% 0;
}
/* --------------------------------------------------------------------------------------------- */

.custom-search-form {
    background-color: #232325;
    border-radius: 8px; /* Закругленные углы */
    padding: 12px; /* Внутренний отступ */
    display: flex; /* Для выравнивания элементов */
    align-items: center; /* Вертикальное выравнивание */
}

.custom-search-form .search-field {
    background-color: transparent; /* Прозрачный фон для поля ввода */
    color: #ffffff; /* Белый цвет текста */
    border: none; /* Убираем границу */
    outline: none; /* Убираем обводку при фокусе */
    margin-right: 10px; /* Отступ справа */
    flex-grow: 1; /* Чтобы поле занимало доступное пространство */
}

.custom-search-form .search-submit {
    background: none; /* Без фона */
    border: none; /* Без границы */
    color: #232325 !important; /* Серый цвет иконки с важностью */
    font-size: 20px; /* Размер иконки */
    cursor: pointer; /* Курсор указателя */
}

.custom-search-form .search-submit:hover {
    color: #bbb !important; /* Более светлый серый при наведении */
}

.custom-search-form .search-submit {
    background: none; /* Без фона */
    border: none; /* Без границы */
    color: #fff !important; /* Белый цвет иконки с важностью */
    font-size: 20px; /* Размер иконки */
    cursor: pointer; /* Курсор указателя */
}

.custom-search-form .search-submit:hover {
    color: #ddd !important; /* Более светлый белый при наведении */
}
/*
 * +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 * */



.color-picker {
    text-align: center;
}

.color-display {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 20px auto;
    border: 2px solid #000;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}