/* Поиск по сайту. Компоненты повторяют канон: карточка — фон --surface,
   рамка 1 px --line, скругление 12; кегли со шкалы; акцент заливкой
   только у одного действия на экране. */

.rs { padding-block: 32px 64px }

.rs__crumbs { display:flex; gap:8px; margin:0 0 16px; color:var(--color-text-mute); font-size:14px }
.rs__crumbs a { color:var(--color-text-mute) }
.rs__crumbs a:hover { color:var(--color-accent-ink) }

.rs__title { margin:0 0 20px; font-size:36px; line-height:1.2; text-wrap:balance }

.rs__form { display:flex; gap:12px; max-width:720px; margin:0 0 24px }
.rs__input {
	flex:1 1 auto; min-width:0; height:52px; padding:0 16px;
	border:1px solid var(--color-text-soft); border-radius:4px;
	background:var(--color-surface); color:var(--color-text);
	font:inherit; font-size:16px;
}
.rs__input::placeholder { color:var(--color-text-mute) }
.rs__input:focus-visible { outline:2px solid var(--color-accent); outline-offset:1px; border-color:var(--color-accent) }
.rs__submit {
	flex:0 0 auto; height:52px; padding:0 24px; border:0; border-radius:4px;
	background:var(--color-accent-fill); color:var(--color-on-fill);
	font:inherit; font-size:16px; cursor:pointer;
	transition:background-color .15s ease;
}
.rs__submit:hover { background:var(--color-accent-fill-hover) }
.rs__submit:focus-visible { outline:2px solid var(--color-accent); outline-offset:2px }

.rs__hint, .rs__count { margin:0 0 20px; color:var(--color-text-mute); font-size:16px }
.rs__count strong { color:var(--color-text) }

.rs__none { max-width:720px; margin:0 0 16px; font-size:16px; line-height:1.5 }
.rs__ways { max-width:720px; margin:0; padding-left:20px; display:grid; gap:8px;
	color:var(--color-text-mute); font-size:16px; line-height:1.45 }
.rs__ways a { color:var(--color-accent-ink); font-weight:700 }

