/*
Theme Name: Род Дуло
Theme URI: https://roddulo.bg/
Description: Собствена блокова тема за roddulo.bg V1. Дизайн системата живее в theme.json; тук са само компонентите, които theme.json не може да изрази.
Author: Род Дуло
Version: 0.3.61
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: roddulo
Domain Path: /languages
Tags: block-patterns, full-site-editing, translation-ready

Род Дуло WordPress Theme, Copyright 2026 Род Дуло
Род Дуло is distributed under the terms of the GNU GPL v2 or later.
*/

/* ==========================================================================
   Правилата тук допълват theme.json. Цветовете НИКОГА не се пишат на ръка —
   използват се само preset променливите, за да остане една система.
   ========================================================================== */

/* --- Ф5, 5.7 · фокус: двуцветен по повърхност ----------------------------
   --ink върху светлите (12.84:1), --paper върху тъмните. --ink върху
   --treasury е 1.18:1 и е невидим, затова тъмните панели обръщат пръстена. */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 2px;
	border-radius: 1px;
}

:where(.has-treasury-background-color, .has-treasury-slate-background-color)
	:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline-color: var(--wp--preset--color--paper);
}

/* Мишката не показва пръстена, клавиатурата — винаги. */
:where(a, button):focus:not(:focus-visible) {
	outline: none;
}

/* --- Ф6, 6.9 · skip link -------------------------------------------------- */

.roddulo-skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background-color: var(--wp--preset--color--paper-raised);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--ui);
	text-decoration: underline;
}

.roddulo-skip-link:focus {
	left: 0.5rem;
	top: 0.5rem;
}

/* --- Ф5, 5.5 · български локализирани форми ------------------------------
   Включени за заглавия, буквица, pull quote и тялото на статията; изключени
   за метаданни под 14 px (5.2а). Носителят е lang атрибутът, не клас. */

:where(h1, h2, h3, h4, .entry-content, .wp-block-pullquote, .wp-block-quote) {
	font-feature-settings: "locl" 1, "kern" 1, "liga" 1;
}

:where(.wp-block-post-date, .wp-block-post-terms, .roddulo-meta, figcaption) {
	font-feature-settings: "locl" 0;
	font-variant-numeric: tabular-nums;
}

/* --- Ф5, 5.5 · цифри ------------------------------------------------------
   Таблични в метаданни, дати и IBAN; пропорционални в тялото на статията. */

.roddulo-tabular {
	font-variant-numeric: tabular-nums;
}

/* --- Ф5, 5.5 · забрана за версални в тяло на статия -----------------------
   „РОДова памет“ е авторско изписване и не се пренаписва от стил. */

.entry-content :where(p, li, h1, h2, h3, h4) {
	text-transform: none;
	font-variant-caps: normal;
}

/* --- Буквица: 2 реда под 700 px, 3 реда над 700 px (Д-08) ----------------
   Реализация с initial-letter, никога чрез <span>. Cormorant Garamond има
   cap-height/em = 0.63, затова 3 реда на телефон разпадат първия абзац.
   ⚠️ Второто правило минава през `<div lang>` (У4): до 0.3.31 буквицата не
   стигаше до абзаца. Към 23.09.2026 г. нито един от 27-те текста няма
   `dropCap` — правилото чака първия. */

.entry-content > p.has-drop-cap:first-of-type::first-letter,
.entry-content > [lang] > p.has-drop-cap:first-of-type::first-letter {
	-webkit-initial-letter: 2;
	initial-letter: 2;
	font-family: var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--gold-ink);
	margin-inline-end: 0.5rem;
	font-weight: 600;
}

@media (min-width: 43.75em) {
	.entry-content > p.has-drop-cap:first-of-type::first-letter,
	.entry-content > [lang] > p.has-drop-cap:first-of-type::first-letter {
		-webkit-initial-letter: 3;
		initial-letter: 3;
	}
}

/* Резервен вариант, когато initial-letter не се поддържа: без плаваща буква,
   само по-едра първа буква. По-добре скучно, отколкото разместено. */
@supports not (initial-letter: 2) {
	.entry-content > p.has-drop-cap:first-of-type::first-letter,
	.entry-content > [lang] > p.has-drop-cap:first-of-type::first-letter {
		font-size: 2.5em;
		line-height: 1;
		float: inline-start;
		margin-block-start: 0.1em;
	}
}

/* --- Ф5, 5.10 · текстово разреждане (SC 1.4.12) ---------------------------
   Нищо не се задава с фиксирана височина, за да не се отреже при
   line-height 1.5 / letter-spacing 0.12em / word-spacing 0.16em. */

.roddulo-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	align-items: baseline;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--meta);
	color: var(--wp--preset--color--ink-muted);
	min-height: 0;
}

/* --- Ф6, 6.7 · празни състояния с достойнство (Д-13) ---------------------- */

.roddulo-empty {
	border: 1px solid var(--wp--preset--color--rule-strong);
	background-color: var(--wp--preset--color--paper-raised);
	padding: 1.5rem;
}

.roddulo-empty > :first-child { margin-block-start: 0; }
.roddulo-empty > :last-child  { margin-block-end: 0; }

/*
 * Списъкът с изходи на 404 (`roddulo/not-found`, част `paths`).
 *
 * ⚠️ Стойността нарочно повтаря `core/list` в `tools/build-theme-json.mjs`.
 * Ядрото печата правилото от theme.json ВЪТРЕ в стиловия лист на самия блок,
 * а той се зарежда само когато блокът присъства на страницата. Откакто
 * списъкът се рендира от наш блок, `core/list` вече го няма на 404 и отстъпът
 * изчезваше заедно с него — хванато чрез сравнение на рендирания HTML със
 * старата тема, не на око.
 */
.roddulo-empty .wp-block-list {
	padding-left: 1.25rem;
}

/*
 * У23 (решение 9.1): на тесен екран бутонът „Търси“ слиза под полето — на
 * страница „Търсене“ и на 404, както в drawer-а. Само по-късата подсказка не
 * стигна: измерено в Playground при 360 px „Име, род, година, място“ иска
 * 213 px, а полето до бутона дава 218 на „Търсене“ (Chrome пак реже
 * последната буква) и 168 на 404, в рамката `.roddulo-empty`. Под полето
 * мястото е цялата колона.
 */
@media (max-width: 30em) {
	main .wp-block-search__button-outside .wp-block-search__inside-wrapper {
		flex-wrap: wrap;
		row-gap: 0.5rem;
	}

	main .wp-block-search__button-outside .wp-block-search__input {
		flex-basis: 100%;
	}

	main .wp-block-search__button-outside .wp-block-search__button {
		margin-inline-start: 0;
	}
}

/* --- Ф5 · атмосфера: граници, не вкус -------------------------------------
   Текстура максимум 2–4% opacity и никога под основен текст. */

.roddulo-texture {
	position: relative;
	isolation: isolate;
}

.roddulo-texture::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0.03;
	pointer-events: none;
}

/* --- Тъмен панел за артефакт (не тема на сайта) -------------------------- */

.roddulo-treasury {
	background-color: var(--wp--preset--color--treasury);
	color: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--rule-on-dark);
}

.roddulo-treasury a { color: var(--wp--preset--color--gold-on-dark); }

/* --- Движение ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --- Четивна колона ------------------------------------------------------
   contentSize 36rem дава 62 знака на голям екран; на 320–430 px реалната
   измерена стойност е 31–43 знака при Lora 18 px. */

.entry-content > * + * {
	margin-block-start: 1.5rem;
}

/*
 * Ритъмът на тялото — DESIGN_POLISH 5.1 (решение 9.4, У4 в
 * `AUDIT_UX_2026-09-23.md`). Абзац 24 px (28 на голям екран), H2 48 над /
 * 16 под, H3 32 / 12 — „много въздух над заглавието, малко под него“ кара
 * подзаглавието да принадлежи на текста под себе си.
 *
 * ⚠️ Селекторите минават през `[lang]`. Тялото е обвито в `<div lang>`
 * (`roddulo_content_lang_attribute()`, `inc/setup.php`), затова правилото по-
 * горе (`.entry-content > * + *`) стига само до обвивката — от първия commit
 * отстъпите в текста бяха браузърните: абзац 18 px, H2 23,5 / 23,5, H3 22 / 22,
 * цитатът 0 отгоре. Горното правило остава за съдържание без обвивка.
 *
 * `margin-block: 0` първо — иначе долното поле на браузъра (1em на абзаца,
 * 0.83em на H2) се слива с горното и асиметрията изчезва. Каретата, цитатите
 * и образите с надпис получават по 2rem от двете страни — те прекъсват текста.
 */
.entry-content > [lang] > * {
	margin-block: 0;
}

.entry-content > [lang] > * + * {
	margin-block-start: 1.5rem;
}

.entry-content > [lang] > h2 {
	margin-block-start: 3rem;
}

.entry-content > [lang] > h3 {
	margin-block-start: 2rem;
}

.entry-content > [lang] > :is(h2, h3) + :not(h2) {
	margin-block-start: 1rem;
}

.entry-content > [lang] > h3 + :not(h2) {
	margin-block-start: 0.75rem;
}

.entry-content > [lang] > :is(.roddulo-credit, .roddulo-pullquote, .roddulo-callout) {
	margin-block: 2rem;
}

@media (min-width: 43.75em) {
	.entry-content > [lang] > p + p {
		margin-block-start: 1.75rem;
	}
}

/*
 * H3 в тялото — 1.625rem (решение 9.5, У5). С пресета `h-3` (1.375–1.5rem)
 * Cormorant 22 px има x-височина 9 px, а текстът под него (Lora 18 px) — 10:
 * малките букви на подзаглавието бяха по-ниски от тези на абзаца и то се
 * четеше като ред в друг шрифт. 26 px дава 11. Пресетът не се пипа — той носи
 * и „Продължи с“, формите, източниците. `!important`, защото
 * `.has-h-3-font-size` на ядрото е `!important`; без класа правилото пак важи.
 */
.entry-content > [lang] > h3 {
	font-size: 1.625rem !important;
}

/*
 * Дългите непрекъснати низове (URL, IBAN) не бутат хоризонтален scroll.
 *
 * Н13 (задача 6а, решение 8.7): и заглавията в текста. „СЕНКИ ПРЕД
 * СОФИЙСКАТА СТЕНА“ (`h2` в `11-835`, версалки в самия текст) не се късаше
 * изобщо и преливаше — 214 px при прозорец 180 и 427 при 360 с шрифт 200 %,
 * а фиксираната долна лента се разтягаше с него. `break-word` къса само дума,
 * която сама не се побира на реда; иначе пренасянето е по интервалите.
 * Без `hyphens: auto` — изборът на собственика.
 */
.entry-content :where(p, li, td, h2, h3, h4) {
	overflow-wrap: break-word;
}

/*
 * Същото за откъсите в каталозите и търсенето (99-а сесия, при проверката на
 * Н27): „християнството):“ в откъса на „Боян Мага“ излизаше 13 px вдясно при
 * 200 % текст и 360 px, а фиксираната долна лента се разтягаше с него.
 */
