/* 
Theme Name: Webmister
Theme URI: https://webmister.pro/
Description: Hello Elementor Child theme by Webmister
Author: Webmister
Author URI: https://webmister.pro/
Template: hello-elementor
Version: 1.0.1
Text Domain: webmister
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/

/* ------------------------------------------------------------------
   Перенесено из Customizer → Additional CSS темы JupiterX (sakura)
   при переезде на Hello Elementor, 2026-09-14. Правила для
   Raven/Jet-виджетов переписаны под штатные виджеты Elementor.
   ------------------------------------------------------------------ */

/* Шапка: центральный блок и телефоны */
.header-center {
	text-align: center;
	font-size: min(22px, 1.8vw);
	line-height: 30px;
}

.header-center a {
	font-size: 28px;
	line-height: 36px;
}

.wm-header-right {
    width: 270px;
    gap: 15px 15px;
}

.header-phone {
	text-align: right;
	font-size: 22px;
	line-height: 30px;
    width: 199px;
}

.header-phone p {
	margin: 0;
}
/* значок Viber: отступы и выравнивание по середине строки, как давали JupiterX
   (img.alignnone margin 5/20/20/0 и img vertical-align middle) — без них телефоны
   ниже прижимаются к основному номеру */
.header-center img {
	margin: 5px 10px 20px 0;
	width: 30px;
	vertical-align: middle;
}

[data-elementor-type="header"] .wpml-ls {
    padding: 0;
}
/* Шапка: переключатель языков столбиком, шаг строк 20px — как у телефонов справа */
html body [data-elementor-type="header"] .elementor-widget-wpml-language-switcher .wpml-ls-legacy-list-horizontal > ul {
	line-height: 20px;
}
html body [data-elementor-type="header"] .elementor-widget-wpml-language-switcher .wpml-ls-legacy-list-horizontal .wpml-ls-item {
	display: block;
}
html body [data-elementor-type="header"] .elementor-widget-wpml-language-switcher .wpml-ls-legacy-list-horizontal .wpml-ls-item > a {
	font-size: 18px;
    line-height: 28px;
	padding: 0;
}

/* Шапка: текущий язык в переключателе — жирным */
[data-elementor-type="header"] .wpml-ls-current-language > a,
[data-elementor-type="header"] .wpml-ls-current-language > a span {
	font-weight: 500;
}

/* Карточки услуг (бывший jet-banner, теперь Call to Action): лёгкая тень у заголовка и цены */
.elementor-element.works-img .elementor-cta__title {
	text-shadow: 1px 0 rgba(0,0,0,.3), 1px 1px rgba(0,0,0,.3), 0 1px rgba(0,0,0,.3), -1px 1px rgba(0,0,0,.3),
		-1px 0 rgba(0,0,0,.3), -1px -1px rgba(0,0,0,.3), 0 -1px rgba(0,0,0,.3), 1px -1px rgba(0,0,0,.3);
}
.elementor-element.works-img .elementor-cta__description {
	text-shadow: 0 0 6px rgba(0,0,0,.6);
}

/* Меню в подвале */
.menu-services-container ul.menu li {
	margin-bottom: 4px;
}

/* Шапка на узких экранах */
@media (max-width: 950px) {
	.header-center {
		font-size: 16px;
		line-height: 18px;
	}
	.header-center a {
		padding-top: 60px;
		font-size: 22px;
		line-height: 22px;
	}
    
    .wm-header-right {
        width: 210px;
        gap: 10px 10px;
    }
	.header-phone {
		font-size: 18px;
		line-height: 20px;
        width: 163px;
	}
    
    /* Шапка: переключатель языков столбиком, шаг строк 20px — как у телефонов справа */
    html body [data-elementor-type="header"] .elementor-widget-wpml-language-switcher .wpml-ls-legacy-list-horizontal > ul {
        line-height: 20px;
    }
    html body [data-elementor-type="header"] .elementor-widget-wpml-language-switcher .wpml-ls-legacy-list-horizontal .wpml-ls-item > a {
        font-size: 16px;
        line-height: 20px;
        padding: 0;
    }
}

