/*
Theme Name: OceanWP Child
Theme URI: https://oceanwp.org/
Template: oceanwp
Author: OceanWP
Author URI: https://oceanwp.org/about-oceanwp/
Description: OceanWP is the perfect theme for your project. Lightweight and highly extendable, it will enable you to create almost any type of website such a blog, portfolio, business website and WooCommerce storefront with a beautiful & professional design. Very fast, responsive, RTL & translation ready, best SEO practices, unique WooCommerce features to increase conversion and much more. You can even edit the settings on tablet & mobile so your site looks good on every device. Work with the most popular page builders as Elementor, Beaver Builder, Brizy, Visual Composer, Divi, SiteOrigin, etc... Developers will love his extensible codebase making it a joy to customize and extend. Best friend of Elementor & WooCommerce. Looking for a Multi-Purpose theme? Look no further! Check the demos to realize that it's the only theme you will ever need: https://oceanwp.org/demos/
Tags: two-columns,right-sidebar,footer-widgets,blog,news,custom-background,custom-menu,post-formats,rtl-language-support,sticky-post,editor-style,threaded-comments,translation-ready,buddypress,custom-colors,featured-images,full-width-template,theme-options,e-commerce,block-styles,wide-blocks,accessibility-ready
Version: 4.0.9.1748580554
Updated: 2025-05-30 07:49:14
*/

/*--------------------------------------------------------------
## 1. Базовые CSS переменные (Светлая тема по умолчанию)
   Эти переменные будут использоваться, если системная тема светлая
   или если prefers-color-scheme не поддерживается.
--------------------------------------------------------------*/
:root {
    /* Цвета */
    --site-background: #ffffff;         /* Основной фон сайта */
    --text-color: #333333;              /* Основной цвет текста */
    --heading-color: #333333;           /* Цвет заголовков */
    --link-color: #111;              /* Цвет ссылок (стандартный OceanWP) */
    --link-hover-color: #c6000e;        /* Цвет ссылок при наведении */
    --border-color: #dddddd;            /* Цвет границ, разделителей */

    /* Компоненты */
    --header-bg: #f9f9f9;               /* Фон шапки */
    --header-text-color: var(--text-color); /* Цвет текста в шапке */
    --header-link-color: var(--link-color); /* Цвет ссылок в шапке */

    --footer-bg: #222222;               /* Фон подвала */
    --footer-text-color: #aaaaaa;       /* Текст в подвале */
    --footer-link-color: #ffffff;       /* Ссылки в подвале */

    --button-bg: var(--link-color);         /* Фон кнопок */
    --button-text-color: #ffffff;       /* Текст на кнопках */
    --button-hover-bg: var(--link-hover-color); /* Фон кнопок при наведении */

    --form-input-bg: #ffffff;           /* Фон полей ввода */
    --form-input-text-color: var(--text-color);
    --form-input-border-color: #cccccc;

    /* Тени (опционально) */
    --box-shadow-light: 0 0 7px 0 rgba(0,0,0,.3);
    --box-shadow-dark: none; /* Для темной темы тени могут быть не нужны или другими */

    /* Другие переменные по необходимости */
    --content-width: 1100px; /* Пример переменной для ширины контента */

    /* Плавный переход для свойств, которые будут меняться */
    /* Лучше применять transition к конкретным элементам, а не глобально к :root */
}

a:focus {
  outline: none !important;
}

a:focus-visible {
  outline: none; /* На всякий случай, если браузер все еще добавляет */
  box-shadow: 0 0 0 2px #007bff;
}

#scroll-top, #scroll-top:hover {
	background-color: rgba(0, 0, 0, 0); 
}



/*--------------------------------------------------------------
## HEADER
--------------------------------------------------------------*/
#site-header {
	box-shadow: var(--box-shadow-light);
}

.custom-logo-link .site-logo-svg {
	width: auto; /* Задайте желаемую ширину */
	height: 40px;   /* Позволяет высоте масштабироваться пропорционально ширине, сохраняя соотношение сторон */
	margin-top: 5px;
}

/* --- SVG Logo Styling --- */

.site-logo-svg .logo-bg {
  fill: #ffffff; /* Белый фон */
  /* Если фон не нужен (будет фон сайта), можно поставить fill: transparent; или вообще убрать эту строку */
}
.site-logo-svg .logo-path {
  fill: #333333; /* Темно-серый для текста */
}
.site-logo-svg .logo-accent {
  fill: #c6000e; /* Ваш оригинальный красный акцент */
}

