/*
Theme Name: Автоклас Варна
Theme URI: https://avtoshkolavarna.bg/
Author: 2Create
Description: Блоков (FSE) шаблон за автошкола Автоклас Варна. Проектиран мобилно първо, с пълна кирилица в самостоятелно хоствани шрифтове, своя цветова система и структура за трите езика (BG / EN / RU).
Version: 0.1.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: avtoclass
Tags: full-site-editing, block-templates, custom-colors, translation-ready, accessibility-ready
*/

/* -------------------------------------------------------------------------
   Всичко, което може да бъде описано в theme.json, живее там.
   Тук стои само това, което theme.json не покрива.
   ------------------------------------------------------------------------- */

/* Достъпност: видим фокус за клавиатура в цялата страница. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

* { outline: 0!important; }

/* Цели за докосване — минимум 44px, констатирано като проблем в одита
   (100 от 120 връзки бяха под 40px на 375px екран). */
/* .wp-block-navigation a, */
.wp-block-button__link,
.ac-tel,
.ac-chat {
	min-height: var(--wp--custom--tap-target);
	display: inline-flex;
	align-items: center;
}

/* Ширина за четене на текущ текст. */
.ac-prose > * {
	max-width: var(--wp--custom--prose);
}

/* ---------- Знакът „У“ ---------- */
.ac-plate {
	display: inline-grid;
	place-items: center;
	inline-size: 1.75em;
	block-size: 1.75em;
	border: 2px solid var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	line-height: 1;
}

/* ---------- Прекъсната линия за пътна маркировка ---------- */
.ac-roadline {
	block-size: 6px;
	border: 0;
	margin: 0;
	background: repeating-linear-gradient(
		90deg,
		var(--wp--preset--color--contrast) 0 34px,
		transparent 34px 60px
	);
	opacity: 0.25;
}

/* ---------- Бадж с оценката от Google ---------- */
.ac-rating {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	/* Оценката и броят отзиви са едно твърдение — не се пренасят. */
	flex-wrap: nowrap;
	white-space: nowrap;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.4rem 0.75rem;
	border: 1px solid var(--wp--preset--color--rule);
	background: var(--wp--preset--color--surface);
}
.ac-rating strong {
	color: var(--wp--preset--color--accent);
	font-weight: 700;
}
/* Целият бадж е връзка към отзивите в Google. */
a.ac-rating {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	min-height: var(--wp--custom--tap-target);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
a.ac-rating:hover,
a.ac-rating:focus-visible {
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--surface-2);
}

/* ---------- Карта с фактите на курса ---------- */
.ac-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: 1px;
	background: var(--wp--preset--color--rule);
	border: 1px solid var(--wp--preset--color--rule);
}
.ac-facts > div {
	background: var(--wp--preset--color--surface);
	padding: 1rem 1.125rem;
}
.ac-facts dt {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0 0 0.35rem;
}
.ac-facts dd {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
}

/* ---------- Лента „следващ курс“ ---------- */
.ac-next {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 2rem;
	padding: 1rem 1.25rem;
	background: var(--wp--preset--color--asphalt);
	color: var(--wp--preset--color--base);
}
.ac-next__label {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	opacity: 0.75;
}
.ac-next__date {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	font-variant-numeric: tabular-nums;
}
.ac-next a {
	color: var(--wp--preset--color--base);
	text-underline-offset: 3px;
}

/* ---------- Мобилна лента за връзка ---------- */
.ac-callbar {
	position: fixed;
	inset-block-end: 0;
	inset-inline: 0;
	z-index: 50;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 1px;
	background: var(--wp--preset--color--rule);
	border-block-start: 1px solid var(--wp--preset--color--rule);
}
.ac-callbar a {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	justify-content: center;
	padding: 0.2rem 0.75rem;
	min-block-size: var(--wp--custom--tap-target);
}
.ac-callbar a:first-child {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface);
}
@media (min-width: 782px) {
	.ac-callbar { display: none; }
}
@media (max-width: 781px) {
	body { padding-block-end: 3.5rem; }
}

/* ---------- Таблици с цени ---------- */
.wp-block-table table {
	border-collapse: collapse;
	inline-size: 100%;
}
.wp-block-table :where(th, td) {
	border: 1px solid var(--wp--preset--color--rule);
	padding: 0.7rem 0.9rem;
	text-align: start;
	vertical-align: top;
}
.wp-block-table thead th {
	background: var(--wp--preset--color--surface-2);
	font-family: var(--wp--preset--font-family--display);
	/* PT Sans Narrow има само 400 и 700 — 500 би паднало на 400. */
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: var(--wp--preset--font-size--x-small);
}
.wp-block-table td { font-variant-numeric: tabular-nums; }
/* Широко съдържание скролира в себе си, не изнася страницата. */
.wp-block-table { overflow-x: auto; }

/* ---------- Секциите се допират ----------
   `blockGap: 1.5rem` в theme.json произвежда
   `:where(.wp-site-blocks) > * { margin-block-start: 1.5rem }`,
   тоест между секциите на най-горното ниво остава ивица от фона на body —
   вижда се като чужда лента между два различно оцветени блока. Всяка секция
   носи собственото си вътрешно отстояние, така че разстоянието е излишно.

   Занулява се тук, а не в theme.json: там същата стойност дава и отстоянията
   ВЪТРЕ в блоковете, които трябва да останат.

   Селекторът е с един клас (0-1-0) срещу `:where()` (0-0-0), за да е
   независим от реда на зареждане на стиловите листове. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* ---------- Телефонът в горната лента ----------
   Иконата е маска върху currentColor, не отделен <img> и не иконичен шрифт:
   няма допълнителна заявка, наследява цвета на връзката и следва hover-а ѝ.
   Запълнена, а не щрихова като останалите в сайта — на около 13 пиксела
   контур от 2px изглежда мръсен.

   Кавичките вътре в SVG-то са единични: двойните затварят url("…") по-рано
   и маската не се прилага, а квадратът се запълва плътно. */