.wp-block-post-excerpt__excerpt {
	overflow-wrap: break-word;
}

/*
 * Н13: H1 малко по-малък само на много тесен екран — под 20em, тоест при
 * 280 px или при едър шрифт на обикновен телефон (em следва шрифта). Там
 * клампът на `h-1` вече е на долната си граница, 2.125rem, и H1 на `11-835`
 * при 280 px разкъсваше „алтернативнат/а“. Сменя се променливата, не
 * класът: `.has-h-1-font-size` на ядрото е `!important` и чете точно нея —
 * така мисията, заглавията на статиите и на страниците растат заедно.
 */
@media (max-width: 19.99em) {
	body {
		--wp--preset--font-size--h-1: 1.875rem;
	}
}

/* ==========================================================================
   Ф6 · Навигация
   ========================================================================== */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --- Бутони --------------------------------------------------------------
   44 px минимална цел за докосване; размерът се изразява в em, за да расте
   заедно с текста при увеличен шрифт, вместо да го отреже. */

.roddulo-btn {
	/*
	 * Н9 (задача 1б): `<a>` е `content-box` по подразбиране, `<button>` —
	 * `border-box`. Без този ред „Търси“ (връзка) в заглавката беше 60 px, а
	 * „Меню“ (бутон) — 44 px. Същото беше поправено в долната лента на
	 * 19.09.2026 г. (`.roddulo-bottom-bar__link`).
	 */
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.375em;
	min-height: 2.75rem;
	padding: 0.5em 0.875em;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--ui);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

/* Открито в П-22 (20.09.2026): без този ред `[hidden]` губи срещу
   `.roddulo-btn { display: inline-flex }` — авторски стил бие UA стойността
   по подразбиране дори при равна специфичност, ако дойде след нея в каскадата.
   Засяга бутоните "Копирай"/"Сподели" в `roddulo/share-invite`, докато
   `assets/js/share-invite.js` още не ги е разкрил. */
.roddulo-btn[hidden] {
	display: none;
}

/* 39-а сесия, т. 3 · видим знак, докато бутонът е заключен от
   `assets/js/newsletter-loading.js` по време на записване/отписване. */
.roddulo-btn:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

.roddulo-btn--quiet {
	color: var(--wp--preset--color--ink);
	background-color: transparent;
	border: 1px solid var(--wp--preset--color--rule-strong);
	border-radius: 2px;
}

/*
 * У15 (решение 9.1): фонът при посочване — само на устройство с мишка.
 * Мобилните браузъри държат `:hover` върху докоснатия елемент до следващото
 * докосване другаде, затова след „Спри“ капсулата стоеше под пръста в тона
 * на `paper-aged`. Същото за четирите правила с фон — тези, които само
 * подчертават, не пречат и остават извън заявката.
 */
@media (hover: hover) {
	.roddulo-btn--quiet:hover {
		background-color: var(--wp--preset--color--paper-aged);
	}
}

.roddulo-btn--solid {
	color: var(--wp--preset--color--paper);
	background-color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 2px;
}

/* DESIGN_POLISH 7.1 · „Подкрепи“: действието е --gold-ink с рамка, не с
   плътен фон — нарочно по-тихо от --solid. „Няма червено, няма ярък бутон“
   пази страницата от речника на електронната търговия. */
.roddulo-btn--gold {
	color: var(--wp--preset--color--gold-ink);
	background-color: transparent;
	border: 1px solid var(--wp--preset--color--gold-ink);
	border-radius: 2px;
}

@media (hover: hover) {
	.roddulo-btn--gold:hover {
		background-color: var(--wp--preset--color--paper-aged);
	}
}

/* --- Ф6, 6.1 · header ----------------------------------------------------
   Логото вляво, отделни бутони Търси и Меню вдясно. Без центриран hamburger
   и без dropdown, който измества съдържанието. */

/*
 * На статия/завет `roddulo/reading-progress` е първото дете на
 * `.wp-site-blocks`, но е `position: fixed` — не заема ред в потока.
 * WordPress все пак вижда в него "първото дете" и слага блоковия blockGap
 * (1.5rem) като горен отстъп на СЛЕДВАЩОТО дете (header-а), защото за CSS
 * селектора той е просто поредният сибсел. Резултатът е 24 px мъртво
 * празно пространство над целия header на всяка статия с индикатор за
 * напредък. Тук отстъпът се връща на нула само за точно тази двойка.
 */
.roddulo-progress + header {
	margin-block-start: 0;
}

.roddulo-header {
	border-bottom: 1px solid var(--wp--preset--color--rule-strong);
	background-color: var(--wp--preset--color--paper);
}

.roddulo-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1rem;
	/* Пренася се, вместо да излиза от екрана при едър текст. */
	flex-wrap: wrap;
	padding-block: 0.75rem;
}

.roddulo-header__actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

/* № 26: flow подредбата не добавя отстъп на второто дете във flex реда. */
.roddulo-header__bar > * {
	margin-block-start: 0;
}

.wp-block-roddulo-site-logo {
	display: flex;
}

.roddulo-logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}

.roddulo-logo__wordmark {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--h-3);
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.1;
}

/*
 * Н10 (задача 1б): логото расте с шрифта (3.75rem) и при 200 % излизаше от
 * екрана — 343 px в прозорец от 360. `max-width` го спира в колоната, а
 * пропорцията пази `viewBox`.
 */
.roddulo-logo picture {
	display: block;
	max-width: 100%;
}

.roddulo-logo svg,
.roddulo-logo img {
	display: block;
	height: 3.75rem;
	width: auto;
	max-width: 100%;
}

/* --- Ф6, 6.2 · drawer ---------------------------------------------------- */

.roddulo-drawer[hidden] {
	display: none;
}

.roddulo-drawer {
	position: fixed;
	inset: 0;
	z-index: 120;
}

.roddulo-drawer__scrim {
	position: absolute;
	inset: 0;
	background-color: rgba(27, 27, 25, 0.55);
	opacity: 0;
	transition: opacity 160ms ease-out;
}

.roddulo-drawer.is-open .roddulo-drawer__scrim {
	opacity: 1;
}

.roddulo-drawer__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	/* Панелът никога не е по-широк от екрана, дори когато rem порасне двойно. */
	width: min(22rem, 92vw);
	display: flex;
	flex-direction: column;
	/* Хоризонталният отстъп е общ за скролиращата част и езиковата лента. */
	--roddulo-drawer-pad-inline: clamp(1rem, 4vw, 1.25rem);
	background-color: var(--wp--preset--color--paper-raised);
	border-inline-start: 1px solid var(--wp--preset--color--rule-strong);
	transform: translateX(100%);
	transition: transform 200ms ease-out;
}

/*
 * Дългите менюта и едрият текст скролват тук, вместо да се отрежат. Езиковата
 * лента е СЛЕД тази част във flex колоната и не скролва — нищо не минава под нея.
 *
 * Знакът „има още“ е двоен: тънък скролбар (на телефона е скрит, затова не е
 * единственият) и вътрешна сянка на долния ръб, под която текстът се отрязва
 * по средата на реда.
 *
 * ⚠️ Два начина за този знак вече са опитани и провалени пред axe, и двата
 * без да засягат реалния контраст — но проверката ослепя и „иска човешко око“
 * за всеки текст в панела: „скролиращи сенки“ с градиент във фона на този
 * елемент (`background-attachment: local`; фонът „не може да се определи“,
 * 11 възела) и `box-shadow` върху позиционираната езикова лента (редове под
 * гънката „частично се застъпват“). Вътрешната сянка няма нито фон под текста,
 * нито позициониран елемент върху него.
 */
.roddulo-drawer__body {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	padding: 1rem var(--roddulo-drawer-pad-inline) 1.5rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--rule-strong) transparent;
	box-shadow: inset 0 -0.75rem 0.5rem -0.5rem rgba(27, 27, 25, 0.14);
}

/* Само на много ниски екрани скролира целият панел — лентата с езика не бива
   да заема повече от четвърт от видимото. Тогава `__body` не скролва сам. */
@media (max-height: 25rem) {
	.roddulo-drawer__panel {
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.roddulo-drawer__body {
		flex: 0 0 auto;
		overflow: visible;
		box-shadow: none;
	}
}

.roddulo-drawer.is-open .roddulo-drawer__panel {
	transform: translateX(0);
}

.roddulo-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
}

/* „Меню“ — една стъпка над h-3 по скалата (собственикът, 80-а сесия). */
.roddulo-drawer__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--h-2);
}

.roddulo-drawer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.roddulo-drawer__list a {
	display: block;
	padding: 0.625rem 0;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--ui);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

/* Списъкът е последен в панела, само ако „Предстои“ е изключено. Тогава
   долната линия на последната връзка би стояла до линията на езиковата лента
   с празно между тях — две линии, които четат като грешка. */
.roddulo-drawer__nav:last-child .roddulo-drawer__list li:last-child a {
	border-bottom: 0;
}

.roddulo-drawer__list a:hover,
.roddulo-drawer__list a:focus-visible {
	text-decoration: underline;
}

.roddulo-drawer__list a[aria-current="page"] {
	font-weight: 700;
	/* Цветът не е единственият сигнал: към него върви и златна лента отляво. */
	box-shadow: inset 3px 0 0 0 var(--wp--preset--color--gold-ink);
	padding-inline-start: 0.625rem;
}

/* Без собствена горна линия: списъкът над него вече завършва с линия, а втората
   се виждаше като празен ред между две черти (преглед на живо, 22.09.2026 г.). */
.roddulo-drawer__upcoming {
	margin: 0;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--meta);
	color: var(--wp--preset--color--ink-muted);
}

.roddulo-field {
	display: block;
	margin-bottom: 0.5rem;
}

.roddulo-field__label {
	display: block;
	margin-bottom: 0.25rem;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--meta);
	color: var(--wp--preset--color--ink-muted);
}

.roddulo-field input,
.roddulo-field textarea,
.roddulo-field select {
	box-sizing: border-box;
	width: 100%;
	min-height: 2.75rem;
	padding: 0.5em 0.625em;
	font-family: var(--wp--preset--font-family--ui);
	/*
	 * Н6 (задача 1б): никога под 16 px — Safari на iPhone приближава
	 * страницата при докосване на поле с по-дребен шрифт. Флуидният `ui` е
	 * 14–16 px, затова `max()`, не нов размер: над 16 px полето расте с него.
	 */
	font-size: max(1rem, var(--wp--preset--font-size--ui));
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--rule-strong);
	border-radius: 2px;
}

.roddulo-field textarea {
	min-height: 6rem;
	resize: vertical;
}

/* Декой поле, скрито извън екрана като `.roddulo-skip-link`, но БЕЗ `:focus`
   разкриване — истински посетител никога не го среща по никакъв път. */
.roddulo-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.roddulo-scroll-locked {
	overflow: hidden;
}