#site-navigation-wrap .dropdown-menu>li>a {
	font-family: 'PT Sans';
	font-size: 16px;
}

#mobile-dropdown ul li a {
	font-family: 'PT Sans';
}

/* 1. Делаем контейнер шапки "базой" для позиционирования */
#site-header-inner {
    position: relative;
}

/* 2. Настраиваем саму иконку */
.custom-header-telegram {
    position: absolute; /* Жесткая позиция */
    top: 50%;           /* По вертикали: 50% сверху */
    transform: translateY(-50%); /* Центрируем точно по середине высоты */
    z-index: 100;       /* Чтобы была поверх других слоев */
    line-height: 1;
    font-size: 20px;    /* Размер иконки */
    color: #333;        /* Цвет */
}

/* 3. Позиция для КОМПЬЮТЕРА */
@media (min-width: 960px) {
    .custom-header-telegram {
        right: 165px; /* Отступ справа. Увеличьте/уменьшите это число, чтобы подвинуть иконку левее/правее */
    }
}

/* 4. Позиция для ТЕЛЕФОНА */
@media (max-width: 959px) {
    .custom-header-telegram {
        right: 70px; /* Отступ справа, чтобы не налезть на "бургер" */
        font-size: 24px; /* Чуть крупнее для пальца */
    }
}

.custom-header-telegram:hover {
    color: #0088cc;        /* Синий цвет при наведении */
}

/*--------------------------------------------------------------
## BLOG POST PAGE
--------------------------------------------------------------*/

.single-post.content-max-width #main #content-wrap {
	padding-top: 65px;
}

.single-post:not(.elementor-page) .entry-content a:not(.wp-block-button__link):not(.wp-block-file__button):hover, .page:not(.elementor-page):not(.woocommerce-page) .entry a:not(.wp-block-button__link):not(.wp-block-file__button):hover {
    text-decoration: underline;
}



/*--------------------------------------------------------------
## SINGLE PAGE
--------------------------------------------------------------*/

#main #content-wrap {
    padding-top: 100px;	
}

.page #main #content-wrap {
	padding-top: 40px;
}

@media (max-width: 991px) {
    #main #content-wrap {
        padding-top: 80px;	
    }
	
    .content-left-sidebar .widget-area {
        width: 100%;
        top: 56px;
        /* --- ДОБАВЛЕНО ДЛЯ ПРОКРУТКИ НА МОБИЛЬНЫХ --- */
        /* Аналогично, но с учетом другого значения 'top' */
        max-height: calc(100vh - 56px - 20px); /* 56px - это ваш 'top' для мобильных, 20px - отступ снизу */
        overflow-y: auto;
    }
	
    div:not(.wpj-jtoc--widget-floating)>.wpj-jtoc--toc {
        width: 100%;
    }
}


/*--------------------------------------------------------------
## AUTHORS CONTENT
--------------------------------------------------------------*/

.single-post.content-max-width .entry-content ul.pp-multiple-authors-boxes-ul,
.single-post.content-max-width .entry-content p.pp-author-boxes-description {
	background-color: #F1F1F1;
	padding-left: 0;
	padding-right: 0;
	max-width: 1060px;
}

.single-post.content-max-width .entry-content p.pp-author-boxes-description {
	font-size: 17px;
	margin: 0;
}

.pp-multiple-authors-boxes-wrapper.pp-multiple-authors-layout-boxed.multiple-authors-target-the-content li.pp-multiple-authors-boxes-li {
	border: 0 !important;
}


