/* Стили страницы FAQ (page-faq.php, Template Name: FAQ).
   Подключается только на этом шаблоне — см. functions.php. */


.faq-intro .btn{
	z-index:9
}
.faq-intro .btn:before {
    position: absolute;
    z-index: -1;
    content: '';
    top: 0;
    left: 0;
    bottom: 0;
    width: 0;
    background: #1D3F49;
	    -webkit-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.faq-intro .btn:hover:before {
    width: 100%;
}
.faq-top {
	align-items: flex-start;
}
/* .faq-intro по вертикали всегда посередине окна, а не прижата к верху.
   Первая версия (top:50% + transform:translateY(-50%) на самом блоке) на
   практике ломалась на невысоких/узких окнах сразу в двух местах — оба
   проверены вживую, отпечатки в скриншотах:
    1) ничем не ограничена сверху — на невысоких окнах уводила блок ВЫШЕ
       шапки сайта, подпись обрезалась;
    2) в диапазоне 671–1000px по ширине это уже наложение поверх соседней
       колонки — у сайта .content-page .w33/.w66 схлопывают обе колонки в
       100% ширины при max-width:1000px (см. style-0708.css), а наш же
       медиа-запрос ниже отключал sticky только при max-width:670px; в
       промежутке 671–1000px обе колонки уже друг на друге по ширине, а
       sticky-блок продолжал жить своей жизнью поверх текста списка.
   Сейчас центрируем не transform'ом сам блок (ничем не ограничен), а
   контент ВНУТРИ блока через flex — у блока фиксированная нижняя граница
   (min-height) и верхняя (sticky top:170px, как было исходно, дальше
   шапки не залезет). Медиа-запрос стека ниже поправлен на 1000px — чтобы
   sticky отключался ровно там же, где сайт схлопывает колонки, без зазора. */
.faq-intro {
	position: -webkit-sticky;
	position: sticky;
	top: 170px;
	min-height: calc(100vh - 170px);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
}
.faq-eyebrow {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: #136A74;
	margin-bottom: 20px;
}
.faq-eyebrow__icon {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #EDF5F4;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-flex: 0;
	-ms-flex: none;
	flex: none;
}
.faq-intro h1 {
	margin-bottom: 20px;
}
.faq-intro__text {
	max-width: 420px;
	margin-bottom: 30px;
}

/* Кнопка "Задать свой вопрос" — разметка та же, что у "Получить прайс" на
   главной (class="btn" + svg-стрелка), но там эти правила подключены через
   .for_block_content, а здесь кнопка лежит в .faq-intro — довешиваем то же
   поведение через этот селектор, HTML кнопки при этом остаётся стандартным.
   Раскраска — своя, под эту страницу: по умолчанию заливка и рамка #136A74,
   текст и стрелка белые. Приём с наведением остался прежний — растущий по
   ширине ::before (z-index:-1 рисуется поверх собственного фона кнопки, но
   под текстом/стрелкой — см. порядок отрисовки CSS2.1 §E), просто теперь он
   не проявляет цвет из-под прозрачной кнопки, а перекрывает уже закрашенную
   заливку сплошным #1D3F49. Текст и стрелка уже белые по умолчанию, поэтому
   отдельно перекрашивать их при наведении не нужно — меняется только рамка. */
.faq-intro .btn {
	position: relative;
	padding-right: 74px;
	text-decoration: none;
	overflow: hidden;
	background: #136A74;
	border-color: #136A74;
	color: #fff;
	transition: border-color .3s ease;
}
.faq-intro .btn svg {
	fill: #fff;
	position: absolute;
	right: 30px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
.faq-intro .btn:before {
	position: absolute;
	z-index: -1;
	content: '';
	top: 0;
	left: 0;
	bottom: 0;
	width: 0;
	background: #1D3F49;
}
.faq-intro .btn:hover {
	border-color: #1D3F49;
}
.faq-intro .btn:hover:before {
	width: 100%;
}

/* Постоянный бегущий блик — узкая скошенная полупрозрачная полоса, крутится
   по кругу независимо от наведения. z-index:2 — выше текста и стрелки (те
   красятся в слое z-index:auto, п.6 порядка отрисовки CSS2.1 §E), поэтому
   блик виден поверх них, как обычный глянцевый отсвет; pointer-events:none —
   чтобы не перехватывал клики по кнопке. overflow:hidden на самой кнопке
   (выше) обрезает блик по границам кнопки в конечных положениях -60%/130%. */
.faq-intro .btn:after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60%;
	width: 40%;
	z-index: 2;
	pointer-events: none;
	background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(50%, rgba(255, 255, 255, .85)), to(transparent));
	background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, .85) 50%, transparent 100%);
	-webkit-transform: skewX(-20deg);
	transform: skewX(-20deg);
	-webkit-animation: faq-btn-shine 3.2s ease-in-out infinite;
	animation: faq-btn-shine 3.2s ease-in-out infinite;
}
@-webkit-keyframes faq-btn-shine {
	0%, 15% { left: -60%; }
	65%, 100% { left: 130%; }
}
@keyframes faq-btn-shine {
	0%, 15% { left: -60%; }
	65%, 100% { left: 130%; }
}

