/*
 * Makariv Council — доповнення до theme.json.
 * Усе, що не виражається через theme.json токени напряму (hover-стани,
 * специфічні layout-фікси для конкретних блоків, ротація кольорів герба).
 */

/*
 * Обтікання зображень текстом у тілі новин (alignleft/alignright).
 * Реальний баг, знайдений 2026-09-24: вбудоване правило WordPress
 * ".is-layout-flow > .alignleft{float:left}" діє лише для ПРЯМИХ
 * дочірніх елементів контейнера — а імпортований контент (wpautop)
 * загортає кожне зображення в <p>, тому float ніколи не спрацьовував
 * (computed style: float:none, display:inline — жодне правило не
 * матчилось). Власне правило без обмеження на прямого нащадка.
 */
.entry-content .alignleft {
	float: left;
	margin: 0 2em 1em 0;
}
.entry-content .alignright {
	float: right;
	margin: 0 0 1em 2em;
}

/* Хлібні крихти — власний ритм, не зливаються з H1 під ними. */
.makariv-breadcrumbs {
	margin-bottom: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--text-secondary);
	font-size: 0.875rem;
}
.makariv-breadcrumbs-nav a {
	color: var(--wp--preset--color--text-secondary);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--border);
}
.makariv-breadcrumbs-nav a:hover {
	color: var(--wp--preset--color--makariv-blue);
}
.makariv-breadcrumbs-nav span[aria-current] {
	color: var(--wp--preset--color--text);
	font-weight: 600;
}

/* Картки новин — тонка нейтральна рамка + hover-підйом. */
.mkr-news-card {
	border-color: var(--wp--preset--color--border);
	overflow: hidden;
	transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}
.mkr-news-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(0, 65, 105, 0.12);
	border-color: var(--wp--preset--color--makariv-blue);
}

/* Обгортка фото — точка прив'язки для бейджа, що плаває над зображенням.
 * Фіксована пропорція 16:9 + тло-заглушка: якщо в поста немає доступного
 * featured image (є пости зі втраченим файлом після міграції — задокумен-
 * товано в design-system.md), картка не "схлопується" і бейдж не наїжджає
 * на заголовок нижче. */
.mkr-news-media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
}
.mkr-news-media img {
	height: 100%;
}

/* Бейдж категорії — плаваюча пілюля поверх фото (Leonardo-референс),
 * колір за порядковим номером картки, за мотивами герба. */
.mkr-news-badge {
	position: absolute;
	top: var(--wp--preset--spacing--10);
	left: var(--wp--preset--spacing--10);
	z-index: 2;
	margin-bottom: 0;
}
.mkr-news-badge a {
	display: inline-block;
	text-decoration: none !important;
	padding: 0.1875rem 0.75rem;
	border-radius: 999px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	background: var(--wp--preset--color--makariv-green);
	color: var(--wp--preset--color--base) !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.mkr-news-with-images .wp-block-post-template > li:nth-child(3n+2) .mkr-news-badge a,
.mkr-news-with-images .wp-block-post-template > div:nth-child(3n+2) .mkr-news-badge a {
	background: var(--wp--preset--color--makariv-gold-dark);
}
.mkr-news-with-images .wp-block-post-template > li:nth-child(3n+3) .mkr-news-badge a,
.mkr-news-with-images .wp-block-post-template > div:nth-child(3n+3) .mkr-news-badge a {
	background: var(--wp--preset--color--makariv-red);
}

.mkr-news-card .wp-block-post-title a {
	text-decoration: none;
}
.mkr-news-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--makariv-blue);
}

/* Бейдж категорії над заголовком одиничної новини (не поверх фото). */
.mkr-news-badge--static {
	position: static;
	margin-bottom: var(--wp--preset--spacing--10);
}
.mkr-news-badge--static a {
	display: inline-block;
	text-decoration: none !important;
	padding: 0.1875rem 0.75rem;
	border-radius: 999px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	background: var(--wp--preset--color--makariv-green);
	color: var(--wp--preset--color--base) !important;
	/* Реальний дефект, знайдений на мобільній (390px): WP-ядро/батьківська
	 * тема ставить white-space:nowrap на .wp-block-post-terms a за
	 * замовчуванням — з довгою назвою категорії ("Відеозаписи сесій та
	 * комісій селищної ради") це розтягувало картку й усю сторінку
	 * горизонтально за межі екрана. */
	white-space: normal;
	max-width: 100%;
}