/* --- Ф6, 6.3 · долна лента ----------------------------------------------
   Прагът е в `em`, не в `px`, и е САМО горен (Н1, задача 1б, 23.09.2026 г.).
   Долната граница `20em` беше от времето на четирите етикета, които при
   24 px текст искаха 413–465 px. Днес етикетите са най-много два и стоят на
   един ред до 180 px на четирите езика (`tools/mobile-audit/barfit.mjs`), а с
   границата лентата изчезваше точно при читателя с по-едър мащаб: Chrome за
   Android → „Default zoom“ 133 % на телефон 412 px = 309 CSS px и по
   средата на статия не оставаше никаква навигация (AUDIT_MOBILE_2026-09-23,
   Н1 и „Н4 — резултат“).

   № 43/44 (26.09.2026, задача Н27): лентата е „Продължи · Меню“ под история
   и завет и само „Меню“ другаде; показва се, щом „Меню“ в заглавката не е
   цяло на екрана (`navigation.js`). На началната лента няма, а заглавката е
   закачена. Сменя № 22 — там лентата беше на всички страници, винаги видима,
   а горе стоеше само логото. */

.roddulo-bottom-bar {
	display: none;
}

@media (max-width: 47.99em) {
	.roddulo-bottom-bar {
		display: block;
		position: fixed;
		inset-inline: 0;
		inset-block-end: 0;
		z-index: 100;
		background-color: var(--wp--preset--color--paper-raised);
		border-top: 1px solid var(--wp--preset--color--rule-strong);
		/*
		 * ⚠️ Носещ ред (задача 1а, Chrome 145 на Android 17 с жестова
		 * навигация): с него Chrome държи своята ивица под лентата и нищо не
		 * я закрива. Без него Chrome прибира ивицата при скрол и жестовата
		 * дръжка минава през „Търси“. Заключен в `test-mobile.php`.
		 */
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}

	/*
	 * № 43/44: скрита, докато „Меню“ в заглавката е цяло на екрана. Лентата
	 * се рендира така (`render.php`), а `navigation.js` сваля класа.
	 * `visibility` я вади от реда на Tab и от екранния четец и там, където
	 * `inert` го няма; размерът ѝ остава, затова мястото под последния абзац
	 * е запазено, преди тя да се покаже.
	 */
	.roddulo-bottom-bar.is-concealed {
		visibility: hidden;
		transform: translateY(100%);
	}

	/*
	 * № 43/44: „Меню“ стои горе, вдясно от логото, както на компютър, а
	 * „Търси“ се крие — полето е първото нещо в менюто. Затова скритата
	 * лента никога не оставя читателя без „Меню“: то е горе, докато лентата
	 * я няма. Сменя № 22 (логото в средата, горе без бутони) и мобилното
	 * центриране от № 26.
	 */
	.roddulo-header__search {
		display: none;
	}

	/*
	 * Логото и „Меню“ делят реда само ако логото се смалява: 7rem са двата
	 * странични отстъпа (2 × 1rem) и „Меню“ (~4.2rem), а остатъкът (~0.8rem)
	 * е въздухът между тях — `space-between` го слага там, затова
	 * `column-gap` е 0. В rem, защото растат заедно с текста; 4.09 е
	 * съотношението на мобилния SVG (`viewBox` 1320 × 323). 245 × 60 px от
	 * ~357 px нагоре, 208 × 51 при 320 — точно макетът по № 44. ⚠️ С
	 * празнината от 1rem на компютъра редът не стига при 320 и 360 px и
	 * „Меню“ пада на втори ред (измерено в Playground, 99-а сесия; макетът е
	 * вървял върху `column-gap: 0` от № 22). Долната граница на височината пази
	 * знака видим при крайно тесен екран с едър текст — тогава „Меню“ се
	 * пренася, без хоризонтален scroll. Тя е в px, не в rem: `1.5rem` при
	 * 200 % текст е 48 px и сама бута „Меню“ на втори ред при 360 px (там
	 * формулата дава 33 px и редът стига). ⚠️ Процентен вариант
	 * (`width/height: auto` + `max-width`) свива SVG-то до 0 × 0 — файлът
	 * няма собствен размер, само `viewBox`.
	 */
	.roddulo-header__bar {
		column-gap: 0;
	}

	.roddulo-logo svg,
	.roddulo-logo img {
		height: clamp(24px, calc((100vw - 7rem) / 4.09), 3.75rem);
	}

	/*
	 * Последният абзац не се закрива. Скриптът мери реалната височина на
	 * лентата и я публикува; стойността по подразбиране покрива случая без
	 * JavaScript и случая, в който етикетите се пренесат на два реда.
	 */
	body {
		padding-block-end: calc(var(--roddulo-bottom-bar-height, 4.5rem) + env(safe-area-inset-bottom, 0px));
	}

	/*
	 * WCAG 2.4.11: елемент с фокус или цел на котва не остава под лентата
	 * отдолу или под закачената заглавка на началната. И двете височини
	 * публикува `navigation.js`; без него — нула.
	 */
	html {
		scroll-padding-top: var(--roddulo-sticky-header-height, 0px);
		scroll-padding-bottom: var(--roddulo-bottom-bar-height, 0px);
	}

	/*
	 * № 44.4: на началната лента няма (класът идва от
	 * `roddulo_bottom_bar_body_class()`), а заглавката е закачена — „Меню“ е
	 * винаги горе. Закача се `header` на шаблона, не `.roddulo-header`:
	 * вътрешната група не залепва извън своя `header`. `z-index` е под
	 * лентата (100) и индикатора (130), които на началната ги няма; drawer-ът
	 * (120) е вътре в заглавката и остава над страницата.
	 */
	body.roddulo-no-bottom-bar {
		padding-block-end: 0;
	}

	.roddulo-no-bottom-bar header.wp-block-template-part {
		position: sticky;
		top: 0;
		z-index: 90;
	}
}

/* Над 600 px админ лентата на WordPress е закачена — заглавката стои под нея. */
@media (min-width: 600px) and (max-width: 47.99em) {
	.admin-bar.roddulo-no-bottom-bar header.wp-block-template-part {
		top: var(--wp-admin--admin-bar--height, 0px);
	}
}

/*
 * Лентата влиза и излиза с плъзгане само ако посетителят не е поискал по-малко
 * движение. При скриване `visibility` се сменя след края на плъзгането, при
 * показване — веднага.
 */
@media (prefers-reduced-motion: no-preference) {
	.roddulo-bottom-bar {
		transition: transform 200ms ease-out, visibility 0s;
	}

	.roddulo-bottom-bar.is-concealed {
		transition: transform 200ms ease-out, visibility 0s linear 200ms;
	}
}

.roddulo-bottom-bar__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
}

/*
 * Точка 6 (19.09.2026): пет елемента с равни (`flex: 1 1 0`) колони не се
 * побират на един ред при нормален (незумиран) текст — измерено с Manrope
 * 600 през реален canvas: на 320 px „Общност“/„Community“/„Спільнота“/
 * „Сообщество“ пренасят на два реда И В ЧЕТИРИТЕ езика, а на 375 px руският
 * пренася винаги (баланс vs. equal-column при 4 елемента: само руски, само
 * на 320 px). `flex: 1 1 auto` разпределя свободното място пропорционално
 * върху естествената ширина на всеки етикет, вместо да принуждава кратките
 * (Меню, Търси) да теглят дългите (Общност) под тяхната естествена ширина —
 * с 2–4 елемента изглежда практически както равните колони досега, защото
 * свободното място доминира разликите в дължината. `min-width: 0` остава:
 * ако бъдещ етикет надхвърли смятаното, резултатът пак е пренасяне на нов
 * ред (`overflow-wrap: anywhere` по-долу), не хоризонтален scroll.
 */
.roddulo-bottom-bar__item {
	flex: 1 1 auto;
	min-width: 0;
}

.roddulo-bottom-bar__link {
	display: flex;
	align-items: center;
	justify-content: center;
	/*
	 * Точка 6 (19.09.2026): изричен `border-box`, защото UA стиловете НЕ се
	 * съгласуват сами — `<a>` е `content-box` по подразбиране, `<button>` е
	 * `border-box`. Без този ред „Меню“ (бутон) излизаше 44px, а другите
	 * четири (връзки) 60px — открито измерено в Playground, не на теория.
	 */
	box-sizing: border-box;
	/*
	 * Никаква фиксирана височина и никъде text-overflow: ellipsis.
	 * № 22: малко по-високи от зоната за допир (2.75rem → 3.25rem).
	 */
	min-height: 3.25rem;
	padding: 0.5rem 0.25rem;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	overflow-wrap: anywhere;
}

/* „Меню“ е `<button>`, не `<a>` (виж render.php) — маха се UA хромът, за да
   изглежда идентично на другите четири. */
button.roddulo-bottom-bar__link {
	width: 100%;
	background: none;
	border: none;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

/*
 * № 22 (24.09.2026): избраният бутон е с леко оцветен фон, не с подчертана
 * дума. Текстът е `ink`, не златен: златното мастило върху топлия фон е
 * 3,84:1 — под 4,5:1; `ink` е 10,8:1. Златната черта отгоре остава — знакът,
 * който не е само цвят.
 */
.roddulo-bottom-bar__link[aria-current="page"] {
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--paper-aged);
	box-shadow: inset 0 2px 0 0 var(--wp--preset--color--gold-ink);
}

@media (prefers-reduced-motion: reduce) {
	.roddulo-drawer__panel,
	.roddulo-drawer__scrim {
		transition: none;
	}
}

/* ==========================================================================
   Ф10 · Hero на началната страница (направление H-1 „Тихият колофон“)
   Премиум усещането идва от контраста на мащаба и от въздуха, не от декор.
   ========================================================================== */

.roddulo-overline {
	letter-spacing: 0.12em;
	font-family: var(--wp--preset--font-family--ui);
	font-weight: 600;
	/* Главните са НАПИСАНИ, не наложени с text-transform. */
}

.roddulo-mission {
	text-wrap: balance;
}

/* Точно ЕДНА златна линия на екрана. Една линия е акцент; три са орнамент. */
.roddulo-hairline {
	border: 0;
	height: 1px;
	opacity: 1;
}

.roddulo-fleuron {
	font-size: 1rem;
	line-height: 1;
	letter-spacing: 0.2em;
}

/* --- Входовете като редове, не като карти -------------------------------- */

.roddulo-entries__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.roddulo-entries__item + .roddulo-entries__item {
	border-top: 1px solid var(--wp--preset--color--rule);
}

.roddulo-entries__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	/* Целта за докосване е целият ред, а не думата. Без фиксирана височина:
	   при едър текст редът расте, вместо да отреже описанието. */
	min-height: 3.5rem;
	padding-block: 0.875rem;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}

.roddulo-entries__link:hover .roddulo-entries__label,
.roddulo-entries__link:focus-visible .roddulo-entries__label {
	text-decoration: underline;
}

.roddulo-entries__text {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	min-width: 0;
}

