/* Шапка и подвал из Pages 2 (css/tokens, base, layout, components).
   Правила ограничены .site-header / .site-footer, чтобы не задевать
   стили главной (Bootstrap 3 + тема abcdesign) и наоборот. */
.site-header, .site-footer {
  --color-brand: #cc3358;
  --color-brand-dark: #a42447;
  --color-ink: #151515;
  --color-text: #555;
  --color-line: #e5e7eb;
  --color-sky: #e8f6ff;
  --container: 1146px;
  --header-h: 95.232px;
  font: 16px/1.5 "Open Sans", sans-serif;
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}
/* base.css — сброс только внутри шапки и подвала */
.site-header *, .site-header *::before, .site-header *::after,
.site-footer *, .site-footer *::before, .site-footer *::after { box-sizing: border-box; border-width: 0; }
.site-header :is(p, ul, ol), .site-footer :is(p, ul, ol) { margin: 0; }
.site-header :is(ul, ol), .site-footer :is(ul, ol) { padding: 0; list-style: none; }
.site-header a, .site-footer a { color: inherit; text-decoration: none; transition: none; }
.site-header :is(img, svg), .site-footer :is(img, svg) { display: block; }
.site-header button { font: inherit; color: inherit; cursor: pointer; border: 0; padding: 0; background: transparent; }
.site-header [hidden] { display: none !important; }
.site-header :focus-visible, .site-footer :focus-visible { outline: 2px solid var(--color-brand); outline-offset: 4px; }
/* Bootstrap: свой .container и clearfix-псевдоэлементы у .container и .nav */
.site-header .container, .site-footer .container { width: calc(100% - 48px); max-width: var(--container); margin-inline: auto; padding: 0; }
.site-header .container::before, .site-header .container::after,
.site-footer .container::before, .site-footer .container::after,
.site-header .nav::before, .site-header .nav::after { content: none; display: none; }

/* layout.css */
.site-header { position: relative; z-index: 10; height: var(--header-h); background: #fff; }
.site-header .site-header__bar { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.site-footer { padding-block: 64px 32px; background: var(--color-sky); }
.site-footer .site-footer__grid { display: grid; grid-template-columns: 1.1fr 1.2fr 1.4fr 1.3fr; gap: 32px; }
.site-footer .site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 24px; border-top: 1px solid rgb(21 21 21 / 12%); font-size: 13px; line-height: 20px; }

/* components.css — шапка */
.site-header .logo, .site-header .logo img { display: block; width: 76px; height: 76px; flex: none; }
.site-header .nav { display: flex; align-items: center; gap: 30px; margin: 0; padding: 0; }
.site-header .nav__link { display: block; padding-block: 16px; color: var(--color-ink); font-size: 17px; line-height: 24px; font-weight: 600; text-transform: uppercase; white-space: nowrap; }
.site-header .nav__link:hover, .site-header .nav__link--active { color: var(--color-brand); }
.site-header .nav__item { position: relative; }
.site-header .nav__menu { position: absolute; top: 100%; left: -16px; display: grid; width: 360px; max-width: calc(100vw - 48px); padding: 8px; background: #fff; border: 1px solid var(--color-line); border-radius: 16px; box-shadow: 0 16px 40px rgb(21 21 21 / 10%); }
.site-header .nav__menu a { padding: 8px 16px; font-size: 15px; line-height: 24px; border-radius: 8px; }
.site-header .nav__menu a:hover, .site-header .nav__menu a[aria-current="page"] { background: #fdf0f3; color: var(--color-brand); }
.site-header .phones { display: flex; align-items: center; gap: 14px; color: var(--color-ink); }
.site-header .phones img { flex: 0 0 25px; }
.site-header .phones > div { display: flex; flex-direction: column; gap: 11px; }
.site-header .phones a { font-size: 20px; line-height: 16px; font-weight: 700; letter-spacing: .8px; white-space: nowrap; }
.site-header .phones a:hover { color: var(--color-brand); }
.site-header .burger { display: none; width: 48px; height: 48px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; border: 1px solid var(--color-line); border-radius: 50%; }
.site-header .burger span { width: 20px; height: 2px; background: var(--color-ink); }

/* components.css — подвал */
.site-footer .footer-title { margin-bottom: 16px; font-size: 16px; line-height: 24px; font-weight: 700; color: var(--color-ink); }
.site-footer .footer-phones { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; font-size: 20px; line-height: 32px; color: var(--color-ink); }
.site-footer .footer-list { display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 24px; color: #1e2939; }
.site-footer .footer-list a:hover, .site-footer .footer-address a:hover { color: var(--color-brand); }
.site-footer .footer-address { display: flex; flex-direction: column; gap: 8px; margin: 0; font-size: 15px; line-height: 24px; font-style: normal; }
.site-footer .socials { display: flex; gap: 8px; }
.site-footer .socials__link { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; background: var(--color-brand); border-radius: 50%; }
.site-footer .socials__link svg { width: 20px; height: 20px; fill: #fff; }
.site-footer .link-arrow { display: inline-flex; align-items: center; gap: 8px; color: var(--color-brand); font-size: 15px; line-height: 24px; }
.site-footer .link-arrow svg { width: 16px; height: 16px; flex: 0 0 16px; }
.site-footer .u-text--brand { color: var(--color-brand); }

@media (max-width: 1199px) {
  .site-header { --header-h: 80px; }
  .site-header .logo, .site-header .logo img { width: 64px; height: 64px; }
  .site-header .nav, .site-header .site-header__phones { display: none; }
  .site-header .burger { display: flex; }
  .site-header.is-open .nav { position: absolute; top: 100%; left: 0; right: 0; display: flex; align-items: stretch; flex-direction: column; gap: 0; max-height: calc(100dvh - var(--header-h)); overflow-y: auto; padding: 16px 24px 24px; background: #fff; box-shadow: 0 16px 24px rgb(21 21 21 / 8%); }
  .site-header .nav__link { text-align: left; font-size: 15px; }
  .site-header .nav__menu { position: static; width: auto; max-width: none; box-shadow: none; border: 0; padding: 0 0 8px 8px; }
  .site-footer .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .site-header { --header-h: 72px; }
  .site-header .logo, .site-header .logo img { width: 56px; height: 56px; }
  .site-footer { padding-block: 48px 32px; }
  .site-footer .site-footer__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Переключатель языков — как в проекте «кейсы» (header__language), то же в Pages 2 */
.site-header .header__language { display: flex; gap: 8px; font-size: 15px; font-weight: 600; color: #262a2d; white-space: nowrap; }
.site-header .header__language span, .site-header .header__language a:not([aria-current]) { color: #636a70; }
@media (max-width: 1199px) { .site-header .header__language { margin-left: auto; margin-right: 16px; } }
@media (max-width: 760px) { .site-header .header__language { display: none; } }