/* Фільтр-пілюлі архіву новин та документів — кольори герба по черзі. */
.mkr-filter-pills {
	margin-bottom: var(--wp--preset--spacing--30);
	gap: var(--wp--preset--spacing--10);
}
.mkr-filter-pill {
	margin: 0;
}
.mkr-filter-pill a {
	display: inline-block;
	padding: 0.5rem 1.25rem;
	border-radius: 999px;
	font-weight: 700;
	text-decoration: none !important;
	border: 2px solid transparent;
	transition: transform 150ms ease;
}
.mkr-filter-pill a:hover {
	transform: translateY(-1px);
}
.mkr-filter-pill--blue a {
	border-color: var(--wp--preset--color--makariv-blue);
	color: var(--wp--preset--color--makariv-blue) !important;
}
.mkr-filter-pill--green a {
	border-color: var(--wp--preset--color--makariv-green);
	color: var(--wp--preset--color--makariv-green) !important;
}
.mkr-filter-pill--gold a {
	border-color: var(--wp--preset--color--makariv-gold-dark);
	color: var(--wp--preset--color--makariv-gold-dark) !important;
}
.mkr-filter-pill--red a {
	border-color: var(--wp--preset--color--makariv-red);
	color: var(--wp--preset--color--makariv-red) !important;
}

/* Картки розділів сайту (.mkr-hub-card--*) — стилі перенесено нижче, у секцію
 * слайдера "Розділи сайту" (2026-09-21); тут була стара розмітка на
 * `.mkr-hub-card--blue > a.wp-block-group` зі статичних колонок, яку
 * замінив carousel — прибрано як мертвий CSS. */
.mkr-hub-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	margin-bottom: var(--wp--preset--spacing--20);
}

/* Список персоналій — рядки-картки. */
.mkr-person-row {
	border-color: var(--wp--preset--color--border);
	transition: border-color 150ms ease, background 150ms ease;
}
.mkr-person-row:hover {
	border-color: var(--wp--preset--color--makariv-blue);
	background: var(--wp--preset--color--surface);
}
.mkr-person-row .wp-block-post-title a {
	text-decoration: none;
}
.mkr-person-row .wp-block-post-title a:hover {
	color: var(--wp--preset--color--makariv-blue);
}
.mkr-person-row img {
	object-fit: cover;
}

/* Персоналія — одинична сторінка (той самий grid-патерн, що memorial-single, 2026-09-21,
   друга ітерація: фото по центру, вертикально вирівняне відносно блоку полів праворуч). */
.mkr-person-header {
	max-width: 60rem;
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	column-gap: var(--wp--preset--spacing--20);
	row-gap: var(--wp--preset--spacing--10);
	grid-template-areas:
		"title title"
		"photo fields"
		"content content";
}
.mkr-person-header .wp-block-post-title {
	grid-area: title;
}
.mkr-person-photo {
	grid-area: photo;
	border-radius: 16px;
	overflow: hidden;
}
.makariv-person-fields {
	grid-area: fields;
	align-self: start;
}
.mkr-person-header .wp-block-post-content {
	grid-area: content;
	padding-top: var(--wp--preset--spacing--10);
}
@media (max-width: 44rem) {
	.mkr-person-header {
		grid-template-columns: 1fr;
		grid-template-areas:
			"title"
			"photo"
			"fields"
			"content";
	}
	.mkr-person-photo {
		width: 100% !important;
		max-width: none;
	}
}

/* Компактна сітка посилань на відділи ("Виконавчі органи" тощо) —
 * легша за .mkr-hub-card, розрахована на десятки, а не 3-6 елементів. */
.mkr-dept-link-grid {
	margin-bottom: var(--wp--preset--spacing--40);
	gap: var(--wp--preset--spacing--10);
}
.mkr-dept-link {
	margin: 0;
}
.mkr-dept-link a {
	display: block;
	padding: 0.875rem 1.125rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	text-decoration: none !important;
	color: var(--wp--preset--color--text) !important;
	font-weight: 600;
	transition: border-color 150ms ease, background 150ms ease;
}
.mkr-dept-link a:hover {
	border-color: var(--wp--preset--color--makariv-blue);
	background: var(--wp--preset--color--surface);
}

/* Картки документів/рішень — список без фото, компактніше за новини. */
.mkr-doc-card {
	border-color: var(--wp--preset--color--border);
	transition: border-color 150ms ease, background 150ms ease;
}
.mkr-doc-card:hover {
	border-color: var(--wp--preset--color--makariv-blue);
	background: var(--wp--preset--color--surface);
}
.mkr-doc-card .wp-block-post-title a {
	text-decoration: none;
}
.mkr-doc-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--makariv-blue);
}

/* Завантаження прикріплених файлів (docs_project). */
.mkr-doc-attachments {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10);
}
.mkr-doc-download {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.5rem 1rem;
	border-radius: 8px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--makariv-blue) !important;
	text-decoration: none !important;
	font-weight: 600;
}
.mkr-doc-download:hover {
	background: var(--wp--preset--color--makariv-blue);
	color: var(--wp--preset--color--base) !important;
}
.mkr-doc-download::before {
	content: "⬇";
}
.mkr-doc-size {
	color: var(--wp--preset--color--text-secondary);
	font-weight: 400;
	font-size: 0.8125rem;
}
.mkr-doc-download:hover .mkr-doc-size {
	color: var(--wp--preset--color--base);
}

