/* ============================================================
   layout.css — Header, Utility Bar, Footer
   Размеры/отступы/цвета сняты из Pencil (компоненты i7HF9a, E2DDOm).
   ============================================================ */

/* ===================== HEADER ===================== */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

/* --- Утилити-бар (Pencil: fill #F1F5F9, padding [9,48], border-bottom 1) --- */
.utility-bar {
  background: var(--surface-subtle);
  border-bottom: 1px solid var(--border);
}
.utility-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 9px;
}
.util-left { display: flex; align-items: center; gap: 20px; }
.util-item { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.util-item .icon { width: 14px; height: 14px; }
.util-item--phone { color: var(--brand); font-weight: 600; }
.util-item--hours { color: var(--text-secondary); }
.util-item--tg    { color: var(--brand); font-weight: 500; }
.util-note { color: var(--warning); font-size: 11px; }
.util-right {
  display: flex; align-items: center; gap: 6px;
  color: var(--text-secondary); font-size: 13px; font-weight: 500;
}
.util-right .icon { width: 14px; height: 14px; }

/* --- Главная строка (Pencil: height 80, padding [0,48], space-between) --- */
.header-main__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}
.logo { display: flex; align-items: center; gap: 10px; }
.logo__mark { width: 32px; height: 34px; }
.logo__word { font-size: 22px; font-weight: 700; color: var(--text-primary); }

.main-nav { display: flex; align-items: center; gap: 36px; }
.main-nav a { font-size: 15px; font-weight: 500; color: var(--text-secondary); transition: color .15s; }
.main-nav a:hover { color: var(--text-primary); }

.header-actions { display: flex; align-items: center; gap: 14px; }
.link-login { font-size: 15px; font-weight: 500; color: var(--text-secondary); transition: color .15s; }
.link-login:hover { color: var(--text-primary); }

.link-login--user { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Бургер — скрыт на десктопе, появляется на мобайле (responsive.css) */
.burger {
  display: none;
  align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: none; background: none; color: var(--text-primary);
}
.burger .icon { width: 24px; height: 24px; }

/* Мобильное меню — скрыто по умолчанию, раскрывается бургером на мобайле (responsive.css) */
.mobile-menu { display: none; }

/* ===================== FOOTER ===================== */
/* Pencil: fill #F8FAFC, padding 48, gap 32, border-top 1 */
.site-footer {
  background: var(--surface-muted);
  border-top: 1px solid var(--border);
}
.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-block: 48px;
}
.footer-cols { display: flex; gap: 48px; }
.footer-col { flex: 1; display: flex; flex-direction: column; gap: 14px; }
.footer-col__title {
  font-size: 13px; font-weight: 700; letter-spacing: 0.5px;
  color: var(--text-primary);
}
.footer-col a, .footer-col span { font-size: 14px; color: var(--text-secondary); }
.footer-col a { transition: color .15s; }
.footer-col a:hover { color: var(--text-primary); }

/* Заглушки (Pencil: gap 24, padding-top 14, border-top 1, текст #D97706 12) */
.footer-stub {
  display: flex; gap: 24px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.footer-stub span { color: var(--warning); font-size: 12px; }

.footer-copy { font-size: 13px; color: var(--text-secondary); }