/* Шапка на мобилке */
@media (max-width: 767px) {

    .wm-header-right {
        width: 200px;
        gap: 0px 0px;
    }
	.header-phone {
		font-size: 18px;
		line-height: 20px;
        width: 163px;
	}
    
    /* Шапка: переключатель языков столбиком, шаг строк 20px — как у телефонов справа */
    html body [data-elementor-type="header"] .elementor-widget-wpml-language-switcher .wpml-ls-legacy-list-horizontal > ul {
        line-height: 20px;
    }
    html body [data-elementor-type="header"] .elementor-widget-wpml-language-switcher .wpml-ls-legacy-list-horizontal .wpml-ls-item > a {
        font-size: 16px;
        line-height: 20px;
        padding: 0;
    }
}

/* Меню шапки на средних экранах (перенесено из Customizer, селекторы под Nav Menu Elementor Pro) */
@media (max-width: 1166px) {
	.elementor-20 .elementor-nav-menu--main .elementor-item {
		font-size: 18px;
	}
}
@media (max-width: 1024px) {
	.elementor-20 .elementor-nav-menu--main .elementor-item {
		font-size: 15px;
	}
}

/* Липкая шапка (бывший шаблон JupiterX «Sticky Header»): секция со sticky-эффектом Pro,
   видна только после прокрутки — когда Elementor вешает класс elementor-sticky--effects. */
.wm-sticky-header {
	opacity: 0;
	visibility: hidden;
	transform: translateY(-100%);
	transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
}
.wm-sticky-header.elementor-sticky--effects {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity .3s ease, transform .3s ease;
}
.wm-sticky-header .elementor-nav-menu--main .elementor-item {
	font-size: 16px;
	letter-spacing: .6px;
}

/* Карточки услуг: эффект «sadie» JetBanner — цена выезжает снизу при наведении */
.elementor-element.works-img .elementor-cta__description {
	opacity: 0;
	transform: translateY(15px);
	transition: opacity .35s ease, transform .35s ease;
}
.elementor-element.works-img .elementor-cta:hover .elementor-cta__description {
	opacity: 1;
	transform: none;
}

/* Подвал: список услуг (WP-виджет «Меню навигации») — без маркеров, как в JupiterX */
.elementor-widget-wp-widget-nav_menu ul.menu {
	list-style: none;
	margin: 0;
	padding: 0;
}
.elementor-widget-wp-widget-nav_menu ul.menu li {
	margin: 0 0 .6em;
	font-size: 15.75px;
	line-height: 1.83;
}
.elementor-widget-wp-widget-nav_menu ul.menu li a {
	color: #000;
}

/* Галерея «Наши работы» (штатный Image Gallery): в JupiterX картинки растягивались
   на ширину колонки и шли без зазоров */
.elementor-image-gallery .gallery-item {
	margin: 0 !important;
	padding: 0 !important;
}
.elementor-image-gallery .gallery-item img {
	width: 100%;
	height: auto;
	border: 0 !important;
}