/* Контакти — адаптивний iframe карти й акцентний блок гарячої лінії. */
.mkr-contact-map iframe {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	border: 1px solid var(--wp--preset--color--border);
}
.mkr-contact-hotline {
	margin-top: var(--wp--preset--spacing--20);
}
.mkr-contact-hotline p {
	margin: 0;
}

/* ==========================================================================
   Фаза 6 — makariv-digital-history плагін (меморіал/історичні місця/
   таймлайн). Клас-імена (mdh-*) належать плагіну — стилізуємо їх напряму
   під наявну дизайн-систему замість форку PHP-рендерингу.
   ========================================================================== */

/* Меморіал — сітка карток загиблих захисників + фільтр-пілюлі за категорією
   (той самий патерн, що .mdh-places-archive__filter нижче). */
.mdh-memorial-list__filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10);
	margin-bottom: var(--wp--preset--spacing--30);
	list-style: none;
	padding: 0;
}
.mdh-memorial-list__filter {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.5rem 1.125rem;
	border-radius: 999px;
	border: 2px solid var(--wp--preset--color--border);
	background: transparent;
	color: var(--wp--preset--color--text);
	transition: border-color 150ms ease, color 150ms ease, transform 150ms ease;
	font-weight: 700;
	text-decoration: none !important;
	cursor: pointer;
}
.mdh-memorial-list__filter.is-active,
.mdh-memorial-list__filter:hover {
	border-color: var(--wp--preset--color--makariv-blue);
	color: var(--wp--preset--color--makariv-blue);
	transform: translateY(-1px);
}
.mdh-memorial-list__filter:active {
	transform: translateY(0) scale(0.97);
}
.mdh-memorial-list__filter-count {
	color: var(--wp--preset--color--text-secondary);
	font-weight: 400;
	font-size: 0.8125rem;
}
.mdh-memorial-list__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	gap: var(--wp--preset--spacing--30);
	list-style: none;
	margin: 0;
	padding: 0;
}
.mdh-memorial-list__item {
	display: block;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	padding: var(--wp--preset--spacing--20);
	text-decoration: none !important;
	color: var(--wp--preset--color--text) !important;
	transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.mdh-memorial-list__item:hover {
	border-color: var(--wp--preset--color--makariv-blue);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 65, 105, 0.12);
}
.mdh-memorial-list__item--hero {
	border-color: var(--wp--preset--color--makariv-gold-dark);
	border-width: 2px;
}
.mdh-memorial-list__photo {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 10px;
	margin-bottom: var(--wp--preset--spacing--10);
}
.mdh-memorial-list__name {
	font-size: 1.0625rem;
	margin: 0 0 0.25rem;
}
.mdh-memorial-list__hero-badge {
	color: var(--wp--preset--color--makariv-gold-dark);
	margin-left: 0.375rem;
}
.mdh-memorial-list__rank,
.mdh-memorial-list__date {
	color: var(--wp--preset--color--text-secondary);
	font-size: 0.875rem;
	margin: 0;
}

/* Меморіал — одинична сторінка. Запит користувача (2026-09-21): фото по центру (вертикально
   вирівняне відносно блоку інформації), інформація — справа від нього; найдовший текст
   (біографія) — на всю ширину нижче. CSS Grid замість float (2026-09-21, друга ітерація) —
   float вирівнював фото й текст по верхньому краю, а grid-area, що охоплює всі рядки
   інформації, + align-self:center дають фото справжнє вертикальне центрування відносно
   name+category+facts+awards як єдиного блоку. На вузьких екранах — назад в один стовпець. */
