/* ==========================================================================
   theme-extra.css — точечные добавки поверх verstka Hetch (custom.css),
   нужные из-за того, что контент собирается блоками редактора WordPress,
   а не статичной вёрсткой. Палитра и компоненты — как в custom.css,
   ничего здесь не перекрашиваем, только доводим до рабочего состояния.
   ========================================================================== */

/* --- Контентная область страниц: возвращаем базовые отступы для блоков
   редактора внутри .entry-content (списки, таблицы, картинки) --- */
.entry-content > *:not(:last-child) {
	margin-bottom: 20px;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
}

.entry-content table td,
.entry-content table th {
	border: 1px solid var(--divider-color, #e4e4e4);
	padding: 10px 15px;
}

.entry-content img {
	max-width: 100%;
	height: auto;
}

.entry-content ul,
.entry-content ol {
	padding-left: 20px;
}

/* --- Аккордеон на блоке ядра "Подробности" (core/details) вместо
   Bootstrap collapse — используется на страницах "Плата за содержание",
   "Распоряжения по тарифам", "Вакансии" (page-accordion.php).
   Визуально повторяет .faq-accordion.page-faq-accordion из custom.css. --- */
.page-faq-accordion details {
	border-bottom: 1px solid var(--divider-color, #e4e4e4);
	margin-bottom: 20px;
	padding-bottom: 20px;
}

.page-faq-accordion details:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.page-faq-accordion details summary {
	position: relative;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4em;
	color: var(--primary-color);
	cursor: pointer;
	padding-right: 25px;
	list-style: none;
}

.page-faq-accordion details summary::-webkit-details-marker {
	display: none;
}

.page-faq-accordion details summary::after {
	content: '\f061';
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	position: absolute;
	right: 0;
	top: 50%;
	font-size: 18px;
	color: var(--primary-color);
	transform: translateY(-50%) rotate(90deg);
	transition: all 0.3s ease-in-out;
}

.page-faq-accordion details[open] summary::after {
	transform: translateY(-50%) rotate(-90deg);
}

.page-faq-accordion details > *:not(summary) {
	margin-top: 15px;
}

/* --- Галерея ядра (core/gallery) внутри .entry-content — визуально
   повторяет сетку .page-gallery-box .photo-gallery, лайтбокс включается
   автоматически, если в блоке "Ссылка на" выбрано "Медиафайл"
   (см. .gallery-items, .entry-content .wp-block-gallery в function.js). --- */
.entry-content .wp-block-gallery figure.wp-block-image {
	cursor: none;
}

.entry-content .wp-block-gallery figure.wp-block-image img {
	aspect-ratio: 1 / 0.92;
	object-fit: cover;
	border-radius: 10px;
}

/* --- Фон героя на главной, когда для страницы не задано изображение
   записи (placeholder вместо фото, см. front-page.php): вместо пустого
   белого прямоугольника — тёмный градиент в акцентных цветах темы,
   поверх уже лежит стандартный затемняющий градиент из custom.css. --- */
.hero.hero-slider-layout .hero-slide .hero-slider-image:empty {
	background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
}

/* --- Сообщения формы обратной связи (page-contacts.php) --- */
#msgSubmit.hidden {
	display: none;
}

#msgSubmit.h4 {
	font-size: 18px;
	margin-top: 15px;
}

/* ==========================================================================
   Топбар: лого + слоган слева, телефон/почта справа (вместо адреса/режима
   работы, которые теперь только в футере) — как на доноре uk-strella.ru.
   ========================================================================== */
.topbar-brand-layout {
	padding: 14px 0;
}