.ac-header__utility a[href^="tel:"]::before {
	content: "";
	display: inline-block;
	inline-size: 1em;
	block-size: 1em;
	margin-inline-end: 0.35em;
	vertical-align: -0.15em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 15.5c-1.2 0-2.4-.2-3.6-.6a1 1 0 0 0-1 .2l-2.2 2.2a15.1 15.1 0 0 1-6.6-6.6l2.2-2.2a1 1 0 0 0 .2-1c-.4-1.2-.6-2.4-.6-3.6a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1A17 17 0 0 0 20 21a1 1 0 0 0 1-1v-3.5a1 1 0 0 0-1-1Z'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 15.5c-1.2 0-2.4-.2-3.6-.6a1 1 0 0 0-1 .2l-2.2 2.2a15.1 15.1 0 0 1-6.6-6.6l2.2-2.2a1 1 0 0 0 .2-1c-.4-1.2-.6-2.4-.6-3.6a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1A17 17 0 0 0 20 21a1 1 0 0 0 1-1v-3.5a1 1 0 0 0-1-1Z'/></svg>");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* ---------- Лента с постижения ---------- */
/* Лепне за героя отгоре — `.is-layout-flow > * + *` иначе слага 1.5rem. */
.ac-stats-bar {
	margin-block-start: 0;
}
.ac-stats {
	list-style: none;
	margin: 0;
	padding: 0;
	/* Flex, а не равни колони: така първата плочка стъпва на лявата линия,
	   последната свършва на дясната, а разстоянията между тях се разпределят
	   поравно. При равни колони съдържанието се центрира във всяка и краищата
	   оставаха навътре. */
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
}
.ac-stat {
	flex: 0 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.5rem;
}
@media (max-width: 781px) {
	/* При пренасяне „space-between“ разкъсва последния ред — на тесен екран
	   плочките се подреждат централно. */
	.ac-stats {
		justify-content: center;
	}
	.ac-stat {
		flex: 1 1 40%;
	}
}
.ac-stat__icon {
	color: var(--wp--preset--color--accent);
	margin-block-end: 0.25rem;
}
.ac-stat__value {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.25rem, 5vw, 3.25rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}
.ac-stat__label {
	/* Два пиксела над `small`. Без ограничение на ширината и без пренасяне —
	   „Завършили курсисти“ на два реда чете като две отделни неща. */
	font-size: 1.0625rem;
	color: var(--wp--preset--color--muted);
	line-height: 1.35;
	white-space: nowrap;
}

/* ---------- Секция „Запишете се“ ----------
   Формата е в по-широката колона, а вляво стои какво следва и защо да ви се
   довери. Така секцията пълни релсата и не се налага формата да се разтяга:
   полетата остават в човешка мярка, защото са две на ред. */
.ac-enroll__points {
	list-style: none;
	margin: 1.25rem 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	font-size: var(--wp--preset--font-size--small);
}
.ac-enroll__points li {
	position: relative;
	padding-inline-start: 1.5rem;
	line-height: 1.45;
}
/* Отметка, нарисувана с две чертички — без иконичен шрифт и без SVG. */
.ac-enroll__points li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.35em;
	inline-size: 0.5rem;
	block-size: 0.85rem;
	border: solid var(--wp--preset--color--success);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	top: 1px;
	left: 4px;
}

/* Полетата са по две на ред — иначе формата става тясна колона от осем
   реда и колоната до нея остава празна надолу. */
.ac-enroll .ac-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem 1rem;
	padding-block-end: 0;
}
.ac-enroll .ac-form > .ac-field--check,
.ac-enroll .ac-form > .ac-form__actions,
.ac-enroll .ac-form > .ac-form__status,
.ac-enroll .ac-form > .ac-honeypot {
	grid-column: 1 / -1;
}
/* Допълнителната информация заема целия ред. */
.ac-enroll .ac-form > .ac-field:nth-of-type(5) {
	grid-column: 1 / -1;
}

@media (max-width: 781px) {
	.ac-enroll .ac-form {
		grid-template-columns: 1fr;
	}
	.ac-enroll .ac-form > * {
		grid-column: 1 / -1;
	}
}

/* ---------- Попъп със заявка за записване ---------- */
.ac-dialog {
	inline-size: min(34rem, calc(100vw - 2rem));
	max-block-size: min(48rem, calc(100vh - 2rem));
	/* Съдържанието се събира без скрол при нормален екран; `auto` остава само
	   като предпазна мрежа при много нисък прозорец, иначе формата става
	   недостъпна. `both-edges` пази страничните отстояния симетрични, ако
	   скролбарът все пак се появи. */
	scrollbar-gutter: stable both-edges;
	padding: 0;
	border: 1px solid var(--wp--preset--color--rule);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	box-shadow: 0 30px 70px -40px rgba(27, 26, 24, 0.7);
	overflow: auto;
}
.ac-dialog::backdrop {
	background: rgba(27, 26, 24, 0.55);
}
.ac-dialog > * {
	padding-inline: clamp(1.25rem, 4vw, 2rem);
}
.ac-dialog__dismiss {
	padding: 0;
	position: sticky;
	inset-block-start: 0;
	z-index: 1;
	display: flex;
	justify-content: flex-end;
	background: var(--wp--preset--color--surface);
}
.ac-dialog__close {
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border: 0;
	background: none;
	color: var(--wp--preset--color--muted);
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
}
.ac-dialog__close:hover {
	color: var(--wp--preset--color--accent);
}
.ac-dialog__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.5rem, 4vw, 1.875rem);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.1;
	margin: 0 0 15px;
}
.ac-dialog__lead {
	margin: 0 0 1.125rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.ac-form {
	padding-block-end: clamp(1.25rem, 4vw, 2rem);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.ac-field {
	margin: 0;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}
.ac-field label {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--muted);
}
.ac-field label span[aria-hidden] {
	color: var(--wp--preset--color--accent);
}
.ac-field input[type="text"],
.ac-field input[type="email"],
.ac-field input[type="tel"],
.ac-field select,
.ac-field textarea {
	inline-size: 100%;
	/* Без това `min-block-size` се добавя към padding-а и текстовите полета
	   излизат 65px, докато селектът е 44 — оттам идваше разнобоят. */
	box-sizing: border-box;
	min-block-size: var(--wp--custom--tap-target);
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 0;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: 1rem;
}
.ac-field textarea {
	resize: vertical;
	min-block-size: 4.5rem;
}
.ac-field :is( input, select, textarea ):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--accent);
}
.ac-field [aria-invalid="true"] {
	border-color: var(--wp--preset--color--accent);
}
/* Съобщението за грешка сяда на реда на етикета — вдясно, където и без това
   е празно. Така появата му не мести нищо и попъпът не се сдобива със скрол
   точно в момента, в който човек е сгрешил. */
.ac-field__error {
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 0;
	max-inline-size: 62%;
	text-align: end;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.3;
	color: var(--wp--preset--color--accent);
}
/* При съгласието етикетът заема целия ред, затова грешката отива под него —
   единственият случай, който добавя височина, и то един ред. */
.ac-field--check .ac-field__error {
	position: static;
	max-inline-size: none;
	text-align: start;
}
.ac-field--check .ac-field__error:empty {
	display: none;
}

/* Съгласието е с нормален регистър — то е изречение, не етикет на поле. */
.ac-field--check label {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.6rem;
	align-items: start;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: var(--wp--preset--color--muted);
	line-height: 1.5;
	cursor: pointer;
}
.ac-field--check input {
	inline-size: 1.125rem;
	block-size: 1.125rem;
	margin-block-start: 0.1rem;
	accent-color: var(--wp--preset--color--accent);
}

