/* ============================================================
   Портал адаптации · шапка, нижняя панель, подвал
   Навигация целиком без JS: <details> даёт открытие/закрытие,
   клавиатуру и скринридер бесплатно и переживает CSP.
   ============================================================ */

/* ==================== ШАПКА ====================
   Высота — только через --nav-h. Никаких вторых чисел в этом файле. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg-dark);
  border-bottom: 1px solid var(--line-dark-2);
  color: var(--on-dark);
  /* обводка фокуса на navy — белая; правило фокуса по-прежнему одно */
  --focus: #FFFFFF;
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--nav-h);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 48px;
}
.brand__logo {
  /* Краткий знак «//НПС», пропорции 139:21. Высота 22px даёт ширину ~146px —
     знак читается и не съедает шапку. */
  height: 22px;
  width: auto;
  flex-shrink: 0;
  /* Охранное поле брендбука (с.8): не меньше одного модуля вокруг знака.
     Модуль краткой версии = его высота, поэтому 22px справа до названия. */
  margin-right: 10px;
}
/* Текстовый знак — он же запасной вариант, когда логотипа нет в данных.
   Ни одного onerror: страница должна пережить CSP. */
.brand__mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  background: var(--accent-ink);
  color: #fff;
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .04em;
}
.brand__name {
  /* Служебная подпись, не заголовок: обычный Eurostile Bold, а не Extended —
     Extended Black вдвое шире и «Мостострой-11» в шапке телефона не помещался. */
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.15;
  color: var(--on-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brand__name small {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-dark-3);
  margin-top: 3px;
}
@media (max-width: 600px) {
  .brand__name small { display: none; }
  /* На узком экране имя может занять две строки — лучше, чем многоточие. */
  .brand__name {
    white-space: normal;
    font-size: var(--fs-label);
    line-height: 1.1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}
@media (max-width: 340px) {
  .brand__name { display: none; }
}

.site-header__tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* --- Выпадающее оглавление в шапке (десктоп) --- */
.topnav {
  position: relative;
}
.topnav > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid var(--line-dark-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--on-dark);
  cursor: pointer;
  list-style: none;
}
.topnav > summary::-webkit-details-marker { display: none; }
.topnav > summary::after {
  content: "▾";
  font-size: var(--fs-label);
  color: var(--on-dark-3);
}
.topnav[open] > summary::after { content: "▴"; }

.topnav__list {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  width: min(92vw, 340px);
  max-height: 70vh;
  overflow-y: auto;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  /* внутри выпадающего списка фон светлый — фокус снова тёмный */
  --focus: var(--accent-ink);
}

/* Тап-зона любого пункта — 48px и больше */
.navlink {
  display: grid;
  grid-template-columns: 2.6em 1fr;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink);
}
.navlink b {
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--accent-ink);
}
.navlink[aria-current="page"] {
  background: var(--accent-soft);
  font-weight: 700;
}
@media (hover: hover) {
  .navlink:hover { background: var(--bg-paper); }
}

/* --- Кнопка звонка в шапке --- */
.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 20px;
  background: var(--accent-ink);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
@media (hover: hover) {
  .nav-cta:hover { background: var(--accent-ink-hi); }
}
@media (max-width: 980px) {
  /* на мобиле навигация уезжает в нижнюю панель */
  .topnav { display: none; }
  .nav-cta__text { display: none; }
  .nav-cta { padding: 0; width: 48px; }
}

/* ==================== НИЖНЯЯ ПАНЕЛЬ (мобиле) ====================
   Три постоянных действия: Главная / Разделы / Позвонить.
   Чистый <details>, ни строки JS. */
.mnav { display: none; }

@media (max-width: 980px) {
  .mnav {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 70;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1px;
    background: var(--line);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .mnav-act,
  .mnav-menu > summary {
    display: grid;
    place-items: center;
    min-height: var(--mnav-h);
    padding: 6px 4px;
    background: var(--surface);
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    list-style: none;
  }
  .mnav-menu > summary::-webkit-details-marker { display: none; }
  .mnav-act--call { background: var(--accent-ink); color: #fff; }

  /* список открывается вверх и не перекрывает саму панель */
  .mnav-menu[open] > summary { background: var(--bg-paper-2); }
  .mnav-menu[open] .mnav-list {
    position: fixed;
    inset: auto 0 calc(var(--mnav-h) + env(safe-area-inset-bottom)) 0;
    max-height: 68vh;
    overflow-y: auto;
    list-style: none;
    background: var(--surface);
    border-top: 1px solid var(--line);
    box-shadow: 0 -12px 32px rgba(10,42,79,.18);
    padding: 6px;
  }

  /* место под панель, чтобы подвал не оказался под ней */
  body {
    /* +1px — рамка сверху у панели: без неё последняя строка контента
       пряталась под панель ровно на эту рамку. */
    padding-bottom: calc(var(--mnav-h) + 1px + env(safe-area-inset-bottom));
  }
}

/* ==================== ПОДВАЛ ==================== */
.site-footer {
  background: var(--bg-dark);
  color: var(--on-dark);
  padding-block: clamp(32px, 5vw, 56px);
  --focus: #FFFFFF;
}
.site-footer__grid {
  display: grid;
  gap: 24px;
}
.site-footer__legal {
  font-size: var(--fs-meta);
  line-height: 1.6;
  color: var(--on-dark-2);
  max-width: 60ch;
}
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}
.site-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 2px;
  font-size: var(--fs-sm);
  color: var(--on-dark-2);
}
@media (hover: hover) {
  .site-footer__links a:hover { color: var(--on-dark); text-decoration: underline; }
}
.site-footer__copy {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: .04em;
  color: var(--on-dark-3);
  padding-top: 20px;
  border-top: 1px solid var(--line-dark-2);
}
.site-footer__hotline-box {
  display: grid;
  gap: 8px;
  justify-items: start;
}
.site-footer__hotline {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-family: var(--mono);
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--accent-on-dark);
}

/* ---- Шапка уезжает при прокрутке вниз (только на телефоне) ----
   На узком экране в шапке нет ни одной кнопки: меню и звонок — в нижней
   панели. 61px постоянно занятого экрана отдаём под текст, шапка
   возвращается от прокрутки вверх. Логику ведёт header.js. */
@media (max-width: 980px) {
  .site-header {
    transition: transform .22s var(--ease);
    will-change: transform;
  }
  .site-header.is-away {
    /* 1px сверху — чтобы не осталось волоска рамки на границе экрана. */
    transform: translateY(calc(-100% - 1px));
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Человек просил меньше движения: шапка по-прежнему уезжает,
     но без анимации — просто перестаёт занимать место. */
  .site-header { transition: none; }
}