.faq-list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	gap: 15px;
}

.faq-item {
	background: #EDF5F4;
	-webkit-border-top-right-radius: 15px;
	-webkit-border-bottom-left-radius: 15px;
	border-top-right-radius: 15px;
	border-bottom-left-radius: 15px;
}
.faq-item + .faq-item {
	margin-top: 0;
}

/* Паддинг — на summary/answer, а не на самом <details>: тогда высота
   свёрнутого .faq-item в точности равна высоте .faq-item__question, это
   нужно faq.js для правильного расчёта плавной анимации раскрытия. */
.faq-item__question {
	list-style: none;
	cursor: pointer;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	gap: 20px;
	padding: 30px;
}
.faq-item__question::-webkit-details-marker {
	display: none;
}
.faq-item__question::marker {
	content: '';
}
/* Более специфичный селектор, чем .content-page h2 из style-0708.css
   (иначе там побеждает по порядку подключения стилей, а не по каскаду). */
.faq-list .faq-item__question h2 {
	font-family: 'Montserrat';
	font-weight: 700;
	font-size: 20px;
	line-height: 1.3;
	color: #1D3F49;
	margin: 0;
}

.faq-item__icon {
	position: relative;
	-webkit-box-flex: 0;
	-ms-flex: none;
	flex: none;
	width: 34px;
	height: 34px;
	margin-top: 2px;
	border-radius: 50%;
	background: #136A74;
	-webkit-transition: -webkit-transform 0.3s ease;
	transition: -webkit-transform 0.3s ease;
	-o-transition: transform 0.3s ease;
	transition: transform 0.3s ease;
	transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
.faq-item__icon:before,
.faq-item__icon:after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	background: #fff;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.faq-item__icon:before {
	width: 14px;
	height: 2px;
}
.faq-item__icon:after {
	width: 2px;
	height: 14px;
}
/* Плюс превращается в крестик поворотом всего кружка на 45° — а не сменой
   вертикальной палочки на минус. .is-open — ставит faq.js синхронно с
   началом анимации раскрытия; [open] — запасной вариант, если JS выключен
   (аккордеон и тогда работает, просто без анимации высоты). */
