/* ==========================================================================
   Alemira — основа: слои, токены, сброс, типографика
   --------------------------------------------------------------------------
   Порядок слоёв важнее специфичности. Именно это снимает проблему старой
   темы, где 188 !important воевали друг с другом.

   ВАЖНО: стили вне слоёв выигрывают у любого слоя. CSS плагинов в слои не
   обёрнут, поэтому он перебивает тему — на этот случай есть plugins.css,
   он подключается последним и тоже вне слоёв.
   ========================================================================== */

@layer reset, tokens, base, layout, components, pages, utilities;

@layer tokens {
	:root {
		/* Фирменные цвета взяты из логотипа: в нём ровно два цвета */
		--al-brand:       #be4c46;
		--al-brand-600:   #a83f39;
		--al-brand-700:   #8f342f;
		--al-brand-100:   #f3dcda;
		--al-brand-050:   #fbf1f0;

		--al-accent:      #0077c0;
		--al-accent-600:  #005f9b;
		--al-accent-050:  #eef6fc;

		--al-ink:         #22242c;
		--al-ink-700:     #474b59;
		--al-ink-500:     #6b6d75;
		--al-ink-300:     #9b9da6;

		--al-line:        #e8e9ec;
		--al-line-strong: #d5d7dc;
		--al-surface:     #ffffff;
		--al-surface-alt: #f6f7f8;

		--al-ok:          #1e7a4b;
		--al-err:         #c0392b;
		--al-warn:        #fcb216;

		/* Скругления */
		--al-r-sm:   8px;
		--al-r:     12px;
		--al-r-lg:  18px;
		--al-r-pill: 999px;

		/* Тени: мягкие, многослойные */
		--al-shadow-sm: 0 1px 2px rgba(34,36,44,.06), 0 2px 6px rgba(34,36,44,.05);
		--al-shadow:    0 2px 6px rgba(34,36,44,.05), 0 8px 24px rgba(34,36,44,.09);
		--al-shadow-lg: 0 4px 10px rgba(34,36,44,.05), 0 20px 44px rgba(34,36,44,.13);

		/* Отступы, шаг 4px */
		--al-s-1: 4px;  --al-s-2: 8px;  --al-s-3: 12px; --al-s-4: 16px;
		--al-s-5: 24px; --al-s-6: 32px; --al-s-7: 48px; --al-s-8: 64px; --al-s-9: 96px;

		--al-section: clamp(48px, 5vw, 88px);
		--al-container: 1320px;
		--al-gutter: clamp(16px, 3vw, 32px);

		--al-t: 180ms cubic-bezier(.4, 0, .2, 1);

		/* Шрифтовая шкала */
		--al-fs-h1: clamp(28px, 1.8vw + 20px, 44px);
		--al-fs-h2: clamp(22px, 1.1vw + 17px, 32px);
		--al-fs-h3: clamp(18px, .5vw + 15px, 21px);
		--al-fs-body: 17px;
		--al-fs-sm: 15px;
	}

	@media (max-width: 767px) {
		:root { --al-fs-body: 16px; --al-section: 40px; }
	}
}