/*--------------------------------------------------------------
## 2. Переопределение переменных и стилей для Тёмной темы
   Эти стили применяются, если системная тема пользователя тёмная.
--------------------------------------------------------------*/
@media (prefers-color-scheme: dark) {
    :root {
        /* Цвета */
        --site-background: #121212;         /* Очень темный фон, близкий к черному */
        --text-color: #e0e0e0;              /* Светло-серый текст */
        --heading-color: #ffffff;           /* Белые заголовки */
        --link-color: #e0e0e0;              /* Более светлый синий для ссылок */
        --link-hover-color: #eb4034;        /* Еще светлее при наведении */
        --border-color: #333333;            /* Темно-серые границы */

        /* Компоненты */
        --header-bg: #1e1e1e;               /* Темный фон шапки */
        --header-text-color: var(--text-color);
        --header-link-color: var(--link-color);

        --footer-bg: #1a1a1a;               /* Очень темный фон подвала */
        --footer-text-color: #999999;
        --footer-link-color: var(--link-color);

        --button-bg: var(--link-color);
        --button-text-color: #121212;       /* Темный текст на светлых кнопках */
        --button-hover-bg: var(--link-hover-color);

        --form-input-bg: #2c2c2c;
        --form-input-text-color: var(--text-color);
        --form-input-border-color: #444444;

        /* Тени */
        --box-shadow-light: none;
        --box-shadow-dark: 0 1px 3px rgba(255,255,255,0.05), 0 1px 2px rgba(255,255,255,0.1);
    }

    /* Специфичные для темной темы стили, которые не управляются переменными (если нужны) */
    /* Например, инвертирование некоторых иконок или изображений, если это уместно */
    /* img.icon-needs-inversion { filter: invert(1); } */

    /* Пример: немного приглушить яркость всех изображений в темной теме */
    img,
    .wp-block-image img,
    figure.wp-block-image img,
    video {
        opacity: 0.85;
        transition: opacity 0.3s ease;
    }
    img:hover,
    .wp-block-image img:hover,
    figure.wp-block-image img:hover,
    video:hover {
        opacity: 1;
    }

    /* Переопределения для конкретных элементов OceanWP, если их цвета заданы не через переменные */
    /* Используйте инспектор браузера, чтобы найти нужные селекторы */

    #site-header,
    #site-header.is-sticky #site-header-inner,
    #top-bar-wrap { /* Верхняя панель, если используется */
        background-color: var(--header-bg) !important; /* !important может быть нужен для перекрытия стилей темы */
        border-bottom-color: var(--border-color) !important;
    }
    #site-header #site-navigation-wrap .dropdown-menu > li > a,
    #site-header .oceanwp-mobile-menu-icon a,
    #site-header #site-logo #site-logo-inner a,
    #site-header #oceanwp-social-menu .ow-social-icon a {
        color: var(--header-text-color) !important;
    }
    #site-header #site-navigation-wrap .dropdown-menu > li > a:hover {
        color: var(--header-link-color) !important;
    }
	
	.site-logo-svg .logo-bg {
	  fill: #222222; /* Темный фон для логотипа в темной теме */
	  /* или fill: transparent; если хотите, чтобы фон логотипа совпадал с фоном сайта */
	}
	.site-logo-svg .logo-path {
	  fill: #eeeeee; /* Светло-серый или белый для текста */
	}
	.site-logo-svg .logo-accent {
	  fill: #ff4b5c; /* Можно сделать акцент поярче для темной темы, например */
	  /* или оставить прежний: fill: #c6000e; */
	}
	
	
     /* Для выпадающих подменю */
    #site-navigation-wrap .dropdown-menu ul, #mobile-dropdown {
        background-color: var(--header-bg) !important;
        border-color: var(--border-color) !important;
    }
    #site-navigation-wrap .dropdown-menu ul a {
        color: var(--header-text-color) !important;
        border-bottom-color: var(--border-color) !important;
    }
     #site-navigation-wrap .dropdown-menu ul a:hover {
        color: var(--header-link-color) !important;
        background-color: var(--site-background) !important; /* Или другой цвет для ховера */
    }
	
	
/*--------------------------------------------------------------
## ARCHIVE PAGE
--------------------------------------------------------------*/

	.blog-entry.post .blog-entry-summary {
	color: var(--text-color) !important;
	}


    #footer-widgets,
    #footer-bottom {
        background-color: var(--footer-bg) !important;
        color: var(--footer-text-color) !important;
        border-top-color: var(--border-color) !important;
    }
    #footer-widgets .widget-title {
        color: var(--heading-color) !important;
    }
    #footer-bottom a, #footer-widgets a {
        color: var(--footer-link-color) !important;
    }
    #footer-bottom a:hover, #footer-widgets a:hover {
        color: var(--link-hover-color) !important; /* Используем общую переменную для hover ссылок */
    }
	
	.blog-entry.grid-entry .blog-entry-inner {
   		border-color: #666666;
	}

/*--------------------------------------------------------------
## AUTHORS CONTENT
--------------------------------------------------------------*/

	.single-post.content-max-width .entry-content ul.pp-multiple-authors-boxes-ul,
	.single-post.content-max-width .entry-content p.pp-author-boxes-description,
	body .pp-multiple-authors-boxes-wrapper.pp-multiple-authors-layout-boxed.multiple-authors-target-the-content .pp-multiple-authors-boxes-li {
		background-color: #333;
		color: var(--text-color) !important;
	}
	
}