.roddulo-entries__label {
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--ui);
	font-weight: 700;
	letter-spacing: 0.04em;
}

.roddulo-entries__blurb {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--meta);
	color: var(--wp--preset--color--ink-muted);
	line-height: 1.4;
}

.roddulo-entries__arrow {
	flex: 0 0 auto;
	color: var(--wp--preset--color--gold-ink);
	font-size: 1.125rem;
	line-height: 1;
}

/* --- Подбраната история --------------------------------------------------- */

/*
 * Образът и текстът са центрирани един спрямо друг (собственикът, 80-а
 * сесия). ⚠️ Групата е с подредба „flow“ и ядрото дава на втория ѝ елемент
 * горно поле (`margin-block-start`, 24 px) — то сваляше текста под горния
 * ръб на образа при всяко подравняване. Разстоянието е само `gap`.
 */
.roddulo-featured {
	display: flex;
	gap: 1rem;
	align-items: center;
}

.roddulo-featured > .roddulo-featured__body {
	margin-block-start: 0;
}

.roddulo-featured__image {
	flex: 0 0 120px;
	width: 120px;
	margin: 0;
}

.roddulo-featured__image img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.roddulo-featured__body {
	flex: 1 1 auto;
	min-width: 0;
}

.roddulo-featured__body :where(h2) {
	margin: 0;
}

/*
 * Под 340 px изображението пада ПОД текста, вместо да се свие до
 * неразличима миниатюра.
 */
@media (max-width: 21.25em) {
	.roddulo-featured {
		flex-direction: column-reverse;
	}

	.roddulo-featured__image {
		flex-basis: auto;
		width: 100%;
	}
}

/* --- Номерата на страниците ----------------------------------------------
   Н7 (задача 1б): ядрото ги рисува като голи връзки — при 360 px „1 2 3 4“
   бяха 6,6–10 px широки и 23 px високи, с центрове на ~14 px един от друг.
   Под WCAG 2.5.8 (24 px) и под правилото на темата (2.75rem, `.roddulo-btn`).
   Видът не се сменя — расте само зоната, числото стои в средата ѝ. Важи за
   търсенето и за каталозите, щом материалите надхвърлят една страница. */

.wp-block-query-pagination-numbers .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 2.75rem;
	min-height: 2.75rem;
}

/* --- Невидима зона за допир ----------------------------------------------
   Н12 (задача 6а, решение 8.6): значката за статут като връзка (24,8–26,1 px),
   „Прочети“ (30,6 px) и „Напред“/„Назад“ (65 × 31 px) минават 24-те px на
   WCAG 2.5.8, но не и правилото на темата (2.75rem). Решението е „без
   промяна на вида“, затова расте само зоната: прозрачен `::after`, центриран
   върху връзката. `min(0px, 50% − 1.375rem)` изнася ръба навън само докато
   страната е под 2.75rem — по-голяма връзка остава точно колкото е.
   Процентите на `top`/`bottom` са от височината, на `left`/`right` — от
   ширината. ⚠️ Footer-ът НЕ е тук — решението изрично го изключва. */

a.roddulo-badge,
.wp-block-post-excerpt__more-link,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	position: relative;
}

a.roddulo-badge::after,
.wp-block-post-excerpt__more-link::after,
.wp-block-query-pagination-previous::after,
.wp-block-query-pagination-next::after {
	content: "";
	position: absolute;
	top: min(0px, calc(50% - 1.375rem));
	bottom: min(0px, calc(50% - 1.375rem));
	left: min(0px, calc(50% - 1.375rem));
	right: min(0px, calc(50% - 1.375rem));
}

/* ==========================================================================
   Ф7 · Редакционен апарат

   Носещото правило на целия раздел: РАЗЛИКАТА МЕЖДУ ЧЕТИРИТЕ СТАТУТА СЕ НОСИ
   ОТ ФОРМАТА НА РАМКАТА, НЕ ОТ ЦВЕТА. Това е измерено, не предпочетено:
   тонираните чипове дават 1.06–1.10:1 срещу --paper, тоест фонът на чипа е
   практически невидим и не може да носи разликата (DESIGN_POLISH, 6.3).

   Приемателният тест е разпечатка в черно-бяло. Затова всяка форма е border
   (оцелява при forced-colors: active), а не box-shadow и не фон.
   ========================================================================== */

/* --- Значка за статут ----------------------------------------------------
   inline-flex + flex-wrap: при 200% zoom етикетът минава на два реда, вместо
   да се отреже. Никъде text-overflow: ellipsis и никъде фиксирана височина. */

.roddulo-badge {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.25em 0.4em;
	padding: 0.3em 0.6em;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-decoration: none;
	/* Цветът е ПОДСИЛВАНЕ. Рамката взема currentColor, за да са едно. */
	border: 1px solid currentColor;
	background-color: transparent;
}

a.roddulo-badge:hover .roddulo-badge__label,
a.roddulo-badge:focus-visible .roddulo-badge__label {
	text-decoration: underline;
}

.roddulo-badge__mark {
	display: inline-flex;
	flex: 0 0 auto;
}

.roddulo-badge__mark svg {
	display: block;
	/* По-едра от 1em нарочно: на 13 px мета-текст самата икона излизаше
	   прекалено дребна, за да се разпознае (собственическа обратна връзка,
	   19.09.2026) — 1.3em я връща различима, без да развали baseline-а. */
	width: 1.3em;
	height: 1.3em;
}

.roddulo-badge--tight {
	padding: 0.2em 0.5em;
}

/* 1 · Извор / обект — плътна рамка, ПРАВИ ъгли.
   Нещо съществува, има ръб, може да се пипне. */
.roddulo-badge--izvor {
	color: var(--wp--preset--color--status-source);
	background-color: var(--wp--preset--color--tint-source);
	border-style: solid;
	border-radius: 0;
}

/* 2 · Научен контекст — плътна ЗАОБЛЕНА рамка + ВТОРА ЛИНИЯ под етикета.
   Подчертано, публикувано, има автор. Втората линия е част от формата, не
   декорация: тя различава този статут от „Извор“ и на монохромно копие. */
.roddulo-badge--nauchen {
	color: var(--wp--preset--color--status-science);
	background-color: var(--wp--preset--color--tint-science);
	border-style: solid;
	border-radius: 3px;
}

.roddulo-badge--nauchen .roddulo-badge__label {
	border-bottom: 1px solid currentColor;
	padding-bottom: 0.1em;
}

/* 3 · Хипотеза / спорен прочит — ПУНКТИРНА рамка.
   Най-важното решение в системата. Прекъснатата линия значи „още не е
   затворено“ на всеки език, в монохром, на разпечатка и за всеки тип цветова
   слепота. Това е единственият елемент, който носи смисъл без обучение. */
.roddulo-badge--hipoteza {
	color: var(--wp--preset--color--status-hypothesis);
	background-color: var(--wp--preset--color--tint-hypothesis);
	border-style: dashed;
	border-radius: 3px;
}

/* 4 · Разказ на общността — одобреният монохромен тънък контур по Б8.
   Прозрачна капсула с еднакъв 1 px ръб; формата оцелява във forced-colors. */
.roddulo-badge--razkaz {
	color: var(--wp--preset--color--ink);
	background-color: transparent;
	border-style: solid;
	border-radius: 999px;
	font-weight: 400;
}

/* При висок контраст в системата цветовете отпадат; формите остават. */
@media (forced-colors: active) {
	.roddulo-badge {
		border-color: CanvasText;
		background-color: Canvas;
	}
}

.roddulo-badge-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* У21: разделът пред значката в резултатите от търсене — тих текст, не
   втора значка: рамката е езикът на статута и тук би го размила. */
.roddulo-section-label {
	align-self: center;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--meta);
	color: var(--wp--preset--color--ink-muted);
}

/* --- Ред с метаданни в статията -----------------------------------------
   Значката е ПЪРВА. Редът не е обърнат нито от flex, нито от grid, за да
   съвпада с реда в DOM-а — екранният четец чете същото, което окото вижда. */

.roddulo-meta--article {
	align-items: center;
	gap: 0.5rem 0.75rem;
}

.roddulo-meta__value {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

/* --- Пътека --------------------------------------------------------------- */

.roddulo-breadcrumb__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--meta);
	color: var(--wp--preset--color--ink-muted);
}

.roddulo-breadcrumb__item + .roddulo-breadcrumb__item::before {
	content: "/";
	margin-inline-end: 0.5rem;
	color: var(--wp--preset--color--rule-strong);
}

/* Последният елемент е текущата статия: не е връзка и не се подчертава. */
.roddulo-breadcrumb__item [aria-current="page"] {
	color: var(--wp--preset--color--ink);
}

/*
 * На тесен екран многостепенната пътека отстъпва на един ред „← Родител“ —
 * посетителите на телефон не търсят многостепенна пътека, а бутон назад
 * (собственическа обратна връзка, 19.09.2026). Родителят е винаги
 * предпоследният елемент: последният е текущата статия (не е връзка и е
 * излишен до самото H1 отдолу), а началото ѝ вече е достъпно през логото.
 * `roddulo_breadcrumb_trail()` никога не връща само 1 елемент (връща 0 или
 * ≥2), затова nth-last-child(2) винаги съществува и винаги е връзка.
 */
@media (max-width: 47.99em) {
	.roddulo-breadcrumb__item:not(:nth-last-child(2)) {
		display: none;
	}

	.roddulo-breadcrumb__item:nth-last-child(2)::before {
		content: none;
	}

	.roddulo-breadcrumb__item:nth-last-child(2) a {
		display: inline-flex;
		align-items: center;
		min-height: 2.75rem;
	}

	.roddulo-breadcrumb__item:nth-last-child(2) a::before {
		content: "←";
		margin-inline-end: 0.4em;
	}
}

/* --- Бележка за езика ----------------------------------------------------
   Колофон, не аларма: една вертикална косъмна линия вляво и НУЛА фон. Фонът е
   измерен като безполезен — 1.06:1 срещу --paper. */

.roddulo-langnote {
	display: flex;
	gap: 0.75rem;
	border-inline-start: 2px solid var(--wp--preset--color--gold-ink);
	padding-inline-start: 0.875rem;
	margin-block-end: var(--wp--preset--spacing--50);
	background: none;
}

.roddulo-langnote__code {
	flex: 0 0 auto;
	margin: 0;
	padding: 0.1em 0.35em;
	border: 1px solid var(--wp--preset--color--rule-strong);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--ink-muted);
	align-self: flex-start;
}

.roddulo-langnote__text {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
}

/* --- Знак за езика на един ред в списък -----------------------------------
   Същата косъмна рамка като кода на банера, и нарочно никаква друга разлика:
   посетителят го е научил там и го разпознава тук, без втори речник. В петте
   списъчни шаблона знакът стои в `.roddulo-meta` — тоест на реда на датата,
   без да взима собствен ред. Търсенето няма такъв ред и там е самостоятелен. */

.roddulo-langmark {
	margin: 0;
	display: inline-flex;
}