.mdh-memorial-single {
	max-width: 60rem;
	display: grid;
	grid-template-columns: minmax(14rem, 20rem) minmax(0, 1fr);
	column-gap: var(--wp--preset--spacing--20);
	row-gap: var(--wp--preset--spacing--10);
	grid-template-areas:
		"photo name"
		"photo category"
		"photo facts"
		"photo awards"
		"bio bio";
}
.mdh-memorial-single__photo {
	grid-area: photo;
	align-self: start;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 16px;
}
.mdh-memorial-single__name {
	grid-area: name;
}
.mdh-memorial-single__category {
	grid-area: category;
}
.mdh-memorial-single__facts {
	grid-area: facts;
}
.mdh-memorial-single__awards {
	grid-area: awards;
}
.mdh-memorial-single__biography {
	grid-area: bio;
	padding-top: var(--wp--preset--spacing--10);
}
@media (max-width: 44rem) {
	.mdh-memorial-single {
		grid-template-columns: 1fr;
		grid-template-areas:
			"photo"
			"name"
			"category"
			"facts"
			"awards"
			"bio";
	}
	.mdh-memorial-single__photo {
		max-width: none;
	}
}
.mdh-memorial-single__name {
	font-size: 2rem;
	margin: 0 0 0.5rem;
}
.mdh-memorial-single__hero-badge {
	display: inline-block;
	color: var(--wp--preset--color--makariv-gold-dark);
	font-size: 1rem;
	font-weight: 700;
	margin-left: 0.5rem;
	vertical-align: middle;
}
.mdh-memorial-single__category {
	color: var(--wp--preset--color--text-secondary);
	margin: 0 0 var(--wp--preset--spacing--20);
}
.mdh-memorial-single__facts {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.375rem var(--wp--preset--spacing--20);
	margin: 0 0 var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--20);
	background: var(--wp--preset--color--surface);
	border-radius: 12px;
}
.mdh-memorial-single__facts dt {
	color: var(--wp--preset--color--text-secondary);
	font-weight: 600;
}
.mdh-memorial-single__facts dd {
	margin: 0;
}
.mdh-memorial-single__awards {
	margin: 0 0 var(--wp--preset--spacing--20);
	padding-left: 1.25rem;
}
.mdh-memorial-single__biography {
	line-height: 1.7;
}

/* Історичні місця — сітка + фільтр-пілюлі (той самий патерн, що news/docs). */
.mdh-places-archive__filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10);
	margin-bottom: var(--wp--preset--spacing--30);
	list-style: none;
	padding: 0;
}
.mdh-places-archive__filter {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.5rem 1.125rem;
	border-radius: 999px;
	border: 2px solid var(--wp--preset--color--border);
	background: transparent;
	color: var(--wp--preset--color--text);
	transition: border-color 150ms ease, color 150ms ease, transform 150ms ease;
	font-weight: 700;
	text-decoration: none !important;
	cursor: pointer;
}
.mdh-places-archive__filter.is-active,
.mdh-places-archive__filter:hover {
	border-color: var(--wp--preset--color--makariv-blue);
	color: var(--wp--preset--color--makariv-blue);
	transform: translateY(-1px);
}
.mdh-places-archive__filter:active {
	transform: translateY(0) scale(0.97);
}
.mdh-places-archive__filter-count {
	color: var(--wp--preset--color--text-secondary);
	font-weight: 400;
	font-size: 0.8125rem;
}
.mdh-places-archive__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
	gap: var(--wp--preset--spacing--30);
}
.mdh-place-card {
	display: block;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	overflow: hidden;
	transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.mdh-place-card:hover {
	border-color: var(--wp--preset--color--makariv-green);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 123, 60, 0.12);
}
.mdh-place-card a {
	text-decoration: none !important;
	color: inherit !important;
}
.mdh-place-card__image {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
.mdh-place-card__body {
	padding: var(--wp--preset--spacing--20);
}
.mdh-place-card__category {
	display: inline-block;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--makariv-green);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	padding: 0.1875rem 0.75rem;
	border-radius: 999px;
	margin-bottom: var(--wp--preset--spacing--10);
}
.mdh-place-card__title {
	font-size: 1.125rem;
	margin: 0 0 0.375rem;
}
.mdh-place-card__excerpt {
	color: var(--wp--preset--color--text-secondary);
	font-size: 0.9375rem;
	margin: 0;
}

/* Таймлайн — вертикальна стрічка подій, кольори герба по черзі. */
.mdh-timeline__list {
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}
.mdh-timeline__item {
	position: relative;
	border-left: 3px solid var(--wp--preset--color--makariv-blue);
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	border-radius: 0 12px 12px 0;
	background: var(--wp--preset--color--surface);
}
.mdh-timeline__list--bc .mdh-timeline__item {
	border-left-color: var(--wp--preset--color--makariv-green);
}
.mdh-timeline__item--highlight {
	border-left-color: var(--wp--preset--color--makariv-red);
	border-left-width: 5px;
}
.mdh-timeline__image {
	max-width: 100%;
	border-radius: 10px;
	margin-bottom: var(--wp--preset--spacing--10);
}
.mdh-timeline__year {
	display: inline-block;
	font-weight: 700;
	color: var(--wp--preset--color--makariv-blue);
	font-size: 1.125rem;
}
.mdh-timeline__list--bc .mdh-timeline__year {
	color: var(--wp--preset--color--makariv-green);
}
.mdh-timeline__emoji {
	margin-left: 0.5rem;
}
.mdh-timeline__title {
	margin: 0.25rem 0;
	font-size: 1.25rem;
}
.mdh-timeline__desc {
	color: var(--wp--preset--color--text);
	line-height: 1.6;
}
.mdh-timeline__source {
	margin: var(--wp--preset--spacing--10) 0 0;
	font-size: 0.875rem;
}
.mdh-timeline__source a {
	color: var(--wp--preset--color--makariv-blue);
}