/*--------------------------------------------------------------
## 3. Глобальные стили, использующие CSS переменные
   Эти стили будут применять значения переменных в зависимости от того,
   какой набор активен (светлый по умолчанию или темный из медиа-запроса).
--------------------------------------------------------------*/
body {
    background-color: var(--site-background);
    color: var(--text-color);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; /* Пример системного шрифта */
    line-height: 1.6;
    transition: background-color 0.3s ease, color 0.3s ease; /* Плавный переход */
}

a {
    color: var(--link-color) !important;
    text-decoration: none;
    transition: color 0.2s ease;
}
a:hover {
    color: var(--link-hover-color) !important;
}

h1, h2, h3, h4, h5, h6,
.site-title a, /* Название сайта */
.entry-title, .entry-title a, /* Заголовки записей/страниц */
.page-header .page-header-title { /* Заголовок архива и т.п. */
    color: var(--heading-color);
    transition: color 0.3s ease;
}

hr {
    border: 0;
    border-top: 1px solid var(--border-color);
    transition: border-color 0.3s ease;
}

/* Стили для основных областей макета */
#wrap { /* Основная обертка OceanWP */
    /* Может не требовать прямого задания фона, если body достаточно */
}

#main { /* Основной контент */
    background-color: var(--site-background); /* Может быть избыточно, если body уже имеет этот фон */
    /* Если у #main есть свои отступы/тени, они могут потребовать переменных */
}

article.post, article.page {
    /* border: 1px solid var(--border-color); */ /* Пример: если посты обрамлены */
    /* box-shadow: var(--box-shadow-light); */ /* Используем переменную для тени */
}
@media (prefers-color-scheme: dark) {
    article.post, article.page {
        /* box-shadow: var(--box-shadow-dark); */
    }
}


/* Формы */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
    background-color: var(--form-input-bg);
    color: var(--form-input-text-color);
    border: 1px solid var(--form-input-border-color);
    padding: 10px;
    border-radius: 3px;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    border-color: var(--link-color);
    outline: none; /* Убираем стандартный outline, так как есть border-color */
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button, .wp-block-button__link { /* Класс .button часто используется OceanWP и WP */
    background-color: var(--button-bg);
    color: var(--button-text-color);
    border: 1px solid var(--button-bg); /* Граница в цвет фона для монолитности */
    padding: 10px 20px;
    border-radius: 3px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.button:hover, .wp-block-button__link:hover {
    background-color: var(--button-hover-bg);
    color: var(--button-text-color); /* Может потребоваться изменить для темной темы, если фон кнопки становится светлым */
    border-color: var(--button-hover-bg);
}


/*--------------------------------------------------------------
## 4. Специфичные стили для OceanWP (Адаптируйте под себя)
   Эти стили могут требовать !important для переопределения
   встроенных стилей темы или стилей из кастомайзера.
   Используйте инспектор браузера!
--------------------------------------------------------------*/

/* Шапка (Header) */
#site-header {
    /* Общие стили для шапки, если они не зависят от темы (светлая/темная) */
    /* Цвета уже должны управляться переменными, которые меняются в @media (prefers-color-scheme: dark) */
}

/* Навигация */
#site-navigation-wrap .dropdown-menu > li > a {
    /* Стили для пунктов меню */
}

ul.meta li, ul.meta li a {
	color: var(--link-color);
}

/* Сайдбар */
.widget {
    /* Стили для виджетов. Фон и цвет текста должны наследоваться или использовать переменные */
    /* border-bottom: 1px solid var(--border-color); */ /* Пример разделителя */
    /* padding-bottom: 1em; */
    /* margin-bottom: 1em; */
}
.widget-title {
    color: var(--heading-color);
}

/* Подвал (Footer) */
#footer-widgets {
    /* Стили для виджетов в подвале */
}
#footer-bottom {
    /* Стили для нижней части подвала (копирайт) */
}

/* Дополнительные стили для элементов, которые могут плохо выглядеть в темной теме */
/* Например, iframe или встроенный контент, у которого свой фон */
/* iframe {
    background-color: #fff; /* Заставить iframe быть светлым, если он не адаптируется */
/* } */
/* @media (prefers-color-scheme: dark) {
    iframe.adapts-to-dark-theme {
        background-color: transparent; /* или var(--site-background) */
/* }
} */


/* --- Очистка float (если используется) --- */
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
    content: "";
    display: table;
    table-layout: fixed;
}
.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
    clear: both;
}