/* Шапка, главное меню, подвал. */

/* --- Шапка ---------------------------------------------------------------- */

.site-header { position: sticky; top: 0; z-index: var(--z-header); }

.topbar {
  background: #fff; height: var(--header-h);
  transition: height var(--t-base) var(--ease), box-shadow var(--t-base);
}
.topbar__inner { display: flex; align-items: center; gap: var(--s-6); height: 100%; }

.brand { display: inline-flex; flex: none; }
.brand svg, .brand img { height: 48px; width: auto; transition: height var(--t-base) var(--ease); }

.topbar__spacer { flex: 1; }

.search { position: relative; width: 300px; }
.search__input {
  width: 100%; height: 42px; padding: 0 var(--s-4) 0 42px;
  border: 1px solid var(--c-border); border-radius: var(--r-md); background: #fff;
  font-size: var(--fs-sm); transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.search__input::placeholder { color: #9ca3af; }
.search__input:focus { outline: 0; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-focus); }
.search__icon { position: absolute; left: 14px; top: 50%; translate: 0 -50%; color: var(--c-text-muted); font-size: 18px; pointer-events: none; }
.search__results {
  position: absolute; z-index: var(--z-dropdown); top: calc(100% + 6px); right: 0; left: auto;
  width: max(100%, min(400px, calc(100vw - 2 * var(--gutter))));
  background: #fff; border-radius: var(--r-md); box-shadow: var(--sh-lift); border: 1px solid var(--c-border);
  max-height: 420px; overflow: auto; padding: var(--s-2);
}

.lang { display: flex; gap: 2px; }
.lang__link {
  display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 36px;
  padding: 0 10px; border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: var(--fw-m);
  border-bottom: 2px solid transparent; transition: background-color var(--t-fast);
}
.lang__link:hover { background: var(--c-primary-50); }
.lang__link[aria-current="true"] { background: var(--c-primary-50); color: var(--c-primary); border-bottom-color: var(--c-primary); font-weight: var(--fw-b); }

.burger { display: none; }


/* --- Главное меню ---------------------------------------------------------- */

.navbar { height: var(--navbar-h); position: relative; }
.navbar__shape {
  position: relative; isolation: isolate; height: 100%;
  /* сдвиг полосы вправо как на макете; на узких экранах прижимается к краю */
  margin-left: clamp(0px, calc(100vw - 1230px), calc(var(--gutter) + 12.5vw));
  padding-left: 28px; padding-right: var(--s-4);
  transition: margin var(--t-base) var(--ease), padding var(--t-base) var(--ease);
}
/* Скошенный белый фон — псевдоэлемент: clip-path на самом контейнере обрезал бы выпадающие подменю. */
.navbar__shape::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: #fff;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 28px 100%);
  transition: clip-path var(--t-base), box-shadow var(--t-base);
}
.site-header--solid .navbar__shape,
.site-header.is-scrolled .navbar__shape { margin-left: 0; padding-left: var(--gutter); padding-right: var(--gutter); }
.site-header--solid .navbar__shape::before,
.site-header.is-scrolled .navbar__shape::before { clip-path: none; box-shadow: 0 1px 0 var(--c-border); }
.site-header.is-scrolled .navbar__shape::before { box-shadow: var(--sh-header); }

.nav { display: flex; align-items: stretch; height: 100%; list-style: none; gap: 2px; max-width: var(--container); }
.site-header--solid .nav, .site-header.is-scrolled .nav { margin-inline: auto; }
.nav__item { position: relative; display: flex; align-items: stretch; }
.nav__link {
  display: flex; align-items: center; gap: 6px; padding: 0 clamp(7px, 0.95vw, 16px);
  font-size: var(--fs-sm); font-weight: var(--fw-m); white-space: nowrap;
  border-bottom: 2px solid transparent; transition: color var(--t-fast), border-color var(--t-fast);
}
.nav__link:hover, .nav__item.is-open > .nav__link { color: var(--c-primary); }
.nav__link[aria-current="page"], .nav__link[aria-current="true"] { border-bottom-color: var(--c-primary); }
.nav__chev { font-size: 14px; transition: rotate var(--t-fast); }
.nav__item.is-open .nav__chev, .nav__item:hover .nav__chev { rotate: 180deg; }

