/* ШАПКА. Одна на все публичные страницы: лендинг и каталог.
 *
 * До этого их было две — светлая на лендинге и тёмно-синяя в каталоге, — и
 * переход между ними читался как переход на другой сайт. Здесь она одна, в
 * своём файле, и правится в одном месте.
 *
 * Классы с приставкой top-, а не общие .nav и .btn: каталог подключает
 * app.css и auth.css, где .btn занят кнопкой кабинета, и общее имя молча
 * перекрасило бы половину интерфейса.
 *
 * Палитру файл не объявляет — берёт ту, что уже задали land.css или
 * auth.css. Один и тот же набор переменных в трёх файлах разъехался бы.
 */

.top{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(1.1) blur(10px);
  background:rgba(237,241,248,.82);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background .3s ease;
}
/* Класс ставит скрипт при прокрутке: пока страница не тронута, черта под
   шапкой лишняя — она отрезает заголовок от логотипа. */
.top.scrolled{border-color:var(--line);background:rgba(237,241,248,.94)}

.top-wrap{max-width:1140px;margin:0 auto;padding:0 22px}
.top-nav{display:flex;align-items:center;height:70px;gap:12px}

.top-brand{display:inline-flex;align-items:center;flex:none}
.top-brand img{display:block;width:110px;height:30px}

/* Отступ от логотипа: раньше их разносило justify-content, теперь
   всё идёт слева подряд и разделы липли к букве «n». */
.top-links{display:none;gap:28px;margin-left:20px;margin-right:8px;font-size:15.5px;font-weight:600;color:var(--ink-soft)}
.top-links a{text-decoration:none;color:inherit}
.top-links a:hover{color:var(--ink)}

/* Пункт-значок. Кликается вся клетка 38×38, а не сам контур в 21 пиксель:
   промахнуться мимо звезды мышью — обычное дело. Разрядка между значками
   меньше словесной: иконки и так читаются как ряд. */
.top-links:has(.top-ico){gap:4px}
.top-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:11px;color:var(--ink-soft);
  transition:background .15s,color .15s;
}
.top-ico:hover{background:var(--canvas);color:var(--ink)}

/* Кнопки прижаты к правому краю, всё остальное идёт слева подряд. */
.top-right{display:flex;align-items:center;gap:9px;min-width:0;margin-left:auto}
.top-right form{margin:0}

.top-lang{display:flex;gap:2px;background:var(--white);border:1px solid var(--line);border-radius:10px;padding:3px}
.top-lang a{
  display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;font-weight:600;color:var(--ink-faint);
  padding:5px 9px;border-radius:7px;letter-spacing:.04em;text-decoration:none;
  transition:background .15s,color .15s;
}
.top-lang a.on{background:var(--ink);color:#fff}

.top-btn{
  font-family:inherit;font-weight:600;font-size:15.5px;border:none;cursor:pointer;
  border-radius:12px;padding:11px 20px;white-space:nowrap;text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;
  transition:transform .15s ease, box-shadow .2s ease, background .2s;
}
.top-btn.primary{background:var(--ink);color:#fff}
.top-btn.primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px -8px rgba(22,36,60,.55)}
.top-btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line-strong)}
.top-btn.ghost:hover{border-color:var(--ink);background:var(--white)}

/* --- Выбор города ------------------------------------------------------
 *
 * Город живёт в шапке, а не в форме поиска: он меняется раз в жизни, а
 * искать человек будет десять раз, и каждый раз заново подтверждать город
 * незачем. Выбранный запоминается в куке на год.
 *
 * Стоит слева, рядом с разделами, а не у правого края: это не действие, а
 * то, где человек находится, — и читается оно вместе с «Каталогом», до
 * кнопок. Справа живёт то, что нажимают.
 *
 * Внутри — то же поле с подсказкой от двух букв, что было в форме: сорок
 * городов списком человек читает глазами, а набрать «бел» быстрее. */
.top-city{position:relative;flex:none}
.top-city > summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  font-size:15px;font-weight:600;color:var(--ink);white-space:nowrap;
  border:1px solid var(--line-strong);border-radius:12px;
  padding:10px 14px;min-height:44px;background:var(--white);
}
.top-city > summary::-webkit-details-marker{display:none}
.top-city > summary:hover{border-color:var(--ink)}
.top-city > summary svg{flex:none;color:var(--ink-faint)}
.top-city-p{
  position:absolute;left:0;top:calc(100% + 6px);z-index:60;width:290px;max-width:78vw;
  background:var(--white);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 2px 4px rgba(22,36,60,.06), 0 26px 52px -24px rgba(22,36,60,.5);
  padding:12px;
}
.top-city-p .cat-f > label{
  font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-faint);
}
.top-city-p .cat-f input{
  width:100%;box-sizing:border-box;font:inherit;font-size:15px;color:var(--ink);
  border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--canvas);
}
.top-city-p .cat-f input:focus{outline:none;border-color:var(--ink)}
.top-city-go{
  margin-top:9px;width:100%;font:inherit;font-size:15px;font-weight:600;cursor:pointer;
  background:var(--ink);color:#fff;border:none;border-radius:10px;padding:10px;
}
.top-city-all{
  display:block;margin-top:9px;padding-top:9px;border-top:1px solid var(--line);
  font-size:14.5px;color:var(--ink-faint);text-decoration:none;
}
.top-city-all:hover{color:var(--ink)}

