/* Оболочка всех страниц /new: меню разделов и метки черновика.
   Подключается и на двух страницах ПВЗ, перенесённых со своими стилями,
   поэтому все имена здесь новые и с их стилями не пересекаются. */

/* ——— меню разделов ——— */
.snav{display:none;align-items:center;gap:clamp(14px,1.6vw,24px);margin-inline-start:auto}
.snav > a,.snav__btn{
  display:inline-flex;align-items:center;gap:6px;padding:10px 0;
  font:500 14.5px/1 var(--font-text);color:var(--steel-ink);white-space:nowrap;
  background:none;border:0;cursor:pointer;transition:color .16s var(--ease);
}
.snav > a:hover,.snav__btn:hover,.snav__dd.is-open .snav__btn{color:var(--deep-city)}
/* текущий раздел — тонкая синяя черта снизу: синее означает «сюда нажимали» */
.snav > a[aria-current="page"],.snav__dd.is-current .snav__btn{color:var(--deep-city);box-shadow:inset 0 -2px 0 var(--city-blue)}
.snav__btn svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2;transition:transform .16s var(--ease)}
.snav__dd{position:relative}
.snav__dd.is-open .snav__btn svg{transform:rotate(180deg)}
.snav__panel{
  display:none;position:absolute;top:calc(100% + 8px);left:-14px;z-index:70;
  min-width:250px;margin:0;padding:8px;list-style:none;
  background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-card);box-shadow:var(--shadow-lg);
}
.snav__dd.is-open .snav__panel{display:block}
.snav__panel a{display:block;padding:11px 12px;border-radius:10px;font-size:15px;color:var(--deep-city)}
.snav__panel a:hover{background:var(--surface-2)}
.snav__panel a[aria-current="page"]{color:var(--city-blue);font-weight:600}
.snav :focus-visible{outline:2px solid var(--city-blue);outline-offset:2px;border-radius:6px}

/* мобильное меню: группы разделов */
.menu__grp{margin:16px 0 0;font:600 12px/1 var(--font-text);letter-spacing:.12em;text-transform:uppercase;color:var(--steel-ink)}
.menu a.menu__sub{padding-inline-start:14px;font-size:17px}
.menu a[aria-current="page"]{color:var(--city-blue)}

@media (min-width:900px){ .snav{display:flex} }
/* От 900 до 1024 px меню разделов и кнопка заявки вместе не помещаются:
   замерено на 900 px — не хватает 15 px, кнопка заезжает за правое поле.
   Кнопку в шапке прячем: на этих ширинах заявку ведут кнопка первого
   экрана и плавающая кнопка внизу. Правило без слоя — оно перебивает
   слоёный display у .nav__cta из стилей страницы. */
@media (min-width:900px) and (max-width:1023.98px){ .nav__cta{display:none} }

/* ——— первый экран ———
   Свободная высота героя уходит между подводкой и кнопками, а не между
   кнопками и цифрами: кнопки и подпись под ними стоят прямо над цифрами.
   Так было на странице ПВЗ; решение заказчика от 26 сентября — на всех
   страницах, и там же текст первого экрана на 3 px крупнее. Ландшафт
   телефона не трогаем: там первый экран ужат, чтобы кнопка была видна. */
@media (min-width:900px) and (min-height:481px){
  .hero__text{flex:1 1 auto;display:flex;flex-direction:column}
  .hero__lead{margin-block-end:clamp(20px,3vw,30px)}
  .hero__cta{margin-block-start:auto}
  .hero .figs{margin-block-start:clamp(24px,3.2vw,36px)}
  .hero__lead{font-size:calc(clamp(17px,1.4vw,20px) + 3px)}
}

/* Первый экран всех страниц — в формате главной (решение заказчика
   от 28 сентября; до этого крупный кегль и широкая колонка были только
   у главной, 26 сентября). Колонка 880 px, поля героя меньше, заголовок
   на 12 px крупнее базовой шкалы: строк меньше, первый экран теряет
   меньше места. Текст стоит у края окна с полем контейнера, как на главной:
   у страницы «Сдать метры» герой раньше оставался в центральной колонке
   1180 px, и заголовок начинался на 128 px правее, чем на остальных. */
.hero--home h1 .h1-sub{display:block}
@media (min-width:900px) and (min-height:481px){
  .hero .hero__inner{max-width:none}
  .hero .hero__text{max-width:min(880px,72%)}
  .hero .hero__inner{padding-block:clamp(24px,4.5vw,64px) clamp(24px,3.5vw,48px)}
  .hero h1{font-size:calc(clamp(36px,3.8vw,56px) + 12px)}
}

/* ——— кнопка «наверх» ———
   Правый нижний угол, на телефоне и на десктопе. Появляется, когда первый
   экран ушёл из вида. На телефоне плавающая кнопка заявки занимает всю
   ширину низа, поэтому, пока она видна, стрелка поднимается над ней
   (класс is-raised ставит shell.js). На десктопе заявка — пилюля по центру,
   угол свободен. Слой ниже мобильного меню: меню её перекрывает. */
.totop{
  position:fixed;z-index:52;
  right:calc(16px + env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));
  width:48px;height:48px;display:grid;place-items:center;border-radius:var(--r-btn);
  background:var(--surface);color:var(--deep-city);border:1px solid var(--hairline-2);box-shadow:var(--shadow-lg);
  transition:opacity .2s var(--ease),transform .2s var(--ease),bottom .24s var(--ease),border-color .16s var(--ease),color .16s var(--ease);
}
.totop svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.totop:hover{border-color:var(--city-blue);color:var(--city-blue)}
.totop:focus-visible{outline:2px solid var(--city-blue);outline-offset:2px}
/* без скрипта видна всегда; со скриптом — только после первого экрана.
   visibility, а не только прозрачность: невидимая ссылка не должна ловить Tab */
.totop.is-managed:not(.is-on){opacity:0;transform:translateY(12px);visibility:hidden;
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s linear .2s}
.totop.is-raised{bottom:calc(84px + env(safe-area-inset-bottom))}
@media (min-width:900px){
  .totop{right:24px;bottom:24px}
  .totop.is-raised{bottom:24px}
}

/* ——— метки черновика ———
   Видны, пока структура не утверждена. Перед переездом /new в корень
   на страницах не должно остаться ни одной: grep -r "draft" public/new.
   Цвет — статусный «пора забрать»: в интерфейсе сайта его нет, метку
   ни с чем не перепутать. */
.draft{position:relative;outline:2px dashed #C77700;outline-offset:-10px}
.draftmark{
  position:absolute;z-index:40;top:16px;left:16px;max-width:calc(100% - 32px);
  font:600 12px/1.35 var(--font-text);letter-spacing:.02em;
  background:#C77700;color:#fff;padding:6px 10px;border-radius:8px;pointer-events:none;
}
.draft--decide{outline-color:#C0392B}
.draft--decide .draftmark{background:#C0392B}
.draft-edit{background:rgba(199,119,0,.16);box-shadow:inset 0 -2px 0 #C77700;border-radius:3px}
.draft-ask{text-decoration:underline dotted #C77700 2px;text-underline-offset:4px}
.draft-ask::after{content:" ?";color:#C77700;font-weight:700}