.nav__sub {
  position: absolute; z-index: var(--z-dropdown); top: 100%; left: 0; min-width: 280px;
  padding: var(--s-2); list-style: none; background: #fff;
  border-radius: 0 0 var(--r-lg) var(--r-lg); box-shadow: var(--sh-lift);
  opacity: 0; visibility: hidden; translate: 0 6px;
  transition: opacity var(--t-fast), translate var(--t-fast), visibility var(--t-fast);
}
.nav__item:hover > .nav__sub, .nav__item:focus-within > .nav__sub, .nav__item.is-open > .nav__sub {
  opacity: 1; visibility: visible; translate: 0 0;
}
.nav__item.is-dismissed > .nav__sub {
  opacity: 0; visibility: hidden; translate: 0 6px;
}
.nav__sub a {
  display: block; padding: 10px var(--s-4); border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: var(--fw-m);
}
.nav__sub a:hover { background: var(--c-primary-50); color: var(--c-primary); }

/* Компактная шапка при прокрутке */
.site-header.is-scrolled .topbar { height: var(--header-h-compact); box-shadow: 0 1px 0 var(--c-border); }
.site-header.is-scrolled .brand svg, .site-header.is-scrolled .brand img { height: 38px; }

/* --- Хлебные крошки и заголовок страницы -------------------------------- */

.page-head { padding-top: var(--s-8); padding-bottom: var(--s-6); }
.breadcrumbs { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--fs-sm); color: var(--c-text-muted); margin-bottom: var(--s-3); }
.breadcrumbs li + li::before { content: "/"; margin-right: 6px; color: #c4c8cf; }
.breadcrumbs a:hover { color: var(--c-primary); text-decoration: underline; }
.page-head__title { font-size: var(--fs-h1); }
.page-head__lead { margin-top: var(--s-3); font-size: var(--fs-lead); color: var(--c-text-muted); max-width: 70ch; }

/* --- Подвал -------------------------------------------------------------- */

.site-footer {
  margin-top: var(--s-16); color: #fff;
  background: var(--p-diag), var(--c-dark);
}
.footer__grid {
  display: grid; gap: var(--s-8) var(--s-5); padding-block: var(--s-10);
  grid-template-columns: minmax(200px, 1.35fr) repeat(6, minmax(0, 1fr)) minmax(190px, 1.45fr);
}
.footer__brand { display: grid; gap: var(--s-4); align-content: start; font-size: 0.8125rem; line-height: 1.45; color: rgba(255, 255, 255, 0.85); }
.footer__brand svg { height: 48px; width: auto; }
.footer__desc { white-space: pre-line; }
.socials { display: flex; gap: var(--s-4); }
.socials a {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: var(--r-full); color: #fff; font-size: 26px; transition: background-color var(--t-fast);
}
.socials a:hover { background: rgba(255, 255, 255, 0.16); }
.footer__title { font-size: var(--fs-sm); font-weight: var(--fw-b); margin-bottom: var(--s-3); letter-spacing: 0; }
/* h2 «Контакты» стоит на одной линии с заголовками-summary соседних колонок */
.footer__col--contacts .footer__title { padding-top: 3px; }
.footer__links { list-style: none; display: grid; gap: 0; font-size: 0.78125rem; line-height: 1.35; }
/* WCAG 2.2 (2.5.8): цель касания не меньше 24×24 px */
.footer__links a { display: inline-flex; align-items: center; min-height: 24px; color: rgba(255, 255, 255, 0.78); transition: color var(--t-fast); }
.footer__links a:hover { color: #fff; text-decoration: underline; }
.footer__contacts { list-style: none; display: grid; gap: var(--s-3); font-size: 0.8125rem; }
.footer__contacts li { display: flex; gap: var(--s-3); align-items: flex-start; }
.footer__contacts .icon { font-size: 20px; margin-top: 2px; color: rgba(255, 255, 255, 0.85); }
.footer__contacts a:hover { text-decoration: underline; }
.footer__bar {
  border-top: 1px solid rgba(255, 255, 255, 0.14); padding-block: var(--s-4);
  font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.7);
}
.footer__bar .container { display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }

/* --- Адаптив (базовый; точная мобильная вёрстка — в mobile.css) ---------- */

@media (max-width: 1279px) {
  .footer__grid { grid-template-columns: repeat(3, 1fr); }
  .footer__brand { grid-column: 1 / -1; }
  .search { width: 220px; }
  .nav__link { font-size: 0.8125rem; }
}
@media (max-width: 1199px) {
  .nav__link { font-size: 0.78125rem; padding: 0 6px; }
}
@media (max-width: 599px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}