/*
 * Единые маркеры списков PlayEstate.
 *
 * Маркер — фирменный SVG из assets/icons (marker-white / -black / -purple / -orange).
 * Цвет выбирается КЛАССОМ РОДИТЕЛЯ, а не в каждом блоке:
 *   .on-dark        — тёмный фон            -> белый маркер
 *   .on-light       — светлый фон           -> тёмный маркер
 *   .accent-purple  — акцентный список      -> фиолетовый маркер
 *   .accent-orange  — вторичный акцент      -> оранжевый маркер
 * Класс можно повесить на любой контейнер (в т.ч. в редакторе, «Дополнительный CSS-класс»):
 * ближайший родитель выигрывает, потому что цвет — это наследуемое CSS-свойство.
 *
 * Новый список: <ul class="pe-list"> внутри контейнера с одним из классов выше
 * (без класса маркер тёмный, т.е. для светлого фона).
 * Блоки темы получают контекст ниже, в разделе «Контекст по умолчанию».
 */

:root {
	--pe-marker-white: url("../icons/marker-white.svg");
	--pe-marker-black: url("../icons/marker-black.svg");
	--pe-marker-purple: url("../icons/marker-purple.svg");
	--pe-marker-orange: url("../icons/marker-orange.svg");
	--pe-marker-w: 11px;
	--pe-marker-img: var(--pe-marker-black);
}

/* ---------- Контекст: класс родителя задаёт цвет ---------- */
.on-dark {
	--pe-marker-img: var(--pe-marker-white);
}

.on-light {
	--pe-marker-img: var(--pe-marker-black);
}

.accent-purple {
	--pe-marker-img: var(--pe-marker-purple);
}

.accent-orange {
	--pe-marker-img: var(--pe-marker-orange);
}

/* ---------- Контекст по умолчанию для блоков темы (по фону блока) ---------- */
:is(
	.pe-hero,
	.pe-article-hero,
	.pe-brief,
	.pe-scheme,
	.pe-compare,
	.pe-biz,
	.pe-scope__card,
	.pe-cases__detail,
	.pe-cta,
	.pe-demos--ink
) {
	--pe-marker-img: var(--pe-marker-white);
}

:is(
	.pe-brief--light,
	.pe-brief--benefits,
	.pe-scope,
	.pe-scope--sheet,
	.pe-scope--sheet .pe-scope__card,
	.pe-timeline,
	.pe-tariffs,
	.pe-ifc-req,
	.pe-article-body,
	.entry-content,
	.wp-block-post-content
) {
	--pe-marker-img: var(--pe-marker-black);
}

/* вторичные акценты: тёплый (оранжевый) и фирменный (фиолетовый) */
:is(
	.pe-hero--highlights .pe-hero__points,
	.pe-hero__proof,
	.pe-compare__col:first-child
) {
	--pe-marker-img: var(--pe-marker-orange);
}

:is(
	.pe-compare__col:last-child,
	.pe-article-body__main,
	.pe-article-body__list,
	.pe-brief--benefits .pe-brief__list
) {
	--pe-marker-img: var(--pe-marker-purple);
}

/* ---------- Единый вид маркера (список зарегистрированных списков) ---------- */
:is(
	.pe-list,
	.pe-hero__points,
	.pe-hero__proof ul,
	.pe-brief__list,
	.pe-scheme__list,
	.pe-scheme__data,
	.pe-scope__list,
	.pe-compare__col ul,
	.pe-article-body__main ul.wp-block-list,
	.pe-article-body__list,
	.pe-biz--rows .pe-biz__story ul,
	.pe-tariffs ul,
	.pe-ifc-req__points,
	.pe-timeline__points,
	.pe-cases__detail ul,
	.pe-article-hero__filters,
	.entry-content ul:not([class]),
	.wp-block-post-content ul:not([class]),
	ul.wp-block-list
) {
	list-style: none;
}

:is(
	.pe-list,
	.pe-hero__points,
	.pe-hero__proof ul,
	.pe-brief__list,
	.pe-scheme__list,
	.pe-scheme__data,
	.pe-scope__list,
	.pe-compare__col ul,
	.pe-article-body__main ul.wp-block-list,
	.pe-article-body__list,
	.pe-biz--rows .pe-biz__story ul,
	.pe-tariffs ul,
	.pe-ifc-req__points,
	.pe-timeline__points,
	.pe-cases__detail ul,
	.pe-article-hero__filters,
	.entry-content ul:not([class]),
	.wp-block-post-content ul:not([class]),
	ul.wp-block-list
) > li::before {
	content: "";
	display: block;
	flex: 0 0 auto;
	width: var(--pe-marker-w);
	aspect-ratio: 25.3 / 29;
	height: auto;
	border: 0;
	border-radius: 0;
	background: var(--pe-marker-img) center / contain no-repeat;
	clip-path: none;
	color: transparent;
	font-size: 0;
}

/* Список без собственной вёрстки маркера (контент страниц, новые списки): маркер слева от текста */
:is(
	.pe-list,
	.pe-tariffs ul,
	.pe-ifc-req__points,
	.pe-timeline__points,
	.pe-cases__detail ul,
	.pe-biz--rows .pe-biz__story ul,
	.pe-brief__card .pe-brief__list,
	.pe-brief__note .pe-brief__list,
	.entry-content ul:not([class]),
	.wp-block-post-content ul:not([class]),
	ul.wp-block-list:not(.pe-article-body__main *)
) {
	padding-left: 0;
}

:is(
	.pe-list,
	.pe-tariffs ul,
	.pe-ifc-req__points,
	.pe-timeline__points,
	.pe-cases__detail ul,
	.pe-biz--rows .pe-biz__story ul,
	.pe-brief__card .pe-brief__list,
	.pe-brief__note .pe-brief__list,
	.entry-content ul:not([class]),
	.wp-block-post-content ul:not([class]),
	ul.wp-block-list:not(.pe-article-body__main *)
) > li {
	position: relative;
	padding-left: calc(var(--pe-marker-w) + 12px);
}

:is(
	.pe-list,
	.pe-tariffs ul,
	.pe-ifc-req__points,
	.pe-timeline__points,
	.pe-cases__detail ul,
	.pe-biz--rows .pe-biz__story ul,
	.pe-brief__card .pe-brief__list,
	.pe-brief__note .pe-brief__list,
	.entry-content ul:not([class]),
	.wp-block-post-content ul:not([class]),
	ul.wp-block-list:not(.pe-article-body__main *)
) > li::before {
	position: absolute;
	top: 0.42em;
	left: 0;
}