/* Капанът за роботи не бива да се вижда, но и да не се чете от четците. */
.ac-honeypot {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.ac-form__actions {
	margin: 0.25rem 0 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
}
.ac-form__submit {
	min-block-size: var(--wp--custom--tap-target);
	padding: 0.85rem 1.75rem;
	border: 0;
	border-radius: 2px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	cursor: pointer;
}
.ac-form__submit:hover:not(:disabled) {
	background: var(--wp--preset--color--asphalt);
}
.ac-form__submit:disabled {
	opacity: 0.6;
	cursor: progress;
}
.ac-form__status {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
}
.ac-form__status.is-ok {
	color: var(--wp--preset--color--success);
	font-weight: 700;
}
.ac-form__status.is-error {
	color: var(--wp--preset--color--accent);
}

/* ---------- Секция за чужденци ---------- */
.ac-english {
	margin-block-start: 0;
}

/* ---------- Призив за действие ---------- */
/* Лепне за решетката с курсовете — `.is-layout-flow > * + *` иначе слага
   1.5rem и между двете остава ивица от фона на страницата. */
.ac-cta {
	margin-block-start: 0;
}

/* ---------- Призив за действие: бутони ----------
   Единственото място в сайта с плътен акцентен фон. Акцентът дотук се ползва
   пестеливо — за бутони, етикети и чертички — така че една цяла лента в него
   работи като препинателен знак след отзивите, без да се конкурира с нищо. */
.ac-cta .wp-block-button__link {
	border: 2px solid transparent;
}
/* Белият бутон с акцентен текст: обръщане на обичайната двойка. */
.ac-cta__call .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--contrast) !important;
	color: var(--wp--preset--color--base) !important;
}
.ac-cta .wp-block-button__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--base);
	outline-offset: 3px;
}

/* ---------- Често задавани въпроси ----------
   Блокът `core/details` идва напълно нестилизиран: браузърът рисува черно
   триъгълниче и слепен текст. Тук е списък с тънки линии, без карти и без
   заоблени ъгли — както е останалата част от сайта. */
.wp-block-details:not(:nth-child(2)) {
	border-block-start: 1px solid var(--wp--preset--color--rule);
	margin-block-start: 0;
}
.wp-block-details:last-of-type {
	border-block-end: 1px solid var(--wp--preset--color--rule);
}

.wp-block-details > summary {
	position: relative;
	list-style: none;
	cursor: pointer;
	padding: 1.125rem 3rem 1.125rem 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--wp--preset--color--contrast);
	transition: color 0.18s ease, padding-inline-start 0.22s ease;
}
.wp-block-details > summary::-webkit-details-marker {
	display: none;
}
.wp-block-details > summary:hover {
	color: var(--wp--preset--color--accent);
}
.wp-block-details > summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/* Плюс, който става минус. Двете чертички са едно и също нещо — при отваряне
   изправената просто ляга. */
.wp-block-details > summary::before,
.wp-block-details > summary::after {
	content: "";
	position: absolute;
	inset-inline-end: 0.25rem;
	inset-block-start: 50%;
	inline-size: 15px;
	block-size: 2px;
	background: var(--wp--preset--color--accent);
	transition: transform 0.25s ease;
}
.wp-block-details > summary::before {
	transform: translateY(-50%);
}
.wp-block-details > summary::after {
	transform: translateY(-50%) rotate(90deg);
}
.wp-block-details[open] > summary::after {
	transform: translateY(-50%) rotate(0deg);
}

/* Отвореният въпрос се отмества и получава акцентна чертичка отляво — същият
   похват като при стъпките в „Как става“ и при краткия отговор. */
.wp-block-details[open] > summary {
	color: var(--wp--preset--color--accent);
	padding-inline-start: 0.875rem;
}
.wp-block-details[open] {
	box-shadow: inset 3px 0 0 0 var(--wp--preset--color--accent);
}

.wp-block-details > :not(summary) {
	margin-block: 0 1.25rem;
	padding-block-end: 10px;
	max-inline-size: 62ch;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.65;
}
.wp-block-details[open] > :not(summary) {
	padding-inline-start: 0.875rem;
}

/* Плавно разгъване там, където браузърът го поддържа; другаде просто се
   отваря веднага. */
