/* =========================================================
 * assets/css/wp-blocks.css
 *
 * Стандартные блоки редактора в стиле сайта: «Акордеон» (core/accordion,
 * WP 6.9+), «Цитата» (core/quote) и «Таблиця» (core/table). Своих стилей у ядра почти нет: отступы
 * давали flow-layout (margin-block-start = block gap), стили h3 из theme.json
 * и инлайновые padding/margin, которые редактор вписывает в разметку, — их
 * без !important не перебить.
 *
 * Мобильная таблица-«карточки» опирается на data-label у ячеек — его
 * проставляет wf_table_add_labels() в functions.php по шапке таблицы.
 * =======================================================*/

/* Палитра — та же, что у страниц банка и страховой (bank-page.css):
   shadcn-токены родительской темы с запасными значениями. */
.wp-block-accordion,
.wp-block-table {
	--wfb-ink: var(--wp--preset--color--shadcn-foreground, #0a0a0b);
	--wfb-muted: var(--wp--preset--color--shadcn-muted-foreground, #6b7280);
	--wfb-line: #e9ece8;
	--wfb-soft: #f5f8f3;
	--wfb-soft-hover: #eef5ea;
	--wfb-green: var(--wp--preset--color--shadcn-primary, #085c44);
}

/* ---------- Акордеон ----------
   Лёгкий список: без карточек и теней, только тонкие линии между вопросами
   и зелёный плюс без подложки. */

.wp-block-accordion {
	margin-block: 24px;
	border-top: 1px solid var(--wfb-line);
}

.wp-block-accordion > .wp-block-accordion-item {
	margin: 0 !important; /* редактор пишет margin-top/bottom инлайном */
	border-bottom: 1px solid var(--wfb-line);
}

/* !important: шаблоны страниц стилизуют h3 своего контента селекторами
   сильнее нашего (.wf-ip .wf-ip-content h3 у страховой даёт 28px/12px и 19px) —
   а заголовок пункта акордеона должен выглядеть одинаково везде. */
.wp-block-accordion-item > .wp-block-accordion-heading {
	margin: 0 !important;
	font-size: 17px !important;
	font-weight: 600 !important;
	line-height: 1.45 !important;
	color: var(--wfb-ink);
}

.wp-block-accordion-heading .wp-block-accordion-heading__toggle {
	gap: 20px;
	padding: 18px 0 !important; /* инлайновый padding редактора */
}

.wp-block-accordion-heading .wp-block-accordion-heading__toggle:focus-visible {
	outline: 2px solid var(--wfb-green);
	outline-offset: 2px;
	border-radius: 4px;
}

.wp-block-accordion-heading .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title,
.wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-title {
	text-decoration: none;
	color: var(--wfb-green);
}

/* Плюс рисуем двумя полосками: глиф «+» из шрифта тонкий и сидит не по центру.
   Открытый пункт ядро поворачивает на 45° — плюс становится крестиком. */
.wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
	position: relative;
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	color: var(--wfb-green);
	font-size: 0;
}

.wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon::before,
.wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transform: translate(-50%, -50%);
}

.wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.wp-block-accordion-item > .wp-block-accordion-panel {
	margin: 0 !important; /* flow-layout даёт margin-block-start = block gap */
	padding: 0 40px 20px 0;
	color: var(--wfb-muted);
	font-size: 16px;
	line-height: 1.65;
}

.wp-block-accordion-panel > * {
	margin-block: 0 .75em !important;
}

.wp-block-accordion-panel > :last-child {
	margin-bottom: 0 !important;
}

@media (max-width: 560px) {
	.wp-block-accordion-item > .wp-block-accordion-heading {
		font-size: 16px !important;
	}

	.wp-block-accordion-heading .wp-block-accordion-heading__toggle {
		gap: 14px;
		padding: 15px 0 !important;
	}

	.wp-block-accordion-item > .wp-block-accordion-panel {
		padding: 0 0 16px;
		font-size: 15px;
	}
}

/* ---------- Цитата ----------
   Реплика в пузыре: сиреневая подложка из макета (#ECE9FB, как колонка
   «Зберегти» и бейдж прозрачности), хвостик снизу слева и кавычка-акцент.
   Родительская тема даёт цитате рамку слева, курсив и крупный кегль из
   theme.json — их перебиваем, в т.ч. у варианта «plain». */

.wp-block-quote,
.wp-block-quote.is-style-plain,
.wp-block-quote.is-style-default {
	--wfq-bg: #ECE9FB;
	--wfq-accent: #5B4BC4;
	--wfq-ink: #1B1730;

	position: relative;
	margin: 32px 0 44px;
	padding: 22px 28px 22px 72px !important;
	border: 0 !important;
	border-radius: 24px 24px 24px 6px;
	background: var(--wfq-bg) !important;
	color: var(--wfq-ink);
	/* !important: global styles из theme.json печатаются позже с той же специфичностью. */
	font-size: 18px !important;
	font-style: normal !important;
	line-height: 1.6 !important;
}

/* Кавычка */
.wp-block-quote::before {
	content: "";
	position: absolute;
	top: 24px;
	left: 26px;
	width: 30px;
	height: 24px;
	background: var(--wfq-accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 24'%3E%3Cpath d='M0 24V14.4C0 6.6 4.2 1.8 12 0l1.5 3.3C9.3 4.8 7.2 7.6 7 11h5.5v13H0Zm16.5 0V14.4c0-7.8 4.2-12.6 12-14.4L30 3.3c-4.2 1.5-6.3 4.3-6.5 7.7H29v13H16.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 24'%3E%3Cpath d='M0 24V14.4C0 6.6 4.2 1.8 12 0l1.5 3.3C9.3 4.8 7.2 7.6 7 11h5.5v13H0Zm16.5 0V14.4c0-7.8 4.2-12.6 12-14.4L30 3.3c-4.2 1.5-6.3 4.3-6.5 7.7H29v13H16.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Хвостик пузыря */
.wp-block-quote::after {
	content: "";
	position: absolute;
	bottom: -14px;
	left: 0;
	width: 26px;
	height: 16px;
	background: var(--wfq-bg);
	clip-path: polygon(0 0, 100% 0, 0 100%);
}

.wp-block-quote p,
.wp-block-quote.is-style-plain p {
	margin: 0 0 .6em !important;
	color: inherit;
	font-size: inherit !important;
	font-style: normal !important;
	line-height: inherit;
}

.wp-block-quote > :last-child {
	margin-bottom: 0 !important;
}

.wp-block-quote strong,
.wp-block-quote b {
	color: var(--wfq-accent);
	font-weight: 700;
}

.wp-block-quote cite,
.wp-block-quote .wp-block-quote__citation {
	display: block;
	margin-top: 12px;
	color: var(--wfq-accent);
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
}

.wp-block-quote cite::before {
	content: "— ";
}

@media (max-width: 560px) {
	.wp-block-quote,
	.wp-block-quote.is-style-plain,
	.wp-block-quote.is-style-default {
		margin: 24px 0 36px;
		padding: 18px 18px 18px 56px !important;
		border-radius: 20px 20px 20px 6px;
		font-size: 16px !important;
	}

	.wp-block-quote::before {
		top: 20px;
		left: 18px;
		width: 24px;
		height: 19px;
	}
}

/* ---------- Таблица ----------
   Воздушная: светлая шапка с мелкими серыми подписями, тонкие линии между
   строками, никаких вертикальных рамок и «зебры». */

.wp-block-table {
	margin-block: 28px;
	border: 1px solid var(--wfb-line);
	border-radius: 16px;
	background: #fff;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Ядро у «зебры» вешает свою рамку снизу и красит нечётные строки. */
.wp-block-table.is-style-stripes {
	border-bottom: 1px solid var(--wfb-line);
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background: transparent;
}

.wp-block-table table {
	width: 100%;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--wfb-ink);
}

.wp-block-table thead {
	border: 0;
}

.wp-block-table th,
.wp-block-table td,
.wp-block-table.is-style-stripes th,
.wp-block-table.is-style-stripes td {
	padding: 18px 24px;
	border: 0;
	border-top: 1px solid var(--wfb-line);
	vertical-align: middle;
	text-align: left;
}

/* Шапка — <thead> или первая строка из одних <th> (из Google Docs таблица
   приходит так), её помечает wf_table_add_labels() классом wf-table-head. */
.wp-block-table thead th,
.wp-block-table .wf-table-head th,
.wp-block-table.is-style-stripes .wf-table-head th {
	padding-block: 14px;
	border-top: 0;
	background: var(--wfb-soft);
	color: var(--wfb-muted);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .01em;
}

/* Первая строка без шапки — без линии сверху, к рамке блока. */
.wp-block-table table:not(:has(thead)) tr:first-child > * {
	border-top: 0;
}

/* Первая колонка — названия параметров. */
.wp-block-table tbody td:first-child,
.wp-block-table tbody th {
	color: var(--wfb-ink);
	font-weight: 600;
}

.wp-block-table tbody td:not(:first-child) {
	color: color-mix(in srgb, var(--wfb-ink) 82%, #fff);
}

.wp-block-table tbody tr {
	transition: background .15s;
}

.wp-block-table tbody tr:hover {
	background: var(--wfb-soft);
}

.wp-block-table tbody tr.wf-table-head:hover {
	background: transparent;
}

.wp-block-table figcaption,
.wp-block-table .wp-element-caption {
	margin: 0;
	padding: 12px 24px;
	border-top: 1px solid var(--wfb-line);
	color: var(--wfb-muted);
	font-size: 13px;
	text-align: left;
}

@media (max-width: 900px) {
	.wp-block-table th,
	.wp-block-table td,
	.wp-block-table.is-style-stripes th,
	.wp-block-table.is-style-stripes td {
		padding: 16px 18px;
	}
}

/* Мобильный. Две-три колонки помещаются как есть; широкая таблица без шапки
   (wf-table-wide, 4+ колонки) скроллится вбок, а не сжимает колонки в слова. */
@media (max-width: 640px) {
	.wp-block-table:not(.wf-table-stack) table {
		table-layout: auto;
	}

	.wp-block-table.wf-table-wide table {
		min-width: 560px;
	}

	.wp-block-table:not(.wf-table-stack) td,
	.wp-block-table:not(.wf-table-stack) th {
		padding: 14px 16px;
		word-break: normal;
	}

	/* С шапкой — строка превращается в карточку «подпись: значение». */
	.wp-block-table.wf-table-stack {
		overflow: visible;
		border: 0;
		border-radius: 0;
		background: transparent;
	}

	.wf-table-stack table,
	.wf-table-stack tbody,
	.wf-table-stack tr,
	.wf-table-stack td {
		display: block;
		box-sizing: border-box;
		width: 100%;
	}

	.wf-table-stack table {
		table-layout: auto;
	}

	.wf-table-stack thead,
	.wf-table-stack tbody tr.wf-table-head {
		display: none;
	}

	.wf-table-stack tbody tr {
		margin: 0 0 12px;
		padding: 6px 18px;
		border: 1px solid var(--wfb-line);
		border-radius: 16px;
		background: #fff !important;
	}

	.wf-table-stack tbody td,
	.wf-table-stack.is-style-stripes tbody td {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 16px;
		padding: 11px 0;
		border-top: 1px solid var(--wfb-line);
		text-align: right;
		word-break: normal;
	}

	.wf-table-stack tbody td::before {
		content: attr(data-label);
		flex: 0 0 auto;
		max-width: 50%;
		color: var(--wfb-muted);
		font-size: 14px;
		font-weight: 400;
		text-align: left;
	}

	/* Первая ячейка — заголовок карточки. */
	.wf-table-stack tbody td:first-child,
	.wf-table-stack.is-style-stripes tbody td:first-child {
		display: block;
		padding: 12px 0 10px;
		border-top: 0;
		font-size: 16px;
		text-align: left;
	}

	.wf-table-stack tbody td:first-child::before {
		content: none;
	}

	.wf-table-stack figcaption,
	.wf-table-stack .wp-element-caption {
		padding: 4px 2px 0;
		border-top: 0;
	}
}