.roddulo-langmark__code {
	padding: 0.1em 0.35em;
	border: 1px solid var(--wp--preset--color--rule-strong);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--ink-muted);
}

/* --- Индикатор за напредък ----------------------------------------------
   2 px, --gold-ink върху подложка --rule, за да се вижда и остатъкът.
   Никакъв градиент: това е информация, не блясък. */

.roddulo-progress {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 130;
	height: 2px;
	background-color: var(--wp--preset--color--rule);
}

.roddulo-progress__fill {
	display: block;
	height: 100%;
	width: 100%;
	transform: scaleX(0);
	transform-origin: left center;
	background-color: var(--wp--preset--color--gold-ink);
	transition: transform 80ms linear;
}

@media (prefers-reduced-motion: reduce) {
	.roddulo-progress__fill {
		transition: none;
	}
}

/* Лентата е екранен прибор. На хартия тя е черна линия без смисъл. */
@media print {
	.roddulo-progress {
		display: none;
	}
}

/* --- Каре по статут -------------------------------------------------------
   Цялото каре носи формата: лявата граница е 3 px и нейният СТИЛ е носителят —
   плътна за „Извор“, пунктирна за „Хипотеза“, двойна за „Общност“. */

.roddulo-callout {
	border-inline-start: 3px solid var(--wp--preset--color--rule-strong);
	padding: 1rem 0 1rem 1.25rem;
	margin-block: var(--wp--preset--spacing--60);
	color: var(--wp--preset--color--ink);
}

.roddulo-callout__heading {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4em;
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--ui);
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.3;
}

.roddulo-callout__mark {
	display: inline-flex;
	flex: 0 0 auto;
}

.roddulo-callout__mark svg {
	display: block;
	width: 1em;
	height: 1em;
}

.roddulo-callout__body > :first-child { margin-block-start: 0; }
.roddulo-callout__body > :last-child  { margin-block-end: 0; }

.roddulo-callout--izvor {
	border-inline-start-style: solid;
	border-inline-start-color: var(--wp--preset--color--status-source);
}

.roddulo-callout--izvor .roddulo-callout__heading {
	color: var(--wp--preset--color--status-source);
}

.roddulo-callout--nauchen {
	border-inline-start-style: solid;
	border-inline-start-color: var(--wp--preset--color--status-science);
}

.roddulo-callout--nauchen .roddulo-callout__heading {
	color: var(--wp--preset--color--status-science);
	/* Същата втора линия като в значката — формата е една система. */
	border-bottom: 1px solid currentColor;
	padding-bottom: 0.35rem;
}

.roddulo-callout--hipoteza {
	border-inline-start-style: dashed;
	border-inline-start-color: var(--wp--preset--color--status-hypothesis);
}

.roddulo-callout--hipoteza .roddulo-callout__heading {
	color: var(--wp--preset--color--status-hypothesis);
}

.roddulo-callout--razkaz {
	border-inline-start-style: double;
	/*
	 * `double` дели ширината на три: при 4 px двете линии се сливат на
	 * разпечатка и карето става неразличимо от „Извор“. При 6 px се четат
	 * като 2 px линия, 2 px процеп и 2 px линия — проверено на монохромна
	 * снимка на екрана.
	 */
	border-inline-start-width: 6px;
	border-inline-start-color: var(--wp--preset--color--status-community);
}

.roddulo-callout--razkaz .roddulo-callout__heading {
	color: var(--wp--preset--color--status-community);
}

@media (forced-colors: active) {
	.roddulo-callout {
		border-inline-start-color: CanvasText;
	}
}

/* --- Цитат от материала --------------------------------------------------
   Гласът на МАТЕРИАЛА: Cormorant италик, --royal-purple, една вертикална
   златна косъмна линия вляво. Без рамка отгоре и отдолу, без центриране и без
   декоративни кавички. */

.roddulo-pullquote {
	margin-block: var(--wp--preset--spacing--60);
	padding-inline-start: 1.25rem;
	border-inline-start: 1px solid var(--wp--preset--color--gold-ink);
}

.roddulo-pullquote__quote {
	margin: 0;
	border: 0;
	padding: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.5rem;
	font-style: italic;
	font-weight: 500;
	line-height: 1.35;
	color: var(--wp--preset--color--royal-purple);
}

.roddulo-pullquote__quote p {
	margin: 0;
}

.roddulo-pullquote__attribution {
	margin-block-start: 0.5rem;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--meta);
	font-style: normal;
	color: var(--wp--preset--color--ink-muted);
}

/* --- Глас на общността ---------------------------------------------------
   Визуално ПРОТИВОПОЛОЖЕН на цитата от материала, точка по точка (Д-25):
   Lora вместо Cormorant, изправен вместо италик, 17 px вместо 24–26,
   --ink вместо --royal-purple, плътна рамка на цялата карта вместо една линия
   в потока. Ако си приличаха, читателят би прочел мнение на посетител като
   цитат от извор. */

.roddulo-voice {
	margin-block: var(--wp--preset--spacing--60);
	padding: 1.25rem;
	border: 1px solid var(--wp--preset--color--rule-strong);
	background-color: var(--wp--preset--color--paper-raised);
}

.roddulo-voice__quote {
	margin: 0;
	border: 0;
	padding: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.0625rem;
	/* НИКАКЪВ ИТАЛИК: италикът тук означава „цитат от материала“. */
	font-style: normal;
	line-height: 1.6;
	color: var(--wp--preset--color--ink);
}

.roddulo-voice__quote p {
	margin: 0;
	font-style: normal;
}

.roddulo-voice__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin-block-start: 0.875rem;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--meta);
	font-style: normal;
	color: var(--wp--preset--color--ink-muted);
}

/* --- Източници ------------------------------------------------------------ */

.roddulo-sources {
	margin-block-start: var(--wp--preset--spacing--70);
}

.roddulo-sources__fleuron {
	margin: 0 0 var(--wp--preset--spacing--40);
	text-align: center;
	font-size: 1rem;
	line-height: 1;
	letter-spacing: 0.2em;
	color: var(--wp--preset--color--gold-patina);
}

.roddulo-sources__heading {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--h-3);
}

.roddulo-sources__list {
	margin: 0;
	padding-inline-start: 1.5rem;
	font-size: 1rem;
	line-height: 1.6;
}

.roddulo-sources__item {
	margin-block-end: 0.75rem;
	overflow-wrap: break-word;
}

.roddulo-sources__who {
	color: var(--wp--preset--color--ink-muted);
}

.roddulo-sources__note-inline {
	display: block;
	font-size: var(--wp--preset--font-size--meta);
	color: var(--wp--preset--color--ink-muted);
}

/* Изречението вместо празен блок при чист общностен разказ. */
.roddulo-sources__note {
	margin-block-start: var(--wp--preset--spacing--70);
	font-size: var(--wp--preset--font-size--ui);
	color: var(--wp--preset--color--ink-muted);
}

/* --- Продължи с ----------------------------------------------------------- */

/* № 25 (81-ва сесия): блокът е първото дете на групата с чертата в
   `single.html`, а constrained подредбата нулира горното поле на първото
   дете — заглавието стоеше на 1 px под чертата и на 28 px над своя списък.
   Затова отстъпът е padding, а до първия ред — по-малко, отколкото до
   чертата. Заглавието е етикет в шрифта на интерфейса (образецът на
   `.roddulo-callout__heading`), а не серифно заглавие с размера на
   заглавията под него — иначе изглежда като още един ред, не като техен
   надпис. */
.roddulo-continue {
	padding-block-start: var(--wp--preset--spacing--60);
}

.roddulo-continue__heading {
	margin: 0 0 var(--wp--preset--spacing--10);
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--ui);
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.3;
}

.roddulo-continue__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.roddulo-continue__item + .roddulo-continue__item {
	border-top: 1px solid var(--wp--preset--color--rule);
}

.roddulo-continue__link {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	/* Целта за докосване е целият ред. Без фиксирана височина. */
	min-height: 3rem;
	padding-block: 0.75rem;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}

.roddulo-continue__link:hover .roddulo-continue__label,
.roddulo-continue__link:focus-visible .roddulo-continue__label {
	text-decoration: underline;
}

.roddulo-continue__status {
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--ink-muted);
}

.roddulo-continue__label {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--h-3);
	line-height: 1.25;
}

/* --- Образ с права -------------------------------------------------------
   Два типографски реда ПОД образа. Нито един елемент върху него, ляво
   подравнено: центриран caption под 3:2 кадър изглежда като подпис на
   картичка; ляво подравненият е музеен етикет. */

.roddulo-credit {
	margin-block: var(--wp--preset--spacing--60);
}

.roddulo-credit__media {
	position: relative;
}

.roddulo-credit__media img,
.roddulo-credit__media figure {
	margin: 0;
	max-width: 100%;
	height: auto;
}

/*
 * Образите идват от различни генератори с различна яркост/наситеност и
 * стоят до текста като чужди вложки (собственическа обратна връзка,
 * 19.09.2026). Лек отпечатък към хартиения фон ги приближава към
 * останалата палитра, вместо да разчита само на яркостта на кадъра:
 * `filter` смъква леко контраста/наситеността, а полупрозрачният `::after`
 * с `multiply` добавя топлия тон на `--paper-aged`, без да удавя детайла.
 */
.roddulo-credit__media img {
	filter: saturate(0.78) contrast(0.9) sepia(0.12) brightness(1.02);
}

.roddulo-credit__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--wp--preset--color--paper-aged);
	mix-blend-mode: multiply;
	opacity: 0.16;
	pointer-events: none;
}

.roddulo-credit__caption {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin-block-start: 0.625rem;
	text-align: start;
}

.roddulo-credit__scene {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
}

.roddulo-credit__origin {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--wp--preset--color--ink-muted);
}

/*
 * Честната част е най-четимата част на реда — но без главни букви, без
 * удебеляване и без цветна лента. Тя не крещи и не може да бъде пропусната.
 */
.roddulo-credit__honest {
	color: var(--wp--preset--color--ink);
}

.roddulo-credit__missing {
	border: 1px dashed var(--wp--preset--color--status-hypothesis);
	padding: 0.75rem 1rem;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--ui);
	color: var(--wp--preset--color--status-hypothesis);
}

/* --- Значка в карта на каталога ------------------------------------------
   Първото от трите места. Под заглавието, над откъса; никога само икона и
   никога вмъкната в заглавието. */

.roddulo-card__badge {
	margin-block: 0.5rem;
}

/* ==========================================================================
   Ф10 · Newsletter (10.7, П-06)
   Полетата и бутонът идват от MailPoet — марковият слой пренаписва само
   изгледа, не логиката. Класовете `.mailpoet_*` са стабилни, документирани
   от самия плъгин, не вътрешна подробност, която ще изчезне при ъпдейт.
   От З6 (21.09.2026) формата живее на страницата „Абонамент“, не във footer-а.
   ========================================================================== */