@supports (interpolate-size: allow-keywords) {
	:root {
		interpolate-size: allow-keywords;
	}
	.wp-block-details::details-content {
		block-size: 0;
		overflow: hidden;
		transition: block-size 0.28s ease, content-visibility 0.28s allow-discrete;
	}
	.wp-block-details[open]::details-content {
		block-size: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-details > summary,
	.wp-block-details > summary::before,
	.wp-block-details > summary::after,
	.wp-block-details::details-content {
		transition: none;
	}
}

/* ---------- Стъпките в „Как става“ ----------
   Описанието стои плътно под заглавието си. Без това WordPress слага
   `margin-block-start: 1.5rem` през `.is-layout-flow > * + *` и текстът се
   откъсва от заглавието, към което принадлежи. Два класа тук бият един клас
   там, независимо от реда на стиловите листове. */
.ac-step > h3 + p {
	margin-block-start: 5px;
}

/* Лявата чертичка минава от акцентното червено на първата стъпка до зеленото
   на последната. Междинните не са смесени в RGB — там средата излиза кална
   кафява — а интерполирани в OkLCH, където тонът върви по късата дъга от 253°
   до 166° и минава през тюркоазеното. Началото е акцентът на сайта, краят —
   зеленото на успеха; помежду им ходът чете като напредък към целта.

   Цветовете са изчислени веднъж и записани: браузърите още не поддържат
   навсякъде интерполация в OkLCH, а и така стойностите са проверими. */
.ac-step {
	border-left-color: var(--ac-step-color, var(--wp--preset--color--accent));
}
.ac-step:nth-child(1) { --ac-step-color: #0B5CA8; }  /* синьо — старт */
.ac-step:nth-child(2) { --ac-step-color: #006498; }
.ac-step:nth-child(3) { --ac-step-color: #006885; }
.ac-step:nth-child(4) { --ac-step-color: #006A71; }
.ac-step:nth-child(5) { --ac-step-color: #00695F; }
.ac-step:nth-child(6) { --ac-step-color: #2B6650; }  /* зелено — книжка */

/* ---------- Залепен header ----------
   Залепва се целият <header><meta charset="utf-8">, а не редът с менюто вътре в него: `sticky`
   работи само в рамките на родителя, а родителят на вътрешния ред е самият
   header — висок 110 пиксела, тоест нямаше докъде да се залепи.
   Височината остава постоянна при скролиране, за да не подскача страницата. */
/* Залепва се обвивката, която `wp:template-part` създава — тя е пряко дете на
   .wp-site-blocks и значи има цялата страница за ход. Вътрешната група не
   можеше: родителят ѝ е висок 167 пиксела. */
header.wp-block-template-part:has( .ac-header ) {
	position: sticky;
	inset-block-start: 0;
	z-index: 40;
	/* Лека сянка през цялото време: хедърът и героят са с един и същи бял фон
	   и без нея ръбът между тях изчезва. Държи се нарочно едва доловима. */
	box-shadow: 0 2px 4px -2px rgba(27, 26, 24, 0.10);
	transition: box-shadow 0.2s ease;
}
/* При скролиране става по-дълбока — знак, че хедърът се е откачил и плува
   над съдържанието. */
header.wp-block-template-part.is-stuck {
	box-shadow: 0 8px 22px -14px rgba(27, 26, 24, 0.45);
}

.header-inner {
	margin-block-start: 0;
}
/* Котвените връзки да не се скриват под залепения header. */
:where(html) {
	scroll-padding-block-start: 7rem;
}
/* На телефон горната лента остава, но само с адреса, вдясно.
   Телефонът и езиците отпадат оттам: обаждането и Viber са в закрепената
   лента долу. Адресът е единственото, което човек на телефон търси и не
   намира другаде — а и е най-полезен точно на телефон, затова остава и
   тръгва от левия край. Езиците стоят в другия край, съкратени до код. */
@media (max-width: 781px) {
	:where(html) { scroll-padding-block-start: 6rem; }

	/* Общият страничен отстъп на сайта е плаващ и на 375px излиза 40,5px —
	   почти една пета от екрана, отнета от лого и меню. */
	.wp-block-group.ac-header {
		padding-inline: 25px;
	}

	.ac-header__contact a[href^="tel:"] {
		display: none;
	}

	/* Адресът вляво, езиците вдясно — двата края на реда. */
	.ac-header__contact {
		justify-content: flex-start;
		text-align: start;
	}


	/* Бутонът „Запиши се“ в хедъра си отива: същото действие стои в
	   закрепената лента долу и на два бутона в героя. */
	.ac-header .wp-block-buttons {
		display: none;
	}
}
/* При 375px логото и менюто с бутона се преливаха на два реда и залепеният
   header ставаше 179px — почти четвърт екран. Причината не е в логото, а във
   вложените constrained групи, всяка от които слага странично отстояние:
   реалната ширина на реда падаше от 327 на 246 пиксела. */
@media (max-width: 599px) {
	.ac-header > .wp-block-group {
		padding-inline: 0;
	}
	.ac-header .wp-block-site-logo img {
		inline-size: 132px;
		block-size: auto;
	}
	.ac-header > .wp-block-group:last-child {
		padding-block: var(--wp--preset--spacing--20);
	}
	.ac-header > .wp-block-group:last-child > .wp-block-group {
		gap: 0.75rem;
	}
	.ac-header .wp-block-button__link {
		padding-inline: 1rem;
	}
	:where(html) { scroll-padding-block-start: 5rem; }
}
/* При нисък екран залепването пречи повече, отколкото помага. */
@media (max-height: 480px) {
	header.wp-block-template-part:has( .ac-header ) { position: static; }
}
@media (prefers-reduced-motion: reduce) {
	header.wp-block-template-part { transition: none; }
}

/* ---------- Слайдер с отзиви ----------
   Превъртането е CSS scroll-snap: работи с пръст, тъчпад и клавиатура още
   преди скриптът за стрелките да се е заредил. Броят видими плочки се смята
   тук, не в JavaScript — 3 на десктоп, 2 на таблет, 1 на телефон. */
.ac-slider {
	--ac-slides: 3;
	--ac-gap: 1.25rem;
	margin-block-start: var(--wp--preset--spacing--50);
}
.ac-slider__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* В реда останаха само стрелките — държат се вдясно. */
	justify-content: flex-end;
	gap: 1rem;
	margin-block-end: 1rem;
}
.ac-slider__nav {
	display: flex;
	gap: 0.5rem;
	margin-left: auto;
}
.ac-slider__btn {
	inline-size: var(--wp--custom--tap-target);
	block-size: var(--wp--custom--tap-target);
	display: grid;
	place-items: center;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 2px;
	font-size: 1.125rem;
	line-height: 1;
	cursor: pointer;
}
.ac-slider__btn:hover:not(:disabled) {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}
.ac-slider__btn:disabled {
	opacity: 0.35;
	cursor: default;
}

.ac-slider__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--ac-slides) - 1) * var(--ac-gap)) / var(--ac-slides));
	gap: var(--ac-gap);
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline-start: 0;
	padding: 0 0 0.5rem;
	margin: 0;
	list-style: none;
	scrollbar-width: thin;
}
.ac-slider__track:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 4px;
}

.ac-review {
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	padding: 1.25rem 1.375rem;
	margin: 0;
}
.ac-review__stars {
	color: var(--wp--preset--color--accent);
	font-size: 0.9375rem;
	letter-spacing: 0.1em;
	line-height: 1;
}
.ac-review__text {
	margin: 0;
	border: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	/* Дълъг отзив се подрязва, за да не разтяга плочката. */
	display: -webkit-box;
	-webkit-line-clamp: 9;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ac-review__by {
	margin-block-start: auto;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.75rem;
	align-items: baseline;
	font-size: var(--wp--preset--font-size--x-small);
}
.ac-review__by cite {
	font-style: normal;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

@media (max-width: 1023px) {
	.ac-slider { --ac-slides: 2; }
}
@media (max-width: 599px) {
	.ac-slider { --ac-slides: 1; --ac-gap: 0.875rem; }
	.ac-review__text { -webkit-line-clamp: 12; }
}
@media (prefers-reduced-motion: reduce) {
	.ac-slider__track { scroll-behavior: auto; }
}

/* ---------- Снимка в картата на категория ----------
   Излиза до ръба на картата, затова компенсира вътрешното отстояние. */
.ac-course-card > .ac-course-card__media {
	margin-block-start: calc(-1 * var(--wp--preset--spacing--40));
	margin-inline: calc(-1 * var(--wp--preset--spacing--40));
	margin-block-end: var(--wp--preset--spacing--30);
	overflow: hidden;
}
.ac-course-card__media img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}
/* Курс без снимка: знакът „У“ на тонирано поле, вместо дупка. */
.ac-course-card__media--empty {
	display: grid;
	place-items: center;
	aspect-ratio: 3 / 2;
	background: var(--wp--preset--color--surface-2);
	border-block-end: 1px solid var(--wp--preset--color--rule);
}
.ac-course-card__media--empty span {
	display: grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border: 3px solid var(--wp--preset--color--rule);
	color: var(--wp--preset--color--rule);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1;
}

/* ---------- Снимките в героя ----------
   Водещата заема цялата ширина, другите две са под нея — лек автомобил,
   мотоциклет и товарен, за да се види обхватът с един поглед. */
.ac-hero-photos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.ac-hero-photo {
	margin: 0;
	position: relative;
	background: var(--wp--preset--color--surface-2);
	overflow: hidden;
}
.ac-hero-photo--lead {
	grid-column: 1 / -1;
}
.ac-hero-photo__img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	aspect-ratio: 3 / 2;
}
/* Цялата плочка е връзка към страницата на категорията. */
.ac-hero-photo__link {
	display: block;
	position: relative;
	block-size: 100%;
	text-decoration: none;
}
.ac-hero-photo__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}
.ac-hero-photo__label {
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--accent);
	padding: 0.3rem 0.6rem;
}
/* При посочване снимката се избистря леко — знак, че се кликва. */
.ac-hero-photo__link .ac-hero-photo__img {
	transition: transform 0.35s ease, filter 0.35s ease;
}
.ac-hero-photo__link:hover .ac-hero-photo__img,
.ac-hero-photo__link:focus-visible .ac-hero-photo__img {
	transform: scale(1.03);
	filter: saturate(1.08);
}
@media (prefers-reduced-motion: reduce) {
	.ac-hero-photo__link .ac-hero-photo__img { transition: none; }
	.ac-hero-photo__link:hover .ac-hero-photo__img { transform: none; }
}
@media (max-width: 480px) {
	.ac-hero-photos { gap: 8px; }
	.ac-hero-photo__label { font-size: 0.6875rem; }
}

