/* Footer, legal row, quick-contact bar (WP-4), on the tokens of css/base.css. Class names use the k- prefix; breakpoints max-width 1199px, 1023px and 767px. */

/*
 * One footer for every width (A-desktop-2 and A-mobile-2 boards), reordered with grid areas:
 *   ≥1200     four columns 290/190/300/324: Услуги, Компания, Связаться с нами, Заказать компрессор
 *   768–1199  2×2: the two menus, then contacts and the form
 *   <768      one column: contacts, the two menus (closed <details>), the form; then the legal row
 * The order form (#zakaz) holds CF7 5560; its fields are styled with the forms (css/dialogs.css).
 */

.k-footer {
  padding: 64px 0 0;
  background: var(--k-footer);
  color: var(--k-white);
}

.k-footer__grid {
  display: grid;
  /* 290/190/300/324 at the full 1200 px; proportionally narrower between 1200 and 1231 px of window. */
  grid-template-columns: minmax(0, 290fr) minmax(0, 190fr) minmax(0, 300fr) minmax(0, 324fr);
  grid-template-areas: "services company contacts order";
  column-gap: 32px;
  align-items: start;
}

.k-footer__menu--services {
  grid-area: services;
}

.k-footer__menu--company {
  grid-area: company;
}

.k-footer__contacts {
  grid-area: contacts;
  min-width: 0;
}

.k-footer-form {
  grid-area: order;
  min-width: 0;
}

/* Column titles: plain text, never headings. The menu titles are the <summary> of their <details>. */
.k-footer .k-footer__title {
  margin: 0;
  font-size: 15px;
  line-height: 22px;
  font-weight: 700;
  color: var(--k-footer-text);
}

.k-footer summary.k-footer__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: default;
}

.k-footer summary.k-footer__title .k-chrome-icon {
  display: none;
  flex: none;
  color: var(--k-footer-text);
}

.k-footer__list {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
  line-height: 21px;
}

.k-footer__list a,
.k-footer__contacts a,
.k-legal a {
  color: var(--k-white);
  text-decoration: none;
}

.k-footer__list a:hover,
.k-footer__phone:hover,
.k-footer__mail:hover,
.k-footer__route:hover,
.k-legal a:hover {
  color: var(--k-white);
  text-decoration: underline;
}

.k-footer__list a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--k-footer-text);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}

/* «Связаться с нами» */

.k-footer__phone {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  height: 36px;
  font-size: 22px;
  font-weight: 700;
  white-space: nowrap;
}

.k-footer__contacts .k-footer__phone {
  vertical-align: top;
}

/* Touch widths: the phone's tap area reaches 44 px through ::after; the link's box and the layout stay as they are. */
@media (max-width: 1023px) {
  .k-footer__phone,
  .k-footer__route {
    position: relative;
  }

  .k-footer__phone::after,
  .k-footer__route::after {
    content: "";
    position: absolute;
    inset: -4px 0;
  }
}

.k-footer__actions {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  justify-items: start;
  gap: 8px;
}

.k-footer__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--k-footer-text);
  border-radius: var(--k-radius-control);
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
}

.k-footer__btn .k-chrome-icon {
  flex: none;
}

.k-footer__contacts .k-footer__btn:hover {
  background: var(--k-white);
  color: var(--k-ink);
  text-decoration: none;
}

.k-footer__callback {
  grid-column: 1 / -1;
  justify-self: start;
  margin-bottom: 4px;
  padding: 0 18px;
  border-color: var(--k-white);
  font-size: 15px;
}

.k-footer__mail {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  font-size: 15px;
  line-height: 22px;
  overflow-wrap: anywhere;
}

.k-footer__mail .k-chrome-icon,
.k-footer__address .k-chrome-icon {
  flex: none;
  color: var(--k-footer-text);
}

.k-footer__address {
  margin: 12px 0 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--k-white);
}

.k-footer__address .k-chrome-icon {
  margin-top: 2px;
}

.k-footer__route {
  margin: 8px 0 0 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  line-height: 22px;
  font-weight: 700;
}

/* «Заказать компрессор» */

.k-footer-form > .k-footer-form__title + * {
  margin-top: 18px;
}

/* Legal row: requisites and the copy button on the left, policy and sitemap on the right */

