/*
Theme Name: Dental Child
Description: Дочерняя тема для Dental. Здесь живут правки, которые не должны теряться при перегенерации или переустановке родительской темы: логотип в шапке и подвале, свои стили.
Template: dental
Version: 5.5
*/

/* Логотип.
   Родительская тема ужимает картинку в подвале правилом
   .footer-logo img { width: 100%; max-width: 220px }, и вместе с height
   из HTML-атрибута это расплющивало логотип по горизонтали.
   Поэтому размеры задаём здесь явно, а высоту/ширину отдаём на auto. */
.navbar-brand img{
	width: auto;
	height: 132px;
	max-width: 100%;
}

.footer-logo img{
	width: auto;
	max-width: 300px;
	height: auto;
}

/* На планшетах и телефонах шапка ниже — уменьшаем логотип, чтобы не распирал её. */
@media (max-width: 991px){
	.navbar-brand img{
		height: 104px;
	}
}

@media (max-width: 575px){
	.navbar-brand img{
		height: 84px;
	}
}

/* Закреплённая шапка.
   Механика есть в function.js родителя, но включается только при наличии
   класса .active-sticky-header — он проставлен в header.php дочерней темы.
   Здесь шапка в залипшем состоянии делается компактнее, чтобы не съедать экран. */
header.main-header .header-sticky.active .navbar{
	padding: 8px 0;
	transition: padding 0.25s ease-in-out;
}

header.main-header .header-sticky.active .navbar-brand img{
	height: 90px;
	transition: height 0.25s ease-in-out;
}

header.main-header .header-sticky.active{
	box-shadow: 0 6px 24px rgba(14, 56, 76, 0.08);
}

@media (max-width: 991px){
	header.main-header .header-sticky.active .navbar-brand img{
		height: 52px;
	}
}

/* Высота места под шапку.
   function.js родителя проставляет header.main-header инлайновую height по текущей
   высоте .header-sticky — а она меняется, когда шапка становится компактной,
   и после возврата наверх место под шапку оказывается заниженным.
   Поэтому фиксируем высоту сами: логотип + вертикальные паддинги .navbar (30px). */
header.main-header{
	height: 168px !important;
}

@media (max-width: 991px){
	header.main-header{
		height: 144px !important;
	}
}

@media (max-width: 575px){
	header.main-header{
		height: 128px !important;
	}
}

/* ===== Why Choose Us ===== */

/* В блоке «Why Choose Us» по центру стоит 3D-иллюстрация с прозрачным фоном,
   поэтому арка и тень, которые были под фотографией, здесь не нужны. */
.why-choose-image{
	text-align: center;
}

.why-choose-image figure img{
	max-width: 100%;
	height: auto;
}

/* Иконки пунктов — в круглых белых плашках, как на фирменном макете. */
.why-choose-us .why-choose-item{
	margin-bottom: 38px;
}

.why-choose-us .why-choose-item .icon-box{
	flex: 0 0 74px;
	width: 74px;
	height: 74px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--white-color);
	box-shadow: 0 12px 28px rgba(14, 56, 76, 0.10);
	transition: background 0.3s ease-in-out;
}

.why-choose-us .why-choose-item .icon-box img{
	max-width: 38px;
	transition: filter 0.3s ease-in-out;
}

.why-choose-us .why-choose-item:hover .icon-box{
	background: var(--accent-color);
}

.why-choose-us .why-choose-item:hover .icon-box img{
	filter: brightness(0) invert(1);
}

.why-choose-us .why-choose-content{
	width: calc(100% - 89px);
}

.why-choose-us .why-choose-content h3{
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 18px;
	margin-bottom: 8px;
}

@media (max-width: 991px){
	.why-choose-image{
		max-width: 420px;
		margin-left: auto;
		margin-right: auto;
	}

	.why-choose-us .why-choose-item{
		margin-bottom: 30px;
	}
}

/* Звезда (excellence) сплошная и легче остальных иконок — компенсируем размером. */
.why-choose-box-2 .why-choose-item:last-child .icon-box img{
	max-width: 30px;
}

/* Логотип — цельный фирменный рендер с собственным фоном.
   Скругляем углы и убираем лишний воздух, чтобы плашка не спорила с шапкой. */
.navbar-brand img,
.footer-logo img{
	border-radius: 10px;
}

.navbar-brand{
	line-height: 0;
}

/* Hero: снимок показываем целиком, без кадрирования — как стикер,
   с белой рамкой, мягкой тенью и небольшим подъёмом относительно текста. */
.hero .hero-image{
	text-align: center;
}