/* ---------- Карта на категория ----------
   Кутията запълва клетката на решетката, за да е долният ръб на всички карти
   в реда на едно ниво независимо от дължината на описанието. */
.ac-course-card {
	block-size: 100%;
	display: flex;
	flex-direction: column;
}
/* Връзката пада в долния край, за да е на едно ниво във всички карти
   независимо от дължината на описанието. */
.ac-course-card > .wp-block-read-more {
	margin-block-start: auto;
	padding-block-start: 1rem;
	align-self: start;
	text-decoration: none;
	border-block-end: 1px solid var(--wp--preset--color--accent-soft);
}
.ac-course-card > .wp-block-read-more:hover {
	border-block-end-color: var(--wp--preset--color--accent);
}

/* ---------- Кратък отговор (AEO) ----------
   Първият абзац на страница за курс е самостоятелен: чете се без контекст и
   може да бъде цитиран директно от AI търсачка. Затова е и визуално отделен. */
.ac-answer {
	border-inline-start: 4px solid var(--wp--preset--color--accent);
	background: var(--wp--preset--color--surface);
	padding: 1.125rem 1.25rem;
	/* Размер на лийд, не на заглавие — абзацът е ~90 думи. */
	font-size: 1.1875rem;
	line-height: 1.55;
}
.ac-answer strong {
	font-family: var(--wp--preset--font-family--display);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.7em;
	display: block;
	color: var(--wp--preset--color--accent);
	margin-block-end: 0.4rem;
}

/* ---------- Таблица с показатели ---------- */
.ac-spec-table table { font-size: var(--wp--preset--font-size--small); }
.ac-spec-table td:first-child {
	inline-size: 34%;
	color: var(--wp--preset--color--muted);
}
.ac-spec-table caption {
	caption-side: top;
	text-align: start;
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--muted);
	padding-block-end: 0.5rem;
}

/* ---------- Изображения ---------- */
img,
.wp-block-image img {
	max-inline-size: 100%;
	block-size: auto;
}

/* ---------- Уважаваме предпочитанието за по-малко движение ---------- */
@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;
	}
}