.topbar-brand {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.topbar-brand-logo {
	display: block;
	line-height: 1;
}

.topbar-brand-logo strong {
	font-size: 20px;
	font-weight: 700;
	color: var(--white-color);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.topbar-brand-logo img {
	max-height: 36px;
	width: auto;
}

.topbar-brand-tagline {
	font-size: 13px;
	color: var(--white-color);
	opacity: 0.7;
	position: relative;
	padding-left: 14px;
}

.topbar-brand-tagline::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 14px;
	background: var(--white-color);
	opacity: 0.35;
}

.topbar-contact-info-right ul {
	justify-content: flex-end;
}

.topbar-contact-info-right ul li a {
	color: var(--white-color);
}

.topbar-contact-info-right ul li a img {
	filter: brightness(0) invert(1);
	opacity: 0.85;
}

@media only screen and (max-width: 991px) {
	.topbar-contact-info-right ul {
		justify-content: flex-start;
		margin-top: 8px;
	}
}

/* ==========================================================================
   Меню на всю ширину: под шапкой — сплошная полоса цвета accent-color от
   края до края экрана (как на доноре), пункты меню — белым по цвету.
   ========================================================================== */
header.main-header .header-sticky {
	background: var(--accent-color);
}

header.main-header .header-sticky.active {
	background: var(--accent-color);
	border-bottom: none;
}

header.main-header .navbar-brand {
	color: var(--white-color);
}

header.main-header .navbar-brand strong,
header.main-header .navbar-brand {
	font-size: 20px;
	font-weight: 700;
	color: var(--white-color);
	text-transform: uppercase;
}

.main-menu ul li.nav-item .nav-link {
	color: var(--white-color);
}

.main-menu ul li.nav-item:hover > .nav-link,
.main-menu ul li.nav-item.current-menu-item > .nav-link {
	color: var(--secondary-color);
}

.main-menu ul li > ul {
	background: var(--white-color);
}

.main-menu ul li > ul li a {
	color: var(--primary-color) !important;
}

.navbar-toggle span {
	background-color: var(--white-color);
}

/* ==========================================================================
   Инфо-блок на главной (the_content) — та же информация, только аккуратнее:
   акцентные заголовки, карточные таблицы, вертикальный ритм.
   ========================================================================== */
.front-page-info {
	background: var(--secondary-color);
	padding: 90px 0;
}

.front-page-info .entry-content {
	background: var(--white-color);
	border-radius: 20px;
	padding: 60px;
	box-shadow: 0 20px 60px rgba(20, 24, 62, 0.06);
}

.front-page-info .entry-content > h1,
.front-page-info .entry-content > h2,
.front-page-info .entry-content > h3,
.front-page-info .entry-content > h4 {
	color: var(--primary-color);
	border-left: 4px solid var(--accent-color);
	padding-left: 16px;
	margin-top: 45px;
}

.front-page-info .entry-content > h1:first-child,
.front-page-info .entry-content > h2:first-child,
.front-page-info .entry-content > h3:first-child {
	margin-top: 0;
}

.front-page-info .entry-content table {
	border: none;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 2px 15px rgba(20, 24, 62, 0.05);
}

.front-page-info .entry-content table td,
.front-page-info .entry-content table th {
	border: 1px solid var(--divider-color, #e4e4e4);
	border-left: none;
	border-right: none;
}

.front-page-info .entry-content table tr:nth-child(even) td {
	background: var(--secondary-color);
}

.front-page-info .entry-content ul li {
	margin-bottom: 8px;
}

.front-page-info .entry-content strong {
	color: var(--primary-color);
}

@media only screen and (max-width: 767px) {
	.front-page-info .entry-content {
		padding: 30px 20px;
	}
}

/* ==========================================================================
   Слайдер лицензий на главной: карточки со сканами, 4 в ряд на десктопе,
   лайтбокс через .gallery-items (magnificPopup, см. function.js).
   ========================================================================== */
.front-license-slider {
	padding: 90px 0;
}

.front-license-slider .swiper {
	padding-bottom: 10px;
}

.license-slide-item {
	display: block;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(20, 24, 62, 0.08);
	border: 1px solid var(--divider-color, #e4e4e4);
}

.license-slide-item img {
	width: 100%;
	aspect-ratio: 1 / 1.35;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease-in-out;
}

.license-slide-item:hover img {
	transform: scale(1.04);
}

.license-slider-pagination {
	position: relative;
	margin-top: 30px;
	text-align: center;
}

/* ==========================================================================
   Карта на главной — простой полноширинный блок с iframe (карта из
   uk_strella_map_embed_url, см. functions.php Customizer).
   ========================================================================== */
.front-page-map {
	position: relative;
}

.front-page-map iframe {
	width: 100%;
	height: 480px;
	border: 0;
	display: block;
}

@media only screen and (max-width: 767px) {
	.front-page-map iframe {
		height: 320px;
	}
}

/* ==========================================================================
   Ссылка "подробнее" в карточках услуг на главной (.our-services).
   ========================================================================== */
.service-item-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--accent-color);
	text-transform: capitalize;
	transition: all 0.3s ease-in-out;
}

.service-item-link i {
	font-size: 12px;
	transition: transform 0.3s ease-in-out;
}

.service-item-link:hover {
	color: var(--primary-color);
}

.service-item-link:hover i {
	transform: translateX(4px);
}

.our-services .service-box-item {
	background: var(--white-color);
	border: none;
	border-radius: 16px;
	padding: 35px 30px;
	box-shadow: 0 10px 30px rgba(20, 24, 62, 0.06);
	flex-direction: column;
	height: 100%;
}

.our-services .service-box-item .icon-box {
	margin-right: 0;
	margin-bottom: 20px;
}

.our-services .service-item-content {
	width: 100%;
}

/* ==========================================================================
   Полоса меню без лого (лого осталось в топбаре выше) — меню без сдвига
   под лого, высота полосы уменьшена примерно на 20% (padding/nav-link).
   ========================================================================== */
header.main-header .navbar {
	padding: 16px 0;
}

header.main-header .main-menu .nav-menu-wrapper {
	margin-left: 0;
}

header.main-header .main-menu ul li.nav-item .nav-link {
	padding: 12px 20px;
}

/* ==========================================================================
   Футер: контраст текста виджетов (были почти невидимы — тёмно-серый
   текст на тёмно-синем фоне) + выравнивание всех 5 колонок (4 виджета +
   "Навигация") в один ряд на десктопе, чтобы последняя не переносилась
   отдельной строкой.
   ========================================================================== */
.main-footer .row > [class*="col-lg-3"] {
	margin-bottom: 40px;
}

.footer-links p {
	color: rgba(255, 255, 255, 0.7);
	line-height: 1.9;
	margin: 0;
}

.footer-links p::first-line {
	color: var(--white-color);
	font-size: 18px;
	font-weight: 700;
}

.footer-links p a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.35);
	text-underline-offset: 3px;
	transition: color 0.3s ease-in-out;
}

