/*
 * Шар сумісності WordPress ↔ макет.
 *
 * design.css переноситься з макета дослівно і не редагується. Але макет
 * не знає про обгортки, які додає блокова тема, і не описує сторінок,
 * яких у ньому немає (блог, архів звітів, юридичні тексти). Усе, що
 * потрібно дописати з боку WordPress, живе тут — і тільки тут.
 *
 * Підключається ПІСЛЯ design.css.
 */

/* -------------------------------------------------------------------------
   Обгортки блокової теми
   ---------------------------------------------------------------------- */

/*
 * core/template-part завжди друкує <div class="wp-block-template-part">.
 * Через це .topbar опинялася всередині обгортки, і position:sticky не мав
 * де прилипати: висота обгортки дорівнювала висоті самої шапки (решта її
 * вмісту — .sheet і .vh — виключена з потоку), тож діапазон прилипання
 * був нульовий і шапка їхала вгору разом зі сторінкою.
 *
 * display:contents прибирає обгортку з дерева боксів, не чіпаючи розмітку:
 * containing block для .topbar знову стає .wp-site-blocks.
 */
.wp-block-template-part {
	display: contents;
}

/*
 * Секції макета — це самі по собі повноширинні смуги з власними
 * padding-block. Обгортка post-content не має додавати нічого свого.
 */
.wp-site-blocks > main,
.wp-block-post-content {
	display: block;
}

/* -------------------------------------------------------------------------
   Читомий текст: блог, звіти, юридичні сторінки
   ---------------------------------------------------------------------- */

/*
 * У макеті `p{margin:0}`, бо кожен абзац там стоїть у власному гріді.
 * Для суцільного тексту це означає стіну без просвітів, тому сторінки
 * зі звичайним текстом отримують власний вертикальний ритм.
 *
 * Ширина рядка — 68 символів: далі очам важко ловити початок наступного.
 */
.prose {
	max-width: 68ch;
}

.prose > * + * {
	margin-top: 1.15em;
}

.prose > * + :is(h2, h3, h4) {
	margin-top: 2em;
}

.prose :is(h2, h3, h4) + * {
	margin-top: 0.6em;
}

.prose :is(ul, ol) {
	padding-left: 1.25em;
}

.prose li + li {
	margin-top: 0.4em;
}

.prose img,
.prose figure {
	border-radius: var(--r-m);
}

.prose figure figcaption {
	margin-top: 0.6em;
	font-size: 0.92rem;
	color: var(--ink-muted);
}

.prose blockquote {
	margin-left: 0;
	padding-left: var(--s3);
	border-left: 3px solid var(--amber);
}

/* -------------------------------------------------------------------------
   Список записів: блог і архів звітів
   ---------------------------------------------------------------------- */

.entry-list {
	display: grid;
	gap: var(--s5);
}

.entry-row {
	display: grid;
	gap: var(--s1);
	padding-bottom: var(--s4);
	border-bottom: 1px solid var(--line);
}

.entry-row:last-child {
	border-bottom: 0;
}

.entry-row .wp-block-post-title {
	margin: 0;
}

.entry-row .wp-block-post-title a {
	text-decoration: none;
}

.entry-row .wp-block-post-title a:hover {
	box-shadow: inset 0 -2px 0 var(--amber);
}

.entry-meta {
	font-size: 0.92rem;
	color: var(--ink-muted);
}

/*
 * Пагінація й службові посилання успадковують вигляд посилань макета,
 * але потребують власного ритму: у ядра вони йдуть суцільним рядком.
 */
.wp-block-query-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2) var(--s3);
	margin-top: var(--s6);
	padding-top: var(--s4);
	border-top: 1px solid var(--line);
}

/* -------------------------------------------------------------------------
   Дрібниці, яких у макеті немає
   ---------------------------------------------------------------------- */

/* Пропуск до контенту — з'являється лише при навігації з клавіатури */
.skip-link:focus {
	position: fixed;
	top: var(--s2);
	left: var(--s2);
	z-index: 100;
	padding: 12px 20px;
	background: var(--ink);
	color: var(--paper);
	border-radius: var(--r-s);
}

/* Вирівнювання ядра: макет ними не користується, але редактор може */
.alignwide,
.alignfull {
	max-width: none;
}

.aligncenter {
	margin-inline: auto;
}