/*
Theme Name:        Numkla
Description:       Тема для Numkla.
Version:           1.0.0
Requires at least: 7.1
Tested up to:      7.1
Requires PHP:      8.5
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Tags:              one-column, custom-menu, featured-images

Copyright 2026 Numkla
*/

/*
 * Слои каскада: правила из более позднего слоя побеждают раньше объявленные
 * независимо от специфичности — поэтому нет !important и «гонки селекторов».
 */
@layer reset, tokens, base, layout, components, pages, utilities;

/* ==========================================================================
   Шрифт Figtree 300–900 — один на весь сайт: и текст, и заголовки, и номера
   (переменный, хранится в теме: assets/fonts/, лицензия — assets/fonts/OFL.txt).
   Файл latin (~20 КБ) покрывает эстонские õ ä ö ü; latin-ext (~10 КБ) браузер
   скачивает только если на странице есть š, ž и подобные символы.
   ========================================================================== */
@font-face {
	font-family: "Figtree";
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url("assets/fonts/figtree-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Figtree";
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url("assets/fonts/figtree-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Сброс
   ========================================================================== */
@layer reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	html {
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
		/* height: auto ↔ px анимируются (раскрывающиеся блоки) */
		interpolate-size: allow-keywords;
	}

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

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

	img,
	svg,
	video,
	iframe {
		display: block;
		max-inline-size: 100%;
	}

	img,
	video {
		block-size: auto;
	}

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

	button {
		cursor: pointer;
	}

	fieldset {
		margin: 0;
		padding: 0;
		border: 0;
		min-inline-size: 0;
	}
}

/* ==========================================================================
   Переменные: цвета, шрифты, размеры
   ========================================================================== */
@layer tokens {
	:root {
		/* Палитра: розовый (как фавикон) + мятный + графит */
		--ink: #22252b;
		--ink-2: #3a3e46;
		--muted: #4f5560;
		--grey-bg: #f4f5f7;
		--line: #d5d8de;
		--white: #ffffff;
		--accent: #ff7385;      /* розовый: первый экран, форма, кнопки (текст на нём — только тёмный) */
		--accent-hover: #ff8c9b;
		--accent-dark: #e8506a; /* точка логотипа, подчёркивания */
		--accent-soft: #fff0f2; /* светлый розовый фон */
		--accent-ink: #4a1f27;  /* мелкий текст на розовом */
		--mint: #2ec4b6;        /* мятный: блок призыва, ссылка на соседнюю рубрику (текст на нём — тёмный) */
		--mint-hover: #26b0a3;
		--mint-soft: #e3f7f4;   /* подсветка строк при наведении */
		--teal: #0e7c72;        /* ссылки и фокус: мятный, затемнённый до читаемого на белом */
		--teal-deep: #0b5f58;
		--danger: #b3261e;

		--font-body: "Figtree", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
		/* Заголовки и номера — тот же шрифт, жирнее (см. h1–h4): второй файл шрифта не нужен */
		--font-display: var(--font-body);

		--container: 1200px;
		--gutter: clamp(16px, 3vw, 24px);
		--radius-xl: 32px;
		--radius-l: 24px;
		--radius-m: 16px;
		--section: clamp(56px, 7vw, 72px);
		--header-h: 76px;
		/* Высота админ-бара WordPress над закреплённой шапкой (0, если его нет или он не закреплён). */
		--admin-bar: 0px;

		/* Тема только светлая: браузер не перекрашивает поля форм и полосы прокрутки в тёмные. */
		color-scheme: light;
	}

	.admin-bar {
		--admin-bar: 32px;

		@media (width <= 782px) {
			--admin-bar: 46px;
		}

		/* Админ-бар WordPress на телефоне не закреплён */
		@media (width <= 600px) {
			--admin-bar: 0px;
		}
	}

	/*
	 * Цвета подсказок категорий (category.php): «осторожно» — красная, обычная — бирюзовая.
	 * Компоненты берут var(--v) (основной), var(--v-bg) (фон), var(--v-ink) (текст).
	 * Цвета различаются и по светлоте, не только по оттенку.
	 */
	.sc-v--scam {
		--v: #d93025;
		--v-bg: #ffe4e1;
		--v-ink: #7a1610;
	}

	.sc-v--safe {
		--v: #0e7c72;
		--v-bg: #d8f5f1;
		--v-ink: #0b4f49;
	}
}

/* ==========================================================================
   Базовые стили
   ========================================================================== */
@layer base {
	html {
		/* Якоря (#sc-hero-search, #sc-contact) не прячутся под закреплённой шапкой */
		scroll-padding-block-start: calc(var(--header-h) + var(--admin-bar) + 16px);

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

	body {
		display: flex;
		flex-direction: column;
		min-block-size: 100svh;
		background: var(--white);
		color: var(--ink);
		font-family: var(--font-body);
		font-size: 1rem;
		line-height: 1.55;
		-webkit-font-smoothing: antialiased;
	}

	h1, h2, h3, h4 {
		font-family: var(--font-display);
		font-weight: 800;
		line-height: 1.1;
		letter-spacing: -0.02em;
		/* Строки заголовка примерно равной длины, без «висячего» слова */
		text-wrap: balance;
	}

	p {
		/* Без одиночного слова в последней строке абзаца */
		text-wrap: pretty;
	}

	a {
		color: var(--teal);
		text-decoration: none;

		&:hover {
			color: var(--teal-deep);
		}
	}

	/* Видимая рамка фокуса только при работе с клавиатуры */
	:focus-visible {
		outline: 3px solid var(--teal);
		outline-offset: 3px;
	}

	::selection {
		background: var(--accent);
		color: var(--ink);
	}

	/* Админ-бар WordPress (для вошедших): отступ страницы под ним и скрытие при печати.
	   WordPress добавлял это инлайн-стилем — отключено в inc/cleanup.php. */
	html:has(> body.admin-bar) {
		margin-block-start: 32px;

		@media (width <= 782px) {
			margin-block-start: 46px;
		}
	}

	@media print {
		html:has(> body.admin-bar) {
			margin-block-start: 0;
		}

		#wpadminbar {
			display: none;
		}
	}

	/* Плавная смена страниц (переходы между документами). Без поддержки браузером — обычный переход. */
	@media (prefers-reduced-motion: no-preference) {
		@view-transition {
			navigation: auto;
		}
	}
}

/* ==========================================================================
   Разметка: контейнер, секции, шапка, подвал
   ========================================================================== */
@layer layout {
	.sc-container {
		inline-size: 100%;
		max-inline-size: calc(var(--container) + 2 * var(--gutter));
		margin-inline: auto;
		padding-inline: var(--gutter);
	}

	.sc-main {
		flex: 1;
		padding-block: 8px var(--section);
	}

	.sc-section {
		padding-block-start: var(--section);
	}

	/* ---------- Шапка ---------- */
	.sc-header {
		position: sticky;
		inset-block-start: var(--admin-bar);
		z-index: 100;
		background: rgb(255 255 255 / 0.92);
		backdrop-filter: saturate(1.4) blur(12px);
		/* При смене страниц шапка стоит на месте, меняется только содержимое */
		view-transition-name: sc-header;

		/* Тень появляется, когда страницу прокрутили (анимация по прокрутке, без JS) */
		@supports (animation-timeline: scroll()) {
			animation: sc-header-shadow linear both;
			animation-timeline: scroll();
			animation-range: 0 80px;
		}
	}

	@keyframes sc-header-shadow {
		to {
			box-shadow: 0 1px 0 var(--line), 0 10px 30px rgb(34 37 43 / 0.06);
		}
	}

	/* Логотип слева, меню (или кнопка меню на телефоне) справа */
	.sc-header__inner {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas: "brand . nav";
		align-items: center;
		gap: 12px 20px;
		min-block-size: var(--header-h);
		padding-block: 12px;
	}

	.sc-header__brand {
		grid-area: brand;
		font-size: inherit;
		line-height: 1;
	}

	/* ---------- Подвал ---------- */
	.sc-footer {
		margin-block-start: auto;
		border-block-start: 1px solid var(--line);
		color: var(--muted);
		font-size: 0.875rem;
	}

	/* Слева логотип и описание сайта, справа текст об ответственности, внизу копирайт */
	.sc-footer__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas:
			"about note"
			"copy copy";
		gap: 20px 40px;
		padding-block: 48px 32px;

		@media (width < 720px) {
			grid-template-columns: minmax(0, 1fr);
			grid-template-areas: "about" "note" "copy";
		}
	}

	.sc-footer__about {
		grid-area: about;
		display: grid;
		align-content: start;
		gap: 8px;
		max-inline-size: 60ch;
	}

	.sc-footer__note {
		grid-area: note;
		max-inline-size: 60ch;
	}

	/* Нижняя строка подвала: копирайт слева, ссылки на юридические страницы справа */
	.sc-footer__bottom {
		grid-area: copy;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 8px 24px;
		padding-block-start: 20px;
		border-block-start: 1px solid var(--line);
	}

	.sc-footer__legal {
		display: flex;
		flex-wrap: wrap;
		gap: 4px 20px;

		& a {
			color: var(--muted);
			text-decoration: underline;
			text-decoration-color: var(--line);
			text-underline-offset: 3px;

			&:hover {
				color: var(--ink);
			}
		}
	}
}

/* ==========================================================================
   Компоненты
   ========================================================================== */
@layer components {

	/* ---------- Иконки ---------- */
	.sc-icon {
		inline-size: 1.25em;
		block-size: 1.25em;
		flex: none;
		fill: none;
		stroke: currentColor;
		stroke-width: 2.2;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	/* ---------- Логотип ---------- */
	.sc-logo {
		color: var(--ink);
		font-family: var(--font-display);
		font-size: 28px;
		font-weight: 800;
		letter-spacing: -0.03em;
		line-height: 1;

		&:hover {
			color: var(--ink);
		}

		& span {
			color: var(--accent-dark);
		}
	}

	.sc-logo--small {
		font-size: 22px;
	}

	/* ---------- Меню: в строку на широком экране, popover на телефоне ---------- */
	.sc-nav-toggle {
		grid-area: nav;
		display: none;
		place-items: center;
		inline-size: 48px;
		block-size: 48px;
		border: 2px solid var(--ink);
		border-radius: 50%;
		background: var(--white);

		& .sc-icon {
			inline-size: 22px;
			block-size: 22px;
		}

		@media (width < 900px) {
			display: grid;
		}
	}

	.sc-nav {
		grid-area: nav;
	}

	.sc-nav__list {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
	}

	.sc-nav__link {
		display: block;
		padding: 10px 16px;
		border-radius: 999px;
		color: var(--ink);
		font-size: 15px;
		font-weight: 600;
		line-height: 1.2;

		&:hover {
			background: var(--grey-bg);
			color: var(--ink);
		}

		&[aria-current="page"] {
			background: var(--ink);
			color: var(--white);
		}
	}

	/* Широкий экран: popover показан всегда и стоит в строке шапки */
	@media (width >= 900px) {
		.sc-nav {
			display: block;
			position: static;
			inset: auto;
			inline-size: auto;
			block-size: auto;
			margin: 0;
			padding: 0;
			border: 0;
			background: none;
			overflow: visible;
		}
	}

	/* Телефон: выпадающая карточка под шапкой */
	@media (width < 900px) {
		.sc-nav {
			position: fixed;
			inset: calc(var(--admin-bar) + 72px) var(--gutter) auto auto;
			inline-size: min(280px, calc(100vw - 2 * var(--gutter)));
			margin: 0;
			padding: 12px;
			border: 2px solid var(--ink);
			border-radius: var(--radius-l);
			background: var(--white);
			box-shadow: 0 20px 50px rgb(34 37 43 / 0.18);

			@media (prefers-reduced-motion: no-preference) {
				transition: opacity 0.2s, translate 0.2s, overlay 0.2s allow-discrete, display 0.2s allow-discrete;
				opacity: 0;
				translate: 0 -8px;

				&:popover-open {
					opacity: 1;
					translate: 0 0;

					@starting-style {
						opacity: 0;
						translate: 0 -8px;
					}
				}
			}
		}

		.sc-nav__list {
			flex-direction: column;
		}

		.sc-nav__link {
			padding: 14px 16px;
			font-size: 17px;
		}
	}

	/* ---------- Поиск номера ---------- */
	.sc-search {
		position: relative;
		display: block;
	}

	.sc-search__form {
		display: flex;
		gap: 6px;
		background: var(--white);
		border: 2px solid var(--ink);
		border-radius: 999px;
		transition: box-shadow 0.15s;

		&:focus-within {
			box-shadow: 0 0 0 4px rgb(14 124 114 / 0.22);
		}
	}

	.sc-search__input {
		flex: 1 1 auto;
		min-inline-size: 0;
		border: 0;
		border-radius: 999px;
		background: transparent;
		outline: none;
		font-variant-numeric: tabular-nums;

		&::placeholder {
			color: #6b707c;
		}
	}

	.sc-search__button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		border: 0;
		border-radius: 999px;
		background: var(--ink);
		color: var(--white);
		font-weight: 700;

		&:hover {
			background: #33373f;
		}

		&:disabled {
			opacity: 0.6;
			cursor: progress;
		}
	}

	.sc-search--hero {
		inline-size: 100%;
		max-inline-size: 580px;

		& .sc-search__form {
			padding: 8px;
		}

		& .sc-search__input {
			padding: 14px 18px;
			font-size: 18px;
			font-weight: 500;
		}

		& .sc-search__button {
			padding: 14px 30px;
			font-size: 17px;
		}

		& .sc-search__result:not(:empty) {
			margin-block-start: 12px;
		}

		@media (width < 520px) {
			& .sc-search__form {
				flex-wrap: wrap;
				border-radius: var(--radius-l);
			}

			& .sc-search__input {
				flex-basis: 100%;
			}

			& .sc-search__button {
				flex: 1 1 100%;
			}
		}
	}

	/* Обёртка большой формы в блоках с justify-items: start — иначе форма сжимается до ширины текста */
	.sc-search-wrap {
		justify-self: stretch;
		inline-size: 100%;
	}

	.sc-search__msg {
		margin: 0;
		font-weight: 600;
	}

	.sc-search__msg--loading {
		color: var(--teal);
	}

	.sc-search__msg--error {
		color: var(--danger);
	}

	/* Капча хостинга в iframe */
	/* Высота — под форму капчи без подвала с IP (его убирает phone-search.js);
	   на телефоне текст переносится на больше строк — окно выше */
	.sc-captcha {
		position: relative;
		inline-size: 100%;
		block-size: 290px;

		@media (width < 520px) {
			block-size: 330px;
		}
		border: 2px solid var(--ink);
		border-radius: var(--radius-m);
		overflow: hidden;
		background: var(--white);

		& iframe {
			inline-size: 100%;
			block-size: 100%;
			border: 0;
		}
	}

	.sc-captcha__close {
		position: absolute;
		inset-block-start: 6px;
		inset-inline-end: 6px;
		z-index: 1;
		display: grid;
		place-items: center;
		inline-size: 36px;
		block-size: 36px;
		border: 0;
		border-radius: 50%;
		background: var(--grey-bg);
		color: var(--ink);
		font-size: 22px;
		line-height: 1;
	}

	/* ---------- Заголовки и текст ---------- */
	.sc-h2 {
		font-size: clamp(30px, 4vw, 40px);
		letter-spacing: -0.03em;
	}

	.sc-h2--sm {
		font-size: clamp(26px, 3vw, 34px);
	}

	.sc-h2--xs {
		font-size: clamp(22px, 2.6vw, 30px);
	}


	.sc-muted {
		color: var(--muted);
	}

	.sc-small {
		font-size: 0.875rem;
	}

	.sc-link-strong {
		font-weight: 700;
	}

	/* ---------- Кнопки ---------- */
	.sc-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		min-block-size: 52px;
		padding: 14px 26px;
		border: 0;
		border-radius: 999px;
		font-size: 17px;
		font-weight: 800;
		line-height: 1.1;
		text-align: center;
		transition: background-color 0.15s, color 0.15s;
	}

	.sc-btn--accent {
		background: var(--accent);
		color: var(--ink);

		&:hover {
			background: var(--accent-hover);
			color: var(--ink);
		}
	}

	.sc-btn--outlined {
		border: 2px solid var(--ink);
	}

	.sc-btn--dark {
		background: var(--ink);
		color: var(--white);

		&:hover {
			background: #33373f;
			color: var(--white);
		}
	}

	.sc-btn--ghost {
		border: 2px solid var(--ink);
		background: var(--white);
		color: var(--ink);

		&:hover {
			background: var(--grey-bg);
		}
	}

	.sc-btn--block {
		inline-size: 100%;
	}

	/* Звёздочка обязательного поля (форма «Kontakt») */
	.sc-required {
		color: var(--danger);
	}

	/* ---------- Серая карточка, текст страниц ---------- */
	.sc-card-grey {
		padding: clamp(22px, 3vw, 28px);
		border-radius: 28px;
		background: var(--grey-bg);
	}

	.sc-prose {
		max-inline-size: 72ch;
		font-size: 1.0625rem;
		line-height: 1.7;

		& > * + * {
			margin-block-start: 1em;
		}

		/* Заголовки всегда графитовые, даже если текст блока серый */
		& :is(h2, h3, h4) {
			margin-block-start: 1.5em;
			color: var(--ink);
		}

		& h2 {
			font-size: 1.6em;
		}

		& h3 {
			font-size: 1.3em;
		}

		& a {
			text-decoration: underline;
			text-underline-offset: 3px;
		}

		& strong {
			color: var(--ink);
		}

		& :is(ul, ol):not([class]) {
			padding-inline-start: 1.25em;
		}

		& > :first-child {
			margin-block-start: 0;
		}
	}

	.sc-edit-link {
		margin-block-start: 24px;
		font-size: 0.875rem;
	}

	/* ---------- Хлебные крошки (Yoast SEO) ---------- */
	.sc-breadcrumbs {
		margin-block: 8px 16px;
		color: var(--muted);
		font-size: 0.875rem;

		& a {
			color: var(--muted);
			text-decoration: underline;
			text-decoration-color: var(--line);
			text-underline-offset: 3px;

			&:hover {
				color: var(--ink);
			}
		}
	}

	/* ---------- Заголовок страницы ---------- */
	.sc-page-header {
		display: grid;
		gap: 10px;
		margin-block: 16px 32px;
	}

	.sc-page-title {
		font-size: clamp(36px, 6vw, 56px);
		letter-spacing: -0.04em;
	}

	.sc-page-header__lead {
		max-inline-size: 65ch;
		color: var(--muted);
		font-size: 1.0625rem;
	}

	/* ---------- Карточки номеров (категории, лента) ---------- */
	.sc-cards {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
		gap: 14px;
	}

	.sc-card__link {
		display: grid;
		gap: 10px;
		block-size: 100%;
		padding: 20px 22px;
		border: 2px solid var(--ink);
		border-radius: var(--radius-l);
		color: var(--ink);
		transition: background-color 0.15s, translate 0.15s;

		&:hover {
			background: var(--accent);
			color: var(--ink);

			@media (prefers-reduced-motion: no-preference) {
				translate: 0 -2px;
			}
		}
	}

	.sc-card__number {
		font-family: var(--font-display);
		font-size: 28px;
		font-weight: 800;
		letter-spacing: -0.02em;
		line-height: 1;
		font-variant-numeric: tabular-nums;
	}

	.sc-card__meta {
		display: flex;
		flex-wrap: wrap;
		gap: 4px 12px;
		color: var(--muted);
		font-size: 14px;
		font-weight: 600;
	}

	/* ---------- Постраничная навигация ---------- */
	.sc-pagination {
		margin-block-start: 40px;

		& .nav-links {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			gap: 8px;
		}

		& .page-numbers {
			display: inline-grid;
			place-items: center;
			min-inline-size: 48px;
			min-block-size: 48px;
			padding: 0 16px;
			border: 2px solid var(--ink);
			border-radius: 999px;
			color: var(--ink);
			font-weight: 700;

			&:is(a):hover {
				background: var(--accent);
			}

			&.current {
				background: var(--ink);
				color: var(--white);
			}

			&.dots {
				border-color: transparent;
			}
		}
	}

	/* ---------- Пустой список ---------- */
	.sc-empty {
		display: grid;
		gap: 12px;
		padding: 40px;
		border-radius: var(--radius-xl);
		background: var(--grey-bg);
		text-align: center;
	}

	/* ---------- Выравнивание и подписи (классический редактор) ---------- */
	.alignleft {
		float: inline-start;
		margin: 0 1.5rem 1rem 0;
	}

	.alignright {
		float: inline-end;
		margin: 0 0 1rem 1.5rem;
	}

	.aligncenter {
		display: block;
		margin-inline: auto;
	}

	.wp-caption {
		max-inline-size: 100%;
	}

	.wp-caption-text {
		color: var(--muted);
		font-size: 0.875rem;
		text-align: center;
	}
}