@layer reset {
	*, *::before, *::after { box-sizing: border-box; }

	body, h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd {
		margin: 0;
	}

	html { -webkit-text-size-adjust: 100%; }

	/* Шапка липкая, поэтому переход по якорю (#contact_us_bottom и т.п.)
	   ставил заголовок секции под шапку. Резервируем её высоту. */
	:target, [id] { scroll-margin-top: 96px; }
	@media (max-width: 767px) { :target, [id] { scroll-margin-top: 72px; } }

	@media (prefers-reduced-motion: no-preference) {
		html { scroll-behavior: smooth; }
	}

	img, picture, video, canvas, svg, iframe {
		display: block;
		max-width: 100%;
	}

	img, video { height: auto; }

	input, button, textarea, select { font: inherit; color: inherit; }

	ul[class], ol[class] { list-style: none; padding: 0; }

	a { color: inherit; }

	table { border-collapse: collapse; width: 100%; }

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

@layer base {
	body {
		font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
		font-size: var(--al-fs-body);
		line-height: 1.6;
		color: var(--al-ink-700);
		background: var(--al-surface);
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		overflow-x: clip;
	}

	/* Страховка: ни один элемент не должен быть шире вьюпорта */
	.al-page { max-width: 100%; overflow-x: clip; }

	h1, h2, h3, h4 {
		color: var(--al-ink);
		font-weight: 700;
		line-height: 1.2;
		letter-spacing: -0.01em;
		text-wrap: balance;
	}

	.al-h1, h1 { font-size: var(--al-fs-h1); letter-spacing: -0.02em; }
	/* Заголовок страницы стоял вплотную к первому абзацу */
	.al-h1 { margin-bottom: var(--al-s-5); }
	h2 { font-size: var(--al-fs-h2); }
	h3 { font-size: var(--al-fs-h3); line-height: 1.3; }

	p { line-height: 1.65; }

	a { text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color var(--al-t); }
	a:hover { color: var(--al-brand); }

	strong, b { font-weight: 600; color: var(--al-ink); }

	/* Видимый фокус. В старой теме стояло *:focus{outline:none!important},
	   из-за чего сайтом нельзя было пользоваться с клавиатуры. */
	:focus-visible {
		outline: 3px solid var(--al-brand);
		outline-offset: 2px;
		border-radius: var(--al-r-sm);
	}

	::selection { background: var(--al-brand-100); color: var(--al-ink); }

	::placeholder { color: var(--al-ink-500); opacity: 1; }

	/* Ссылка «к содержимому» для клавиатуры */
	.al-skip {
		position: absolute;
		left: -9999px;
		top: 0;
		z-index: 1000;
		padding: var(--al-s-3) var(--al-s-4);
		background: var(--al-brand);
		color: #fff;
		border-radius: 0 0 var(--al-r) 0;
	}
	.al-skip:focus { left: 0; }

	.al-no-scroll { overflow: hidden; }
}

@layer base {
	/* --- Наборный текст из редактора ------------------------------------ */

	.al-prose { color: var(--al-ink-700); }

	/* Мера строки задана не контейнеру, а самим абзацам. Если ограничивать
	   контейнер, вместе с текстом сжимаются и двухколоночные блоки
	   из старого редактора (см. .row ниже). Без ограничения строка
	   растягивалась на 1320 px — около 150 знаков, читать невозможно. */
	.al-prose > p,
	.al-prose > ul,
	.al-prose > ol,
	.al-prose > h2,
	.al-prose > h3,
	.al-prose > h4,
	.al-prose > blockquote { max-width: 72ch; }

	/* Вертикальный ритм на любой глубине вложенности. Раньше правило было
	   `.al-prose > * + *` и работало только на верхнем уровне: в русских
	   описаниях текст лежит внутри .col-md-6, и там абзацы слипались. */
	.al-prose :is(p, ul, ol, dl, h2, h3, h4, figure, table, blockquote, .row)
		+ :is(p, ul, ol, dl, h2, h3, h4, figure, table, blockquote, .row) {
		margin-top: var(--al-s-4);
	}

	.al-prose h2 { margin-top: var(--al-s-7); font-size: var(--al-fs-h2); line-height: 1.25; }
	.al-prose h3 { margin-top: var(--al-s-6); font-size: var(--al-fs-h3); }
	.al-prose h2:first-child, .al-prose h3:first-child { margin-top: 0; }

	/* Абзац, целиком состоящий из жирного предложения, — это подзаголовок,
	   набранный в редакторе вручную («Кассетное руло имеет ряд преимуществ:»).
	   Превращается в <h3> фильтром в inc/setup.php: на CSS это не решается —
	   селектор strong:only-child считает только элементы и совпадает также
	   с абзацем, где жирное слово стоит в середине обычного текста. */

	.al-prose ul, .al-prose ol { padding-left: 1.25em; }
	.al-prose li + li { margin-top: .4em; }
	.al-prose img { border-radius: var(--al-r); max-width: 100%; height: auto; }
	.al-prose a { color: var(--al-accent-600); }
	.al-prose table { display: block; overflow-x: auto; }

	/* --- Остатки Bootstrap в содержимом ----------------------------------
	   Описания русских разделов свёрстаны сеткой Bootstrap: текст в одной
	   колонке, фотография в другой. Сам Bootstrap из темы убран (он приходил
	   в чужом файле на 506 КБ), поэтому колонки складывались друг под друга
	   и снимок растягивался во всю ширину. Здесь минимальная замена. */
	.al-prose .row {
		display: grid;
		gap: var(--al-s-6);
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	}
	.al-prose .row.align-items-center { align-items: center; }
	.al-prose .col-md-12, .al-prose .col-12 { grid-column: 1 / -1; }
	.al-prose .row img { width: 100%; height: auto; border-radius: var(--al-r-lg); }
	/* Пустые обёртки из редактора добавляли лишний отступ в конце текста */
	.al-prose > div:empty, .al-prose .row > div:empty { display: none; }
}