.k-legal {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--k-footer-rule);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 20px;
  min-height: 44px;
  font-size: 14px;
  line-height: 20px;
}

.k-legal__org {
  margin: 0;
  color: var(--k-footer-text);
}

.k-legal__part {
  white-space: nowrap;
}

.k-legal__copy-wrap {
  display: inline-flex;
  align-items: center;
}

.k-legal__copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--k-white);
  font-size: 14px;
  font-weight: 700;
}

.k-legal__copy:hover {
  text-decoration: underline;
}

.k-legal__status {
  color: var(--k-footer-text);
}

.k-legal__status:not(:empty) {
  margin-left: 12px;
}

.k-legal__link {
  display: inline-flex;
  align-items: center;
  height: 44px;
}

/* Policy and sitemap wrap together: pushed right on the first line, or right on a line of their own. */
.k-legal__links {
  display: inline-flex;
  flex-wrap: wrap;
  column-gap: 24px;
  margin-left: auto;
}

/* Shown only when the browser cannot copy: the requisites selected for the visitor to copy. */
.k-legal__text {
  flex: 0 0 100%;
  order: 10;
  margin: 8px 0 12px;
  padding: 8px 12px;
  border: 1px solid var(--k-footer-rule);
  border-radius: var(--k-radius-control);
  background: transparent;
  color: var(--k-white);
  font-size: 14px;
  line-height: 20px;
  resize: none;
}

/* Quick-contact bar: phones only, shown once the first screen is passed (js/footer.js) */

.k-quickbar {
  display: none;
}

.k-quickbar-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100vh;
  pointer-events: none;
}

/* 768–1199: the footer in 2×2 */

@media (max-width: 1199px) {
  .k-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "services company"
      "contacts order";
    gap: 40px 32px;
  }
}

/* Phones */