/* ---------- Само за екранни четци ---------- */
.screen-reader-text {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.skip-link:focus {
	position: fixed !important;
	inset-block-start: 0.5rem;
	inset-inline-start: 0.5rem;
	inline-size: auto;
	block-size: auto;
	clip-path: none;
	z-index: 100;
	padding: 0.75rem 1rem;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* -------------------------------------------------------------------------
   Съдържанието на страницата на курса

   Секциите вече не са шарка, а обикновени заглавия и списъци в редактора —
   същото, което е и политиката за поверителност. Затова и стиловете тръгват
   от самите елементи, а не от класове, които някой трябва да помни да слага.

   Плоско: секция след секция на цялата ширина, разделени с тънка линия.
   ------------------------------------------------------------------------- */

.ac-course-body > h2 {
	margin: 2.25rem 0 1.1rem;
	padding-block-start: 2.25rem;
	border-block-start: 1px solid var(--wp--preset--color--rule);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
}

/* Първото заглавие няма какво да дели от предното. */
.ac-course-body > h2:first-child {
	margin-block-start: 0;
	padding-block-start: 0;
	border-block-start: 0;
}

/* Подзаглавието вътре в секция. Получер, за да се хване с едно плъзгане по
   страницата — това е редът, по който човек познава своя случай. */
.ac-course-body > h3 {
	margin: 1.4rem 0 0.6rem;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.4;
}

.ac-course-body > h2 + h3 {
	margin-block-start: 0;
}

/* ---------- Един маркер за всички списъци ----------

   Чертичка в акцента — същият знак като маркировката на път в
   `.ac-roadline`. Един за условия, документи, стъпки и изпити: три различни
   знака на една страница карат читателя да търси разлика, каквато няма. */

.ac-course-body > ul,
.ac-course-body > ol {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.ac-course-body > ul > li,
.ac-course-body > ol > li {
	position: relative;
	padding-inline-start: 1.35rem;
	line-height: 1.55;
}

.ac-course-body > ul > li::before,
.ac-course-body > ol > li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.72em;
	inline-size: 0.75rem;
	block-size: 2px;
	background-color: var(--wp--preset--color--accent);
}

/* ---------- Блокът с автомобилите ---------- */

.ac-fleet-section {
	margin-block-start: 2.25rem;
	padding-block-start: 2.25rem;
	border-block-start: 1px solid var(--wp--preset--color--rule);
}

.ac-fleet__title {
	margin: 0 0 1.1rem;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	line-height: 1.2;
	/* theme.json праща заглавията в главни букви с разредка; тук трябва да
	   изглежда като другите заглавия в съдържанието. */
	text-transform: none;
	letter-spacing: 0;
}

/* Четири на ред, всяка карта четвърт от ширината. Твърдо четири, а не
   `auto-fill`: така единственият състав за C+E е със същия размер като
   двата мотоциклета за кат. A, вместо да се разтегне на цялата ширина. */
.ac-fleet {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.75rem 1rem;
}

@media (width < 48rem) {
	.ac-fleet {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.ac-fleet__frame {
	background-color: var(--wp--preset--color--surface-2);
	border: 1px solid var(--wp--preset--color--rule);
	overflow: hidden;
	margin-block-end: 0.55rem;
}

.ac-fleet__photo {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.ac-fleet__name {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	line-height: 1.25;
}

.ac-fleet__meta,
.ac-fleet__note {
	margin: 0.2rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	line-height: 1.4;
}

/* Редакторът: подредбата на избраните автомобили в страничната лента. */
.avtoclass-chosen {
	margin: 0 0 1em;
	padding: 0;
	list-style: none;
}

.avtoclass-chosen__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em;
	padding: 0.25em 0;
	border-block-end: 1px solid #e0e0e0;
}

.avtoclass-chosen__name {
	font-size: 12px;
	line-height: 1.3;
}

.avtoclass-chosen__actions {
	display: flex;
	flex-shrink: 0;
}

/* -------------------------------------------------------------------------
   Заглавната част на курса

   Текстът вляво, снимката вдясно, по половина. `auto-fit` свива празната
   пътечка: шест от четиринайсетте курса нямат снимка и при тях текстът
   заема цялата ширина сам, без второ правило и без `:has()`.
   ------------------------------------------------------------------------- */

.ac-course-hero {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
	gap: 2rem 2.5rem;
	align-items: center;
}

.ac-course-hero__text > :first-child {
	margin-block-start: 0;
}

.ac-course-hero__media {
	margin: 0;
}

.ac-course-hero__photo {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border: 1px solid var(--wp--preset--color--rule);
}

/* -------------------------------------------------------------------------
   Заглавието на началната страница

   На десктоп е точно 78px. Под 64rem остава плаващият размер от theme.json
   (clamp от 44 до 84px), за да не излиза от колоната на тесен екран.

   `!important` е нужен, защото ядрото изписва самото
   `.has-hero-font-size { font-size: … !important }`.
   ------------------------------------------------------------------------- */

@media (width >= 64rem) {
	.has-hero-font-size {
		font-size: 78px !important;
	}
}

/* -------------------------------------------------------------------------
   Героят на телефон

   Плаващият размер слиза до 44px за заглавието и 20px за водещия абзац.
   Школата ги иска 45 и 17: заглавието с мъничко повече тежест, а текстът
   под него — забележимо по-дребен, за да не спорят двата на тесен екран.

   Само в героя: `has-large-font-size` се ползва и другаде, а там размерът
   си остава плаващият.
   ------------------------------------------------------------------------- */

@media (max-width: 781px) {
	.ac-hero h1 {
		font-size: 45px !important;
	}

	.ac-hero p.has-large-font-size {
		font-size: 17px !important;
	}
}

/* -------------------------------------------------------------------------
   Страница „Контакти“

   Формата вляво, адресът и картата вдясно — както е подредена страницата на
   стария сайт. Съотношението е 3:2, за да не стане формата тясна колона от
   осем полета едно под друго.
   ------------------------------------------------------------------------- */

.ac-contacts {
	display: grid;
	gap: 2.5rem 3rem;
	margin-block-start: var(--wp--preset--spacing--50);
}

@media (width >= 56rem) {
	.ac-contacts {
		grid-template-columns: 3fr 2fr;
		align-items: start;
	}
}

/* Двете колони тръгват от една линия. Без това ядрото слага 24px отстъп
   на втория елемент в групата и „Къде сме“ увисва под формата. */
.ac-contacts > *,
.ac-contacts__form > :first-child,
.ac-contacts__aside > :first-child {
	margin-block-start: 0;
}

/* „Къде сме“ иска малко въздух под себе си — списъкът с адреса тръгва
   веднага след него, без параграф помежду. */
.ac-contacts__aside > .wp-block-heading {
	padding-block-end: 15px;
}

.ac-contacts__list {
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.ac-contacts__item {
	position: relative;
	padding-inline-start: 1.9rem;
	line-height: 1.45;
}

/* Иконите са маска върху currentColor — нито иконичен шрифт, нито още една
   заявка, и следват цвета на връзката при hover. */
.ac-contacts__item::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.15em;
	inline-size: 1.15em;
	block-size: 1.15em;
	background-color: var(--wp--preset--color--accent);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.ac-contacts__item--place::before {
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5Z'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5Z'/></svg>");
}

.ac-contacts__item--phone::before {
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 15.5a11 11 0 0 1-3.5-.6 1 1 0 0 0-1 .3l-1.6 1.6a15 15 0 0 1-6.7-6.7l1.6-1.6a1 1 0 0 0 .3-1A11 11 0 0 1 8.5 4a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1 17 17 0 0 0 17 17 1 1 0 0 0 1-1v-3.5a1 1 0 0 0-1-1Z'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 15.5a11 11 0 0 1-3.5-.6 1 1 0 0 0-1 .3l-1.6 1.6a15 15 0 0 1-6.7-6.7l1.6-1.6a1 1 0 0 0 .3-1A11 11 0 0 1 8.5 4a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1 17 17 0 0 0 17 17 1 1 0 0 0 1-1v-3.5a1 1 0 0 0-1-1Z'/></svg>");
}

.ac-contacts__item--mail::before {
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Zm1.6 2L12 12.3 19.4 7H4.6Z'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Zm1.6 2L12 12.3 19.4 7H4.6Z'/></svg>");
}

/* ---------- Картата ---------- */

.ac-map {
	border: 1px solid var(--wp--preset--color--rule);
	background-color: var(--wp--preset--color--surface-2);
	aspect-ratio: 4 / 3;
	display: grid;
}

.ac-map iframe {
	inline-size: 100%;
	block-size: 100%;
	border: 0;
	display: block;
}

.ac-map__alt {
	margin: 0.9rem 0 0;
	font-size: var(--wp--preset--font-size--small);
}

/* -------------------------------------------------------------------------
   Подвал
   ------------------------------------------------------------------------- */

/* Трите заглавия са с различен кегел — името на школата е по-едро от
   „Курсове“ и „Езици“. Подравняване по горния ръб ги оставя на различна
   височина, защото по-високият ред спуска буквите по-надолу. `baseline` ги
   слага на една линия.

   Задава се на самите колони, а не с `align-items` на реда: ядрото изписва
   `.wp-block-columns { align-items: normal !important }`. */
footer .wp-block-column {
	align-self: baseline;
}

/* Двете заглавия във футъра стоят на една линия и с еднакво отстояние
   до списъка под тях. */
.ac-footer-heading {
	padding-block-end: 10px;
}

/* Курсовете в подвала — две колони. `columns`, а не решетка: четиринайсетте
   заглавия са с различна дължина и се четат надолу по първата колона. */
.ac-footer-courses {
	margin: 0;
	padding: 0;
	list-style: none;
	columns: 2;
	column-gap: 1.5rem;
	font-size: var(--wp--preset--font-size--small);
}

.ac-footer-courses li {
	break-inside: avoid;
	margin-block-end: 0.35rem;
	line-height: 1.35;
}

/* На телефон две колони от 156px чупят „Мотокарист, кранист, оператор на
   вишка“ на четири реда — по-добре една колона. */
@media (width < 30rem) {
	.ac-footer-courses {
		columns: 1;
	}
}

/* -------------------------------------------------------------------------
   Видеа

   Плакат вместо плеър, докато никой не поиска да гледа. Пет вградени плеъра
   на YouTube на една страница са над пет мегабайта JavaScript и пет връзки
   към Google, преди посетителят да е натиснал каквото и да е.
   ------------------------------------------------------------------------- */

.ac-video {
	position: relative;
	aspect-ratio: 16 / 9;
	background-color: var(--wp--preset--color--asphalt);
	overflow: hidden;
}

.ac-video__poster,
.ac-video__frame {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	border: 0;
	display: block;
}

/* hqdefault идва 4:3 с черни ленти — изрязва се до кадъра. */
.ac-video__poster {
	object-fit: cover;
	transition: opacity 0.15s ease;
}

.ac-video__play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	text-decoration: none;
}

/* Триъгълник от рамки — без SVG и без иконичен шрифт. */
.ac-video__icon {
	inline-size: 4.5rem;
	block-size: 4.5rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--accent);
	display: grid;
	place-items: center;
	transition: transform 0.15s ease, background-color 0.15s ease;
}

.ac-video__icon::before {
	content: "";
	inline-size: 0;
	block-size: 0;
	border-block: 0.85rem solid transparent;
	border-inline-start: 1.35rem solid #fff;
	border-inline-end: 0;
	margin-inline-start: 0.35rem;
}

.ac-video__play:hover .ac-video__icon,
.ac-video__play:focus-visible .ac-video__icon {
	transform: scale(1.08);
	background-color: var(--wp--preset--color--contrast);
}

.ac-video__play:hover ~ .ac-video__poster,
.ac-video__play:hover + .ac-video__poster {
	opacity: 0.85;
}

.ac-video__note {
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	margin: 0;
	padding: 0.5rem 0.75rem;
	background-color: rgb(0 0 0 / 0.55);
	color: #fff;
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.3;
}

.ac-video-figure {
	margin: 0;
}

/* Редът видео + текст. Видеото носи повече тегло, затова е по-широко. */
.ac-video-row {
	display: grid;
	gap: 1.5rem 2.5rem;
	align-items: center;
	margin-block-start: var(--wp--preset--spacing--50);
}

@media (width >= 56rem) {
	.ac-video-row {
		grid-template-columns: 3fr 2fr;
	}
}

.ac-video-row > * {
	margin-block-start: 0;
}

.ac-video-row__text > :first-child {
	margin-block-start: 0;
}

.ac-video-row__step {
	margin: 0 0 0.4rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--accent);
}

/* ---------- Адресът в хедъра и в подвала ----------

   Същата иконка като на „Контакти“ — маска върху currentColor, без
   допълнителна заявка и със същия цвят като връзката. */

/* Иконката се центрира от flex, а не с налучкан отстъп: така стои вярно при
   всеки кегел и не се налага да се пипа, ако шрифтът се смени. */
.ac-place {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	white-space: nowrap;
}

.ac-place::before {
	content: "";
	flex: 0 0 auto;
	inline-size: 1em;
	block-size: 1em;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5Z'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5Z'/></svg>");
}

/* В хедъра двете стоят на един ред, с разстояние помежду им. */
.ac-header__contact {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 1.25rem;
	margin: 0;
}

/* Под 30rem адресът се пренася и не бива да стърчи извън екрана. */
@media (width < 30rem) {
	.ac-place {
		white-space: normal;
	}
}

/* ---------- Езиците в горната лента ----------

   Разделителят е на псевдоелемент, а не знак в разметката: така не се
   чете от екранен четец и не се копира заедно с имената на езиците.
   Текущият език остава текст — връзка към страницата, на която вече си,
   не е избор. */
.ac-langs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.6rem;
	margin: 0;
}

.ac-langs__item + .ac-langs__item::before {
	content: "·";
	margin-inline-end: 0.6rem;
	color: var(--wp--preset--color--muted);
}

.ac-langs__current {
	font-weight: 700;
}

/* Пълното име на десктоп, кодът на телефон.

   Двете стоят в разметката и се сменят с `display`, а не с текст от
   JavaScript: скритото изпада и от достъпното дърво, тоест екранният четец
   чете едно име, не две. Правилата са тук, а не в общия мобилен блок
   по-горе — при еднаква специфичност печели по-късното, а основното правило
   стои след него. */
.ac-langs__short {
	display: none;
}

@media (max-width: 781px) {
	.ac-langs__full {
		display: none;
	}

	.ac-langs__short {
		display: inline;
	}

	.ac-langs {
		gap: 0.35rem 0.4rem;
		flex-wrap: nowrap;
	}

	.ac-langs__item + .ac-langs__item::before {
		margin-inline-end: 0.4rem;
	}
}

/* Полезните връзки във футъра: списък без точки, плътно подреден. */
.ac-footer-links {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--small);
}