/*
 * Без собствен `max-width` на обвивката: Gutenberg-ovият layout "constrained"
 * на родителя слага `max-width: content-size` и `margin-left/right: auto
 * !important` на всяко дете. Обвивка, по-тясна от content-size, би се
 * центрирала СПРЯМО ЦЯЛАТА ширина на групата, не спрямо лявия ръб на
 * съседите ѝ (доказано на екран във footer-а, където живееше до З6: 512px
 * обвивка излизаше с 390px ляв отстъп, докато nav-ът над нея е на 0). Тесен
 * ред остава грижа на самото поле — `.mailpoet_text` по-долу.
 */
.roddulo-newsletter {
	margin-block-start: var(--wp--preset--spacing--60);
}

.roddulo-newsletter__heading {
	font-family: var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--ink);
	margin-block-end: 0.25rem;
}

.roddulo-newsletter__lead {
	color: var(--wp--preset--color--ink-muted);
	margin-block-end: 0.75rem;
}

.roddulo-newsletter .mailpoet_form {
	margin: 0;
}

/*
 * MailPoet слага `padding: 20px` на самия `<form>` през правило с ID
 * (`#mailpoet_form_1 form.mailpoet_form`), което клас не може да надвие. Във
 * footer-а отстъпът минаваше незабелязан; на самостоятелна страница полето
 * стои 20px вдясно от заглавието и лийда над него.
 */
.roddulo-newsletter form.mailpoet_form {
	padding: 0 !important;
}

.roddulo-newsletter .mailpoet_paragraph {
	margin-block-end: 0.75rem;
}

.roddulo-newsletter .mailpoet_text {
	box-sizing: border-box;
	width: 100%;
	max-width: 22rem;
	min-height: 2.75rem;
	padding: 0.5em 0.75em;
	font-family: var(--wp--preset--font-family--ui);
	/* Н6: същото правило като `.roddulo-field` — не под 16 px (iPad mini). */
	font-size: max(1rem, var(--wp--preset--font-size--ui));
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--rule-strong);
	border-radius: 2px;
}

.roddulo-newsletter .mailpoet_submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Същата ширина като полето над него — MailPoet го дава на цялата ширина. */
	max-width: 22rem;
	min-height: 2.75rem;
	padding: 0.5em 0.875em;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--ui);
	font-weight: 600;
	color: var(--wp--preset--color--paper);
	background-color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 2px;
	cursor: pointer;
}

/* 39-а сесия, т. 3 · заключен от `newsletter-loading.js`, докато MailPoet
   държи класа `mailpoet_form_sending` на формата. */
.roddulo-newsletter .mailpoet_submit:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

/* Собственият индикатор на MailPoet (три подскачащи точки) не спазва
   намалено движение сам по себе си — тук го правим неподвижен, вместо да
   изчезне: `animation: none` без `transform` би оставил точките в
   междинното `scale(0)` на клавиша, тоест невидими. */
@media ( prefers-reduced-motion: reduce ) {
	.roddulo-newsletter .mailpoet_form_loading > span {
		animation: none;
		transform: scale( 1 );
	}
}

.roddulo-newsletter .mailpoet_message {
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--meta);
	color: var(--wp--preset--color--ink-muted);
	/* Вграденият стил на формата дава `padding: 0 20px` с селектор по ID
	   (`#mailpoet_form_1 .mailpoet_message`) — същият случай като
	   `form.mailpoet_form` по-горе: съобщението стоеше 20px вдясно от лийда. */
	padding: 0 !important;
}

/*
 * Съобщението след записване („Провери входящата или спам папката…“) беше
 * дребен сив ред и се губеше — собственикът го каза при първото реално
 * записване (22.09.2026 г.). Сега е кутия с тънка ПРЕКЪСНАТА рамка и леко
 * различен фон, като значката под заглавията на статиите.
 *
 * ⚠️ Взета е рамката, не цветовете: прекъсната рамка с тон „хипотеза“ вече
 * значи статус „хипотеза“ (`.roddulo-badge--hipoteza`) и съобщение за успех не
 * бива да се чете така. Затова рамката е `rule-strong`, фонът — `paper-aged`,
 * текстът — `ink`. Прекъснатата линия е достатъчен сигнал сама по себе си, не
 * само цветът. `display` не се пипа: MailPoet го управлява с inline стил и
 * показва само едното от двете съобщения.
 */
.roddulo-newsletter .mailpoet_validate_success,
.roddulo-newsletter .mailpoet_validate_error {
	max-width: 32rem;
	margin: 0 0 0.75rem;
	padding: 0.75em 1em;
	font-size: var(--wp--preset--font-size--ui);
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--paper-aged);
	border: 1px dashed var(--wp--preset--color--rule-strong);
	border-radius: 3px;
}

/*
 * След успешно записване MailPoet прави децата на формата невидими
 * (`visibility: hidden` — пазят мястото си) и центрира съобщението
 * абсолютно в средата на формата (`left/top: 50%`, `translate(-50%, -50%)`,
 * `text-align: center` — `mailpoet-public.css`). Кутията получаваше само
 * половината ширина, пренасяше се на четири реда, ставаше по-висока от
 * формата и излизаше над лийда и под бележката (собственикът, 8в-п, 107-а
 * сесия). Тук съобщението остава в потока, подравнено вляво като лийда, а
 * невидимите полета не държат празно място — отстъпите са тези на формата:
 * 0.75rem от лийда, 0.75rem до бележката.
 */
.roddulo-newsletter .mailpoet_form.mailpoet_form_successfully_send > :not(.mailpoet_message) {
	display: none;
}

.roddulo-newsletter .mailpoet_form.mailpoet_form_successfully_send .mailpoet_validate_success {
	position: static;
	transform: none;
	text-align: start;
}

.roddulo-newsletter__note {
	margin: 0.75rem 0 0;
	font-family: var(--wp--preset--font-family--ui);
	color: var(--wp--preset--color--ink-muted);
}

/* --- З6 · отписване по адрес ---------------------------------------------
   Втората половина на страницата „Абонамент“. Отделя се от формата за
   записване с косъм, а не с рамка: двете са един разговор, не две карти. */

.roddulo-unsubscribe {
	margin-block-start: var(--wp--preset--spacing--70);
	padding-block-start: var(--wp--preset--spacing--60);
	border-block-start: 1px solid var(--wp--preset--color--rule);
}

.roddulo-unsubscribe__heading {
	font-family: var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--ink);
	margin-block-end: 0.25rem;
}

.roddulo-unsubscribe__lead {
	color: var(--wp--preset--color--ink-muted);
	margin-block-end: 0.75rem;
}

.roddulo-unsubscribe__form {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	max-width: 22rem;
}

.roddulo-unsubscribe__form .roddulo-btn {
	align-self: flex-start;
}

.roddulo-unsubscribe__notice {
	padding: 0.75em 1em;
	margin-block-end: 0.75rem;
	max-width: 32rem;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--ui);
	background-color: var(--wp--preset--color--paper-aged);
	border: 1px solid var(--wp--preset--color--ink);
}

/* Същият език като при формата за гласове: плътна рамка за успех, пунктирана
   за грешка и лимит — разликата е формата, не оцветяването. */
.roddulo-unsubscribe__notice--error,
.roddulo-unsubscribe__notice--throttled {
	border-style: dashed;
	border-color: var(--wp--preset--color--ink-muted);
}

/* --- П-22, следваща фаза · Гласове на общността: списък, форма, покана ---
   Картата на самия цитат преизползва .roddulo-voice непроменена — виж
   `roddulo_community_voice_card_markup()`. Тук е само каквото е ново:
   примерният етикет, списъчната обвивка, формата и подканата за споделяне. */

.roddulo-voice__placeholder {
	display: inline-block;
	margin-inline-start: 0.5em;
	font-style: italic;
	color: var(--wp--preset--color--ink-muted);
}

.roddulo-voice-list--empty {
	padding: 1.25rem;
	border: 1px dashed var(--wp--preset--color--rule-strong);
	color: var(--wp--preset--color--ink-muted);
}

.roddulo-voice-list--empty p {
	margin: 0;
}

.roddulo-voice-form {
	margin-block-start: var(--wp--preset--spacing--60);
}

.roddulo-voice-form__heading {
	font-family: var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--ink);
	margin-block-end: 0.25rem;
}

.roddulo-voice-form__lead {
	color: var(--wp--preset--color--ink-muted);
	margin-block-end: 0.75rem;
}

.roddulo-voice-form__form {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	max-width: 32rem;
}

.roddulo-voice-form__consent {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin-block: 0.5rem 0.75rem;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--meta);
	color: var(--wp--preset--color--ink);
}

.roddulo-voice-form__consent input {
	flex: 0 0 auto;
	width: 1.125rem;
	height: 1.125rem;
	margin-block-start: 0.2em;
}

.roddulo-voice-form__notice {
	padding: 0.75em 1em;
	margin-block-end: 0.75rem;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--ui);
	background-color: var(--wp--preset--color--paper-aged);
	border: 1px solid var(--wp--preset--color--ink);
}

/* Успех — плътна рамка (потвърдено); грешка/лимит — пунктирна, същия визуален
   език като „Хипотеза“: моли за внимание, не крещи с цвят (DESIGN_POLISH,
   6.3 — разликата е формата, не оцветяването). */
.roddulo-voice-form__notice--error,
.roddulo-voice-form__notice--throttled {
	border-style: dashed;
	border-color: var(--wp--preset--color--ink-muted);
}

.roddulo-share-invite {
	margin-block-start: var(--wp--preset--spacing--70);
}

.roddulo-share-invite__heading {
	font-family: var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--ink);
	margin-block-end: 0.75rem;
}

.roddulo-share-invite__lang {
	padding: 1.25rem;
	margin-block-end: 1rem;
	border: 1px solid var(--wp--preset--color--rule-strong);
	background-color: var(--wp--preset--color--paper-raised);
}

.roddulo-share-invite__lang-label {
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 600;
	color: var(--wp--preset--color--ink-muted);
}

.roddulo-share-invite__text {
	margin: 0 0 0.75rem;
	color: var(--wp--preset--color--ink);
}

/* У20: свитите покани — заглавието е целият ред за докосване (≥ 2.75rem),
   с по-малко въздух, докато са затворени. */
.roddulo-share-invite__lang--folded {
	padding-block: 0;
}

/* `display` остава `list-item` — иначе Chrome маха триъгълника на `<summary>`,
   единствения знак, че редът се отваря. */
.roddulo-share-invite__lang--folded > summary {
	margin: 0;
	padding-block: 0.8rem;
	cursor: pointer;
}

.roddulo-share-invite__lang--folded[open] {
	padding-block-end: 1.25rem;
}

.roddulo-share-invite__lang--folded[open] > summary {
	margin-block-end: 0.5rem;
}

.roddulo-share-invite__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.roddulo-share-invite__confirm {
	margin: 0.5rem 0 0;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--meta);
	color: var(--wp--preset--color--ink-muted);
}

