/*
 * Core blocks in the UI kit look: core/details as «Питання» (12:934), core/list
 * «Список з галочками» (is-style-check), core/post-template «Картки статей»
 * (is-style-bti-cards, rendered by inc/blocks.php), core/quote, core/separator.
 * Icons are the theme SVGs as CSS masks, coloured with background-color.
 */

:root {
	--icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M12 5V19M5 12H19'/%3E%3C/svg%3E");
	--icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M5 12H19'/%3E%3C/svg%3E");
	--icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5L10 17L19 7'/%3E%3C/svg%3E");
}

/*
 * FAQ: core/details (bti_faq_item() prints the same markup). Closed: question 20/26 and
 * a plus in ink, 18 px above and below, hatch line under. Open: minus, answer 17/26 soft.
 */
.wp-block-details {
	margin: 0;
	border-bottom: 1px solid var(--c-hatch);
}

.bti-faq {
	margin: 0 0 var(--space-4);
}

.wp-block-details > summary {
	display: flex;
	align-items: flex-start;
	gap: var(--space-4);
	padding-block: 18px;
	color: var(--c-graphite);
	font-size: 20px;
	line-height: 26px;
	font-weight: 500;
	letter-spacing: -0.005em;
	list-style: none;
	cursor: pointer;
}

.wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.wp-block-details > summary::after {
	content: "";
	flex: none;
	width: 24px;
	height: 24px;
	margin-top: 1px;
	margin-left: auto;
	background-color: var(--c-ink);
	-webkit-mask: var(--icon-plus) center / 24px 24px no-repeat;
	mask: var(--icon-plus) center / 24px 24px no-repeat;
}

.wp-block-details[open] > summary {
	padding-bottom: 10px;
}

.wp-block-details[open] > summary::after {
	-webkit-mask-image: var(--icon-minus);
	mask-image: var(--icon-minus);
}

.wp-block-details > summary:hover {
	color: var(--c-ink);
}

.wp-block-details > :not(summary) {
	margin: 0 0 10px;
	color: var(--c-graphite-soft);
	font-size: 17px;
	line-height: 26px;
}

.wp-block-details > :last-child:not(summary) {
	margin-bottom: 18px;
}

/* List with check marks («Список з галочками»). */
ul.is-style-check,
.wp-block-list.is-style-check {
	padding-left: 0;
	list-style: none;
}

.is-style-check > li {
	position: relative;
	margin-bottom: var(--space-2);
	padding-left: 32px;
}

.is-style-check > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1px;
	top: calc((1lh - 24px) / 2);
	width: 24px;
	height: 24px;
	background-color: var(--c-ink);
	-webkit-mask: var(--icon-check) center / 24px 24px no-repeat;
	mask: var(--icon-check) center / 24px 24px no-repeat;
}

/* core/query → post template with the «Картки статей» style: the card grid. */
.wp-block-post-template.bti-card-grid {
	display: grid;
	margin-block: 0 var(--space-4);
	padding: 0;
	list-style: none;
}

/* core/post-template without our style: at least a clean list. */
.wp-block-post-template {
	padding: 0;
	list-style: none;
}

/* core/quote: a 1.5 px graphite rule on the left, no italics. */
.wp-block-quote {
	margin-inline: 0;
	padding-left: var(--space-5);
	border-left: 1.5px solid var(--c-graphite);
}

.wp-block-quote cite {
	display: block;
	color: var(--c-graphite-soft);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
	font-style: normal;
}

/* core/separator: hatch line. */
.wp-block-separator {
	height: 0;
	margin-block: var(--space-6);
	border: 0;
	border-top: 1px solid var(--c-hatch);
}

/*
 * «Позначка змін» (is-style-change-note) on core/group or core/paragraph: a note about changes
 * on the plan (Figma 17:2277). Red rule on the left; in a group the first line is the red title,
 * in a paragraph a <strong> start is.
 */
.is-style-change-note {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-block: var(--space-4);
	padding: 12px 16px;
	border-left: 3px solid var(--c-change);
	background: var(--c-sheet);
	color: var(--c-graphite);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
}

p.is-style-change-note {
	display: block;
}

.is-style-change-note > * {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}

.wp-block-group.is-style-change-note > :first-child,
p.is-style-change-note strong {
	color: var(--c-change-text);
	font-size: 16px;
	line-height: 20px;
	font-weight: 500;
}

p.is-style-change-note strong {
	display: block;
	margin-bottom: 6px;
}

/*
 * «Коротка відповідь» (is-style-answer, Figma article 19:2881): the same box with an ink rule;
 * the first line (group) or a <strong> start (paragraph) is the ink title, the text is body size.
 */
.is-style-answer {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-block: var(--space-4);
	padding: 16px 20px;
	border-left: 3px solid var(--c-ink);
	background: var(--c-sheet);
	color: var(--c-graphite);
}

p.is-style-answer {
	display: block;
}

.is-style-answer > * {
	margin: 0;
}

.wp-block-group.is-style-answer > :first-child,
p.is-style-answer strong {
	color: var(--c-ink);
	font-size: 16px;
	line-height: 20px;
	font-weight: 500;
}

p.is-style-answer strong {
	display: block;
	margin-bottom: var(--space-2);
}