.ac-footer-links li {
	margin-block-end: 0.35rem;
	line-height: 1.35;
}

/* Правният ред и поверителността — по краищата на реда, центрирани по
   височина.

   Подравняването е `center`, а не по базова линия: дългият ред се пренася
   на два при тесен екран и връзката трябва да остане в средата му, а не
   залепена за първия.

   Отстоянието отгоре повтаря долния падинг на футъра. Без него редът
   лепне за разделителя: блоковият отстъп свършва при чертата и под нея
   остава само падингът, тоест 0 отгоре и падингът отдолу. */
.ac-footer-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.5rem;
	justify-content: space-between;
	align-items: center;
	margin: 12px 0 0;
}

/* ---------- Текущата страница в менюто ----------

   Подчертаване, а не само цвят: цветът сам по себе си не различава
   достатъчно при слабо зрение, а и връзките в менюто вече са в един цвят.
   Линията е под текста, на разстояние, за да не се слива с буквите. */

.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.45em;
	text-decoration-skip-ink: none;
}

/* В мобилното меню редовете са едри и подчертаването изглежда тежко —
   там е достатъчна чертичка отляво. */
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
	text-decoration: none;
	border-inline-start: 3px solid var(--wp--preset--color--accent);
	padding-inline-start: 0.6rem;
}

/* -------------------------------------------------------------------------
   Резервни шрифтове с изравнени метрики

   Причината за подскачането при зареждане: `font-display: swap` рисува
   текста със системен шрифт и после го подменя. Arial е с 6,7% по-широк от
   PT Sans и с 11% по-нисък, така че при подмяната всеки ред се преподрежда
   и страницата трепва.

   Тук Arial се свива до метриките на истинския шрифт. Буквите му остават
   различни на вид за миг, но заемат същото място — подмяната минава без
   нито един изместен пиксел.

   Числата не са на око. Измерени са в браузъра с `measureText` върху един
   и същ низ на 100px:

       PT Sans        ширина 2525,2   ascent 102   descent 28
       PT Sans Narrow ширина 2044,2   ascent 102   descent 28
       Arial          ширина 2694,6   ascent  91   descent 21

   size-adjust = ширина на целта / ширина на Arial
   ascent/descent-override = метрика на целта / size-adjust
   ------------------------------------------------------------------------- */

@font-face {
	font-family: "PT Sans Fallback";
	src: local("Arial"), local("Helvetica"), local("Liberation Sans");
	size-adjust: 93.71%;
	ascent-override: 108.84%;
	descent-override: 29.88%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "PT Sans Narrow Fallback";
	src: local("Arial"), local("Helvetica"), local("Liberation Sans");
	size-adjust: 75.86%;
	ascent-override: 134.45%;
	descent-override: 36.91%;
	line-gap-override: 0%;
}

/* На телефон двата бутона в героя отпадат: същите две действия стоят в
   закрепената лента долу, която е на пръст разстояние през цялото време.
   Тук печелим един екран височина преди първата снимка. */