/* Реальний дефект, знайдений на живому пості: імпортований контент іноді
 * містить сирі довгі URL як текст посилання (наприклад, linktr.ee-лінк
 * із десятками UTM/fbclid-параметрів, ~600 символів суцільно, без
 * пробілів) — браузер не може перенести такий рядок, тож весь блок
 * контенту (а з ним і вся сторінка) розтягується горизонтально далеко
 * за viewport, показуючи горизонтальний скрол і зсуваючи видиму частину
 * тексту ліворуч. Це не поодинокий випадок — той самий патерн міг
 * трапитись у будь-якому з 6437 імпортованих постів, тож фікс на рівні
 * CSS для всього блоку контенту, а не точковий патч одного посту.
 */
.wp-block-post-content,
.wp-block-post-content a {
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* Пошук у шапці сайту (Фаза 5, 2026-09-21). */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.mkr-nav-search {
	position: relative;
}
.mkr-nav-search > summary {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--text);
	cursor: pointer;
	list-style: none;
}
.mkr-nav-search > summary::-webkit-details-marker {
	display: none;
}
.mkr-nav-search > summary:hover,
.mkr-nav-search[open] > summary {
	border-color: var(--wp--preset--color--makariv-blue);
	color: var(--wp--preset--color--makariv-blue);
}
.mkr-nav-search form {
	position: absolute;
	top: calc(100% + 0.5rem);
	right: 0;
	z-index: 100;
	display: flex;
	gap: 0.5rem;
	padding: 0.75rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.mkr-nav-search input[type="search"] {
	width: 14rem;
	max-width: 60vw;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	font-size: 1rem;
	font-family: inherit;
}
.mkr-nav-search button[type="submit"] {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	border: none;
	border-radius: 8px;
	background: var(--wp--preset--color--makariv-blue);
	color: var(--wp--preset--color--base);
	cursor: pointer;
	flex-shrink: 0;
}

/* Спливаюче оголошення (Фаза 5, 2026-09-21) — не модальне: без
   затемнення фону, сторінка лишається повністю доступною для взаємодії,
   фіксоване в куті, приваблива поява з анімацією, легко закривається. */
.mkr-popup {
	position: fixed;
	left: 1.25rem;
	bottom: 1.25rem;
	z-index: 9998;
	max-width: 22rem;
	padding: 1.25rem 1.5rem 1.25rem 1.25rem;
	border-radius: 16px;
	border: 2px solid var(--wp--preset--color--makariv-gold, var(--wp--preset--color--makariv-blue));
	background: var(--wp--preset--color--base);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
	animation: mkr-popup-in 0.35s ease;
}
.mkr-popup[hidden] {
	display: none;
}
@keyframes mkr-popup-in {
	from { opacity: 0; transform: translateY(1rem); }
	to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.mkr-popup { animation: none; }
}
.mkr-popup__close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: transparent;
	border-radius: 999px;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	color: var(--wp--preset--color--text-secondary);
}
.mkr-popup__close:hover {
	background: var(--wp--preset--color--border);
}
.mkr-popup__title {
	font-weight: 700;
	font-size: 1.0625rem;
	margin: 0 1.5rem var(--wp--preset--spacing--10) 0;
}
.mkr-popup__message {
	font-size: 0.9375rem;
	color: var(--wp--preset--color--text-secondary);
	margin: 0 0 var(--wp--preset--spacing--10);
}
.mkr-popup__button {
	display: inline-block;
	margin-top: 0.25rem;
	padding: 0.5rem 1.25rem;
	border-radius: 999px;
	background: var(--wp--preset--color--makariv-blue);
	color: var(--wp--preset--color--base);
	font-weight: 700;
	text-decoration: none !important;
	transition: transform 150ms ease, box-shadow 150ms ease, opacity 150ms ease;
}
.mkr-popup__button:hover {
	opacity: 0.9;
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}
.mkr-popup__button:active {
	transform: translateY(0);
}
@media (max-width: 480px) {
	.mkr-popup {
		left: 0.75rem;
		right: 0.75rem;
		bottom: 0.75rem;
		max-width: none;
	}
}

/* Facebook/Telegram іконки в [makariv_contact] (Фаза 5, 2026-09-21). */
.mkr-social-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}
.mkr-social-icon {
	flex-shrink: 0;
}

