/*
 * Autocontent — felsorolás-ikonok.
 *
 * A markup-szerződés (ezt írja az app a cikk törzsébe, és ez az EGYETLEN forma, ami
 * a Classic ÉS a Gutenberg konverteren is sértetlenül átmegy):
 *
 *   <li><span class="ac-i ac-i--circle-check ac-t--check"></span>A tétel szövege…</li>
 *
 * MÁSODIK ALAK — a szerkesztő (TipTap) a listaelem tartalmát `<p>`-be csomagolja, és ez
 * a mentett body_html-ben is így marad (a 75 cikkből 45-ben már ma is `<li><p>` van):
 *
 *   <li><p><span class="ac-i …"></span>A tétel szövege…</p></li>
 *
 * Mindkét alakot ugyanaz a szabály-pár kezeli. Az abszolút pozicionálás alapja a `<li>`
 * marad (a közbeékelt `<p>` statikus), tehát a bal margó mindkét esetben stimmel.
 *
 * Az `ac-i--{név}` osztályt a plugin render-időben lecseréli az inline SVG-re; a
 * `ac-t--{tónus}` marad, mert az adja a színt. Ha a plugin RÉGEBBI verzió (nem ismeri
 * a transzformot), a span üres és nulla méretű marad — a lista normálisan jelenik meg.
 *
 * SZÍNEK: az 5 szemantikus változót az Autocontent szinkronizálja az arculatból, és a
 * plugin inline style-lal injektálja. Az itteni értékek csak fallbackek — a semleges,
 * márka nélküli készlet.
 *
 * HARDENING: a `.ac-content` és az idegen témák (Avada) 0-1-1 körüli szabályokkal
 * írnának felül, ezért a belső szabályok duplikált osztály-prefixet kapnak, ahogy a
 * cta.css is csinálja. !important sehol nincs.
 */

:root,
.ac-content {
	--ac-sem-error: #C0453C;
	--ac-sem-warning: #A87411;
	--ac-sem-info: #3A6FA8;
	--ac-sem-check: #2F7D55;
	--ac-sem-neutral: #6B7280;
}

/*
 * A pötty-marker eltüntetése — CSAK azoknál a tételeknél, amikben tényleg van ikon.
 *
 * A `:has()` szándékos: így egyetlen szabály elintézi, és a szelektor nem tud
 * véletlenül ráfutni a régi cikkek osztály nélküli listáira. Ahol a böngésző nem
 * ismeri a `:has()`-t, ott a pötty megmarad az ikon mellett — csúnyább, de nem törik.
 */
.ac-i {
	display: inline-block;
	width: 1.15em;
	height: 1.15em;
	vertical-align: -0.2em;
	flex: none;
	color: var(--ac-sem-neutral);
}

li:has(> .ac-i),
li:has(> p:first-child > .ac-i:first-child) {
	list-style: none;
	position: relative;
	/* NINCS padding-left. Az ikon a lista SAJÁT behúzásába kerül — oda, ahol a natív
	   pötty is állna —, így az ikonos és a jelöletlen tételek szövege PONTOSAN egy
	   vonalban kezdődik. Korábban 1.9em padding volt itt, és az ikonos tétel szövege
	   30px-cel beljebb csúszott a sima tételekénél (mérve, vegyes listán). */
	padding-left: 0;
}

li > .ac-i:first-child,
li > p:first-child > .ac-i:first-child {
	position: absolute;
	/* `right: 100%` = az ikon JOBB széle a tétel szövegének bal szélén. Így az igazítás
	   nem függ attól, mekkora behúzást ad a téma a listának (mérve: az Avada 20px-et ad,
	   nem a mi 1.5em-ünket) — bármilyen behúzás mellett a pötty helyére kerül. */
	right: 100%;
	/* Step 93/f — a térköz az ikon és a szöveg között 0.3em → 0.55em (user-kérés, 2026-09-13:
	   „nagyobb térköz az ikonok és a leírások között"). Az ikon a lista SAJÁT behúzásába lóg
	   (l. a `right: 100%` melletti megjegyzést), ezért a margó növelése balra tolja: 1.15em
	   ikon + 0.55em margó ≈ 27px egy 16px-es törzsnél, az Avada 20px-es lista-behúzása
	   mellett ez a cikk bal belső margójába lóg, ami ott bőven van. Ennél többet nem
	   érdemes: keskeny konténerben az ikon kicsúszna. */
	margin-right: 0.55em;
	/* A sor tetejéhez igazítva, nem középre: a tételek több sorosak, és az ikonnak
	   az ELSŐ sor mellett a helye. */
	top: 0.18em;
}

.ac-i svg {
	display: block;
	width: 100%;
	height: 100%;
	stroke: currentColor;
	fill: none;
}

/* A tónusok. A színt a szülő `color`-ja adja tovább az SVG `currentColor`-jának. */
.ac-i.ac-t--error {
	color: var(--ac-sem-error);
}

.ac-i.ac-t--warning {
	color: var(--ac-sem-warning);
}

.ac-i.ac-t--info {
	color: var(--ac-sem-info);
}

.ac-i.ac-t--check {
	color: var(--ac-sem-check);
}

.ac-i.ac-t--neutral {
	color: var(--ac-sem-neutral);
}

/*
 * Az ikonos lista függőleges ritmusa. A `content.css` `li + li` szabálya 0.45em-et ad;
 * ikonnal a tételek vizuálisan sűrűbbnek hatnak, ezért itt kicsit több levegő.
 */
.ac-content li:has(> .ac-i) + li:has(> .ac-i),
.ac-content li:has(> p:first-child > .ac-i) + li:has(> p:first-child > .ac-i) {
	margin-top: .6em;
}

/* A `<p>`-be csomagolt alaknál a bekezdés saját margója szétfeszítené a listát. */
.ac-content li > p:first-child:has(> .ac-i:first-child) {
	margin: 0;
}

@media (max-width: 640px) {
	li > .ac-i:first-child,
	li > p:first-child > .ac-i:first-child { margin-right: 0.25em; }

	.ac-i {
		width: 1.05em;
		height: 1.05em;
	}
}