.faq-item.is-open .faq-item__icon,
.faq-item[open] .faq-item__icon {
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.faq-item__answer {
	padding: 0 30px 30px;
	max-width: 900px;
}
.faq-item__answer p {
	margin: 0 0 15px;
}
.faq-item__answer p:last-child {
	margin-bottom: 0;
}
.faq-item__answer a {
	color: #136A74;
	text-decoration: underline;
}
.faq-item__answer a:hover {
	text-decoration: none;
}
.faq-item__answer img {
	max-width: 100%;
	height: auto;
	border-radius: 10px;
	margin: 10px 0;
}

.faq-breadcrumbs {
	display: block;
	font-size: 14px;
	color: #777;
	margin-bottom: 30px;
}
.faq-breadcrumbs a {
	color: #136A74;
	text-decoration: underline;
}
.faq-breadcrumbs a:hover {
	text-decoration: none;
}

/* Textarea в форме модалки "Задать свой вопрос" — глобальный input{line-height:48px}
   из style-0708.css на textarea не распространяется (селектор там только "input"),
   а если бы распространялся — на многострочном поле это выглядело бы огромными
   межстрочными интервалами. Поэтому здесь отдельно: line-height:1.5, а нужный
   визуальный отступ сверху/снизу — через padding, не через line-height. */
#faq_question textarea {
	display: block;
	width: 100%;
	font-family: 'Verdana';
	color: black;
	font-size: 16px;
	border: none;
	background: #E4F0EE;
	line-height: 1.5;
    max-height: 220px;
	padding: 14px 15px;
	margin-bottom: 15px;
	resize: vertical;
	min-height: 130px;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-left-radius: 10px;
}
#faq_question .modal-content{
    max-width:800px
}
/* Выше 1240px — левая колонка фиксированной ширины (~580px), а не 33% от
   .wrapper (иначе на 2560px левая колонка становится неоправданно широкой). */
@media (min-width: 1241px) {
	.faq-top .faq-intro {
		width: 580px;
		flex: 0 0 580px;
	}
	.faq-top .faq-list {
		width: calc(100% - 580px);
		flex: 1 1 auto;
	}
}

/* 1240–1001px — колонки остаются рядом (не стек). Сайтовые .w33/.w66 дают
   тут 40%/60% (style-0708.css, тот же брейкпоинт max-width:1440px) — здесь
   расширяем до 42%/58% под эту страницу; .faq-top . перед .w33/.w66 —
   чтобы задеть только эту колонку, а не .w33/.w66 на остальном сайте. */
@media (max-width: 1440px) {
	.faq-top .w33 {
		width: 42%;
	}
	.faq-top .w66 {
		width: 58%;
	}
}

/* Стек в одну колонку — РОВНО на том же брейкпоинте, на котором сам сайт
   схлопывает .w33/.w66 в 100% ширины (.content-page .w33, .content-page
   .w66 { width:100% } при max-width:1000px в style-0708.css). Раньше здесь
   стоял max-width:670px "на глаз" — из-за рассинхрона в промежутке
   671–1000px колонки уже накладывались друг на друга по сайтовым правилам,
   а .faq-intro при этом ещё жил как sticky/двухколоночный и наезжал на
   текст списка (проверено вживую). Держите это значение равным реальному
   брейкпоинту .w33/.w66 сайта — если он изменится, поменяйте и здесь. */
@media (max-width: 1000px) {
	.faq-top .faq-intro,
	.faq-top .faq-list {
		width: 100%;
	}
	.faq-intro {
		position: static;
		margin-bottom: 40px;
		min-height: 0;
	}
	.faq-intro__text {
		max-width: 100%;
	}
	.faq-intro .btn {
		width: 100%;
	}
}
@media (max-width: 768px) {
    #faq_question .w50{
        width:100%
    }
    #faq_question .modal-content {
    max-width: 400px;
}
}
/* Ниже — чисто косметика под маленький экран (отступы, размер шрифта),
   не связана со стеком колонок и остаётся на отдельном, более узком
   брейкпоинте. */
@media (max-width: 670px) {
	.faq-item__question {
		gap: 15px;
		padding: 20px;
	}
	.faq-item__answer {
		padding: 0 20px 20px;
	}
	.faq-list .faq-item__question h2 {
		font-size: 18px;
	}
	.faq-item__icon {
		width: 28px;
		height: 28px;
	}
}