/* --- Узкие экраны ------------------------------------------------------
 *
 * Разделы и второстепенные кнопки на телефоне прячем: в семидесяти пикселях
 * высоты помещается логотип, город и одно действие. Всё остальное человек
 * найдёт на самой странице. */
.top-only-wide{display:none}
.top-wide{display:none}
@media (min-width:900px){
  .top-only-wide{display:inline-flex}
  form.top-only-wide{display:inline-flex}
}

/* --- Бургер ------------------------------------------------------------
 *
 * Порог 1140 пикселей. До него в строку не помещаются разом логотип,
 * четыре раздела, город, языки, вход и кнопка действия: они начинают
 * наезжать друг на друга, а шапка распухает на две строки.
 *
 * Поэтому на узком экране остаются только логотип и город — то, в чём
 * человек находится, — а разделы, языки и кнопки уходят под бургер.
 * Шире 1140 бургера нет вовсе, и всё стоит строкой, как раньше. */
.top-burger{position:relative;margin-left:auto;flex:none}
.top-burger > summary{
  display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;cursor:pointer;list-style:none;
  border:1px solid var(--line);border-radius:12px;
  color:var(--ink);background:var(--white);
}
.top-burger > summary::-webkit-details-marker{display:none}
.top-burger > summary:hover{border-color:var(--line-strong)}
.top-burger[open] > summary{border-color:var(--ink)}
.top-burger-p{
  position:absolute;top:calc(100% + 8px);right:0;z-index:40;
  min-width:230px;display:flex;flex-direction:column;gap:6px;
  padding:12px;border-radius:14px;
  background:var(--white);border:1px solid var(--line);
  box-shadow:0 18px 40px -20px rgba(16,24,40,.35);
}
.top-burger-p form{margin:0;display:flex}
.top-burger-p form .top-btn{width:100%;justify-content:center}
.top-burger-l{
  padding:9px 10px;border-radius:10px;
  font-size:15px;font-weight:600;color:var(--ink);text-decoration:none;
}
.top-burger-l:hover{background:var(--canvas)}
.top-burger-row{display:flex;gap:6px;padding:4px 0 6px;border-bottom:1px solid var(--line)}
.top-burger-lang{
  flex:1;text-align:center;padding:7px 0;border-radius:9px;
  font-size:13.5px;font-weight:700;letter-spacing:.04em;
  color:var(--ink-soft);text-decoration:none;border:1px solid var(--line);
}
.top-burger-lang.on{background:var(--ink);border-color:var(--ink);color:#fff}
.top-burger-p .top-btn{width:100%;justify-content:center}

/* Кто где живёт: до 1140 — бургер, после — обычная строка.
 *
 * Значки остаются в строке всегда. Они узкие, стоят сразу за логотипом и
 * ведут туда, куда идут чаще всего: каталог, избранное, просмотренные.
 * Под бургер уходит длинное — словесные разделы лендинга, языки, вход и
 * кнопка. */
@media (max-width:1139px){
  .top-right{display:none}
  .top-links{display:flex;margin-left:10px;margin-right:0}
  .top-links a:not(.top-ico){display:none}
  .top-burger{display:block;margin-left:auto}
  .top-city{margin-left:0}
}
@media (min-width:1140px){
  .top-links{display:flex}
  .top-burger{display:none}
}
/* На телефоне значки стоят плотнее и уступают место городу. */
@media (max-width:640px){
  .top-links{margin-left:4px;gap:0}
  .top-ico{width:34px;height:34px}
}
@media (min-width:640px){
  .top-wide{display:inline}
  .top-narrow{display:none}
}
/* На телефоне город уезжает на свою строку.
 *
 * В одну строку логотип, город, языки и кнопка не помещаются — что-то
 * вылезает за край и тянет за собой горизонтальную прокрутку всей
 * страницы. Сжимать название города до «Вся Молдо…» хуже: город здесь
 * главный, ради него шапка и затевалась. */
@media (max-width:640px){
  .top-nav{flex-wrap:wrap;height:auto;padding-block:9px;gap:8px}
  .top-brand{margin-right:auto}
  .top-brand img{width:92px;height:25px}
  .top-right{gap:7px;flex-wrap:wrap;justify-content:flex-end}
  .top-btn{padding:9px 13px;font-size:14.5px}
  .top-city{order:3;flex:1 1 100%}
  .top-city > summary{
    width:100%;justify-content:flex-start;
    padding:8px 12px;min-height:38px;font-size:14.5px;
  }
  .top-city-p{left:0;right:0;width:auto;max-width:none}
}
@media (max-width:420px){
  .top-wrap{padding:0 16px}
}