.hero .hero-img figure{
	display: inline-block;
	margin: 0;
	padding: 10px;
	background: var(--white-color);
	border-radius: 26px;
	box-shadow: 0 22px 48px rgba(14, 56, 76, 0.16), 0 2px 6px rgba(14, 56, 76, 0.06);
	line-height: 0;
}

.hero .hero-img figure img{
	width: 100%;
	height: auto;
	border-radius: 18px;
}

@media (min-width: 992px){
	.hero .hero-img{
		max-width: 460px;
		margin: 0 auto;
		transform: translateY(-30px);
	}
}

@media (max-width: 991px){
	.hero .hero-img{
		max-width: 420px;
		margin: 0 auto 30px;
	}
}
*
Theme Name: Dental Child
Description: Дочерняя тема для Dental. Здесь живут правки, которые не должны теряться при перегенерации или переустановке родительской темы: логотип в шапке и подвале, свои стили.
Template: dental
Version: 4.0
*/

/* Логотип.
   Родительская тема ужимает картинку в подвале правилом
   .footer-logo img { width: 100%; max-width: 220px }, и вместе с height
   из HTML-атрибута это расплющивало логотип по горизонтали.
   Поэтому размеры задаём здесь явно, а высоту/ширину отдаём на auto. */
.navbar-brand img{
	width: auto;
	height: 132px;
	max-width: 100%;
}

.footer-logo img{
	width: auto;
	max-width: 300px;
	height: auto;
}

/* На планшетах и телефонах шапка ниже — уменьшаем логотип, чтобы не распирал её. */
@media (max-width: 991px){
	.navbar-brand img{
		height: 104px;
	}
}

@media (max-width: 575px){
	.navbar-brand img{
		height: 84px;
	}
}

/* Закреплённая шапка.
   Механика есть в function.js родителя, но включается только при наличии
   класса .active-sticky-header — он проставлен в header.php дочерней темы.
   Здесь шапка в залипшем состоянии делается компактнее, чтобы не съедать экран. */
header.main-header .header-sticky.active .navbar{
	padding: 8px 0;
	transition: padding 0.25s ease-in-out;
}

header.main-header .header-sticky.active .navbar-brand img{
	height: 90px;
	transition: height 0.25s ease-in-out;
}

header.main-header .header-sticky.active{
	box-shadow: 0 6px 24px rgba(14, 56, 76, 0.08);
}

@media (max-width: 991px){
	header.main-header .header-sticky.active .navbar-brand img{
		height: 52px;
	}
}

/* Высота места под шапку.
   function.js родителя проставляет header.main-header инлайновую height по текущей
   высоте .header-sticky — а она меняется, когда шапка становится компактной,
   и после возврата наверх место под шапку оказывается заниженным.
   Поэтому фиксируем высоту сами: логотип + вертикальные паддинги .navbar (30px). */
header.main-header{
	height: 168px !important;
}

@media (max-width: 991px){
	header.main-header{
		height: 144px !important;
	}
}

@media (max-width: 575px){
	header.main-header{
		height: 128px !important;
	}
}

/* ===== Why Choose Us ===== */

/* В блоке «Why Choose Us» по центру стоит 3D-иллюстрация с прозрачным фоном,
   поэтому арка и тень, которые были под фотографией, здесь не нужны. */
.why-choose-image{
	text-align: center;
}

.why-choose-image figure img{
	max-width: 100%;
	height: auto;
}

/* Иконки пунктов — в круглых белых плашках, как на фирменном макете. */
.why-choose-us .why-choose-item{
	margin-bottom: 38px;
}

.why-choose-us .why-choose-item .icon-box{
	flex: 0 0 74px;
	width: 74px;
	height: 74px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--white-color);
	box-shadow: 0 12px 28px rgba(14, 56, 76, 0.10);
	transition: background 0.3s ease-in-out;
}

.why-choose-us .why-choose-item .icon-box img{
	max-width: 38px;
	transition: filter 0.3s ease-in-out;
}

.why-choose-us .why-choose-item:hover .icon-box{
	background: var(--accent-color);
}

.why-choose-us .why-choose-item:hover .icon-box img{
	filter: brightness(0) invert(1);
}

.why-choose-us .why-choose-content{
	width: calc(100% - 89px);
}

.why-choose-us .why-choose-content h3{
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 18px;
	margin-bottom: 8px;
}

@media (max-width: 991px){
	.why-choose-image{
		max-width: 420px;
		margin-left: auto;
		margin-right: auto;
	}

	.why-choose-us .why-choose-item{
		margin-bottom: 30px;
	}
}

