/*
 * Подвал сайта: компактная сетка «герб | напрями спорту | контакти».
 *
 * Содержимое подвала — виджеты из базы и настройки родительской темы
 * (`kmshvsm_setup_footer_columns()` в `inc/site-setup.php`), поэтому здесь
 * только раскладка и типографика, разметка не меняется.
 *
 * Родительская тема печатает свои правила подвала позже этого файла и
 * инлайном (`thebase-global-inline-css`): отступ 101 px под каждым
 * виджетом, `min-height`, центрирование колонок. Отсюда префикс `#colophon`
 * у каждого правила — он перебивает их весом, а не порядком подключения.
 * Цвет заголовка тема ставит классом палитры с `!important` (там чёрный),
 * и перебить его можно только тем же способом.
 *
 * Аккордеон на узком экране (≤1024 px) — прежний: его ведут `custom.js` и
 * `style.css`, здесь только отступы.
 */

#colophon .site-middle-footer-inner-wrap {
	min-height: 0;
	padding-top: 36px;
	padding-bottom: 32px;
	align-items: start;
}

#colophon .site-middle-footer-inner-wrap .site-footer-section {
	text-align: left;
}

#colophon .site-middle-footer-inner-wrap .widget {
	margin-bottom: 0;
}

/* Область виджета — flex-ряд темы; содержимое занимает колонку целиком,
 * иначе список направлений сжимался бы до ширины самого длинного названия. */
#colophon .site-middle-footer-inner-wrap .footer-widget-area-inner {
	flex: 1 1 auto;
	min-width: 0;
}

/* Шорткод направлений стоит внутри `<p>`, и браузер оставляет вокруг блока
 * пустые абзацы; в контактах тоже есть пустой абзац. Им нечего показывать,
 * а отступ у них есть — они и сбивали линию заголовков. */
#colophon .site-middle-footer-inner-wrap .widget p:empty {
	display: none;
}

/* Герб: чуть меньше и по верхней линии заголовков, а не по центру колонки. */
#colophon .site-footer-middle-section-1 .footer-widget-area {
	align-items: flex-start;
}

#colophon .site-footer-middle-section-1 figure {
	margin: 0;
}

#colophon .site-footer-middle-section-1 img {
	width: 136px !important;
	height: auto;
	margin: 0;
}

/* Заголовки обеих колонок — один набор: цвет, кегль, насыщенность, отступ. */
#colophon .site-middle-footer-inner-wrap .widget-title {
	margin: 0 0 16px;
	color: #fff !important;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	text-transform: none;
}

/* Текст и ссылки слабее заголовков: тот же белый, но приглушённый. */
#colophon .site-middle-footer-inner-wrap p,
#colophon .site-middle-footer-inner-wrap li,
#colophon .site-middle-footer-inner-wrap a:not(.button) {
	color: rgba( 255, 255, 255, 0.78 );
	font-size: 14px;
	line-height: 1.5;
}

#colophon .site-middle-footer-inner-wrap a:not(.button):hover,
#colophon .site-middle-footer-inner-wrap a:not(.button):focus {
	color: #fff;
}

#colophon .site-middle-footer-inner-wrap li a {
	padding-block: 3px;
}

/* Контакты: значок в своей колонке слева, строки текста — ровным краем. */
/* Вложенная группа контактов получала от ядра отступ блока (24 px). */
#colophon .site-footer-middle-section-3 .wp-block-group .wp-block-group {
	margin: 0;
}

#colophon .site-footer-middle-section-3 p {
	position: relative;
	margin: 0 0 10px;
	padding: 0 0 0 30px;
}

#colophon .site-footer-middle-section-3 p:last-child {
	margin-bottom: 0;
}

#colophon .site-footer-middle-section-3 p > img {
	position: absolute;
	top: 1px;
	left: 0;
	width: 18px !important;
	margin: 0;
}

/* Десктоп: три зоны примерно 20 / 52 / 28. */
@media screen and ( min-width: 1025px ) {
	#colophon .site-middle-footer-inner-wrap.site-footer-row-columns-3 {
		grid-template-columns: 20fr 52fr 28fr;
		column-gap: 40px;
	}
}

/* Планшет и телефон: одна колонка, герб меньше, блоки плотнее. */
@media screen and ( max-width: 1024px ) {
	#colophon .site-middle-footer-inner-wrap.site-footer-row-columns-3 {
		grid-template-columns: minmax( 0, 1fr );
		row-gap: 20px;
		padding-top: 28px;
		padding-bottom: 24px;
	}

	#colophon .site-footer-middle-section-1 img {
		width: 96px !important;
	}

	#colophon .site-middle-footer-inner-wrap .widget-title {
		position: relative;
		margin-bottom: 0;
		padding-right: 28px;
	}

	#colophon .site-middle-footer-inner-wrap .toggled-on > .widget-title {
		margin-bottom: 12px;
	}
}

/*
 * Сервисная ссылка под направлениями — календарь
 * (`kmshvsm_sport_footer_shortcode()`). Выделены насыщенностью, полным белым
 * и жёлтым значком — без рамок и фона. Правило ниже общего правила ссылок
 * подвала: вес тот же, выигрывает порядок.
 */
#colophon .kmshvsm-footer-services {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	margin-top: 14px;
}

#colophon .site-middle-footer-inner-wrap .kmshvsm-footer-services a:not(.button) {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #fff;
	font-weight: 600;
}

#colophon .kmshvsm-footer-services .fa {
	width: 16px;
	color: var( --kmshvsm-brand-yellow );
	font-size: 15px;
	text-align: center;
}

@media screen and ( max-width: 767px ) {
	#colophon .kmshvsm-footer-services {
		flex-direction: column;
		margin-top: 12px;
	}
}

/*
 * Блок «КМШВСМ + Календар» рядом с гербом (`kmshvsm_footer_brand()`): его
 * место — только планшет и телефон. На десктопе он скрыт, а на узком экране
 * скрыта ссылка под направлениями, чтобы «Календар» не стоял между
 * аккордеонами.
 */
.kmshvsm-footer-brand {
	display: none;
}

@media screen and ( max-width: 1024px ) {
	#colophon .site-footer-middle-section-1 {
		flex-direction: row;
		align-items: center;
		gap: 16px;
	}

	#colophon .site-footer-middle-section-1 .footer-widget-area {
		flex: 0 0 auto;
	}

	#colophon .kmshvsm-footer-brand {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
		min-width: 0;
	}

	#colophon .kmshvsm-footer-brand__name {
		color: #fff;
		font-size: 22px;
		font-weight: 700;
		line-height: 1.2;
		letter-spacing: 0.02em;
	}

	#colophon .kmshvsm-footer-brand .kmshvsm-footer-services {
		margin-top: 0;
	}

	#colophon .kmshvsm-sports-footer .kmshvsm-footer-services {
		display: none;
	}
}