.footer-links p a:hover {
	color: var(--white-color);
	text-decoration-color: var(--white-color);
}

/* ==========================================================================
   Hero-слайдер: текст слайда (Carbon Fields, визуальный редактор rich_text).
   Раньше это был обычный <p> с esc_html — теперь внутри реальный HTML
   (абзацы, списки, ссылки), стили подтягиваем под общий язык сайта: списки
   с иконкой-галочкой (как .project-entry ul li), ссылки — акцентным цветом
   при наведении, как остальные светлые элементы на тёмной подложке hero.
   ========================================================================== */
.hero-content .hero-slide-text {
	font-size: 18px;
	line-height: 1.6em;
	color: var(--secondary-color);
	background: rgba(20, 24, 62, 0.55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border-left: 3px solid var(--accent-color);
	border-radius: 6px;
	padding: 20px 25px;
}

.hero-content .hero-slide-text > *:not(:last-child) {
	margin-bottom: 15px;
}

.hero-content .hero-slide-text ul,
.hero-content .hero-slide-text ol {
	padding-left: 0;
	list-style: none;
}

.hero-content .hero-slide-text ul li,
.hero-content .hero-slide-text ol li {
	position: relative;
	padding-left: 30px;
}

.hero-content .hero-slide-text ul li:not(:last-child),
.hero-content .hero-slide-text ol li:not(:last-child) {
	margin-bottom: 8px;
}

.hero-content .hero-slide-text ul li::before {
	content: '\f058';
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	position: absolute;
	left: 0;
	top: 1px;
	font-size: 16px;
	color: var(--accent-color);
}

.hero-content .hero-slide-text ol {
	counter-reset: hero-slide-list;
}

.hero-content .hero-slide-text ol li::before {
	counter-increment: hero-slide-list;
	content: counter(hero-slide-list) '.';
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 700;
	color: var(--accent-color);
}

.hero-content .hero-slide-text a {
	color: var(--white-color);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.3s ease-in-out;
}

.hero-content .hero-slide-text a:hover {
	color: var(--accent-color);
}

.hero-content .hero-slide-text strong {
	color: var(--white-color);
}

@media only screen and (min-width: 992px) {
	.main-footer .row {
		flex-wrap: wrap;
	}

	.main-footer .row > [class*="col-lg-3"] {
		flex: 0 0 20%;
		max-width: 20%;
		margin-bottom: 0;
	}
}