@media (max-width: 781px) {
	/* Два класа, защото ядрото изписва `.wp-block-buttons.is-layout-flex
	   { display: flex }` — правило с един клас не го бие. */
	.wp-block-buttons.ac-hero-actions {
		display: none;
	}
}

/* -------------------------------------------------------------------------
   Разстояния между секциите на телефон

   На десктоп отстъпите остават каквито са зададени в редактора — школата
   може да ги мени оттам. На тесен екран същите стойности заемат прекалено
   много от височината, затова тук се притягат.

   `!important` е нужен, защото отстъпът е inline стил от блока, а inline
   бие всеки селектор. Алтернативата — да се махне от блока и да се управлява
   само оттук — би отнела възможността да се променя от редактора.
   ------------------------------------------------------------------------- */

@media (max-width: 781px) {
	.ac-hero {
		padding-block: 24px 44px !important;
	}

	/* Двете без фон: нулата не личи като притискане, защото фонът продължава. */
	.ac-process,
	.ac-faq-section {
		padding-block: 0 !important;
	}

	.ac-course-grid,
	.ac-english,
	.ac-reviews,
	.ac-enroll {
		padding-block: 24px !important;
	}

	.ac-reviews {
		margin-block-start: 0;
	}
}

/* На телефон петте стъпки се нижат една под друга и без разделител се четат
   като един дълъг текст. Линията е върху всяка следваща, не върху всички —
   черта над първата и под последната би оградила блока, вместо да го раздели. */
@media (max-width: 781px) {
	.ac-video-row {
		margin-block-start: 30px;
	}

	.ac-video-row + .ac-video-row {
		border-block-start: 2px solid var(--wp--preset--color--accent);
		padding-block-start: var(--wp--preset--spacing--50);
	}
}

/* ---------- Попъп слайдер за снимките на автомобилите ----------

   Диалогът е широк колкото снимката позволява, но не повече от екрана.
   Самата снимка се събира в останалото място след надписа и бутоните,
   затова височината ѝ е ограничена, а не ширината — иначе висок кадър
   излиза извън екрана. */
.ac-lightbox {
	inline-size: min(64rem, calc(100vw - 2rem));
	max-block-size: calc(100vh - 2rem);
	padding: 0;
	border: 1px solid var(--wp--preset--color--rule);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	box-shadow: 0 30px 70px -40px rgba(27, 26, 24, 0.7);
	overflow: visible;
}

.ac-lightbox::backdrop {
	background: rgba(27, 26, 24, 0.78);
}

.ac-lightbox__dismiss {
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 0;
	margin: 0;
	z-index: 2;
}

.ac-lightbox__close {
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border: 0;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.ac-lightbox__figure {
	margin: 0;
	display: grid;
	gap: 0.75rem;
	padding: 0 0 1rem;
}

.ac-lightbox__img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	max-block-size: calc(100vh - 9rem);
	object-fit: contain;
	background: var(--wp--preset--color--surface-2);
}

.ac-lightbox__caption {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.35rem 1rem;
	padding-inline: clamp(1rem, 3vw, 1.5rem);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: var(--wp--preset--font-size--small);
}

.ac-lightbox__count {
	color: var(--wp--preset--color--muted);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	font-variant-numeric: tabular-nums;
}

/* Стрелките стоят върху снимката, за да не отнемат височина. */
.ac-lightbox__nav {
	position: absolute;
	inset-block-start: calc(50% - 1.75rem);
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border: 0;
	background: rgba(253, 252, 250, 0.9);
	color: var(--wp--preset--color--contrast);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}

.ac-lightbox__nav:hover,
.ac-lightbox__nav:focus-visible {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

.ac-lightbox__nav--prev { inset-inline-start: 0; }
.ac-lightbox__nav--next { inset-inline-end: 0; }
.ac-lightbox__nav[hidden] { display: none; }

/* Снимката в списъка показва, че се отваря. */
.ac-fleet__zoom {
	display: block;
	cursor: zoom-in;
}

.ac-fleet__zoom img {
	transition: transform 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
	.ac-fleet__zoom img { transition: none; }
}

.ac-fleet__zoom:hover img,
.ac-fleet__zoom:focus-visible img {
	transform: scale(1.03);
}

/* Кадърът реже увеличението, за да не излиза извън плочката. */
.ac-fleet__frame {
	overflow: hidden;
}

/* ---------- Печатът на АКАБ върху водещата снимка ----------

   Белият диск отдолу е нужен: знакът е черен пръстен върху прозрачност и
   на тъмна снимка просто изчезва. Дискът му дава собствен фон, какъвто
   има и върху хартия. */
.ac-hero-photo--lead {
	position: relative;
}

.ac-hero-badge {
	position: absolute;
	inset-block-start: clamp(0.5rem, 2%, 1rem);
	inset-inline-end: clamp(0.5rem, 2%, 1rem);
	display: block;
	height: clamp(48px, 13%, 76px);
	aspect-ratio: 1;
	border-radius: 50%;
	/* Знакът е квадратен файл с прозрачни ъгли; без отрязване те стърчат
	   извън белия диск. */
	overflow: hidden;
	background: #fff;
	padding: 3px;
	box-shadow: 0 2px 10px -2px rgba(27, 26, 24, 0.45);
	z-index: 1;
}

.ac-hero-badge img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

/* На телефон печатът е точно 48px заедно с бялото поле около знака.
   `box-sizing` е нужен, защото `height` по подразбиране мери само
   съдържанието — с трите пиксела отстъп от двете страни дискът ставаше 54. */
@media (max-width: 781px) {
	.ac-hero-badge {
		box-sizing: border-box;
		height: 48px;
	}
}

/* ---------- Надзаглавието в героя ----------

   Слоганът стои над H1 и задава тона, преди заглавието да поеме работата
   по търсенето. Затова е дребен и с разредка — да се прочете за миг, без
   да се състезава със заглавието под него.

   Разстоянието до заглавието се управлява оттук. Ядрото слага 24px на
   всяко дете след първото в поточна подредба; правилото му е с `:where()`,
   тоест с нулева специфичност, и един съседен селектор го бие. */
.ac-hero-kicker + h1 {
	margin-block-start: 0;
}

.ac-hero-kicker {
	margin-block: 0 0.5rem;
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	line-height: 1.3;
}

/* Социални мрежи под „Поверителност“ във футъра. */
.ac-footer-social {
	display: flex;
	gap: 0.75rem;
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
}

.ac-footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	color: var(--wp--preset--color--accent);
	border: 1px solid currentColor;
	transition: background-color 0.15s, color 0.15s;
}

.ac-footer-social a:hover,
.ac-footer-social a:focus-visible {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface);
}

.ac-footer-social svg {
	width: 1.1rem;
	height: 1.1rem;
}

/* Футърът стои в долния край на екрана, когато съдържанието е по-късо
   от височината на прозореца (напр. 404). */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
}

.wp-site-blocks > footer {
	margin-block-start: auto;
}