/* --- Facebook групата и „Сподели“ (`roddulo/share-page`, решение № 21) ------
   „В стила на страницата, без шарените цветове на логата и не натрапчиви“:
   шрифтът и цветът на метаданните, без рамка и без фон. Знаците са
   `currentColor` — марките не носят свой цвят. Зоната за допир е 2.75rem,
   както при `.roddulo-btn`, но е празно поле около знака, не видим бутон. */

/* `relative` — балончето „Копирано“ се мери и поставя спрямо блока. */
.roddulo-share {
	position: relative;
	font-size: var(--wp--preset--font-size--ui);
}

/* Под текста на история/завет: след източниците, преди „Продължи с“. */
.roddulo-share:not(.roddulo-share--with-group) {
	margin-block-start: var(--wp--preset--spacing--60);
}

/* Връзката към групата е обикновена връзка от footer-а — шрифтът, цветът и
   подчертаването са като на връзките под нея; знакът взима същия цвят. */
.roddulo-share__group {
	margin: 0;
}

.roddulo-share__group-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	min-height: 2.75rem;
}

/* Връзките във footer-а — без подчертаване (собственикът, 80-а сесия).
   Те са списъци от връзки, не връзки в текст: разпознават се по златния
   цвят и по реда си; подчертаването се връща при посочване и фокус, както
   в „Продължи с“ и значките. Връзките в текста остават подчертани. */
.roddulo-share__group-link,
.roddulo-footer-nav a {
	text-decoration: none;
}

.roddulo-share__group-link:hover,
.roddulo-share__group-link:focus-visible,
.roddulo-footer-nav a:hover,
.roddulo-footer-nav a:focus-visible {
	text-decoration: underline;
}

/* № 24: точката между връзките — по-голяма. `line-height: 0`, за да не
   разтваря редовете на картата на сайта (измерено: 3 реда = 72,9 px и
   преди, и след). */
.roddulo-footer-nav__sep {
	font-size: 1.5em;
	line-height: 0;
	vertical-align: -0.05em;
}

/* Редът „Сподели“ е метаданни: шрифтът и цветът на реда под заглавието. */
.roddulo-share__row,
.roddulo-share__status {
	font-family: var(--wp--preset--font-family--ui);
	color: var(--wp--preset--color--ink-muted);
}

/* № 53.1 (01.10.2026, сменя „без надпис“ от № 21б): видимата дума
   „Сподели“ над знаците — метаданни като реда, на ръба на колоната. */
.roddulo-share__label {
	margin: 0;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--meta);
	color: var(--wp--preset--color--ink-muted);
}

/* Първият знак стои на ръба на колоната — под думата „Сподели“, над знака
   на групата (№ 24) и под текста: зоната за допир (2.75rem) е по-широка от
   знака (1.125rem), затова редът се изнася наляво с половината разлика. */
.roddulo-share__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 0.125rem;
	margin-inline-start: calc((1.125rem - 2.75rem) / 2);
}

.roddulo-share__action {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.375em;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0 0.25rem;
	margin: 0;
	border: 0;
	border-radius: 2px;
	background: none;
	color: inherit;
	font: inherit;
	text-decoration: none;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

/* Същият капан като при `.roddulo-btn[hidden]`: авторското `inline-flex`
   бие стойността на браузъра за `[hidden]`. Без този ред Instagram и
   „Копирай адреса“ се виждат и без JavaScript, където не правят нищо. */
.roddulo-share__action[hidden] {
	display: none;
}

.roddulo-share__action:hover,
.roddulo-share__action:focus-visible {
	color: var(--wp--preset--color--ink);
}

.roddulo-share__icon {
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
}

/* Празен до първото съобщение — и тогава не заема място. Така стои само
   съобщението за ръчно копиране (с адреса, не изчезва). */
.roddulo-share__status {
	margin: 0;
	font-size: var(--wp--preset--font-size--meta);
}

/* „Копирано“ (решение № 21а): балонче точно над натиснатия знак, не нов ред
   под бутоните. Мястото (`left`/`top` на горния ръб на знака) слага
   `share-page.js`; балончето не взима кликове и не мести нищо около себе си. */
.roddulo-share__status--toast {
	position: absolute;
	z-index: 2;
	padding: 0.125rem 0.5rem;
	border-radius: 2px;
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	line-height: 1.5;
	white-space: nowrap;
	pointer-events: none;
	transform: translateY(calc(-100% + 0.375rem));
}

.roddulo-share__status--toast:empty {
	display: none;
}

/* --- 10.10 · „Подкрепи“ — банковите данни (DESIGN_POLISH 7.1) ------------
   Плътна рамка, не пунктирана: пунктираната е езикът на статус „хипотеза“
   другаде в изданието (виж PRELAUNCH_NOTES) и тук би подвела. Без вътрешни
   линии между редовете — мокъпът рисува само външна кутия. */

.roddulo-bank-transfer__table {
	width: 100%;
	max-width: 28rem;
	margin: var(--wp--preset--spacing--40) 0;
	border: 1px solid var(--wp--preset--color--rule-strong);
	background-color: var(--wp--preset--color--paper-raised);
	border-collapse: collapse;
}

.roddulo-bank-transfer__table th,
.roddulo-bank-transfer__table td {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	text-align: start;
	vertical-align: top;
}

.roddulo-bank-transfer__table th {
	width: 8em;
	font-weight: 400;
	color: var(--wp--preset--color--ink-muted);
}

.roddulo-bank-transfer__table td {
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

/*
 * У12 (решение 9.1): под 30em етикетът стои НАД стойността. С колона от 8em
 * при 360 px стойността имаше 159 px — IBAN излизаше на три реда („BG08 UBBS /
 * 8002 1070 / 6461 50“), получателят на четири. Така IBAN е на два реда в
 * 326 px и групите по четири остават цели. Рамката и бутонът не се пипат.
 */
@media (max-width: 30em) {
	.roddulo-bank-transfer__table,
	.roddulo-bank-transfer__table tbody,
	.roddulo-bank-transfer__table tr,
	.roddulo-bank-transfer__table th,
	.roddulo-bank-transfer__table td {
		display: block;
		width: auto;
	}

	.roddulo-bank-transfer__table th {
		padding-block-end: 0;
	}

	.roddulo-bank-transfer__table td {
		padding-block-start: 0.125rem;
	}
}

/* ≥ 12 px между таблицата и бутона (DESIGN_POLISH 7.1, „достъпно поведение“)
   — погрешно докосване при копиране на банкови данни е скъпо. */
.roddulo-bank-transfer__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--30);
}

.roddulo-bank-transfer__status {
	margin: 0;
	max-width: 22rem;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--ui);
	color: var(--wp--preset--color--ink-muted);
}

/* ==========================================================================
   Ф10 · Езиковият превключвател (10.8) — З5: в drawer-а, като падащо меню
   Блокът беше построен в двайсет и първата сесия и до З5 стоеше във footer-а
   като ред от разделени с „·“ връзки. Собственикът реши (OWNER_DECISIONS,
   № 7) той да живее в drawer-а, долу вляво — горе вдясно е затварянето, —
   като `Език: Български` с падащо меню и пълните имена.

   Менюто е `<details>`: без JavaScript, с истински връзки вътре, а фокусът му
   е предвиден от focus trap-а (`summary` е във `FOCUSABLE`). Списъкът се
   отваря НАГОРЕ — обвивката е долу в панела и надолу няма място; отворен в
   потока, той би удължил панела и би скрил себе си под гънката.
   Списъкът остава истински `<ul>` — екранният четец обявява „списък от 4“.
   ========================================================================== */

/*
 * Обвивката е лента най-долу в панела — последният елемент на flex колоната,
 * ИЗВЪН скролиращата част (`.roddulo-drawer__body`). Тя стои на дъното на
 * всеки екран, без да покрива нищо: без нея менюто би било под гънката на
 * всеки екран, по-нисък от ~40rem, и точно чуждият посетител, който го търси
 * първо, не би го видял.
 *
 * Първата ѝ версия (0.3.17) беше `position: sticky` върху скролиращия панел.
 * Sticky се залепва на долния ОТСТЪП на скролиращия елемент, не на ръба му —
 * оставаше ивица, през която минаваше съдържанието, а лентата покриваше долния
 * ред на текста. Открито от собственика на 22.09.2026 г. на 430 px.
 *
 * Долният отстъп е поне 1rem и уважава `safe-area-inset-bottom` на телефоните
 * с изрез, защото панелът е залепен за долния ръб на екрана.
 */
.roddulo-lang-switcher {
	flex: 0 0 auto;
	box-sizing: border-box;
	padding: 0.75rem var(--roddulo-drawer-pad-inline, 0rem) max(1rem, env(safe-area-inset-bottom, 0rem));
	background-color: var(--wp--preset--color--paper-raised);
	border-block-start: 1px solid var(--wp--preset--color--rule);
}

/* Точката, спрямо която се отваря списъкът. */
.roddulo-lang-switcher__menu {
	position: relative;
	display: inline-block;
}

/*
 * 2.75rem минимална височина на допирната цел, както навсякъде другаде в
 * темата. Двойният цвят на текста (сив етикет, тъмно име) чете „Език:
 * Български“ като поле със стойност, а не като две равни думи.
 */
.roddulo-lang-switcher__summary {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	box-sizing: border-box;
	min-height: 2.75rem;
	padding: 0.25rem 0.75rem;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--ui);
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--rule-strong);
	border-radius: 2px;
	list-style: none;
	cursor: pointer;
}

.roddulo-lang-switcher__summary::-webkit-details-marker {
	display: none;
}

.roddulo-lang-switcher__label {
	color: var(--wp--preset--color--ink-muted);
}

.roddulo-lang-switcher__current {
	font-weight: 600;
}

/* Стрелката е декоративна: състоянието го казва `<details>` на екранния четец. */
.roddulo-lang-switcher__summary::after {
	content: "";
	flex: 0 0 auto;
	width: 0.45em;
	height: 0.45em;
	margin-inline-start: 0.25em;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	transform: translateY(-0.1em) rotate(-135deg);
}

.roddulo-lang-switcher__menu[open] > .roddulo-lang-switcher__summary::after {
	transform: translateY(0.1em) rotate(45deg);
}

.roddulo-lang-switcher__list {
	position: absolute;
	inset-inline-start: 0;
	inset-block-end: calc(100% + 0.25rem);
	z-index: 1;
	min-width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 0.25rem 0;
	list-style: none;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--ui);
	background-color: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--rule-strong);
	border-radius: 2px;
}

.roddulo-lang-switcher__list a {
	display: flex;
	align-items: center;
	gap: 0.4em;
	min-height: 2.75rem;
	padding: 0 0.75rem;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	white-space: nowrap;
}

.roddulo-lang-switcher__list a:hover,
.roddulo-lang-switcher__list a:focus-visible {
	text-decoration: underline;
}

/*
 * Текущият език НИКОГА не се обявява само с цвят — същото правило като в
 * drawer-а и долната лента (`aria-current="page"` по-горе): дебелина плюс
 * златна лента отляво.
 */