/* Значок "Дія" в шапці сайту (Фаза 5, 2026-09-21). */
.mkr-diia-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--text);
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none !important;
}
.mkr-diia-badge:hover {
	border-color: var(--wp--preset--color--makariv-blue);
	color: var(--wp--preset--color--makariv-blue);
}
.mkr-diia-badge img {
	width: 26px;
	height: 26px;
	border-radius: 5px;
}

/* Пошук рішень/положень за ключовими словами (Фаза 5, 2026-09-21). */
.mkr-doc-search {
	margin: var(--wp--preset--spacing--30) 0;
}
.mkr-doc-search__label {
	display: block;
	font-weight: 600;
	margin-bottom: var(--wp--preset--spacing--10);
}
.mkr-doc-search__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10);
	max-width: 40rem;
}
.mkr-doc-search__row input[type="search"] {
	flex: 1 1 16rem;
	padding: 0.625rem 1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	font-size: 1rem;
	font-family: inherit;
}
.mkr-doc-search__button {
	padding: 0.625rem 1.5rem;
	border: none;
	border-radius: 10px;
	background: var(--wp--preset--color--makariv-blue);
	color: var(--wp--preset--color--base);
	font-weight: 700;
	cursor: pointer;
}
.mkr-doc-search__button:hover {
	opacity: 0.9;
}

/* Реальний дефект (запит користувача, 2026-09-21: "нижній сайдбар" мапи не
 * переносився на наш сайт): PlacesMapBlock's mobile bottom sheet
 * (.mdh-places-map__sheet) is `position:absolute; bottom:-0.75rem` relative
 * to its own map container — which we embed at a fixed 600px height inside
 * a normal scrollable page (breadcrumbs + heading above it), not as a
 * full-viewport map screen like the prototype assumed. Result: the sheet
 * sat ~300px below the fold on mobile, present in the DOM but invisible
 * without scrolling deep into the map block — not a working bottom bar at
 * all. Fix: pin it to the real viewport bottom below the map's own
 * breakpoint, same as the chat-widget launcher already does.
 */
@media (max-width: 767px) {
	.mdh-places-map__sheet {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}
	/* Заважає взаємно закривати нижню панель мапи — трохи підіймаємо кнопку
	   чату, коли обидва плаваючі елементи можуть бути на одній сторінці. */
	body:has(.mdh-places-map) .mdh-chat-widget {
		bottom: 4.5rem;
	}
}

/* ==========================================================================
   Анімації (запит користувача, 2026-09-21) — стримані, узгоджені з рештою
   сайту: hover-підйом на кнопках/картках уже переважно був, тут додається
   кнопкам, яким бракувало transition, + плавна поява карток при скролі
   (scroll-reveal, JS нижче через functions.php). Усе вимикається через
   prefers-reduced-motion — обов'язково для держсайту.
   ========================================================================== */
.wp-block-button__link {
	transition: transform 150ms ease, box-shadow 150ms ease, opacity 150ms ease;
}
.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}
.wp-block-button__link:active {
	transform: translateY(0);
	box-shadow: none;
}

.mkr-diia-badge,
.mkr-nav-search > summary,
.mkr-social-link {
	transition: transform 150ms ease, border-color 150ms ease, color 150ms ease;
}
.mkr-diia-badge:hover,
.mkr-nav-search > summary:hover {
	transform: translateY(-1px);
}

/* Scroll-reveal: JS (makariv_scroll_reveal, functions.php) додає клас
   .mkr-reveal-ready на елементи-картки при завантаженні сторінки й
   .mkr-revealed, коли вони з'являються у в'юпорті. Без JS (напр. якщо
   заблоковано) елементи лишаються звичайним .mkr-reveal-ready без
   прихованого стану — тому базовий стан видимий, а не opacity:0 за
   замовчуванням (progressive enhancement, контент ніколи не губиться). */