/* Звезда (excellence) сплошная и легче остальных иконок — компенсируем размером. */
.why-choose-box-2 .why-choose-item:last-child .icon-box img{
	max-width: 30px;
}

/* Логотип — цельный фирменный рендер с собственным фоном.
   Скругляем углы и убираем лишний воздух, чтобы плашка не спорила с шапкой. */
.navbar-brand img,
.footer-logo img{
	border-radius: 10px;
}

.navbar-brand{
	line-height: 0;
}


/* ===== Отзывы: карточки в один ряд ===== */

.reviews-slider .swiper{
	padding: 10px 4px 30px;
}

.reviews-slider .swiper-slide{
	height: auto;
}

.review-card{
	display: flex;
	flex-direction: column;
	gap: 18px;
	height: 100%;
	padding: 30px;
	background: var(--white-color);
	border: 1px solid var(--dark-divider-color);
	border-radius: 20px;
	box-shadow: 0 14px 34px rgba(14, 56, 76, 0.07);
	transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.review-card:hover{
	transform: translateY(-4px);
	box-shadow: 0 20px 44px rgba(14, 56, 76, 0.12);
}

.review-card-stars{
	display: flex;
	gap: 4px;
	color: #F2A93B;
	font-size: 14px;
}

.review-card-text{
	margin: 0;
	flex: 1;
	color: var(--text-color);
	display: -webkit-box;
	-webkit-line-clamp: 7;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.review-card-author{
	display: flex;
	align-items: center;
	gap: 14px;
	padding-top: 18px;
	border-top: 1px solid var(--dark-divider-color);
}

.review-card-author img{
	width: 52px;
	height: 52px;
	border-radius: 50%;
	flex: 0 0 52px;
}

.review-card-author-info h3{
	margin: 0 0 2px;
	font-size: 17px;
	font-weight: 600;
	text-transform: capitalize;
}

.review-card-author-info p{
	margin: 0;
	font-size: 14px;
	color: var(--ink-faint, #7A8894);
}

.reviews-slider-btn{
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 10px;
	position: static;
}

/* ===== Врачи на странице About ===== */

.our-doctors{
	padding: 100px 0 60px;
	background: var(--white-color);
}

.doctor-row{
	margin-bottom: 80px;
}

.doctor-row:last-child{
	margin-bottom: 0;
}

/* Чётные врачи — фото справа, текст слева. */
@media (min-width: 992px){
	.doctor-row:nth-child(even){
		flex-direction: row-reverse;
	}

	.doctor-row:nth-child(even) .doctor-bio{
		padding-right: 40px;
		padding-left: 0;
	}

	.doctor-bio{
		padding-left: 40px;
	}
}

/* Фото — как стикер: белая рамка, скругление, мягкая тень. */
.doctor-photo figure{
	margin: 0;
	padding: 10px;
	background: var(--white-color);
	border-radius: 26px;
	box-shadow: 0 22px 48px rgba(14, 56, 76, 0.16), 0 2px 6px rgba(14, 56, 76, 0.06);
	line-height: 0;
}

.doctor-photo figure img{
	width: 100%;
	height: auto;
	border-radius: 18px;
}

.doctor-photo-caption{
	text-align: center;
	padding-top: 18px;
}

.doctor-photo-caption h3{
	margin: 0 0 4px;
	font-size: 20px;
	font-weight: 600;
}

.doctor-photo-caption p{
	margin: 0;
	color: var(--accent-color);
	font-size: 15px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Биография. */
.doctor-role{
	display: inline-block;
	margin-bottom: 18px;
	padding: 6px 16px;
	border-radius: 999px;
	background: var(--secondary-color);
	color: var(--accent-color);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.doctor-bio p{
	margin-bottom: 16px;
	max-width: 62ch;
}

.doctor-bio p:first-of-type{
	font-size: 18px;
	line-height: 1.7;
	color: var(--primary-color);
}

.doctor-bio p:last-child{
	margin-bottom: 0;
}

@media (max-width: 991px){
	.our-doctors{
		padding: 50px 0 20px;
	}

	.doctor-row{
		margin-bottom: 50px;
	}

	.doctor-photo{
		max-width: 420px;
		margin: 0 auto 30px;
	}
}

/* Подпись под фото в hero — в том же виде, что под портретами врачей. */
.hero-img-caption{
	text-align: center;
	padding-top: 16px;
}

.hero-img-caption h3{
	margin: 0 0 4px;
	font-size: 20px;
	font-weight: 600;
}

.hero-img-caption p{
	margin: 0;
	color: var(--accent-color);
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ===== Блок «About Us» на главной ===== */
/* Раньше здесь были два наложенных снимка со сложным позиционированием;
   теперь одно фото команды, поэтому переопределяем раскладку колонки. */

.about-us .about-image{
	position: relative;
	padding: 0;
	margin: 0;
	min-height: 0;
}

.about-us .about-img-1{
	position: static;
	width: 100%;
	margin: 0;
}

.about-us .about-img-1 figure{
	margin: 0;
	padding: 10px;
	background: var(--white-color);
	border-radius: 26px;
	box-shadow: 0 22px 48px rgba(14, 56, 76, 0.16), 0 2px 6px rgba(14, 56, 76, 0.06);
	line-height: 0;
}

.about-us .about-img-1 figure img{
	width: 100%;
	height: auto;
	border-radius: 18px;
}

/* Круг со стажем — в правом нижнем углу снимка, частично на нём. */
/* Правая колонка: тот же вертикальный ритм, что у фото. */
@media (min-width: 992px){
	.about-us .about-content{
		padding-left: 50px;
	}
}

@media (max-width: 991px){
	.about-us .about-image{
		max-width: 540px;
		margin: 0 auto 50px;
	}

	}

/* Имена врачей и название клиники внутри текстов — акцентным цветом. */
.text-accent{
	color: var(--accent-color);
	font-weight: 600;
}

/* ===== Тексты клиента на главной ===== */

/* Лид в блоке About и слоган клиники. */
.about-content .about-lead{
	font-size: 20px;
	font-weight: 600;
	color: var(--primary-color);
	margin-bottom: 16px;
}

.about-content .section-title p{
	margin-bottom: 14px;
}

.about-tagline{
	margin: 22px 0 26px;
	padding-left: 16px;
	border-left: 3px solid var(--accent-color);
	font-size: 18px;
	font-weight: 600;
	color: var(--primary-color);
}

/* Секция «A Different Approach». */
.our-approach{
	padding: 90px 0;
	background: var(--secondary-color);
}

.approach-text{
	text-align: center;
}

.approach-text p{
	margin-bottom: 18px;
	font-size: 17px;
	line-height: 1.75;
}

.approach-text p:first-child{
	font-size: 20px;
	color: var(--primary-color);
}

.approach-text p:last-child{
	margin-bottom: 0;
}

/* Финальный блок «Your New Smile Starts With a Conversation». */
.start-conversation{
	padding: 0 0 100px;
}

.conversation-box{
	padding: 60px 50px;
	border-radius: 28px;
	background: var(--primary-color);
	text-align: center;
	color: var(--white-color);
}

.conversation-box h2{
	color: var(--white-color);
	margin-bottom: 20px;
	text-wrap: balance;
}

.conversation-box p{
	max-width: 68ch;
	margin: 0 auto 16px;
	color: rgba(255, 255, 255, 0.82);
}

.conversation-box .text-accent{
	color: #9BDCF5;
}

.conversation-actions{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 18px 28px;
	margin-top: 34px;
}

.conversation-phone{
	color: var(--white-color);
	font-size: 20px;
	font-weight: 600;
	text-decoration: none;
}

.conversation-phone:hover{
	color: #9BDCF5;
}

.conversation-address{
	margin: 26px 0 0;
	font-style: normal;
}

.conversation-address a{
	color: rgba(255, 255, 255, 0.72);
	font-size: 15px;
}

@media (max-width: 767px){
	.our-approach{
		padding: 50px 0;
	}

	.conversation-box{
		padding: 40px 24px;
	}

	.start-conversation{
		padding-bottom: 50px;
	}
}

/* ===== Анимации появления (WOW.js + animate.css) =====
   На этом сайте они не доигрывают: элемент получает класс .animated,
   но остаётся с opacity около нуля — блоки Why Choose Us, услуги, CTA
   и абзацы текста оказывались невидимыми для посетителя.
   Чиним разом: контент всегда виден, сломанная анимация отключена. */
.wow,
.wow.animated,
.animated{
	visibility: visible !important;
	opacity: 1 !important;
	animation: none !important;
	transform: none !important;
}

/* ===== Страница отдельной услуги ===== */

.service-single{
	padding: 90px 0;
}

.service-single-content > p{
	font-size: 17px;
	line-height: 1.8;
	margin-bottom: 20px;
	max-width: 68ch;
}

.service-single-content > p:first-of-type{
	font-size: 19px;
	color: var(--primary-color);
}

.service-single-content h2,
.service-single-content h3{
	margin: 34px 0 14px;
}

.service-cta{
	margin-top: 44px;
	padding: 34px 36px;
	border-radius: 22px;
	background: var(--secondary-color);
}

.service-cta h3{
	margin: 0 0 10px;
	font-size: 22px;
}

.service-cta p{
	margin: 0 0 22px;
	max-width: 60ch;
}

.service-cta-actions{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px 26px;
}

.service-cta-phone{
	font-size: 19px;
	font-weight: 600;
	color: var(--primary-color);
	text-decoration: none;
}

.service-cta-phone:hover{
	color: var(--accent-color);
}

/* Боковая колонка */
.service-sidebar{
	display: flex;
	flex-direction: column;
	gap: 26px;
	position: sticky;
	top: 190px;
}

.sidebar-widget{
	padding: 28px;
	border: 1px solid var(--dark-divider-color);
	border-radius: 20px;
	background: var(--white-color);
}

.sidebar-widget h3{
	margin: 0 0 18px;
	font-size: 19px;
}

.sidebar-services ul{
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
}

.sidebar-services li{
	border-bottom: 1px solid var(--dark-divider-color);
}

.sidebar-services li:last-child{
	border-bottom: none;
}

.sidebar-services a{
	display: block;
	padding: 11px 0;
	color: var(--text-color);
	text-decoration: none;
	transition: color 0.25s ease-in-out;
}

.sidebar-services a:hover,
.sidebar-services li.current a{
	color: var(--accent-color);
	font-weight: 600;
}

.sidebar-contact ul{
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.sidebar-contact li{
	display: flex;
	flex-direction: column;
	gap: 3px;
	color: var(--primary-color);
}

.sidebar-contact span{
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--accent-color);
}

.sidebar-contact a{
	color: var(--primary-color);
	text-decoration: none;
}

.sidebar-contact a:hover{
	color: var(--accent-color);
}

@media (max-width: 991px){
	.service-single{
		padding: 50px 0;
	}

	.service-sidebar{
		position: static;
		margin-top: 40px;
	}
}

/* Кольцо со стажем вращается (анимация темы), а «Since 2004» стоит неподвижно. */
@media (max-width: 991px){
		}

/* ===== «How Treatment Works»: шаги вместо шаблонного аккордеона ===== */

.how-it-work-img figure{
	margin: 0;
	padding: 10px;
	background: var(--white-color);
	border-radius: 26px;
	box-shadow: 0 22px 48px rgba(14, 56, 76, 0.16), 0 2px 6px rgba(14, 56, 76, 0.06);
	line-height: 0;
}

.how-it-work-img figure img{
	width: 100%;
	height: auto;
	border-radius: 18px;
}

.treatment-steps{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.treatment-step{
	display: flex;
	gap: 20px;
	padding: 22px 0;
	border-top: 1px solid var(--dark-divider-color);
}

.treatment-step:first-child{
	border-top: none;
	padding-top: 6px;
}

.treatment-step:last-child{
	padding-bottom: 0;
}

.treatment-step-num{
	flex: 0 0 46px;
	font-family: var(--default-font);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--accent-color);
	padding-top: 4px;
	font-variant-numeric: tabular-nums;
}

.treatment-step-body h3{
	margin: 0 0 6px;
	font-size: 19px;
	font-weight: 600;
}

.treatment-step-body p{
	margin: 0;
	max-width: 52ch;
}

/* Отдельная секция с вопросами перед финальным блоком. */
.home-faq{
	padding: 90px 0 20px;
}

.home-faq .faq-accordion{
	max-width: 100%;
}

@media (max-width: 991px){
	.how-it-work-img{
		max-width: 460px;
		margin: 0 auto 40px;
	}

	.home-faq{
		padding: 50px 0 10px;
	}

	.treatment-step{
		gap: 14px;
	}
}

/* ===== FAQ: карточки-раскрывашки =====
   Разметка на <details>/<summary>: работает без JS, доступна с клавиатуры
   и не зависит от аккордеона темы, который ломал сетку и съедал пробелы. */

.home-faq{
	padding: 90px 0 40px;
	background: var(--secondary-color);
}

.faq-list{
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.faq-item{
	background: var(--white-color);
	border: 1px solid var(--dark-divider-color);
	border-radius: 16px;
	overflow: hidden;
	transition: border-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}

.faq-item[open]{
	border-color: rgba(30, 132, 181, 0.45);
	box-shadow: 0 14px 34px rgba(14, 56, 76, 0.08);
}

.faq-question{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	padding: 22px 26px;
	margin: 0;
	cursor: pointer;
	list-style: none;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--primary-color);
	transition: color 0.25s ease-in-out;
}

.faq-question::-webkit-details-marker{
	display: none;
}

.faq-question:hover,
.faq-item[open] .faq-question{
	color: var(--accent-color);
}

/* Плюс, превращающийся в минус. */
.faq-question::after{
	content: '';
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	margin-top: 1px;
	border-radius: 50%;
	background:
		linear-gradient(var(--accent-color), var(--accent-color)) center/13px 2px no-repeat,
		linear-gradient(var(--accent-color), var(--accent-color)) center/2px 13px no-repeat,
		var(--secondary-color);
	transition: transform 0.3s ease-in-out, background-color 0.25s ease-in-out;
}

.faq-item[open] .faq-question::after{
	background:
		linear-gradient(#fff, #fff) center/13px 2px no-repeat,
		var(--accent-color);
	transform: rotate(180deg);
}

.faq-answer{
	padding: 0 26px 24px;
}

.faq-answer p{
	margin: 0;
	max-width: 78ch;
	color: var(--text-color);
	line-height: 1.75;
}

@media (max-width: 767px){
	.home-faq{
		padding: 50px 0 20px;
	}

	.faq-question{
		padding: 18px 18px;
		font-size: 16px;
		gap: 14px;
	}

	.faq-answer{
		padding: 0 18px 20px;
	}
}

/* Телефон в шапке: тот же вид, что у кнопки записи, но цифры не переносятся. */
.header-btn .header-phone-btn{
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Адрес в шапке — между меню и кнопкой с телефоном. */
.header-address{
	display: none;
	align-items: center;
	gap: 10px;
	margin-right: 26px;
	padding-right: 26px;
	border-right: 1px solid var(--dark-divider-color);
	text-decoration: none;
	line-height: 1.3;
	transition: opacity 0.25s ease-in-out;
}

.header-address:hover{
	opacity: 0.75;
}

.header-address-icon{
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 38px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--secondary-color);
}

.header-address-icon img{
	width: 18px;
	height: auto;
}

.header-address-text{
	display: flex;
	flex-direction: column;
}

.header-address-text strong{
	font-size: 15px;
	font-weight: 600;
	color: var(--primary-color);
}

.header-address-text span{
	font-size: 13px;
	color: var(--text-color);
}

/* Показываем только там, где хватает ширины: до 1199 px шапка и так плотная. */
@media (min-width: 1200px){
	.header-address{
		display: flex;
	}
}

/* В залипшей шапке адрес компактнее. */
header.main-header .header-sticky.active .header-address{
	margin-right: 20px;
	padding-right: 20px;
}

/* ===== Шапка на мобильных =====
   Телефон должен оставаться на виду рядом с бургером. Тема прячет .header-btn
   вместе с меню, а её кружок со стрелкой рисуется через ::before и при узкой
   кнопке наезжает на номер — поэтому убираем стрелку и выравниваем ряд заново. */

@media (max-width: 991px){
	header.main-header .navbar{
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		gap: 12px;
	}

	header.main-header .navbar-brand{
		flex: 0 1 auto;
		min-width: 0;
		margin-right: 0;
		padding: 0;
	}

	header.main-header .navbar-brand img{
		max-width: 168px;
		width: 100%;
		height: auto;
	}

	header.main-header .main-menu.collapse:not(.show){
		display: flex !important;
	}

	header.main-header .main-menu{
		flex: 0 0 auto;
		width: auto;
		margin-left: auto;
		align-items: center;
	}

	header.main-header .main-menu .nav-menu-wrapper,
	header.main-header .header-address{
		display: none;
	}

	.header-btn .header-phone-btn{
		padding: 11px 20px;
		font-size: 15px;
		letter-spacing: 0.2px;
	}

	/* кружок со стрелкой — он и перекрывал последние цифры */
	.header-btn .header-phone-btn::before,
	.header-btn .header-phone-btn::after{
		content: none;
		display: none;
	}

	header.main-header .navbar-toggle{
		flex: 0 0 auto;
		margin: 0;
	}
}

@media (max-width: 480px){
	header.main-header .navbar{
		gap: 8px;
	}

	header.main-header .navbar-brand img{
		max-width: 132px;
	}

	.header-btn .header-phone-btn{
		padding: 10px 14px;
		font-size: 13.5px;
	}
}

@media (max-width: 360px){
	header.main-header .navbar-brand img{
		max-width: 112px;
	}

	.header-btn .header-phone-btn{
		padding: 9px 11px;
		font-size: 12.5px;
	}
}

/* ===== Карточки блога: три в ряд, компактные =====
   Тема даёт вытянутые карточки: отступ 30 px под фото, заголовок без ограничения
   по строкам и разная высота у соседей. Приводим к ровной сетке. */

.blog-item{
	display: flex;
	flex-direction: column;
	height: 100%;
	margin-bottom: 30px;
	padding: 0 0 22px;
	background: var(--white-color);
	border: 1px solid var(--dark-divider-color);
	border-radius: 18px;
	overflow: hidden;
	transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.blog-item:hover{
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(14, 56, 76, 0.10);
}

.blog-item .post-featured-image{
	margin-bottom: 18px;
	border-radius: 0;
}

.blog-item .post-featured-image figure{
	margin: 0;
	line-height: 0;
}

.blog-item .post-featured-image img{
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 0;
}

.blog-item .post-item-body{
	flex: 1;
	padding: 0 22px;
	margin-bottom: 14px;
}

.blog-item .post-item-body h2{
	font-size: 19px;
	line-height: 1.4;
	margin-bottom: 8px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.blog-item .post-item-body p{
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.blog-item .post-item-footer{
	padding: 0 22px;
}

@media (max-width: 991px){
	.blog-item .post-item-body h2{
		font-size: 18px;
	}
}

/* Обложка страницы услуги */
.service-featured-image{
	margin: 0 0 34px;
	border-radius: 18px;
	overflow: hidden;
	line-height: 0;
}

.service-featured-image img{
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
}

/* Четвёртый врач в галерее: колонки стали уже (col-lg-3), поэтому подгоняем
   размер имени, чтобы длинное "Dr. Anya Rossinskaya, DMD" не ломалось неудачно. */
.our-team .team-content h3{
	font-size: 20px;
	line-height: 1.35;
}

@media (min-width: 992px) and (max-width: 1199px){
	.our-team .team-content h3{
		font-size: 18px;
	}
}

/* Врач без биографии: колонка с текстом отсутствует, поэтому фото центрируем
   и ограничиваем по ширине — иначе портрет растягивается на весь ряд. */
.doctor-row-photo-only{
	margin-bottom: 0;
}

.doctor-row-photo-only .doctor-photo{
	max-width: 420px;
	margin-inline: auto;
}

/* ===== Шапка страницы =====
   Тёмный блок темы с отступами 100px заменён компактной строкой крошек
   и заголовком, открывающим контент. */

.page-head{
	padding: 26px 0 20px;
	background: var(--white-color);
	border-bottom: 1px solid var(--dark-divider-color);
	margin-bottom: 26px;
}

.page-head .breadcrumb{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
	font-size: 14px;
	background: none;
}

.page-head .breadcrumb-item{
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--text-color);
	opacity: 0.75;
}

.page-head .breadcrumb-item + .breadcrumb-item::before{
	content: '/';
	opacity: 0.45;
	padding: 0;
	float: none;
}

.page-head .breadcrumb-item a{
	color: inherit;
	text-decoration: none;
	transition: color 0.3s ease-in-out;
}

.page-head .breadcrumb-item a:hover{
	color: var(--accent-color);
}

.page-head .breadcrumb-item.active{
	opacity: 1;
	font-weight: 500;
	color: var(--primary-color);
}

.page-head-title{
	margin: 0;
	font-size: 42px;
	line-height: 1.2;
	color: var(--primary-color);
}

@media (max-width: 991px){
	.page-head{
		padding: 20px 0 16px;
		margin-bottom: 20px;
	}

	.page-head-title{
		font-size: 32px;
	}
}

@media (max-width: 575px){
	.page-head-title{
		font-size: 27px;
	}

	.page-head .breadcrumb{
		font-size: 13px;
		margin-bottom: 10px;
	}
}


/* Первая секция после шапки: у секций темы верхний отступ 90-100px, вместе с
   отступом шапки до контента получалось ~120px. Оставляем небольшой воздух. */
.our-doctors,
.page-services,
.page-contact,
.page-blog,
.service-single{
	padding-top: 34px;
}

@media (max-width: 991px){
	.our-doctors,
	.page-services,
	.page-contact,
	.page-blog,
	.service-single{
		padding-top: 24px;
	}
}

/* ===== Карточка врача =====
   Было три вложенных контура: тень, белая рамка-полароид, скругление фото,
   а имя висело отдельной строкой под ними — при выравнивании по высоте текста
   подпись отрывалась и наезжала на снимок. Собираем в один прямоугольник:
   фото на всю карточку, имя плашкой поверх нижнего края. */

.doctor-row.row{
	align-items: stretch;
}

.doctor-row > [class*="col-"]{
	display: flex;
}

.doctor-photo{
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 420px;
	margin: 0 auto 30px;
}

.doctor-photo figure{
	position: relative;
	flex: 1 1 auto;
	display: flex;
	min-height: 340px;
	max-height: 520px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border-radius: 22px;
	background: var(--secondary-color);
	box-shadow: 0 20px 44px rgba(14, 56, 76, 0.18), 0 2px 6px rgba(14, 56, 76, 0.06);
	line-height: 0;
}

.doctor-photo figure picture{
	display: flex;
	flex: 1 1 auto;
	min-height: 0;
}

.doctor-photo img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 12%;
	border-radius: 0;
}

.doctor-photo-caption{
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	padding: 64px 24px 22px;
	text-align: left;
	border-radius: 0 0 22px 22px;
	background: linear-gradient(to top,
		rgba(14, 56, 76, 0.94) 0%,
		rgba(14, 56, 76, 0.74) 46%,
		rgba(14, 56, 76, 0) 100%);
	pointer-events: none;
}

.doctor-photo-caption h3{
	margin: 0 0 5px;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--white-color);
}

.doctor-photo-caption p{
	margin: 0;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #9FD3EC;
}

.doctor-bio{
	display: flex;
	flex-direction: column;
	justify-content: center;
}

@media (max-width: 991px){
	.doctor-row > [class*="col-"]{
		display: block;
	}

	.doctor-photo figure{
		min-height: 0;
		max-height: none;
		display: block;
	}

	.doctor-photo img{
		height: auto;
		aspect-ratio: 3 / 4;
	}
}

/* Обложка услуги была во всю ширину колонки в пропорции 3:2 и съедала
   первый экран — прижимаем по высоте, кадрируя по центру. */
.service-featured-image{
	margin-bottom: 26px;
}

.service-featured-image img{
	aspect-ratio: auto;
	max-height: none;
	object-fit: fill;
}

@media (max-width: 991px){
	.service-featured-image img{
		aspect-ratio: auto;
		max-height: none;
	}
}

/* Белая подложка под логотипом в подвале: у нового рендера прозрачный фон и
   тёмно-синий текст, на тёмной подвальной заливке он терялся. */
.footer-logo img{
	background: var(--white-color);
	padding: 14px 20px;
	border-radius: 14px;
	box-sizing: border-box;
}

@media (max-width: 767px){
	.footer-logo img{
		padding: 12px 16px;
	}
}

/* Запас сверху у заголовков секций: закреплённая шапка иначе наезжает на них
   при переходе по якорю или быстрой прокрутке. */
.section-title h2,
.page-head-title{
	scroll-margin-top: 100px;
}

/* ===== Промо-блок «Special Offers» =====
   Карточки приходят готовыми картинками от клиента: кнопка нарисована внутри.
   Поэтому кликабельна вся карточка, а на месте нарисованной кнопки лежит
   невидимая зона в процентах — она масштабируется вместе с картинкой. */

.special-offers{
	padding: 74px 0 64px;
	background: var(--secondary-color);
}

.special-offers .section-title{
	text-align: center;
	margin-bottom: 34px;
}

.special-offers .promo-eyebrow{
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--accent-color);
}

.special-offers .section-title h2{
	margin: 0 0 12px;
}

.special-offers .section-title p{
	max-width: 62ch;
	margin: 0 auto;
}

.promo-card{
	position: relative;
	display: block;
	border-radius: 18px;
	overflow: hidden;
	margin-bottom: 24px;
	box-shadow: 0 14px 34px rgba(14, 56, 76, 0.10);
	transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.promo-card img{
	display: block;
	width: 100%;
	height: auto;
}

.promo-card:hover{
	transform: translateY(-5px);
	box-shadow: 0 20px 44px rgba(14, 56, 76, 0.17);
}

.promo-card:focus-visible{
	outline: 3px solid var(--accent-color);
	outline-offset: 3px;
}

/* невидимая область поверх нарисованной кнопки — курсор-указатель именно там */
.promo-card .promo-hit{
	position: absolute;
	left: 55%;
	top: 68%;
	width: 40%;
	height: 12%;
	border-radius: 99px;
}

.promo-assurances{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 14px 42px;
	margin: 26px 0 0;
	padding: 22px 0 0;
	list-style: none;
	border-top: 1px solid var(--dark-divider-color);
}

.promo-assurances li{
	display: flex;
	align-items: center;
	gap: 11px;
	font-size: 15px;
	font-weight: 500;
	color: var(--primary-color);
}

.promo-assurances svg{
	flex: 0 0 auto;
	color: var(--accent-color);
}

@media (max-width: 991px){
	.special-offers{
		padding: 52px 0 46px;
	}

	.promo-assurances{
		gap: 12px 26px;
		font-size: 14px;
	}
}

@media (max-width: 575px){
	.promo-assurances{
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
}