.roddulo-lang-switcher__list a[aria-current] {
	font-weight: 700;
	box-shadow: inset 3px 0 0 0 var(--wp--preset--color--gold-ink);
}

/*
 * Знакът „БГ“/„BG“ до език без превод — същата косъмна рамка като в
 * `roddulo/translation-notice`, за да се чете като ЕДИН речник, а не като
 * две различни решения за едно и също съобщение. Той е `aria-hidden`
 * (обвивката му е), защото същото го казва и `aria-label` на връзката.
 */
.roddulo-lang-switcher__hint {
	padding: 0.05em 0.3em;
	border: 1px solid var(--wp--preset--color--rule-strong);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--ink-muted);
}

/* ==========================================================================
   V2 · Аудио прочит на статия — `roddulo/audio-story`
   MASTER_DESIGN_BRIEF, 7.2 и DESIGN_POLISH, 5.11.

   Капсулата е ЕДИН вход под метаданните, не втори герой на страницата:
   тиха рамка, книжен фон, златен само триъгълникът. Големият плътен бутон
   принадлежи на подкаст платформа, не на издание, чийто основен носител е
   текстът — аудиото допълва текста, не се състезава с него
   (Browser_Agent_Findings/01, „аудиото и изображението са отделни, доброволни
   входове към същия текст“).

   ⚠️ Никакъв `position: fixed` и никакъв плаващ бар. Компонентът стои на
   мястото си в потока и излиза от екрана заедно с останалия текст — това е
   изричното изискване на 7.2, не естетически избор.
   ========================================================================== */

.roddulo-audio {
	margin-block-start: var(--wp--preset--spacing--40);
}

/*
 * Нативният плеър е резервата. Той е видим, докато `audio-story.js` не
 * потвърди, че браузърът свири MP3; тогава скриптът маха `controls` и той
 * заема нула място. `width: 100%` е за режима БЕЗ скрипт — контролите на
 * браузъра иначе стоят в подразбираща се ширина, по-тясна от текстовата
 * колона, и се четат като залепен отляво остатък.
 */
.roddulo-audio__native {
	display: block;
	width: 100%;
	max-width: 30rem;
}

.roddulo-audio--enhanced .roddulo-audio__native {
	display: none;
}

/* --- Капсулата ----------------------------------------------------------- */

.roddulo-audio__pill {
	gap: 0.5em;
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--paper-raised);
	border: 1px solid var(--wp--preset--color--rule-strong);
	border-radius: 999px;
	padding-inline: 1.125em;
}

/* У15: само с мишка — виж `.roddulo-btn--quiet:hover`. */
@media (hover: hover) {
	.roddulo-audio__pill:hover {
		background-color: var(--wp--preset--color--paper-aged);
	}
}

/*
 * Триъгълникът е нарисуван с рамки, не с ▶ от шрифта: знакът липсва в част
 * от кирилските резервни шрифтове и там капсулата тръгва с правоъгълник.
 * Той е декоративен (`aria-hidden` в маркъпа) — думата „Слушай“ до него вече
 * казва всичко на екранния четец.
 */
.roddulo-audio__glyph {
	flex: 0 0 auto;
	width: 0;
	height: 0;
	border-block: 0.4em solid transparent;
	border-inline-start: 0.65em solid var(--wp--preset--color--gold-ink);
	border-inline-end: 0;
}

.roddulo-audio__sep,
.roddulo-audio__length {
	font-weight: 400;
	color: var(--wp--preset--color--ink-muted);
}

/* --- Панелът след стартиране --------------------------------------------- */

/*
 * Вариант В (OWNER_DECISIONS_2026-09-23, № 4): един ред — ▶/❚❚, ■, линия,
 * време, 1,5×. Всички бутони са кръгли знаци с еднакъв размер, затова редът е
 * еднакво широк на четирите езика; думите са само за екранния четец.
 *
 * Контейнерът е заявка по ШИРИНА НА КОЛОНАТА, не на прозореца: панелът стои
 * в текстовата колона, а тя е еднаква при 800 и при 1200 px екран.
 */
.roddulo-audio {
	container: roddulo-audio / inline-size;
}

/*
 * ⚠️ `display: grid` бие `[hidden]` на UA-та, точно както `display: flex`
 * при `.roddulo-btn` по-горе (открито в П-22). Без следващото правило
 * панелът стои разтворен още преди първото натискане и капсулата няма какво
 * да отвори.
 */
.roddulo-audio__panel {
	display: grid;
	grid-template-columns: auto auto minmax(0, 1fr) auto auto;
	grid-template-areas: "toggle stop seek time speed";
	align-items: center;
	gap: 0 0.5rem;
	padding: 0.375rem 0.875rem;
	background-color: var(--wp--preset--color--paper-raised);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 2px;
}

.roddulo-audio__panel[hidden] {
	display: none;
}

.roddulo-audio__icon--toggle {
	grid-area: toggle;
}

.roddulo-audio__icon--stop {
	grid-area: stop;
}

.roddulo-audio__seek {
	grid-area: seek;
}

.roddulo-audio__time {
	grid-area: time;
}

.roddulo-audio__icon--speed {
	grid-area: speed;
}

/*
 * Тясна колона (320–430 px екран): времето слиза под линията, а скоростта
 * остава на първия ред. Редът на фокуса не се разминава с окото — времето не
 * е фокусируемо, а останалите четири стоят в реда на маркъпа.
 */
@container roddulo-audio (max-width: 26rem) {

	.roddulo-audio__panel {
		grid-template-columns: auto auto minmax(0, 1fr) auto;
		grid-template-areas:
			"toggle stop seek speed"
			". . time .";
		padding-block-end: 0.5rem;
	}
}

/*
 * Н14 (задача 1б): браузър без контейнерни заявки (Safari 15.6 — iPhone
 * 6s/7/SE с iOS 15) пропуска правилото горе и при 320 px линията оставаше
 * 33 px. Резервата е същата подредба по ширина на ПРОЗОРЕЦА.
 *
 * Прагът: панелът е пряко дете на `<main>` (single.html), тоест колоната е
 * прозорецът минус страничните отстъпи `clamp(1rem, 4vw, 1.25rem)` от
 * theme.json. При ~452 px отстъпът е 4vw, затова 26rem = 0.92 × прозореца →
 * прозорец 28.26em. В `em`, за да следва шрифта, както контейнерната заявка.
 */
@supports not (container-type: inline-size) {

	@media (max-width: 28.25em) {

		.roddulo-audio__panel {
			grid-template-columns: auto auto minmax(0, 1fr) auto;
			grid-template-areas:
				"toggle stop seek speed"
				". . time .";
			padding-block-end: 0.5rem;
		}
	}
}

/*
 * Плъзгачът е висок колкото допирна цел (2.75rem), а линията му остава
 * тънка в средата — целият ред се хваща с пръст, не само кръгчето.
 *
 * ⚠️ Без `min-width`. При 320 px колоната му е ~100 px; минимум от 8rem го
 * избутваше в колоната на скоростта и линията минаваше ПОД кръга „2ד —
 * скрито от непрозрачния бутон, видимо едва в режим с принудителни цветове.
 * Ширината на едноредовата подредба пази прагът на контейнерната заявка
 * (26rem): над него линията никога не пада под ~9rem.
 */
.roddulo-audio__seek {
	display: block;
	width: 100%;
	min-width: 0;
	height: 2.75rem;
	margin: 0;
	accent-color: var(--wp--preset--color--gold-ink);
	cursor: pointer;
}

/*
 * ⚠️ Времето не бива да се застъпва с допирната зона на плъзгача (никакъв
 * отрицателен отстъп): застъпено, то става „частично закрито“ за axe и
 * контрастът му отива за човешки преглед — летвата е нула такива.
 */
.roddulo-audio__time {
	margin: 0;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--meta);
	line-height: 1.2;
	color: var(--wp--preset--color--ink-muted);
	white-space: nowrap;
}

/* --- Кръглите бутони ----------------------------------------------------- */

.roddulo-audio__icon {
	min-width: 2.75rem;
	padding: 0;
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--rule-strong);
	border-radius: 999px;
}

@media (hover: hover) {
	.roddulo-audio__icon:hover {
		background-color: var(--wp--preset--color--paper-aged);
	}
}

/* Триъгълникът се центрира оптически — видимата му маса е вляво. */
.roddulo-audio__icon--toggle .roddulo-audio__glyph {
	margin-inline-start: 0.15em;
}

/* Пауза — две черти, рисувани с рамки като триъгълника на капсулата. */
.roddulo-audio.is-playing .roddulo-audio__icon--toggle .roddulo-audio__glyph {
	box-sizing: border-box;
	width: 0.65em;
	height: 0.8em;
	margin-inline-start: 0;
	border-block: 0;
	border-inline: 0.22em solid var(--wp--preset--color--gold-ink);
}

/* Стоп — квадрат с мастило, не със злато: той не пуска нищо. */
.roddulo-audio__glyph--stop {
	width: 0;
	height: 0;
	border: 0.34em solid var(--wp--preset--color--ink);
}

/*
 * Скоростта: едно число в кръг, на кръг нормална → 1,5× → 1,8× → нормална.
 * Включеното (която и да е от двете забързани) е
 * ПЛЪТНО (--paper върху --gold-ink, 4.5:1), не само оцветено — разликата се
 * вижда и без да се различава цвят (WCAG 1.4.1).
 */
.roddulo-audio__icon--speed {
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.02em;
}

.roddulo-audio__icon--speed[aria-pressed="true"],
.roddulo-audio__icon--speed[aria-pressed="true"]:hover {
	color: var(--wp--preset--color--paper);
	background-color: var(--wp--preset--color--gold-ink);
	border-color: var(--wp--preset--color--gold-ink);
}

/*
 * Режим с принудителни цветове (висок контраст на Windows), два тихи дефекта:
 *
 * 1. Знаците са рисувани с рамки, половината от които са ПРОЗРАЧНИ. Режимът
 *    оцветява всяка рамка в системен цвят, прозрачните също — и ▶ става
 *    плътен правоъгълник, неотличим от ■ „Спри“. Видяно на снимка в
 *    Playground на 23.09.2026 г. Затова знаците излизат от режима и носят
 *    системния ButtonText сами.
 * 2. Фонът става Canvas и плътното „включено“ на скоростта изчезва.
 *    Системният Highlight го връща.
 */
@media (forced-colors: active) {

	.roddulo-audio__glyph {
		forced-color-adjust: none;
		border-inline-start-color: ButtonText;
	}

	.roddulo-audio.is-playing .roddulo-audio__icon--toggle .roddulo-audio__glyph {
		border-inline-color: ButtonText;
	}

	.roddulo-audio__glyph--stop {
		border-color: ButtonText;
	}

	.roddulo-audio__icon--speed[aria-pressed="true"],
	.roddulo-audio__icon--speed[aria-pressed="true"]:hover {
		forced-color-adjust: none;
		color: HighlightText;
		background-color: Highlight;
		border-color: Highlight;
	}
}