.mkr-reveal-ready {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 500ms ease, transform 500ms ease;
}
.mkr-reveal-ready.mkr-revealed {
	opacity: 1;
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link,
	.mkr-diia-badge,
	.mkr-nav-search > summary,
	.mkr-social-link,
	.mdh-places-archive__filter,
	.mdh-memorial-list__filter {
		transition: none !important;
	}
	.wp-block-button__link:hover,
	.mkr-diia-badge:hover,
	.mkr-nav-search > summary:hover,
	.mdh-places-archive__filter:hover,
	.mdh-memorial-list__filter:hover {
		transform: none !important;
	}
	.mkr-reveal-ready {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* Слайдер новин на головній (Фаза 5, 2026-09-21) — плагінові .mdh-news-carousel__*
   CSS/JS перевикористані як є (клас-агностичні до контенту), кольори — під герб. */
.mdh-news-carousel__category {
	background: var(--wp--preset--color--makariv-green);
}
.mdh-news-carousel__title a {
	color: var(--wp--preset--color--text);
}
.mdh-news-carousel__nav {
	color: var(--wp--preset--color--text);
	border-color: var(--wp--preset--color--border);
}
.mdh-news-carousel__nav:hover,
.mdh-news-carousel__nav:focus-visible {
	background: var(--wp--preset--color--makariv-blue);
	border-color: var(--wp--preset--color--makariv-blue);
	color: var(--wp--preset--color--base);
}
.mdh-news-carousel__track {
	border-color: var(--wp--preset--color--border);
}
.mdh-news-carousel__date,
.mdh-news-carousel__excerpt {
	/* Плагінові #7f848a/opacity недостатньо контрастні (axe-core: 3.77:1, потрібно 4.5:1). */
	color: var(--wp--preset--color--text-secondary);
	opacity: 1;
}
/* Кнопка паузи (запит користувача, 2026-09-21). Спроба через flex-wrap
   (order:1, flex-basis:100%) виявилась ненадійною — .mdh-news-carousel__track
   динамічно високий (фото різної висоти), тож рядок "переносився" непередбачувано
   й кнопка спливала поряд зі стрілками замість чіткого місця під слайдером.
   Абсолютне позиціювання відносно контейнера (вже position:relative) — надійніше:
   завжди по центру знизу, незалежно від висоти конкретного слайду. */
.mdh-news-carousel {
	padding-bottom: 3.5rem;
}
.mdh-news-carousel__nav--playpause {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: auto;
	height: auto;
	padding: 0.5rem 1.25rem;
	border-radius: 999px;
	font-size: 1.125rem;
	gap: 0.5rem;
}
.mdh-news-carousel__nav-label {
	font-size: 0.875rem;
	font-weight: 600;
}
@media (max-width: 700px) {
	.mdh-news-carousel {
		padding-bottom: 3rem;
	}
}

/* Слайдер "Розділи сайту" на головній (Фаза 5, 2026-09-21) — той самий
   UX/CSS-мотив, що й слайдер новин вище, окремі класи (mkr-hub-carousel__*),
   бо це власний, темовий компонент (JS: assets/js/hub-carousel.js). */
.mkr-hub-carousel {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-bottom: 3.5rem;
}
.mkr-hub-carousel__track {
	flex: 1;
	min-width: 0;
	overflow: hidden;
}
.mkr-hub-carousel__slides {
	display: flex;
	transition: transform 300ms ease;
}
@media (prefers-reduced-motion: reduce) {
	.mkr-hub-carousel__slides {
		transition: none;
	}
}
.mkr-hub-carousel__slide {
	flex: 0 0 33.3333%;
	min-width: 0;
	padding: 0 0.625rem;
	box-sizing: border-box;
}
/* Коли карток більше, ніж влазить у вікно (JS вирахує perView) — картки поза
   вікном лишаються в DOM (translateX просто зсуває рядок), .is-active тут
   позначає лише "видима зараз" для стилю/аналітики, не display. */
.mkr-hub-carousel--static .mkr-hub-carousel__slides {
	transform: none !important;
}
.mkr-hub-card {
	display: block;
	height: 100%;
	text-decoration: none !important;
	border: 2px solid var(--wp--preset--color--border);
	border-radius: 20px;
	background: var(--wp--preset--color--base);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	box-sizing: border-box;
	transition: transform 150ms ease, box-shadow 150ms ease;
}
.mkr-hub-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.mkr-hub-card--blue {
	border-color: var(--wp--preset--color--makariv-blue);
}
.mkr-hub-card--blue:hover {
	box-shadow: 0 8px 20px rgba(0, 117, 190, 0.2);
}
.mkr-hub-card--blue .mkr-hub-icon {
	color: var(--wp--preset--color--makariv-blue);
	background: rgba(0, 117, 190, 0.12);
}
.mkr-hub-card--green {
	border-color: var(--wp--preset--color--makariv-green);
}
.mkr-hub-card--green:hover {
	box-shadow: 0 8px 20px rgba(0, 123, 60, 0.2);
}
.mkr-hub-card--green .mkr-hub-icon {
	color: var(--wp--preset--color--makariv-green);
	background: rgba(0, 123, 60, 0.12);
}
.mkr-hub-card--gold {
	border-color: var(--wp--preset--color--makariv-gold-dark);
}
.mkr-hub-card--gold:hover {
	box-shadow: 0 8px 20px rgba(179, 148, 0, 0.2);
}
.mkr-hub-card--gold .mkr-hub-icon {
	color: var(--wp--preset--color--makariv-gold-dark);
	background: rgba(138, 115, 0, 0.14);
}
.mkr-hub-card--red {
	border-color: var(--wp--preset--color--makariv-red);
}
.mkr-hub-card--red:hover {
	box-shadow: 0 8px 20px rgba(196, 30, 58, 0.2);
}
.mkr-hub-card--red .mkr-hub-icon {
	color: var(--wp--preset--color--makariv-red);
	background: rgba(196, 30, 58, 0.12);
}
.mkr-hub-carousel__title {
	color: var(--wp--preset--color--text);
	margin: var(--wp--preset--spacing--10) 0 0.5rem;
}
.mkr-hub-carousel__desc {
	color: var(--wp--preset--color--text-secondary);
	margin: 0;
}
.mkr-hub-carousel__nav {
	flex-shrink: 0;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--base);
	box-shadow: 0 2px 6px rgba(16, 24, 40, 0.08);
	font-size: 1.75rem;
	line-height: 1;
	color: var(--wp--preset--color--text);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.mkr-hub-carousel__nav:hover {
	background: var(--wp--preset--color--makariv-blue);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--makariv-blue);
}
/* [hidden] сам по собі не спрацьовував — .mkr-hub-carousel__nav{display:flex}
   (авторський стиль) переважає стандартний UA-стиль [hidden]{display:none}
   навіть за однакової специфічності, бо порядок походження стилів вищий за
   специфічність у каскаді. */
.mkr-hub-carousel__nav[hidden] {
	display: none;
}
.mkr-hub-carousel__nav--playpause {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: auto;
	height: auto;
	padding: 0.5rem 1.25rem;
	border-radius: 999px;
	font-size: 1.125rem;
	gap: 0.5rem;
}
.mkr-hub-carousel__nav-label {
	font-size: 0.875rem;
	font-weight: 600;
}
@media (max-width: 700px) {
	.mkr-hub-carousel {
		padding-bottom: 3rem;
		gap: 0.375rem;
	}
	.mkr-hub-card {
		max-width: none;
	}
}
/* Реальний дефект (2026-09-21): на вузьких екранах з 2 картками у вікні
 * стрілки-кола (3.25rem кожна) з'їдали більшість ширини — для картки
 * лишалось ~77px, а з padding 30px звідусіль на текст залишалось лише
 * 13px (перевірено: titleClientWidth=13 при titleScrollWidth=63-81) —
 * заголовок ламався в майже нечитабельну вертикальну колонку по літері
 * на рядок. Менші стрілки + менший padding картки повертають текст.
 */
@media (max-width: 640px) {
	.mkr-hub-carousel__nav {
		width: 2rem;
		height: 2rem;
		font-size: 1.25rem;
	}
	.mkr-hub-card {
		padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--10);
	}
	.mkr-hub-icon {
		width: 2.25rem;
		height: 2.25rem;
	}
	.mkr-hub-icon svg {
		width: 20px;
		height: 20px;
	}
	.mkr-hub-carousel__title {
		font-size: 1rem;
	}
	.mkr-hub-carousel__desc {
		font-size: 0.8125rem;
	}
}