@media (max-width: 767px) {
  /* The quick-contact bar covers the bottom 64 px: the page ends above it, and the browser reveals the focused
     element above it too. The header and its panel take it back, as with the top padding in css/header.css. */
  html {
    scroll-padding-bottom: 64px;
  }

  .k-header * {
    scroll-margin-bottom: -64px;
  }

  .k-nav {
    scroll-padding-bottom: 64px;
  }

  body {
    padding-bottom: 64px;
  }

  .k-footer {
    padding: 24px 0 20px;
  }

  .k-footer__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "contacts"
      "services"
      "company"
      "order";
    gap: 0;
  }

  .k-footer .k-footer__contacts > .k-footer__title {
    font-size: 14px;
    line-height: 20px;
  }

  .k-footer__phone {
    margin-top: 4px;
    display: flex;
    width: fit-content;
    height: 28px;
  }

  .k-footer__phone::after {
    inset: -8px 0;
  }

  .k-footer__actions,
  .k-footer__actions--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-items: stretch;
  }

  .k-footer__actions--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .k-footer__actions--1 {
    grid-template-columns: minmax(0, 1fr);
  }

  .k-footer__btn {
    height: 48px;
    padding: 0 4px;
    border-width: 1.5px;
    border-color: var(--k-white);
    font-size: 15px;
  }

  .k-footer__btn .k-chrome-icon {
    width: 20px;
    height: 20px;
  }

  .k-footer__callback {
    justify-self: stretch;
    margin-bottom: 0;
    font-size: 16px;
  }

  .k-footer__mail {
    margin-top: 8px;
    height: 44px;
    gap: 8px;
  }

  .k-footer__address {
    margin-top: 4px;
    gap: 8px;
    line-height: 22px;
  }

  .k-footer__mail .k-chrome-icon,
  .k-footer__address .k-chrome-icon {
    width: 20px;
    height: 20px;
  }

  .k-footer__address .k-chrome-icon {
    margin-top: 1px;
  }

  /* 1 px: with the icon's own side bearing it makes the space before the phone boards' «→» (A-mobile-2,
     Kontakty-mobile); the wide boards keep the 6 px. */
  .k-footer__route {
    margin: 0 0 0 28px;
    height: 40px;
    gap: 1px;
    color: var(--k-header-text);
  }

  .k-footer__route::after {
    inset: -2px 0;
  }

  .k-footer__contacts .k-footer__route {
    color: var(--k-header-text);
  }

  .k-footer__menu {
    border-bottom: 1px solid var(--k-footer-rule);
  }

  .k-footer__menu--services {
    margin-top: 12px;
    border-top: 1px solid var(--k-footer-rule);
  }

  .k-footer summary.k-footer__title {
    height: 52px;
    font-size: 17px;
    color: var(--k-white);
    cursor: pointer;
  }

  .k-footer summary.k-footer__title .k-chrome-icon {
    display: block;
  }

  .k-footer__list {
    margin: 0;
    padding: 0 0 12px;
    gap: 0;
    line-height: 22px;
  }

  .k-footer__list a {
    display: block;
    padding: 8px 0;
  }

  .k-footer-form {
    margin-top: 16px;
  }

  .k-footer .k-footer-form__title {
    font-size: 17px;
    line-height: 22px;
    color: var(--k-white);
  }

  .k-footer-form > .k-footer-form__title + * {
    margin-top: 10px;
  }

  .k-legal {
    margin-top: 16px;
    padding-top: 14px;
    font-size: 15px;
  }

  .k-legal__org {
    flex: 0 0 100%;
    margin-bottom: 4px;
    font-size: 14px;
  }

  .k-legal__copy {
    gap: 8px;
    font-size: 15px;
  }

  .k-legal__copy .k-chrome-icon {
    width: 18px;
    height: 18px;
  }

  .k-legal__links {
    column-gap: 20px;
    margin-left: 0;
  }

  .k-legal a {
    text-decoration: underline;
  }

  .k-quickbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 19;
    display: flex;
    align-items: center;
    gap: 4px;
    height: 64px;
    padding: 0 8px;
    border-top: 1px solid var(--k-hairline);
    background: var(--k-white);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform .2s ease, visibility 0s linear .2s;
  }

  .k-quickbar.is-visible {
    transform: none;
    visibility: visible;
    transition: transform .2s ease, visibility 0s;
  }

  .k-quickbar a {
    text-decoration: none;
  }

  .k-quickbar__call {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 116px;
    height: 48px;
    border-radius: var(--k-radius-control);
    background: var(--k-blue);
    color: var(--k-white);
    font-size: 16px;
    font-weight: 700;
  }

  .k-quickbar__call:hover {
    background: var(--k-blue-hover);
    color: var(--k-white);
  }

  .k-quickbar__msg {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 56px;
    height: 56px;
    border-radius: var(--k-radius-control);
    color: var(--k-ink);
    font-size: 12px;
    line-height: 16px;
  }

  .k-quickbar__msg .k-chrome-icon {
    color: var(--k-blue);
  }

  .k-quickbar__msg:hover {
    background: var(--k-band);
    color: var(--k-ink);
  }

  .k-quickbar__order {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    border: 1.5px solid var(--k-ink);
    border-radius: var(--k-radius-control);
    color: var(--k-ink);
    font-size: 15px;
    font-weight: 700;
  }

  .k-quickbar__order:hover {
    background: var(--k-band);
    color: var(--k-ink);
  }
}

/* Narrow phones (320–374): the bar and the footer messengers shrink so every target keeps 44 px or more; a messenger
   tile stays 54 px, the width of «WhatsApp» at 11 px. */
@media (max-width: 374px) {
  .k-quickbar {
    gap: 2px;
    padding: 0 4px;
  }

  .k-quickbar__call {
    width: auto;
    padding: 0 10px;
    gap: 4px;
    font-size: 15px;
  }

  .k-quickbar__call .k-chrome-icon {
    width: 18px;
    height: 18px;
  }

  .k-quickbar__msg {
    width: 54px;
    font-size: 11px;
    line-height: 14px;
  }

  .k-footer__msg {
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
  }

  .k-footer__msg .k-chrome-icon {
    width: 18px;
    height: 18px;
  }
}

/* 320–359 with all three messengers: the call button drops its icon so the messenger labels fit and «Заявка» keeps
   at least 44 px. */
@media (max-width: 359px) {
  .k-quickbar__call {
    padding: 0 8px;
    font-size: 14px;
  }

  /* Below 326 px «…Пушкино, пр-т» no longer fits the first line at 15 px and the line broke inside «пр-т». */
  .k-footer__address {
    font-size: 14px;
  }

  .k-quickbar__call .k-chrome-icon {
    display: none;
  }
}