/* ==========================================================================
   Страницы
   ========================================================================== */
@layer pages {

	/* ---------- Главная: первый экран ---------- */
	.sc-hero {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 40px;
		margin-block-start: 8px;
		padding: clamp(32px, 6vw, 64px) clamp(22px, 5vw, 48px);
		border-radius: var(--radius-xl);
		background: var(--accent);
	}

	.sc-hero__text {
		flex: 999 1 520px;
		min-inline-size: 0;
		display: grid;
		gap: 22px;
		justify-items: start;
	}

	.sc-hero__title {
		font-size: clamp(44px, 7vw, 72px);
		line-height: 0.98;
		letter-spacing: -0.045em;
	}

	.sc-hero__lead {
		max-inline-size: 52ch;
		color: var(--ink); /* на розовом --ink-2 не дотягивает до контраста 4,5:1 */
		font-size: 19px;
	}

	/* Карточка базы справа от поиска: белая, с графитовой рамкой, как карточки категорий.
	   На узком экране переносится под поиск и тянется на всю ширину. */
	.sc-hero__stat {
		flex: 1 1 260px;
		max-inline-size: 340px;
		display: grid;
		gap: 10px;
		margin-inline-start: auto;
		padding: clamp(22px, 3vw, 30px);
		border: 2px solid var(--ink);
		border-radius: var(--radius-l);
		background: var(--white);

		/* На /koodid/ карточка стоит в сером блоке категорий (он тянет детей по высоте) — по центру */
		.sc-cat-hero > & {
			align-self: center;
		}

		@media (width < 600px) {
			max-inline-size: none;
		}
	}

	.sc-hero__stat-label {
		color: var(--muted);
		font-size: 13px;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}

	.sc-hero__stat-value {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 4px 10px;
		line-height: 1;

		& strong {
			font-size: clamp(48px, 6vw, 64px);
			font-weight: 800;
			letter-spacing: -0.03em;
			font-variant-numeric: tabular-nums;
		}

		& span {
			font-size: 18px;
			font-weight: 700;
		}
	}

	/* Прирост за неделю: число мятным — рост базы, а не тревога */
	.sc-hero__stat-new {
		color: var(--muted);
		font-size: 14px;
		line-height: 1.45;

		& strong {
			color: var(--teal);
			font-variant-numeric: tabular-nums;
		}
	}

	.sc-hero__stat-link {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		margin-block-start: 6px;
		padding-block-start: 14px;
		border-block-start: 1px solid var(--line);
		justify-self: stretch;
		color: var(--ink);
		font-size: 15px;
		font-weight: 700;
		text-decoration: none;

		& .sc-icon {
			transition: translate 0.15s;
		}

		&:hover,
		&:focus-visible {
			color: var(--teal);
		}

		&:hover .sc-icon {
			translate: 4px 0;
		}
	}

	/* ---------- Главная: номера и шаги ---------- */
	.sc-split {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 32px;
	}

	.sc-split__main,
	.sc-split__side {
		flex: 1 1 420px;
		min-inline-size: 0;
	}

	.sc-row-head {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: 12px;
		margin-block-end: 18px;
	}

	.sc-pills {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		margin-block-end: 18px;
	}

	.sc-pill {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		min-block-size: 52px;
		padding: 10px 18px;
		border: 2px solid var(--ink);
		border-radius: 999px;
		color: var(--ink);
		font-size: 17px;
		font-weight: 700;
		font-variant-numeric: tabular-nums;
		transition: background-color 0.15s;

		&:hover {
			background: var(--accent);
			color: var(--ink);
		}
	}

	.sc-steps {
		display: grid;
		gap: 16px;
	}

	.sc-steps__list {
		display: grid;
		gap: 16px;
		counter-reset: step;

		& li {
			display: grid;
			grid-template-columns: 40px minmax(0, 1fr);
			align-items: center;
			gap: 16px;
			counter-increment: step;

			&::before {
				content: counter(step);
				display: grid;
				place-items: center;
				inline-size: 40px;
				block-size: 40px;
				border-radius: 50%;
				background: var(--ink);
				color: var(--white);
				font-weight: 800;
			}

			&:last-child::before {
				background: var(--accent);
				color: var(--ink);
			}
		}
	}

	/* ---------- Главная: описание сайта в две колонки ---------- */
	.sc-about-site {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		gap: 32px;

		@media (width >= 900px) {
			grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
			gap: 56px;
		}
	}

	/* Слева: вступление — первый абзац крупно, второй обычным текстом */
	.sc-about-site__intro {
		display: grid;
		gap: 20px;
		padding-block-start: 8px;
		color: var(--muted);
		font-size: 17px;
		line-height: 1.7;
	}

	.sc-about-site__lead {
		color: var(--ink);
		font-size: clamp(20px, 2.2vw, 24px);
		font-weight: 600;
		line-height: 1.45;
		letter-spacing: -0.01em;
	}

	/* Справа: карточка «Kuidas Numkla töötab» с шагами в кружках */
	.sc-about-site__how {
		display: grid;
		gap: 20px;
		padding: clamp(24px, 3vw, 36px);
		border-radius: 28px;
		background: var(--mint-soft);
	}

	.sc-about-site__title {
		font-size: clamp(22px, 2.4vw, 26px);
	}

	.sc-about-site__steps {
		display: grid;
		gap: 16px;
		counter-reset: about-step;

		/* Кружок с номером по вертикали — по центру текста шага */
		& li {
			display: grid;
			grid-template-columns: 36px minmax(0, 1fr);
			align-items: center;
			gap: 14px;
			counter-increment: about-step;
			font-size: 16px;
			line-height: 1.5;

			&::before {
				content: counter(about-step);
				display: grid;
				place-items: center;
				inline-size: 36px;
				block-size: 36px;
				border-radius: 50%;
				background: var(--teal);
				color: var(--white);
				font-weight: 800;
			}
		}
	}

	.sc-about-site__note {
		padding-block-start: 18px;
		border-block-start: 1px solid rgb(14 124 114 / 0.2);
		color: #2c5f5a;
		font-size: 15px;
		line-height: 1.6;
	}

	/* ---------- Главная: призыв ---------- */
	.sc-cta {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 24px;
		padding: clamp(32px, 5vw, 48px);
		border-radius: var(--radius-xl);
		background: var(--mint);
		color: var(--ink);

		/* Розовая кнопка на мятном — с тёмной обводкой, чтобы два ярких цвета не сливались */
		& .sc-btn--accent {
			border: 2px solid var(--ink);
		}
	}

	.sc-cta__text {
		display: grid;
		gap: 10px;
		max-inline-size: 620px;

		& p {
			color: var(--ink);
			font-size: 17px;
		}
	}

	/* ---------- Страница номера: первый экран ---------- */
	.sc-num-hero {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 28px;
		padding: clamp(26px, 4vw, 40px);
		border-radius: var(--radius-xl);
		background: var(--grey-bg);
	}

	.sc-num-hero__info {
		display: grid;
		justify-items: start;
		gap: 12px;
		min-inline-size: 0;
	}

	.sc-num-hero__number {
		font-size: clamp(52px, 9vw, 88px);
		line-height: 0.95;
		letter-spacing: -0.03em;
		font-variant-numeric: tabular-nums;
	}

	/* Пробел между группами цифр только визуальный: в тексте H1 номер без пробела */
	.sc-num-hero__gap {
		margin-inline-start: 0.22em;
	}

	.sc-num-hero__meta {
		display: flex;
		flex-wrap: wrap;
		gap: 4px 0;
		color: var(--muted);
		font-size: 16px;

		& > * + *::before {
			content: "·";
			margin-inline: 8px;
			color: var(--line);
		}

		/* Телефон: факты сеткой в две колонки — без точек-разделителей в начале перенесённых строк */
		@media (width < 600px) {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 4px 16px;
			font-size: 15px;

			& > * + *::before {
				content: none;
			}
		}
	}

	/* «Info numbri kohta» справа от номера, отделена линией; на узком экране — под данными, линия сверху */
	.sc-num-hero__about {
		flex: 1 1 320px;
		max-inline-size: 480px;
		display: grid;
		gap: 10px;
		padding-inline-start: 28px;
		border-inline-start: 1px solid var(--line);
		color: var(--muted);
		font-size: 15px;
		line-height: 1.6;

		& strong {
			color: var(--ink);
		}

		@media (width < 900px) {
			max-inline-size: none;
			padding-inline-start: 0;
			padding-block-start: 20px;
			border-inline-start: 0;
			border-block-start: 1px solid var(--line);
		}
	}

	.sc-num-hero__about-title {
		color: var(--ink);
		font-family: var(--font-body);
		font-size: 17px;
		font-weight: 800;
		letter-spacing: 0;
	}

	/* Данные номера: подпись над значением, отделены линией от строки фактов */
	.sc-num-hero__facts {
		display: flex;
		flex-wrap: wrap;
		gap: 12px 32px;
		justify-self: stretch;
		margin-block-start: 6px;
		padding-block-start: 16px;
		border-block-start: 1px solid var(--line);

		& div {
			display: grid;
			align-content: start;
			gap: 2px;
		}

		& dt {
			color: var(--muted);
			font-size: 13px;
		}

		& dd {
			font-size: 15px;
			font-weight: 700;
			font-variant-numeric: tabular-nums;
		}

		@media (width < 600px) {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 12px 16px;
		}
	}

	/* ---------- Страница номера: просмотры за 32 дня (template-parts/number-interest.php) ---------- */
	.sc-interest {
		margin-block-start: 20px;
		padding: 20px 24px;
		border-radius: 22px;
		background: var(--grey-bg);
	}

	.sc-interest__title {
		font-size: 20px;
		letter-spacing: -0.01em;
	}

	.sc-interest__sub {
		margin-block-start: 2px;
		color: var(--muted);
		font-size: 14px;
	}

	/* 32 столбика в ряд; над столбиком — число просмотров вертикально (снизу вверх) */
	.sc-interest__chart {
		--val-space: 37px; /* место над самым высоким столбиком под его число и отступ 5px */

		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		grid-template-rows: 150px;
		align-items: end;
		gap: 3px;
		margin-block-start: 16px;

		@media (width < 520px) {
			--val-space: 31px;
			gap: 2px;
		}
	}

	.sc-interest__col {
		--bar: color-mix(in srgb, var(--ink) 28%, transparent);

		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		block-size: 100%;
		min-inline-size: 0;

		&.is-recent {
			--bar: var(--teal);
		}

		&.is-peak {
			--bar: var(--accent-dark);
		}

		&.is-zero {
			--bar: var(--line);
		}
	}

	.sc-interest__val {
		/* Отступ до столбика — физический margin-bottom: у вертикального текста (vertical-rl)
		   «block-end» — это левый край, а не низ */
		margin-bottom: 5px;
		color: var(--muted);
		font-size: 11px;
		font-weight: 700;
		font-variant-numeric: tabular-nums;
		line-height: 1;
		white-space: nowrap;
		writing-mode: vertical-rl;
		rotate: 180deg;

		.is-recent > & {
			color: var(--teal);
		}

		.is-peak > & {
			color: var(--accent-dark);
		}

		@media (width < 520px) {
			font-size: 9px;
		}
	}

	.sc-interest__bar {
		display: block;
		inline-size: 100%;
		block-size: calc((100% - var(--val-space)) * var(--h, 0));
		min-block-size: 2px; /* день без просмотров — тонкая черта */
		border-radius: 4px 4px 0 0;
		background: var(--bar);
	}

	.sc-interest__axis {
		display: flex;
		justify-content: space-between;
		margin-block-start: 6px;
		color: var(--muted);
		font-size: 12px;
		font-variant-numeric: tabular-nums;
	}

	/* «Keskmine: 62,3 / päev   Kokku: 1 995   Trend (7 päeva): +6%» */
	.sc-interest__meta {
		display: flex;
		flex-wrap: wrap;
		gap: 4px 20px;
		margin-block-start: 12px;
		color: var(--muted);
		font-size: 14px;

		& strong {
			color: var(--ink);
		}

		/* Тенденция: рост — розовым (с номера сейчас звонят чаще), спад — мятным */
		& strong.is-up {
			color: var(--accent-dark);
		}

		& strong.is-down {
			color: var(--teal);
		}
	}

	.sc-interest__empty {
		margin-block-start: 12px;
		color: var(--muted);
	}

	/* ---------- Страница номера: текст и варианты записи ---------- */
	.sc-about {
		display: grid;
		gap: 24px;
	}

	.sc-about__neighbors {
		display: grid;
		gap: 12px;
	}

	.sc-about__subtitle {
		font-family: var(--font-body);
		font-size: 16px;
		font-weight: 700;
		letter-spacing: 0;
	}

	/* Компактные «пилюли» (соседние номера) */
	.sc-pills--small {
		gap: 8px;
		margin: 0;

		& .sc-pill {
			min-block-size: 38px;
			padding: 6px 12px;
			font-size: 14px;
		}

		/* ПК: все 10 соседних номеров (NUMKLA_NEIGHBORS) в один ряд равной ширины */
		@media (width >= 1100px) {
			display: grid;
			grid-template-columns: repeat(10, minmax(0, 1fr));

			& .sc-pill {
				justify-content: center;
				inline-size: 100%;
				padding-inline: 8px;
			}
		}
	}

	/* Варианты записи номера: свёрнуты, раскрываются по клику (текст индексируется) */
	.sc-formats {
		border: 1.5px solid var(--line);
		border-radius: var(--radius-m);

		& summary {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 12px;
			padding: 14px 18px;
			font-weight: 700;
			list-style: none;
			cursor: pointer;

			&::-webkit-details-marker {
				display: none;
			}

			&::after {
				content: "+";
				flex: none;
				font-size: 22px;
				font-weight: 500;
				line-height: 1;
				transition: rotate 0.2s;
			}
		}

		&[open] summary::after {
			rotate: 45deg;
		}

		& .sc-chips {
			padding: 0 18px 18px;
		}
	}

	.sc-chips {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		font-size: 14px;
		font-variant-numeric: tabular-nums;

		& li {
			padding: 7px 14px;
			border: 1.5px solid var(--line);
			border-radius: 999px;
		}
	}

	.sc-notice {
		padding: 20px 24px;
		border-radius: 20px;
		background: var(--grey-bg);
		color: var(--muted);
		font-size: 13px;
		line-height: 1.6;
	}

	/* ---------- Страница номера: подмена номера, советы, владелец (template-parts/number-safety.php) ---------- */
	.sc-safety {
		display: grid;
		gap: 16px;
	}

	/* Спокойный розовый, не красный: это общее предупреждение, а не оценка номера */
	.sc-safety__warning {
		display: grid;
		gap: 8px;
		padding: clamp(20px, 3vw, 28px);
		border-inline-start: 6px solid var(--accent);
		border-radius: var(--radius-l);
		background: var(--accent-soft);
		color: var(--accent-ink);
		font-size: 16px;
	}

	.sc-safety__title {
		color: var(--ink);
		font-size: clamp(20px, 2.4vw, 24px);
	}

	/* Даты всплесков: белые плашки на розовом */
	.sc-safety__spikes {
		display: grid;
		gap: 10px;
		margin-block-start: 6px;
	}

	.sc-safety__spikes-title {
		color: var(--ink);
		font-family: var(--font-body);
		font-size: 15px;
		font-weight: 800;
		letter-spacing: 0;
	}

	.sc-safety__dates {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;

		& li {
			display: inline-flex;
			align-items: baseline;
			gap: 8px;
			padding: 6px 14px;
			border-radius: 999px;
			background: var(--white);
			font-size: 14px;
		}

		& time {
			color: var(--ink);
			font-weight: 800;
		}
	}

	.sc-safety__spikes-note {
		font-size: 13px;
		line-height: 1.5;
	}

	.sc-safety__grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
		align-items: start;
		gap: 16px;
	}

	.sc-safety__tips {
		display: grid;
		gap: 14px;
	}

	.sc-safety__subtitle {
		font-family: var(--font-body);
		font-size: 17px;
		font-weight: 800;
		letter-spacing: 0;
	}

	.sc-safety__list {
		display: grid;
		gap: 10px;
		font-size: 15px;
		line-height: 1.5;

		& li {
			position: relative;
			padding-inline-start: 22px;

			&::before {
				content: "";
				position: absolute;
				inset-block-start: 0.55em;
				inset-inline-start: 4px;
				inline-size: 8px;
				block-size: 8px;
				border-radius: 50%;
				background: var(--teal);
			}
		}
	}

	/* Частые схемы: общие примеры, а не метка номера */
	.sc-safety__schemes {
		display: grid;
		gap: 8px;
	}

	.sc-safety__note {
		color: var(--muted);
		font-size: 14px;
	}

	.sc-schemes {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
		gap: 16px;
		margin-block-start: 8px;
	}

	.sc-scheme {
		display: grid;
		align-content: start;
		gap: 10px;
		font-size: 15px;
		line-height: 1.5;
	}

	.sc-scheme__title {
		font-family: var(--font-body);
		font-size: 17px;
		font-weight: 800;
		letter-spacing: 0;
	}

	.sc-scheme__label {
		color: var(--muted);
		font-size: 12px;
		font-weight: 800;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}

	.sc-scheme__action {
		margin-block-start: 4px;
		padding-block-start: 12px;
		border-block-start: 1px solid var(--line);
	}

	.sc-safety__owner {
		font-size: 15px;
		line-height: 1.5;

		& .sc-safety__subtitle {
			margin-block-start: 6px;
			padding-block-start: 16px;
			border-block-start: 1px solid var(--line);
		}
	}

	/* ---------- Категория (category.php) ---------- */
	.sc-cat-hero {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		gap: 24px;
		margin-block-start: 8px;
		padding: clamp(24px, 4vw, 40px);
		border-radius: var(--radius-xl);
		background: var(--grey-bg);
	}

	.sc-cat-hero__text {
		flex: 999 1 480px;
		min-inline-size: 0;
		display: grid;
		align-content: start;
		justify-items: start;
		gap: 16px;

		& .sc-search {
			margin-block-start: 4px;
		}
	}

	.sc-cat-stats {
		display: flex;
		flex-wrap: wrap;
		gap: 10px 28px;
		margin-block-start: 8px;

		& div {
			display: flex;
			flex-direction: column-reverse;
		}

		& dd {
			font-size: clamp(26px, 3.4vw, 34px);
			font-weight: 800;
			letter-spacing: -0.02em;
			line-height: 1.05;
			font-variant-numeric: tabular-nums;
		}

		& dt {
			color: var(--muted);
			font-size: 13px;
			font-weight: 600;
		}
	}

	.sc-cat-card {
		flex: 1 1 300px;
		min-inline-size: 0;
		display: grid;
		align-content: start;
		gap: 14px;
		padding: 24px;
		border: 2px solid var(--ink);
		border-radius: var(--radius-l);
		background: var(--white);
	}

	.sc-cat-card__title {
		font-size: 22px;
	}

	.sc-cat-card__label {
		color: var(--muted);
		font-size: 13px;
		font-weight: 600;
	}

	/* Код страницы /koodid/55/ — крупно на розовой плашке */
	.sc-cat-card__code {
		justify-self: start;
		margin-block-start: -6px;
		padding: 4px 18px;
		border-radius: 14px;
		background: var(--accent);
		font-size: 34px;
		font-weight: 800;
		line-height: 1.2;
		font-variant-numeric: tabular-nums;
	}

	/* ---------- Все коды (/koodid/, template-parts/codes-index.php) ---------- */
	.sc-codes__meta {
		color: var(--muted);
		font-size: 15px;
		font-variant-numeric: tabular-nums;
	}

	.sc-codes__grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
		gap: 12px;
	}

	/* Карточка кода: белая с графитовой рамкой, при наведении розовая (как пилюли номеров) */
	.sc-code {
		block-size: 100%;
		display: grid;
		align-content: start;
		gap: 4px;
		padding: 16px 18px;
		border: 2px solid var(--ink);
		border-radius: var(--radius-m);
		background: var(--white);
		color: var(--ink);
		transition: background-color 0.15s;

		&:is(a):hover {
			background: var(--accent);
			color: var(--ink);
		}

		/* Код без номеров: без ссылки, приглушён */
		&.is-empty {
			border-color: var(--line);
			color: var(--muted);
		}
	}

	.sc-code__num {
		font-size: 32px;
		font-weight: 800;
		letter-spacing: -0.02em;
		line-height: 1.1;
		font-variant-numeric: tabular-nums;
	}

	.sc-code__sub {
		font-size: 14px;
		font-weight: 700;
	}

	.sc-code__count {
		color: var(--muted);
		font-size: 13px;
		font-variant-numeric: tabular-nums;

		.sc-code:is(a):hover & {
			color: var(--ink);
		}
	}

	.sc-codes__note {
		margin-block-start: 14px;
		color: var(--muted);
		font-size: 14px;
		line-height: 1.5;
	}

	.sc-cat-card__facts {
		display: grid;
		gap: 0;
		border-block-start: 1px solid var(--line);

		& div {
			display: flex;
			justify-content: space-between;
			gap: 12px;
			padding-block: 10px;
			border-block-end: 1px solid var(--line);
		}

		& dt {
			color: var(--muted);
			font-size: 14px;
		}

		& dd {
			font-weight: 700;
			font-variant-numeric: tabular-nums;
			text-align: end;
		}
	}

	/* Заголовок списка и вкладки порядка */
	.sc-cat-toolbar {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		margin-block-end: 20px;
	}

	/* Вкладки всегда в одну строку; если не помещаются — прокручиваются пальцем */
	.sc-tabs {
		display: inline-flex;
		gap: 4px;
		max-inline-size: 100%;
		padding: 4px;
		border-radius: 999px;
		background: var(--grey-bg);
		overflow-x: auto;
		scrollbar-width: none;
	}

	.sc-tabs__link {
		flex: none;
		padding: 10px 18px;
		border-radius: 999px;
		color: var(--ink);
		font-size: 15px;
		font-weight: 700;
		white-space: nowrap;

		@media (width < 520px) {
			padding: 10px 13px;
			font-size: 14px;
		}

		&:hover {
			background: var(--white);
			color: var(--ink);
		}

		&[aria-current] {
			background: var(--ink);
			color: var(--white);
		}

		/* Вкладка в разработке: серая и некликабельная */
		&.is-disabled {
			display: inline-flex;
			align-items: center;
			gap: 6px;
			color: #9a9fab;
			cursor: not-allowed;

			&:hover {
				background: none;
				color: #9a9fab;
			}
		}
	}

	.sc-tabs__soon {
		padding: 2px 7px;
		border-radius: 999px;
		background: #e6e8ec;
		color: #7a7f8c;
		font-size: 10px;
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
	}

	/* Список номеров строками */
	.sc-rows {
		border: 2px solid var(--ink);
		border-radius: var(--radius-l);
		overflow: hidden;
	}

	.sc-row {
		border-block-end: 1px solid var(--line);

		/* Длинный список: строки ниже экрана браузер рисует, только когда до них дошла прокрутка */
		content-visibility: auto;
		contain-intrinsic-size: auto 76px;
	}

	.sc-row__link {
		display: grid;
		grid-template-columns: minmax(150px, 1.1fr) minmax(130px, 2.4fr) auto;
		grid-template-areas: "number added cta";
		align-items: center;
		gap: 8px 20px;
		padding: 18px 24px;
		color: var(--ink);
		transition: background-color 0.15s;

		&:hover {
			background: var(--mint-soft);
			color: var(--ink);

			& .sc-row__cta {
				background: var(--accent);
			}
		}

		@media (width < 820px) {
			grid-template-columns: minmax(0, 1fr) auto;
			grid-template-areas:
				"number cta"
				"added cta";
			padding: 16px 18px;
		}
	}

	.sc-row__number {
		grid-area: number;
		font-size: 22px;
		font-weight: 800;
		letter-spacing: -0.01em;
		font-variant-numeric: tabular-nums;
	}

	.sc-row__added {
		grid-area: added;
		color: var(--muted);
		font-size: 14px;
	}

	.sc-row__cta {
		grid-area: cta;
		display: inline-flex;
		align-items: center;
		gap: 6px;
		justify-self: end;
		padding: 8px 14px;
		border: 2px solid var(--ink);
		border-radius: 999px;
		font-size: 14px;
		font-weight: 700;
		white-space: nowrap;
		transition: background-color 0.15s;

		& .sc-icon {
			inline-size: 1em;
			block-size: 1em;
		}
	}

	.sc-rows__missing {
		display: flex;
		flex-wrap: wrap;
		gap: 4px 10px;
		padding: 18px 24px;
		background: var(--grey-bg);
		color: var(--muted);

		& strong {
			color: var(--ink);
		}

		& a {
			font-weight: 700;
		}
	}

	/* Подсказки и ссылка на вторую категорию */
	.sc-cat-tips {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
		gap: 14px;
	}

	.sc-cat-tip {
		display: grid;
		align-content: start;
		gap: 10px;
		padding: 24px;
		border-radius: var(--radius-l);
		background: var(--v-bg, var(--grey-bg));
		color: var(--v-ink, var(--ink));
		font-size: 15px;
	}

	.sc-cat-tip__title {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 22px;
		font-weight: 800;
		line-height: 1.15;
	}

	.sc-cat-tip--link {
		background: var(--mint);
		color: var(--ink);
		transition: background-color 0.15s;

		&:hover {
			background: var(--mint-hover);
			color: var(--ink);
		}

		& .sc-icon {
			transition: translate 0.15s;
		}

		&:hover .sc-icon {
			translate: 4px 0;
		}
	}

	.sc-cat-tip__eyebrow {
		color: var(--ink);
		font-size: 13px;
		font-weight: 800;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	.sc-cat-faq {
		max-inline-size: 820px;

		& .sc-h2 {
			margin-block-end: 8px;
		}
	}

	/* ---------- Kontakt (page-kontakt.php) ---------- */
	.sc-eyebrow {
		color: var(--teal);
		font-size: 13px;
		font-weight: 800;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	.sc-contact {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		gap: 32px;

		@media (width >= 1000px) {
			grid-template-columns: minmax(0, 1fr) 360px;
		}
	}

	.sc-contact__main,
	.sc-contact__aside {
		display: grid;
		gap: 20px;
		min-inline-size: 0;
	}

	.sc-contact__form {
		display: grid;
		gap: 20px;
	}

	/* Темы: карточки-радиокнопки */
	.sc-topics {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
		gap: 12px;
	}

	.sc-topics__legend {
		margin-block-end: 12px;
		font-size: 14px;
		font-weight: 700;
	}

	.sc-topic {
		position: relative;
		display: grid;
		align-content: start;
		gap: 8px;
		padding: 20px;
		border: 2px solid var(--line);
		border-radius: var(--radius-l);
		background: var(--white);
		cursor: pointer;
		transition: border-color 0.15s, background-color 0.15s;

		/* Радиокнопка невидима, но остаётся в форме: фокус и выбор с клавиатуры работают */
		& input {
			position: absolute;
			inset: 0;
			margin: 0;
			opacity: 0;
			cursor: pointer;
		}

		&:hover {
			border-color: var(--ink);
		}

		&:has(:checked) {
			border-color: var(--ink);
			background: var(--accent);
		}

		&:has(:focus-visible) {
			outline: 3px solid var(--teal);
			outline-offset: 3px;
		}
	}

	.sc-topic__icon {
		display: grid;
		place-items: center;
		inline-size: 40px;
		block-size: 40px;
		border-radius: 12px;
		background: var(--grey-bg);

		.sc-topic:has(:checked) & {
			background: var(--white);
		}
	}

	.sc-topic__name {
		font-size: 17px;
		line-height: 1.25;
	}

	.sc-topic__hint {
		color: var(--muted);
		font-size: 14px;
		line-height: 1.4;

		.sc-topic:has(:checked) & {
			color: var(--ink);
		}
	}

	/* Карточка формы */
	.sc-contact__card {
		display: grid;
		gap: 20px;
		padding: clamp(22px, 3vw, 32px);
		border-radius: var(--radius-xl);
		background: var(--grey-bg);
	}

	.sc-contact__title {
		font-size: clamp(22px, 2.6vw, 28px);

		/* Виден заголовок выбранной темы; без выбора — «Üldine küsimus» */
		& span {
			display: none;
		}
	}

	.sc-contact__form:not(:has([name="topic"]:checked)) [data-topic="general"],
	.sc-contact__form:has([value="remove"]:checked) [data-topic="remove"],
	.sc-contact__form:has([value="general"]:checked) [data-topic="general"] {
		display: inline;
	}

	.sc-contact__errors {
		padding: 14px 18px;
		border: 2px solid var(--danger);
		border-radius: var(--radius-m);
		background: #fdecea;
		color: var(--danger);
		font-weight: 600;

		& ul {
			margin: 0;
			padding-inline-start: 1.1em;
		}
	}

	.sc-contact__fields {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;

		@media (width < 640px) {
			grid-template-columns: minmax(0, 1fr);
		}
	}

	.sc-field {
		display: grid;
		gap: 8px;
		margin: 0;

		& label {
			font-size: 14px;
			font-weight: 700;
		}

		& :is(input, textarea) {
			inline-size: 100%;
			padding: 14px 16px;
			border: 2px solid var(--line);
			border-radius: var(--radius-m);
			background: var(--white);

			&::placeholder {
				color: #6b707c;
			}

			&:focus-visible {
				border-color: var(--ink);
				outline: none;
				box-shadow: 0 0 0 4px rgb(14 124 114 / 0.2);
			}

			&:user-invalid {
				border-color: var(--danger);
			}
		}

		& textarea {
			field-sizing: content;
			min-block-size: calc(6lh + 28px);
			max-block-size: 60svh;
			resize: vertical;
		}
	}

	.sc-field--wide {
		grid-column: 1 / -1;
	}

	/* Поле номера — только для темы «Eemalda number» */
	.sc-contact__number {
		display: none;

		.sc-contact__form:has([value="remove"]:checked) & {
			display: grid;
		}
	}

	.sc-contact__trap {
		position: absolute;
		inset-inline-start: -10000px;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
	}

	.sc-contact__submit {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
	}

	.sc-contact__consent {
		max-inline-size: 44ch;
		color: var(--muted);
		font-size: 13px;
	}

	.sc-contact__done {
		display: grid;
		justify-items: start;
		gap: 14px;
		padding: clamp(26px, 4vw, 40px);
		border-radius: var(--radius-xl);
		background: var(--mint-soft);
		color: #0b4f49;
	}

	.sc-contact__done-icon {
		display: grid;
		place-items: center;
		inline-size: 52px;
		block-size: 52px;
		border-radius: 50%;
		background: var(--teal);
		color: var(--white);
	}

	/* Боковая колонка */
	.sc-owner {
		display: grid;
		gap: 14px;
		padding: 24px;
		border: 2px solid var(--ink);
		border-radius: var(--radius-l);
	}

	.sc-owner__title {
		font-size: 22px;
	}

	.sc-owner__steps {
		display: grid;
		gap: 10px;
		counter-reset: owner;

		& li {
			display: grid;
			grid-template-columns: 28px minmax(0, 1fr);
			gap: 10px;
			counter-increment: owner;
			font-size: 15px;

			&::before {
				content: counter(owner);
				display: grid;
				place-items: center;
				inline-size: 28px;
				block-size: 28px;
				border-radius: 50%;
				background: var(--ink);
				color: var(--white);
				font-size: 13px;
				font-weight: 800;
			}
		}
	}

	.sc-owner__pick {
		justify-self: start;
		cursor: pointer;
	}

	/* Факты в боковой колонке контактов: три карточки в ряд */
	.sc-facts {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 10px;

		& div {
			display: grid;
			align-content: start;
			gap: 4px;
			padding: 14px 12px;
			border-radius: var(--radius-m);
			background: var(--grey-bg);
		}

		& dt {
			color: var(--muted);
			font-size: 13px;
		}

		& dd {
			font-size: 15px;
			font-weight: 800;
			text-wrap: balance;
		}
	}

	.sc-contact__content {
		font-size: 15px;
	}

	/* Частые вопросы: <details name> — открыт только один ответ */
	.sc-faq {
		display: grid;
		gap: 10px;
	}

	.sc-faq__title {
		margin-block-end: 4px;
		font-size: 22px;
	}

	.sc-faq__item {
		border-radius: var(--radius-m);
		background: var(--grey-bg);

		& summary {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 12px;
			padding: 16px 18px;
			font-weight: 700;
			list-style: none;
			cursor: pointer;

			&::-webkit-details-marker {
				display: none;
			}

			&::after {
				content: "+";
				flex: none;
				font-size: 22px;
				font-weight: 500;
				line-height: 1;
				transition: rotate 0.2s;
			}
		}

		&[open] summary::after {
			rotate: 45deg;
		}

		& p {
			padding: 0 18px 18px;
			color: var(--muted);
			font-size: 15px;
		}

		/* Плавное раскрытие (interpolate-size в html разрешает анимировать до height: auto) */
		&::details-content {
			block-size: 0;
			overflow: hidden;
			transition: block-size 0.25s, content-visibility 0.25s allow-discrete;
		}

		&[open]::details-content {
			block-size: auto;
		}
	}

	/* ---------- Юридические страницы (page-privaatsuspoliitika.php и др.) ---------- */
	/* Шапка, оглавление и текст — на всю ширину контейнера, как остальные страницы */
	.sc-legal .sc-page-header__lead,
	.sc-legal__body {
		max-inline-size: none;
	}

	.sc-legal__updated {
		color: var(--muted);
		font-size: 14px;
	}

	/* Оглавление: серая карточка, на широком экране — в две-три колонки */
	.sc-legal__toc {
		margin-block-end: 36px;
		padding: 20px 24px;
		border-radius: var(--radius-l);
		background: var(--grey-bg);

		& ol {
			margin: 0;
			padding-inline-start: 1.4em;
			column-gap: 32px;

			@media (width >= 720px) {
				columns: 2;
			}

			@media (width >= 1024px) {
				columns: 3;
			}
		}

		& li {
			break-inside: avoid;
			padding-block: 3px;
		}

		& a {
			color: var(--ink);
			text-decoration: underline;
			text-decoration-color: var(--line);
			text-underline-offset: 3px;

			&:hover {
				text-decoration-color: var(--ink);
			}
		}
	}

	.sc-legal__toc-title {
		margin-block-end: 8px;
		font-size: 14px;
		font-weight: 800;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}

	/* Текст: разделы с отступом, заголовки разделов чуть меньше, чем в обычном тексте */
	.sc-legal__body {
		& section + section {
			margin-block-start: 2.2em;
		}

		& h2 {
			margin-block-end: 0.6em;
			font-size: 1.35em;
		}

		& h3 {
			font-size: 1.1em;
		}

		& p,
		& ul,
		& ol {
			margin-block-end: 0.8em;
		}
	}

	.sc-legal__table {
		overflow-x: auto;
		border: 1px solid var(--line);
		border-radius: var(--radius-m);

		& table {
			inline-size: 100%;
			border-collapse: collapse;
			font-size: 15px;
		}

		& :is(th, td) {
			padding: 10px 14px;
			border-block-end: 1px solid var(--line);
			text-align: start;
			vertical-align: top;
		}

		& th {
			background: var(--grey-bg);
			font-weight: 700;
		}

		& tr:last-child td {
			border-block-end: 0;
		}
	}

	/* ---------- 404 ---------- */
	.sc-error {
		display: grid;
		justify-items: center;
		gap: 20px;
		margin-block: 32px;
		padding: clamp(32px, 6vw, 64px) clamp(22px, 5vw, 48px);
		border-radius: var(--radius-xl);
		background: var(--accent);
		text-align: center;
	}

	.sc-error__title {
		font-size: clamp(40px, 7vw, 64px);
		letter-spacing: -0.04em;
	}

	.sc-error__text {
		max-inline-size: 48ch;
		font-size: 18px;
	}
}

/* ==========================================================================
   Утилиты
   ========================================================================== */
@layer utilities {
	.screen-reader-text {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.sc-skip-link:focus {
		position: fixed;
		inset: 12px auto auto 12px;
		z-index: 100000;
		inline-size: auto;
		block-size: auto;
		padding: 12px 18px;
		clip-path: none;
		border-radius: 999px;
		background: var(--ink);
		color: var(--white);
		font-weight: 700;
	}

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