/* QR-код на чат-бот громади у футері. Перша версія (2026-09-21) — QR над
 * підписом, окремим блоком під Facebook/Telegram — витягувала колонку
 * "Соцмережі" значно вище за сусідні колонки футера й виглядала як
 * випадково причеплений елемент, а не частина дизайну ("як-то не так,
 * виглядить не красиво"). Друга ітерація: горизонтальна картка з рамкою —
 * менший QR збоку, підпис поруч, компактніше по висоті, читається як
 * єдиний цілісний віджет-заклик до дії, а не окремі шматки. */
.mkr-chat-qr {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: var(--wp--preset--spacing--10);
	padding: 0.625rem 1rem 0.625rem 0.625rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	text-decoration: none !important;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}
.mkr-chat-qr:hover {
	border-color: var(--wp--preset--color--makariv-blue);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.mkr-chat-qr__image {
	display: block;
	flex-shrink: 0;
	width: 56px;
	height: 56px;
}
.mkr-chat-qr__image svg {
	display: block;
	width: 100%;
	height: 100%;
}
.mkr-chat-qr__text {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}
.mkr-chat-qr__label {
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--wp--preset--color--text);
	line-height: 1.3;
}
.mkr-chat-qr__hint {
	font-size: 0.75rem;
	color: var(--wp--preset--color--text-secondary);
}
.mkr-chat-qr:hover .mkr-chat-qr__label {
	color: var(--wp--preset--color--makariv-blue);
}

/* Футер — 4 колонки з передбачуваною шириною (2026-09-21, див. коментар у
   setup-navigation.php): без цього довга адреса в "Контакти" не переносилась
   і забирала стільки місця, що "Соцмережі" не влазило в рядок і "падало"
   значно нижче за решту колонок. */
.mkr-footer-row > .wp-block-group {
	flex: 1 1 220px;
	max-width: 340px;
}
.mkr-footer-row .mkr-chat-qr,
.mkr-footer-row p {
	overflow-wrap: anywhere;
}