.rs__tabs { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 24px; padding:0; list-style:none }
.rs__tab {
	display:inline-flex; align-items:center; gap:8px;
	min-height:40px; padding:0 14px;
	border:1px solid var(--color-line); border-radius:22px;
	background:var(--color-surface); color:var(--color-text);
	text-decoration:none; font-size:14px;
	transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.rs__tab span { color:var(--color-text-mute); font-variant-numeric:tabular-nums }
.rs__tab:hover, .rs__tab:focus-visible {
	background:var(--color-accent-fill); border-color:var(--color-accent);
	color:var(--color-on-fill); outline:0;
}
.rs__tab:hover span, .rs__tab:focus-visible span { color:var(--color-on-fill) }
/* Выбранный раздел — заливка плашки, а не акцент: наведение и выбор
   должны отличаться, иначе курсор выглядит как нажатие. */
.rs__tab.is-on { background:var(--color-plate); border-color:var(--color-plate); color:var(--color-on-fill) }
.rs__tab.is-on span { color:var(--color-on-fill); opacity:.75 }

.rs__list { margin:0; padding:0; list-style:none; display:grid; gap:12px }
.rs__item {
	padding:18px 20px;
	border:1px solid var(--color-line); border-radius:12px;
	background:var(--color-surface);
}
.rs__sec { margin:0 0 6px; color:var(--color-text-mute); font-size:12px;
	letter-spacing:.07em; text-transform:uppercase }
.rs__item-title { margin:0 0 6px; font-size:18px; line-height:1.3 }
.rs__item-title a { color:var(--color-text); text-decoration:none }
.rs__item-title a:hover { color:var(--color-accent-ink); text-decoration:underline }
.rs__snip { margin:0; color:var(--color-text-mute); font-size:16px; line-height:1.5 }
/* Цвет чернил задаём явно. С --color-text подсветка в тёмной теме
   съедала слово: фон #1C2A22 и почти такой же тёмный текст поверх.
   Пара ok-bg + ok-ink разведена под обе темы. */
.rs__snip mark { background:var(--color-ok-bg); color:var(--color-ok-ink);
	padding:0 2px; border-radius:2px; font-weight:700 }

/* Поле в шапке. Раньше оно раскрывалось по наведению прямо в строке —
   моя ошибка, и заказчик увидел её сразу: «когда на поиск наводишь,
   всё меню уезжает под лого с названием».

   Замер подтвердил дословно: при наведении .nav сжимается с 686
   до 524 px (ровно на ширину поля), а ряд пунктов при
   justify-content:flex-end переполняется НЕ вправо, а влево —
   и накрывает название службы на 185 px. Плюс скачок вёрстки
   от простого проведения мышью, без всякого намерения искать.

   Теперь в строке стоит только кнопка 40×40, а поле открывается
   панелью под ней: position:absolute, вне потока, ширину строки
   не отбирает вовсе, и открывается по клику — осознанно.
   Слой 230 взят из шкалы ritual-layers.php: выше подменю (220),
   ниже плавающих кнопок (900).

   Без JS кнопка отправляет форму с пустым запросом и человек
   попадает на страницу поиска, где поле большое и всегда открыто.
   Тупика нет. */
/* flex:0 0 auto обязателен: в шапке стоит .header__inner > *{min-width:0},
   и без него форму сжимало вместе с меню — замер дал 14 px ширины
   вместо 40 на 769, то есть от кнопки поиска оставалась щель. */
.rs-mini { position:relative; display:flex; align-items:center; margin-left:auto; flex:0 0 auto }
/* Панель раскрывается ВЛЕВО, внутри строки шапки, а не под ней.
   Первый заход сажал её под кнопку (top:100%), и она ложилась
   на бегущую строку предупреждения, которая идёт сразу за шапкой:
   заказчик увидел это как «форма поиска накладывается». Здесь
   right:calc(100% + 8px) прижимает правый край панели к левому краю
   кнопки — панель остаётся в полосе шапки и ничего не перекрывает
   кроме пунктов меню, поверх которых и должна лежать. */
.rs-mini__input {
	position:absolute; right:calc(100% + 8px); top:50%;
	transform:translateY(-50%);
	display:none; width:min(300px, 34vw); height:40px; padding:0 12px;
	border:1px solid var(--color-text-soft); border-radius:4px;
	background:var(--color-surface); color:var(--color-text);
	font:inherit; font-size:16px;
	box-shadow:0 8px 24px rgb(var(--shadow-rgb) / .16);
}
.rs-mini.is-open .rs-mini__input { display:block }
/* Ряд пунктов на время поиска. Класс ставит JS на .header__inner:
   :has() тут тоже сработал бы, но класс не зависит от поддержки
   селектора и виден в отладке. */
.header__inner.rs-searching .nav{ visibility:hidden }
@media (max-width:1239px){
	/* На двухрядной шапке меню стоит отдельной строкой и панель
	   его не накрывает — прятать нечего. */
	.header__inner.rs-searching .nav{ visibility:visible }
}
.rs-mini__input:focus { outline:2px solid var(--color-accent); outline-offset:2px }
.rs-mini__go {
	display:inline-flex; align-items:center; justify-content:center;
	flex:0 0 40px; width:40px; height:40px; padding:0;
	border:1px solid var(--color-line); border-radius:4px;
	background:var(--color-surface); color:var(--color-text);
	cursor:pointer;
}
.rs-mini.is-open .rs-mini__go { border-color:var(--color-text-soft) }
.rs-mini__go:hover { background:var(--color-accent-fill); border-color:var(--color-accent); color:var(--color-on-fill) }
.rs-mini__go:focus-visible { outline:2px solid var(--color-accent); outline-offset:2px }
.rs-mini__go svg { width:18px; height:18px; display:block }

/* Ниже 769 в шапке остаётся бургер, и поле живёт внутри него.
   Раньше эта граница стояла на 1024 — а бургер тема включает
   только на 768. В полосе 769–1024 поле печаталось прямо
   в десктопном меню отдельной строкой и растило шапку
   со 125 до 151 px. Теперь границы совпадают.
   :not() обязателен: бургерная форма — тоже .rs-mini. */
@media (max-width:768px){
	.rs-mini:not(.rs-mini--burger) { display:none }
}

@media (max-width:768px){
	.rs__title { font-size:24px }
	.rs__form { flex-direction:column }
	.rs__submit { width:100% }
	.rs { padding-block:24px 48px }
}

/* Постраничная выдача. Двадцать на страницу: общие слова из шаблонного
   текста справочника дают сотни совпадений, и одна длинная простыня
   не помогает никому. */
.rs__pager { margin:24px 0 0 }
.rs__pager-note { margin:0 0 10px; color:var(--color-text-mute); font-size:14px }
.rs__pager-list { display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none }
.rs__page {
	display:inline-flex; align-items:center; justify-content:center;
	min-width:44px; min-height:44px; padding:0 10px;
	border:1px solid var(--color-line); border-radius:4px;
	background:var(--color-surface); color:var(--color-text);
	text-decoration:none; font-variant-numeric:tabular-nums;
	transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.rs__page:hover, .rs__page:focus-visible {
	background:var(--color-accent-fill); border-color:var(--color-accent);
	color:var(--color-on-fill); outline:0;
}
.rs__page.is-on { background:var(--color-plate); border-color:var(--color-plate); color:var(--color-on-fill) }

/* Поле в бургере. В шапке оно скрыто ниже 1024, а на телефоне искать
   нужнее всего: до раздела оттуда дальше всего идти. Здесь оно всегда
   раскрыто — прятать за наведением на тач-экране нечем. */
.nav__item--search { display:none }
.rs-mini--burger { display:none }

@media (max-width:768px){
	.nav__item--search { display:block; width:100%; margin:0 0 8px }
	.rs-mini--burger { display:flex; width:100% }
	.rs-mini--burger .rs-mini__input {
		/* В бургере поле всегда раскрыто и стоит в потоке: прятать
		   его за наведением на тач-экране нечем. Поэтому здесь
		   сбрасываем и position, и display панели из шапки. */
		position:static; display:block;
		width:auto; flex:1 1 auto; height:46px; padding:0 12px;
		box-shadow:none;
		border:1px solid var(--color-text-soft); border-right:0;
		border-radius:4px 0 0 4px;
	}
	.rs-mini--burger .rs-mini__go { width:44px; height:46px; border-radius:0 4px 4px 0; border-left:0 }
}