/* Градиентные заголовки Raven (JupiterX): linear-gradient 150deg #c22828 -> #f2295b */
.wm-gradient-title .elementor-heading-title {
	background-image: linear-gradient(150deg, #c22828 0%, #f2295b 75%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

/* Штатный Heading: в оригинале line-height 1 (.elementor-heading-title), а правило kit
   для h1–h6 его перебивает. Бывшим Raven-заголовкам высота строки задана в самом виджете. */
.elementor-widget-heading .elementor-heading-title {
	line-height: 1;
}

/* Липкая шапка — контейнер: пока не прилипла, не должна занимать место над основной шапкой */
.wm-sticky-header:not(.elementor-sticky--effects) {
	margin-bottom: -50px;
}
@media (max-width: 767px) {
	.wm-sticky-header:not(.elementor-sticky--effects) {
		margin-bottom: -71px;
	}
}

/* Меню липкой шапки всегда в одну строку, как в оригинале: при переносе полоса
   вырастает до 93px, а компенсация выше рассчитана на 50px — страница съезжает вниз.
   На узком десктопе (1025–1200px) пункты сближаются, чтобы влезть в колонку. */
.wm-sticky-header .elementor-nav-menu--layout-horizontal .elementor-nav-menu {
	flex-wrap: nowrap;
}
@media (min-width: 1025px) and (max-width: 1200px) {
	.wm-sticky-header.e-con .elementor-element.elementor-widget-nav-menu {
		--e-nav-menu-horizontal-menu-item-margin: calc(20px / 2);
	}
}

/* Кнопка мобильного меню: в оригинале (Raven) — чёрная иконка без подложки */
.elementor-menu-toggle,
.elementor-menu-toggle:hover,
.elementor-menu-toggle.elementor-active {
	background-color: transparent;
	color: #000;
}

/* Карточки услуг: в оригинале (JetBanner) высота шла от картинки 400×267 — пропорция 3:2 */
.works-img.elementor-cta--skin-cover .elementor-cta__content {
	min-height: 0;
	aspect-ratio: 3 / 2;
}

.works-img.elementor-cta--skin-cover .elementor-cta__content .elementor-cta__title {
    padding-top: 60px;
}

/* Двухчастный заголовок (бывший JetHeadline, «Звоните / телефон»): вторая часть жирная, как в оригинале */
.elementor-widget-heading .elementor-heading-title strong {
	font-weight: 700;
}

/*
 * КАК  МЫ РАБОТАЕМ СТРЕЛОЧКИ
 */

/* Красные стрелки «>>» справа от шага в блоке «Как мы работаем» */
.wm-work {
	position: relative;
	overflow: visible;
}

.wm-work-p-right::after,
.wm-work-p-bottom::after,
.wm-work-p-left::after,
.wm-work-m-right::after,
.wm-work-m-bottom::after,
.wm-work-m-left::after {
    display: none;
}

.wm-work-d-right::after {
    display: block;
	content: "";
	position: absolute;
	top: 75px;                   /* центр кружка 150px */
	left: calc(100% - 53px);
	width: 106px;
	height: 76px;
	background: url("/wp-content/uploads/2019/06/arrowtop.png") no-repeat center / contain;
	pointer-events: none;
}

.wm-work-d-bottom::after {
    display: block;
    content: "";
    position: absolute;
    top: calc(100% - 35px);
    left: calc(50% - 25px);
    width: 48px;
    height: 67px;
    background: url(/wp-content/uploads/2019/06/arrowbot.png) no-repeat center / contain;
    pointer-events: none;
    transform: rotate(90deg);
}

.wm-work-d-left::after {
    display: block;
	content: "";
	position: absolute;
	top: 75px;                   /* центр кружка 150px */
	left: -53px;
	width: 106px;
	height: 76px;
	background: url("/wp-content/uploads/2019/06/arrowtop.png") no-repeat center / contain;
	pointer-events: none;
    transform: rotate(180deg);
}

@media (max-width: 1024px) {

    .wm-work-d-right::after,
    .wm-work-d-bottom::after,
    .wm-work-d-left::after,
    .wm-work-m-right::after,
    .wm-work-m-bottom::after,
    .wm-work-m-left::after {
        display: none;
    }
    
    .wm-work-p-right::after {
        display: block;
        content: "";
        position: absolute;
        top: 75px;                   /* центр кружка 150px */
        left: calc(100% - 53px);
        width: 106px;
        height: 76px;
        background: url("/wp-content/uploads/2019/06/arrowtop.png") no-repeat center / contain;
        pointer-events: none;
        transform: rotate(0deg);
    }
    
    .wm-work-p-bottom::after {
        display: block;
        content: "";
        position: absolute;
        top: calc(100% - 35px);
        left: calc(50% - 25px);
        width: 48px;
        height: 67px;
        background: url(/wp-content/uploads/2019/06/arrowbot.png) no-repeat center / contain;
        pointer-events: none;
        transform: rotate(90deg);
    }
    
    .wm-work-p-left::after {
        display: block;
        content: "";
        position: absolute;
        top: 75px;                   /* центр кружка 150px */
        left: -53px;
        width: 106px;
        height: 76px;
        background: url("/wp-content/uploads/2019/06/arrowtop.png") no-repeat center / contain;
        pointer-events: none;
        transform: rotate(180deg);
    }
}

@media (max-width: 767px) {
    .wm-work-d-right::after,
    .wm-work-d-bottom::after,
    .wm-work-d-left::after,
    .wm-work-p-right::after,
    .wm-work-p-bottom::after,
    .wm-work-p-left::after {
        display: none;
    }
    
    .wm-work-m-right::after {
        display: block;
        content: "";
        position: absolute;
        top: 75px;                   /* центр кружка 150px */
        left: calc(100% - 53px);
        width: 106px;
        height: 76px;
        background: url("/wp-content/uploads/2019/06/arrowtop.png") no-repeat center / contain;
        pointer-events: none;
        transform: rotate(0deg);
    }
    
    .wm-work-m-bottom::after {
        display: block;
        content: "";
        position: absolute;
        top: calc(100% - 35px);
        left: calc(50% - 25px);
        width: 48px;
        height: 67px;
        background: url(/wp-content/uploads/2019/06/arrowbot.png) no-repeat center / contain;
        pointer-events: none;
        transform: rotate(90deg);
    }
    
    .wm-work-m-left::after {
        display: block;
        content: "";
        position: absolute;
        top: 75px;                   /* центр кружка 150px */
        left: -53px;
        width: 106px;
        height: 76px;
        background: url("/wp-content/uploads/2019/06/arrowtop.png") no-repeat center / contain;
        pointer-events: none;
        transform: rotate(180deg);
    }
}

/* Мобильное меню (выпадает по гамбургеру) — как у Raven в JupiterX: белые пункты прописными,
   серые разделители, активный пункт красный. Размер 16px и отступы 15px — в настройках виджета (планшет).
   Подменю на десктопе — другой элемент (ul.sub-menu), его не трогаем.
   html body — чтобы перебить CSS самого виджета Elementor. */
html body .elementor-widget-nav-menu nav.elementor-nav-menu--dropdown.elementor-nav-menu__container {
	background-color: #fff;
}
html body .elementor-widget-nav-menu nav.elementor-nav-menu--dropdown.elementor-nav-menu__container a.elementor-item,
html body .elementor-widget-nav-menu nav.elementor-nav-menu--dropdown.elementor-nav-menu__container a.elementor-sub-item {
	text-transform: uppercase;
	color: #000;
	background-color: #fff;
	border-bottom: 1px solid #ddd;
}
html body .elementor-widget-nav-menu nav.elementor-nav-menu--dropdown.elementor-nav-menu__container a.elementor-item-active,
html body .elementor-widget-nav-menu nav.elementor-nav-menu--dropdown.elementor-nav-menu__container a:hover {
	color: #c22828;
	background-color: #fff;
}

/* Стрелка подменю: в оригинале была только в мобильном меню, в горизонтальном — нет */
.elementor-nav-menu--main .elementor-item .sub-arrow {
	display: none;
}

/* Кнопки на всю ширину со значком («Заказать»): в старом Elementor текст растягивался
   (flex-grow: 1) и значок стоял у края кнопки, а не сразу за текстом */
.elementor-widget-button.elementor-align-justify .elementor-button-content-wrapper,
.elementor-widget-button[class*="elementor-mobile-align-justify"] .elementor-button-content-wrapper {
	width: 100%;
}
.elementor-widget-button.elementor-align-justify .elementor-button-text {
	flex-grow: 1;
	text-align: center;
}

/* Формы, бывшие Raven Form: у полей был внутренний отступ 17px (поле ~54px высотой) */
.wm-raven-form .elementor-field-group .elementor-field-textual {
	padding: 17px;
	font-size: 16px;
	line-height: 1.25;
	min-height: 0;
}




/*
 * Футер меню
 */

/* Подвал: меню услуг на планшете — в строку, с переносом */
@media (min-width: 768px) and (max-width: 1024px) {
	.wm-footer-menu ul.menu {
		display: flex;
		flex-wrap: wrap;
		gap: 4px 24px; /* между строками / между пунктами */
        justify-content: space-between;
	}
	.wm-footer-menu ul.menu li {
		margin: 0;
	}
}